:root {
--vro-bg-primary: #ffffff;
--vro-bg-secondary: #f9fafb;
--vro-bg-header: #f7f7f7;
--vro-border-color: #ddd;
--vro-radius: 10px;
--vro-padding-desktop: 16px 24px;
}
.vro-flight-schedule-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vro-flight-schedule-table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
border-spacing: 0;
background-color: var(--vro-bg-primary);
border-radius: var(--vro-radius);
border: 1px solid var(--vro-border-color);
overflow: hidden;
}
.vro-flight-schedule-table thead th {
padding: var(--vro-padding-desktop);
text-align: left;
background-color: var(--vro-bg-header);
border-bottom: 2px solid var(--vro-border-color);
font-weight: 600;
color: #333;
}
.vro-flight-schedule-table tbody tr {
border-bottom: 1px solid var(--vro-border-color);
transition: background-color 0.2s ease;
}
.vro-flight-schedule-table tbody tr:last-of-type {
border-bottom: none;
}
.vro-flight-schedule-table tbody tr:hover {
background-color: var(--vro-bg-secondary);
}
.vro-flight-schedule-table td {
padding: var(--vro-padding-desktop);
vertical-align: middle;
white-space: nowrap;
}
.vro-flight-schedule-table th:first-child,
.vro-flight-schedule-table td:first-child {
width: 1%;
white-space: nowrap;
}  @media print {
.vro-flight-schedule-wrapper {
overflow-x: visible;
}
.vro-flight-schedule-table {
border: 1px solid #000;
width: 100%;
min-width: 100%;
}
}:root {
--vro-bg-primary: #ffffff;
--vro-bg-secondary: #f9fafb;
--vro-bg-header: #f7f7f7;
--vro-border-color: #ddd;
--vro-radius: 10px;
--vro-padding-desktop: 16px 24px;
}
.vro-hotel-wisata-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.vro-hotel-table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
border-spacing: 0;
background-color: var(--vro-bg-primary);
border-radius: var(--vro-radius);
border: 1px solid var(--vro-border-color);
overflow: hidden;
}
.vro-hotel-table thead th {
padding: var(--vro-padding-desktop);
text-align: left;
background-color: var(--vro-bg-header);
border-bottom: 2px solid var(--vro-border-color);
}
.vro-hotel-table tbody tr {
border-bottom: 1px solid var(--vro-border-color);
}
.vro-hotel-table tbody tr:last-of-type {
border-bottom: none;
}
.vro-hotel-table td {
padding: var(--vro-padding-desktop);
vertical-align: middle;
white-space: nowrap;
}
.vro-hotel-table th:first-child,
.vro-hotel-table td:first-child {
width: 1%;
text-align: center;
}  
@media print {
.vro-hotel-wisata-wrapper {
overflow-x: visible;
break-inside: avoid;
}
.vro-hotel-table {
border: 1px solid var(--vro-border-color);
}
.vro-hotel-table th {
background-color: var(--vro-bg-header) !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
font-size: 0.95em;
margin-block-end: 0px !important;
width: 100%;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
background-color: var(--vro-bg-secondary);
}.vro-date-price-product {
background: none;
border-radius: 0;
box-shadow: none;
padding: 0;
max-width: none;
}
.vro-date-price-product h3 {
font-size: 17px;
margin: 0 0 12px 0;
}
.vro-date-price-product .vro-section-title {
margin-top: 24px;
}
.vro-date-price-product ul {
list-style: none;
padding: 0;
margin: 0;
} .vro-date-item {
display: flex;
align-items: center;
justify-content: space-between;
background: #F9FAFB; border-radius: 10px;
padding: 8px 16px;
margin-bottom: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.vro-date-item .vro-date-info {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 1em;
}
.vro-date-item .vro-date-info .fa-calendar {
font-size: 1em;
color: #3F4752; }
.vro-date-item.selected {
border-color: #111827; background: #F9FAFB; }
.vro-date-item:hover:not(.selected):not(:has(.full)) {
border-color: #DDDDDD; } .vro-seat-status {
font-size: 0.9em;
font-weight: 600;
border-radius: 8px;
padding: 4px 10px;
}
.vro-seat-status.full {
color: #F6404F; }
.vro-seat-status.limited {
color: #1AA3FF; background: #e9f6ff; } .vro-date-item:has(.vro-seat-status.full) {
cursor: not-allowed;
opacity: 0.7;
background: #F9FAFB; } .vro-room-list {
margin-top: 12px;
}
.vro-room-item {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
border: 1px solid #DDDDDD; background: #FFFFFF; margin-bottom: 8px;
padding: 6px 16px;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
}
.vro-room-item.selected {
border-color: #111827; background: #F9FAFB; }
.vro-room-item .vro-room-title {
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.vro-room-item .promo-label {
background: #F6404F; color: #FFFFFF; font-size: 0.6em;
font-weight: 600;
padding: 2px 6px; border-radius: 100px; line-height: 0.8rem; }
.vro-room-item .desc {
font-size: 0.9em;
color: #9CA3AF; }
.vro-room-item .vro-room-price {
text-align: right;
font-weight: 600;
line-height: 1.5; }
.vro-room-item .vro-room-price del {
display: block; font-size: 0.85em;
font-weight: 400;
color: #9CA3AF; }
.vro-room-item .vro-no-price {
color: #F6404F; font-weight: 500;
font-size: 0.9em;
}
.vro-notice {
color: #9CA3AF; font-style: italic;
padding: 12px 4px;
} .vro-pax-control {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px 0;
font-size: 0.9em;
}
.vro-pax-control > span {
font-weight: 400;
color:#3F4752
}
.vro-pax-control > div {
display: flex;
align-items: center;
gap: 16px;
}
.vro-pax-btn {
width: 30px;
height: 30px;
border-radius: 8px !important;
border: 1px solid #DDDDDD !important; background: linear-gradient(135deg, #F9FAFB 100%, #F9FAFB 100%) !important;
color: #3F4752 !important; font-size: 1.5em;
line-height: 1;
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s;
}
.vro-pax-btn:hover {
background-color: #F9FAFB; border-color: #9CA3AF; }
.vro-pax-value {
min-width: 20px;
text-align: center;
font-weight: 600;
font-size: 1.2em;
} .vro-summary {
font-size: 1.05em;
}
.vro-summary .row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.vro-summary .label {
font-weight: 400;
color:#9CA3AF;
font-size: 0.9em;
}
.vro-summary .price,
.vro-summary .discount {
font-size: 0.9em;
font-weight: 600;
color: #111827; }
.vro-summary .discount {
color: #F6404F; }
.vro-summary .total-row .label {
font-size: 1em;
font-weight: 500;
color:#3F4752;
}
.vro-summary .total {
color: #1AA3FF; font-weight: 700;
font-size: 1.2em;
}
.vro-summary .subtotal-row .label {
font-size: 0.9em;
}
.vro-summary .subtotal {
font-size: 0.9em;
font-weight: 600;
color: #111827;
}
.vro-summary hr {
border: none;
border-top: 1px solid #DDDDDD; margin: 12px 0;
}.vro-gallery-product {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 15px;
box-shadow: none;
} .vro-gallery-slides {
display: flex;
transition: transform 0.5s ease;
width: 100%;
position: relative;
} .vro-gallery-slide {
min-width: 33.3333%; width: 33.3333%;
max-width: 33.3333%;
position: relative;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
} @media (max-width: 1024px) {
.vro-gallery-slide {
min-width: 50%;
width: 50%;
max-width: 50%;
}
} @media (max-width: 768px) {
.vro-gallery-slide {
min-width: 100%;
width: 100%;
max-width: 100%;
}
} .vro-gallery-slide img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box;
} .vro-gallery-slide img.vro-lazy {
background: #f0f0f0;
min-height: 200px;
} .vro-gallery-video {
position: relative;
width: 100%;
padding-bottom: 125%; height: 0;
overflow: hidden;
cursor: pointer;
}
.vro-gallery-video img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.vro-gallery-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
} .vro-video-play {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
background: none !important;
border: none !important;
cursor: pointer !important;
opacity: 0.8 !important;
transition: opacity 0.2s ease !important;
padding: 0 !important;
margin: 0 !important;
z-index: 2 !important;
}
.vro-video-play:hover {
opacity: 1 !important;
}
.vro-video-play svg {
width: 68px !important;
height: 48px !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
} .vro-gallery-controls {
position: absolute !important;
bottom: 16px !important;
right: 16px !important;
z-index: 10 !important;
pointer-events: none !important;
} .vro-gallery-counter {
display: flex !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.7) !important;
border-radius: 20px !important;
padding: 4px 8px !important;
pointer-events: auto !important;
gap: 3px !important;
}
.vro-counter-prev,
.vro-counter-next {
background: none !important;
border: none !important;
color: #3F4752 !important;
cursor: pointer !important;
font-size: 15px !important;
padding: 4px 6px !important;
border-radius: 50% !important;
transition: background 0.2s ease !important;
line-height: 1 !important;
min-width: 24px !important;
height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vro-counter-prev:hover,
.vro-counter-next:hover {
background: white !important;
}
.vro-counter-text {
color: #3F4752 !important;
font-size: 15px !important;
font-weight: 500 !important;
min-width: 30px !important;
text-align: center !important;
user-select: none !important;
} @media (max-width: 768px) {
.vro-gallery-controls {
bottom: 12px !important;
right: 12px !important;
}
.vro-gallery-counter {
padding: 3px 6px !important;
gap: 3px !important;
}
.vro-counter-prev,
.vro-counter-next {
min-width: 20px !important;
height: 20px !important;
font-size: 13px !important;
}
.vro-counter-text {
font-size: 13px !important;
min-width: 25px !important;
}
}
@media (max-width: 480px) {
.vro-gallery-controls {
bottom: 10px !important;
right: 10px !important;
}
}.vro-product-list-container {
margin-bottom: 0; } .vro-product-list-container:has(.vro-product-include) {
margin-bottom: 20px;
}
.vro-product-list {
list-style: none;
padding: 0;
margin: 0;
background: #f9fafb;
border-left: 2px solid #1aa3ff;
border-radius: 10px;
overflow: hidden;
padding-bottom: 10px;
}
.vro-product-exclude {
border-left-color: #f6404f;
}
.vro-product-list li {
position: relative;
padding: 8px 18px 8px 30px;
margin: 0px 0px 0px 18px;
} .vro-product-list .vro-list-header {
background-color: #f9fafb;
padding: 15px 0px;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.vro-product-title {
margin: 0;
padding: 0;
} .vro-list-icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: white;
background-color: #1aa3ff;
} .vro-product-include .vro-list-icon {
background-color: #1aa3ff;
} .vro-product-exclude .vro-list-icon {
background-color: #f6404f;
} .vro-list-icon::before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
display: inline-block;
line-height: 1;
}
.vro-product-include .vro-list-icon::before {
content: "\f00c"; }
.vro-product-exclude .vro-list-icon::before {
content: "\f00d"; } @media (max-width: 768px) {
.vro-product-list li {
padding: 8px 15px 8px 25px;
margin: 0px 0px 0px 15px;
}
.vro-list-icon {
width: 16px;
height: 16px;
font-size: 8px;
}
}