/*
 * TBWC - Tent Booking for WooCommerce
 * Premium Dark Booking UI
 * Primary Color: #406a78
 * =========================================================
 */

/* =========================================================
   ROOT
   ========================================================= */

.tbwc-booking-form {
    --tbwc-primary: #406a78;
    --tbwc-primary-light: #527f8e;
    --tbwc-primary-dark: #2e4f5b;

    --tbwc-bg: #10181d;
    --tbwc-bg-2: #152229;
    --tbwc-card: rgba(25, 38, 45, 0.92);
    --tbwc-card-light: rgba(42, 59, 67, 0.72);

    --tbwc-border: rgba(255, 255, 255, 0.10);
    --tbwc-border-hover: rgba(82, 127, 142, 0.75);

    --tbwc-text: #f3f7f8;
    --tbwc-text-muted: #aebdc2;
    --tbwc-text-soft: #81949b;

    --tbwc-success: #55c98a;
    --tbwc-danger: #ef7070;
    --tbwc-warning: #e8bd68;

    width: 100%;
    max-width: 920px;

    margin: 35px auto;
    padding: 34px;

    box-sizing: border-box;

    position: relative;
    overflow: hidden;

    direction: rtl;
    text-align: right;

    color: var(--tbwc-text);

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(64, 106, 120, 0.30),
            transparent 35%
        ),
        radial-gradient(
            circle at 95% 100%,
            rgba(64, 106, 120, 0.20),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #10181d 0%,
            #16232a 50%,
            #10181d 100%
        );

    border: 1px solid rgba(82, 127, 142, 0.30);
    border-radius: 24px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 10px 30px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/*
 * Decorative glow
 */

.tbwc-booking-form::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    left: -80px;

    border-radius: 50%;

    background: rgba(64, 106, 120, 0.22);

    filter: blur(30px);

    pointer-events: none;
}

.tbwc-booking-form::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    bottom: -110px;
    right: -70px;

    border-radius: 50%;

    background: rgba(64, 106, 120, 0.16);

    filter: blur(30px);

    pointer-events: none;
}


/* =========================================================
   FIELDS
   ========================================================= */

.tbwc-field {
    margin-bottom: 22px;

    position: relative;
    z-index: 1;
}


/* =========================================================
   LABELS + ICONS
   ========================================================= */

.tbwc-field label {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 9px;

    color: #eaf1f3;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: 0.1px;
}


/*
 * Tent
 */

.tbwc-field label[for="tbwc_tent_id"]::before {
    content: "⛺";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(64, 106, 120, 0.45),
            rgba(64, 106, 120, 0.15)
        );

    border: 1px solid rgba(82, 127, 142, 0.35);

    font-size: 15px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.20);
}


/*
 * Date
 */

.tbwc-field label[for="tbwc_date"]::before {
    content: "📅";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(64, 106, 120, 0.45),
            rgba(64, 106, 120, 0.15)
        );

    border: 1px solid rgba(82, 127, 142, 0.35);

    font-size: 14px;
}


/*
 * Duration
 */

.tbwc-field label[for="tbwc_hours"]::before {
    content: "⏱";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(64, 106, 120, 0.45),
            rgba(64, 106, 120, 0.15)
        );

    border: 1px solid rgba(82, 127, 142, 0.35);

    font-size: 16px;
}


/*
 * Start time
 */

.tbwc-field label[for="tbwc_start"]::before {
    content: "🕐";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(64, 106, 120, 0.45),
            rgba(64, 106, 120, 0.15)
        );

    border: 1px solid rgba(82, 127, 142, 0.35);

    font-size: 15px;
}


/*
 * Additional services
 */

.tbwc-booking-form > .tbwc-field:nth-of-type(4) > label::before {
    content: "✨";

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            rgba(64, 106, 120, 0.45),
            rgba(64, 106, 120, 0.15)
        );

    border: 1px solid rgba(82, 127, 142, 0.35);

    font-size: 14px;
}


/* =========================================================
   GRID
   ========================================================= */

.tbwc-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 4px;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.tbwc-field input,
.tbwc-field select {
    display: block;

    width: 100%;
    min-height: 52px;

    padding: 12px 15px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 47, 55, 0.96),
            rgba(20, 32, 38, 0.96)
        );

    color: #f4f8f9;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.4;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease,
        transform 0.2s ease;
}


/*
 * Select arrow
 */

.tbwc-field select {
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    padding-left: 42px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #88a8b2 50%
        ),
        linear-gradient(
            135deg,
            #88a8b2 50%,
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(31, 47, 55, 0.96),
            rgba(20, 32, 38, 0.96)
        );

    background-position:
        calc(100% - 19px) 22px,
        calc(100% - 13px) 22px,
        0 0;

    background-size:
        6px 6px,
        6px 6px,
        100% 100%;

    background-repeat: no-repeat;
}


/*
 * RTL select arrow correction
 */

[dir="rtl"] .tbwc-field select,
.tbwc-booking-form select {
    background-position:
        19px 22px,
        13px 22px,
        0 0;
}


/* Hover */

.tbwc-field input:hover,
.tbwc-field select:hover {
    border-color: rgba(82, 127, 142, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(36, 54, 63, 0.98),
            rgba(22, 35, 42, 0.98)
        );
}


/* Focus */

.tbwc-field input:focus,
.tbwc-field select:focus {
    border-color: var(--tbwc-primary-light);

    box-shadow:
        0 0 0 3px rgba(64, 106, 120, 0.18),
        0 8px 25px rgba(0, 0, 0, 0.20);

    transform: translateY(-1px);
}


/* Disabled */

.tbwc-field input:disabled,
.tbwc-field select:disabled {
    opacity: 0.48;

    cursor: not-allowed;

    background:
        rgba(17, 27, 32, 0.75);
}


/* Date icon browser */

.tbwc-field input[type="date"] {
    color-scheme: dark;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.tbwc-field input::placeholder {
    color: #71858c;
}


/* =========================================================
   HELPER TEXT
   ========================================================= */

.tbwc-field-message {
    display: block;

    margin-top: 8px;

    padding-right: 3px;

    color: var(--tbwc-text-soft);

    font-size: 12px;
    font-weight: 500;

    line-height: 1.5;
}


/* =========================================================
   SERVICES
   ========================================================= */

.tbwc-services {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 10px;
}


/*
 * Service Card
 */

.tbwc-service {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 66px;

    padding: 13px 15px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 48, 56, 0.90),
            rgba(21, 34, 40, 0.90)
        );

    cursor: pointer;

    position: relative;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.tbwc-service::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(64, 106, 120, 0.13),
            transparent 55%
        );

    opacity: 0;

    transition: opacity 0.25s ease;
}


.tbwc-service:hover {
    transform: translateY(-2px);

    border-color: rgba(82, 127, 142, 0.70);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.22);
}


.tbwc-service:hover::before {
    opacity: 1;
}


/*
 * Service checkbox
 */

.tbwc-service input {
    width: 20px;
    height: 20px;

    min-height: 20px;

    margin: 0;

    flex: 0 0 20px;

    accent-color: var(--tbwc-primary);

    cursor: pointer;
}


/*
 * Service name
 */

.tbwc-service span {
    flex: 1;

    position: relative;

    color: #eef4f5;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.5;
}


/*
 * Service price
 */

.tbwc-service small {
    position: relative;

    margin-right: auto;

    padding: 5px 9px;

    border-radius: 8px;

    color: #c7d8dd;

    background: rgba(64, 106, 120, 0.18);

    border: 1px solid rgba(82, 127, 142, 0.20);

    white-space: nowrap;

    font-size: 12px;

    line-height: 1.3;
}


/* =========================================================
   EMPTY SERVICES
   ========================================================= */

.tbwc-services-empty {
    padding: 20px;

    border: 1px dashed rgba(255, 255, 255, 0.15);

    border-radius: 14px;

    background:
        rgba(20, 32, 38, 0.65);

    color: #82969d;

    text-align: center;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   STATUS
   ========================================================= */

.tbwc-status {
    min-height: 24px;

    margin: 20px 0 12px;

    padding: 10px 14px;

    border-radius: 11px;

    color: #bcd0d5;

    background:
        rgba(64, 106, 120, 0.10);

    border: 1px solid rgba(64, 106, 120, 0.15);

    font-size: 13px;
    font-weight: 650;

    line-height: 1.5;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


/* =========================================================
   PRICE SUMMARY
   ========================================================= */

.tbwc-price-summary {
    position: relative;

    margin: 24px 0 20px;

    padding: 19px 20px;

    border: 1px solid rgba(82, 127, 142, 0.24);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(35, 53, 61, 0.88),
            rgba(20, 32, 38, 0.88)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 30px rgba(0, 0, 0, 0.20);
}


/*
 * Price icon
 */

.tbwc-price-summary::before {
    content: "💳";

    position: absolute;

    top: 18px;
    right: 20px;

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(64, 106, 120, 0.22);

    border: 1px solid rgba(82, 127, 142, 0.25);

    font-size: 16px;
}
 .tbwc-total-row::before {
    content: "💳";

    position: absolute;

    top: 68px;
    right: 20px;

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(64, 106, 120, 0.22);

    border: 1px solid rgba(82, 127, 142, 0.25);

    font-size: 16px;
}
.tbwc-total-row span{padding-right: 50px;}
/* =========================================================
   PRICE ROW
   ========================================================= */

.tbwc-total-row {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 11px 0;

    color: #b9c8cc;

    font-size: 14px;

    line-height: 1.5;
}


.tbwc-total-row strong {
    color: #eef5f6;

    white-space: nowrap;

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   GRAND TOTAL
   ========================================================= */

.tbwc-grand-total {
    margin-top: 10px;

    padding-top: 17px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);

    color: #ffffff;

    font-size: 18px;
    font-weight: 750;
}


.tbwc-grand-total strong {
    color: #ffffff;

    font-size: 23px;
    font-weight: 800;

    text-shadow:
        0 0 18px rgba(82, 127, 142, 0.30);
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.tbwc-booking-form button[type="submit"] {
    width: 100%;

    min-height: 58px;

    margin-top: 8px;

    padding: 14px 24px;

    border: 0;

    border-radius: 15px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #527f8e 0%,
            #406a78 45%,
            #2e5260 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(64, 106, 120, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    font-size: 16px;
    font-weight: 750;

    letter-spacing: 0.1px;

    cursor: pointer;

    position: relative;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}


/*
 * Button shine
 */

.tbwc-booking-form button[type="submit"]::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transform: skewX(-20deg);

    transition: left 0.65s ease;
}


.tbwc-booking-form button[type="submit"]:not(:disabled):hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 38px rgba(64, 106, 120, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}


.tbwc-booking-form button[type="submit"]:not(:disabled):hover::before {
    left: 140%;
}


.tbwc-booking-form button[type="submit"]:not(:disabled):active {
    transform: translateY(0);
}


.tbwc-booking-form button[type="submit"]:disabled {
    opacity: 0.40;

    cursor: not-allowed;

    box-shadow: none;
}


/* =========================================================
   NOTICE
   ========================================================= */

.tbwc-notice {
    width: 100%;
    max-width: 920px;

    margin: 25px auto;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid rgba(82, 127, 142, 0.25);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #17272e,
            #111d22
        );

    color: #dbe6e9;

    line-height: 1.7;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   WOOCOMMERCE PRICE
   ========================================================= */

.tbwc-price-summary .woocommerce-Price-amount {
    color: inherit;

    white-space: nowrap;
}


/* =========================================================
   RTL
   ========================================================= */

.tbwc-booking-form,
.tbwc-booking-form input,
.tbwc-booking-form select,
.tbwc-booking-form button {
    direction: rtl;
}


/* =========================================================
   SELECTION
   ========================================================= */

.tbwc-booking-form ::selection {
    background: #527f8e;

    color: #ffffff;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.tbwc-booking-form select::-webkit-scrollbar {
    width: 8px;
}

.tbwc-booking-form select::-webkit-scrollbar-track {
    background: #17252b;
}

.tbwc-booking-form select::-webkit-scrollbar-thumb {
    background: #406a78;

    border-radius: 10px;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 800px) {

    .tbwc-booking-form {
        max-width: 100%;

        padding: 26px 22px;

        border-radius: 20px;
    }

    .tbwc-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .tbwc-services {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .tbwc-booking-form {
        margin: 15px 0;

        padding: 20px 16px;

        border-radius: 18px;

        box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.35);
    }

    .tbwc-grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .tbwc-field {
        margin-bottom: 18px;
    }

    .tbwc-field input,
    .tbwc-field select {
        min-height: 50px;

        font-size: 14px;
    }

    .tbwc-service {
        min-height: 62px;

        padding: 11px 12px;
    }

    .tbwc-service small {
        white-space: normal;

        text-align: left;
    }

    .tbwc-price-summary {
        padding: 16px;
    }

    .tbwc-price-summary::before {
        display: none;
    }

    .tbwc-total-row {
        align-items: flex-start;

        font-size: 13px;
    }

    .tbwc-grand-total {
        font-size: 17px;
    }

    .tbwc-grand-total strong {
        font-size: 21px;
    }

    .tbwc-booking-form button[type="submit"] {
        min-height: 55px;

        font-size: 15px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 380px) {

    .tbwc-booking-form {
        padding: 16px 12px;
    }

    .tbwc-field label {
        font-size: 13px;
    }

    .tbwc-field label::before {
        width: 27px !important;
        height: 27px !important;

        flex-basis: 27px !important;

        font-size: 13px !important;
    }

    .tbwc-field input,
    .tbwc-field select {
        min-height: 47px;

        padding: 9px 11px;

        font-size: 13px;
    }

    .tbwc-total-row {
        font-size: 12px;
    }

    .tbwc-grand-total {
        font-size: 16px;
    }

    .tbwc-grand-total strong {
        font-size: 19px;
    }
}


/* =========================================================
   DARK WOOCOMMERCE COMPATIBILITY
   ========================================================= */

.tbwc-booking-form .button,
.tbwc-booking-form button {
    font-family: inherit;
}


/* Prevent theme styles from ruining the booking form */

.tbwc-booking-form button:hover,
.tbwc-booking-form button:focus {
    color: #ffffff;
}


/* =========================================================
   AVAILABILITY STATES
   ========================================================= */

.tbwc-status:empty {
    display: none;
}


/* Success-looking status 

.tbwc-status:has(+ .tbwc-price-summary) {
    /* intentionally lightweight
} */


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes tbwcFadeUp {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.tbwc-booking-form .tbwc-field,
.tbwc-price-summary,
.tbwc-services {
    animation:
        tbwcFadeUp 0.45s ease both;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.tbwc-booking-form button:focus-visible,
.tbwc-booking-form input:focus-visible,
.tbwc-booking-form select:focus-visible {
    outline: 2px solid #6f9baa;

    outline-offset: 2px;
}
/* Hide Quantity column in WooCommerce cart for tent bookings */
.woocommerce-cart .shop_table th.product-quantity,
.woocommerce-cart .shop_table td.product-quantity {
    display: none !important;
}
.woocommerce-cart .cart_item .product-name > a {
    display: none !important;
}