/**
 * Custom Styles for VRO Date Price Product Module
 *
 * @product Hello_Elementor_Child
 * @version 1.1.0
 */

/* ==========================================================================
   1. Main Container & General Styles
   ========================================================================== */
   /* Container is now transparent and full-width to be controlled by Elementor */
   .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;
}

/* ==========================================================================
   2. Date Selection
   ========================================================================== */
.vro-date-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F9FAFB; /* BG Shape */
    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; /* Text */
}

.vro-date-item.selected {
    border-color: #111827; /* Accent */
    background: #F9FAFB; /* BG Shape */
}

.vro-date-item:hover:not(.selected):not(:has(.full)) {
    border-color: #DDDDDD; /* Border */
}

/* Status ketersediaan kursi */
.vro-seat-status {
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 8px;
    padding: 4px 10px;
}

.vro-seat-status.full {
    color: #F6404F; /* red */
}

.vro-seat-status.limited {
    color: #1AA3FF; /* blue */
    background: #e9f6ff; /* Custom light blue */
}

/* Style untuk tanggal yang penuh */
.vro-date-item:has(.vro-seat-status.full) {
    cursor: not-allowed;
    opacity: 0.7;
    background: #F9FAFB; /* BG Shape */
}

/* ==========================================================================
   3. Room Selection
   ========================================================================== */
.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; /* Border */
    background: #FFFFFF; /* White */
    margin-bottom: 8px;
    padding: 6px 16px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.vro-room-item.selected {
    border-color: #111827; /* Accent */
    background: #F9FAFB; /* BG Shape */
}

.vro-room-item .vro-room-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vro-room-item .promo-label {
    background: #F6404F; /* Red */
    color: #FFFFFF; /* White */
    font-size: 0.6em;
    font-weight: 600;
    padding: 2px 6px; /* Adjusted for a thinner look */
    border-radius: 100px; /* Pill shape */
    line-height: 0.8rem; /* Make it slimmer */
}

.vro-room-item .desc {
    font-size: 0.9em;
    color: #9CA3AF; /* Soft */
}

.vro-room-item .vro-room-price {
    text-align: right;
    font-weight: 600;
    line-height: 1.5; /* Adjust line height for two lines */
}

.vro-room-item .vro-room-price del {
    display: block; /* Puts it on a new line */
    font-size: 0.85em;
    font-weight: 400;
    color: #9CA3AF; /* Soft */
}

.vro-room-item .vro-no-price {
    color: #F6404F; /* Red */
    font-weight: 500;
    font-size: 0.9em;
}

.vro-notice {
    color: #9CA3AF; /* Soft */
    font-style: italic;
    padding: 12px 4px;
}

/* ==========================================================================
   4. Pax (Jumlah Peserta) Control
   ========================================================================== */
.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; /* Border */
    background: linear-gradient(135deg, #F9FAFB 100%, #F9FAFB 100%) !important;
    color: #3F4752 !important; /* Text */
    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; /* BG Shape */
    border-color: #9CA3AF; /* Soft */
}

.vro-pax-value {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 1.2em;
}

/* ==========================================================================
   5. Summary Box
   ========================================================================== */
.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; /* Primary */
}

.vro-summary .discount {
    color: #F6404F; /* Red */
}

.vro-summary .total-row .label {
    font-size: 1em;
    font-weight: 500;
    color:#3F4752;
}

.vro-summary .total {
    color: #1AA3FF; /* Accent */
    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; /* Border */
    margin: 12px 0;
}