/* ============================================================
 * Native Checkout
 * Bundled into public.scss. Uses the existing plugin CSS
 * variables (defined in public.scss :root) — no new variables
 * are introduced here.
 * ============================================================ */

.eshb-native-checkout {
    color: var(--eshb-text-color);
    padding: 40px 0;
    font-family: var(--eshb-body-font);

    .eshb-container {
        max-width: 760px !important;
        margin: 0 auto;
        padding: 0 16px;
    }

    .eshb-card {
        background: #f1f5f9c7;
        border: 1px solid #e5eaef;
        border-radius: 8px;
        padding: 24px;
        margin-bottom: 20px;
        box-shadow: 0 1px 10px 2px rgb(217 217 217 / 22%);

        h2 {
            margin: 0 0 16px;
            font-size: 20px;
            font-weight: 600;
            font-family: var(--eshb-title-font);
        }

        h3 {
            margin: 24px 0 12px;
            font-size: 16px;
            font-weight: 600;
            font-family: var(--eshb-title-font);
        }
    }

    .eshb-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;

        @media (max-width: 600px) {
            grid-template-columns: 1fr;
        }
    }

    .eshb-meta-label {
        font-size: 12px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .eshb-meta-value {
        font-size: 15px;
        font-weight: 500;
        margin-top: 4px;

        small {
            color: #6b7280;
            font-weight: 400;
        }
    }

    .eshb-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        margin-bottom: 0;

        >div {
            font-size: 14px;
        }

        strong {
            color: #6b7280;
            font-weight: 500;
            margin-right: 6px;
        }
    }

    .eshb-services-summary-cell {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px;
        padding-top: 6px;
        border-top: 1px dashed #e5e7eb;
        margin-top: 4px;

        #eshbServicesSummaryList {
            flex: 1;
            color: var(--eshb-text-color);
        }
    }

    .eshb-edit-link {
        color: var(--eshb-primary-color);
        font-size: 13px;
        text-decoration: underline;
        cursor: pointer;
        margin-left: auto;

        &:hover {
            color: var(--eshb-territory-color);
        }
    }

    .eshb-services-editor {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px dashed #e5e7eb;

        &[hidden] {
            display: none;
        }

        h3 {
            margin: 0 0 12px !important;
        }
    }

    .eshb-form-group {
        margin-bottom: 14px;

        label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 6px;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 14px;
            background: var(--eshb-white-color);
            box-sizing: border-box;

            &:focus {
                border-color: var(--eshb-primary-color);
                outline: 2px solid rgba(171, 137, 101, 0.15);
            }

            // Marked by JS when a required field is empty at submit
            // time. Cleared on the next input/change so the red
            // border only lingers while the field is still wrong.
            &.eshb-error-input,
            &.eshb-error-input:focus {
                border-color: var(--eshb-danger-color);
                outline: 2px solid rgba(228, 23, 73, 0.18);
            }
        }
    }

    // Same error treatment for the terms checkbox so a missed accept
    // is highlighted alongside the field errors.
    .eshb-terms-container input.eshb-error-input {
        outline: 2px solid var(--eshb-danger-color);
        outline-offset: 2px;
    }

    .eshb-choice-option {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 10px;
        transition: border-color 150ms;

        &:hover {
            border-color: var(--eshb-primary-color);
        }

        input[type="checkbox"],
        input[type="radio"] {
            margin-right: 12px;
            width: 18px;
            height: 18px;
        }

        label {
            cursor: pointer;
            flex: 1;
            font-size: 14px;
        }
    }

    .eshb-choice-title {
        font-weight: 500;
    }

    .eshb-choice-meta {
        color: #6b7280;
        margin-left: 8px;
        font-size: 13px;
    }

    .eshb-choice-desc {
        flex-basis: 100%;
        font-size: 13px;
        color: #6b7280;
        margin-top: 6px;
        margin-left: 30px;
    }

    .eshb-service-qty {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;

        .eshb-qty-btn {
            width: 28px;
            height: 28px;
            padding: 0 17px;
            border-radius: 4px;
            border: 1px solid #e5e7eb;
            background: var(--eshb-white-color);
            cursor: pointer;
            font-size: 16px;
            line-height: normal;
            color: currentColor;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        input {
            width: 50px;
            height: 28px;
            text-align: center;
            padding: 4px;
            background: var(--eshb-white-color);
            border: 1px solid #e5e7eb;
            border-radius: 4px !important;
            margin: 0;
        }
    }

    .eshb-coupon-section {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px dashed #e5e7eb;
    }
    .eshb-cart-item-aside {
        display: flex;
        align-items: center;
        gap:5px;
    }
    button.eshb-remove-item {
        background: var(--eshb-danger-color);
        color: var(--eshb-white-color);
        padding: 1px 4px;
        font-size: 12px;
        height: 13px;
        border-radius: 3px;
        display: grid;
        place-content: center;
    }
    .eshb-add-more-btn {
        text-decoration: none;
        padding: 10px 20px;
        border-radius: 6px;
        background-color: var(--eshb-primary-color);
        color: var(--eshb-white-color);
        font-size: 14px;
        text-decoration: none !important;
        &:hover {
            background-color: var(--eshb-dark-color);
            color: var(--eshb-white-color);
        }
    }
    .eshb-coupon-prompt {
        margin: 0;
        font-size: 14px;
        color: #6b7280;

        &[hidden] {
            display: none;
        }
        a {
            color: var(--eshb-primary-color);
            font-weight: 500;
            text-decoration: underline;
            margin-left: 4px;

            &:hover {
                color: var(--eshb-territory-color);
            }
        }
    }

    .eshb-order-review-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
    }
    .eshb-coupon-panel {
        margin-top: 12px;

        &[hidden] {
            display: none;
        }
    }

    .eshb-coupon-row {
        display: flex;
        gap: 8px;
        align-items: center;

        input {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px !important;
            font-size: 14px;
            margin: 0;
            height: 43px;
        }

        button {
            height: 43px;
            line-height: 1;
        }
    }

    .eshb-btn-secondary {
        padding: 10px 16px;
        border: 1px solid var(--eshb-primary-color);
        background: var(--eshb-white-color);
        color: var(--eshb-primary-color);
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;

        &:hover {
            background: var(--eshb-primary-color);
            color: var(--eshb-white-color);
        }
    }

    .eshb-btn-link {
        background: none;
        border: none;
        color: var(--eshb-primary-color);
        cursor: pointer;
        font-size: 13px;
        text-decoration: underline;
        &:hover {
            background: var(--eshb-primary-color);
            color: var(--eshb-white-color);
        }
    }

    .eshb-coupon-message {
        margin: 8px 0 0;
        font-size: 13px;

        &.eshb-msg-error {
            color: var(--eshb-danger-color);
        }

        &.eshb-msg-success {
            color: var(--eshb-success-color);
        }
    }

    .eshb-price-table {
        width: 100%;
        border: none;
        border-collapse: collapse;

        td {
            padding: 8px 0;
            font-size: 14px;
            border: none;
        }

        tr:last-child td {
            border-bottom: none;
        }

        .eshb-label-col {
            color: #6b7280;
        }

        .eshb-value-col {
            text-align: right;
            font-weight: 500;
        }
    }

    .eshb-total-row td {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: var(--eshb-text-color);
        padding-top: 14px !important;
        border-top: 2px solid var(--eshb-text-color);
    }

    .eshb-terms-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        padding: 0 4px;

        input {
            width: 18px;
            height: 18px;
        }

        label {
            font-size: 14px;
        }

        a {
            color: var(--eshb-primary-color);
            text-decoration: underline;
        }
    }

    .eshb-checkout-error {
        background: #fee2e2;
        color: var(--eshb-danger-color);
        border: 1px solid #fca5a5;
        padding: 10px 14px;
        border-radius: 6px;
        margin-bottom: 14px;
        font-size: 14px;
    }

    .eshb-btn-submit {
        width: 100%;
        padding: 14px 20px;
        background: var(--eshb-primary-color);
        color: var(--eshb-white-color);
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 150ms;

        &:hover {
            background: var(--eshb-territory-color);
        }

        &:disabled {
            opacity: 0.6;
            cursor: wait;
        }
    }

    .eshb-gateway-mount {
        margin-top: 16px;

        >div {
            min-height: 40px;
        }
    }

    .eshb-no-gateways {
        background: #fef3c7;
        color: #92400e;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 14px;
    }

    .eshb-card--success {
        border-color: var(--eshb-primary-color);
        background: var(--eshb-secondary-color);

        h2 {
            color: var(--eshb-primary-color);
        }
    }

    .eshb-thankyou-meta {
        list-style: none;
        padding: 0;
        margin: 12px 0 0;

        li {
            padding: 4px 0;
            font-size: 14px;
        }
    }

    .eshb-thankyou-actions {
        margin: 20px 0 0;

        .eshb-btn-submit {
            display: inline-block;
            width: auto;
        }
    }
}

/* ============================================================
 * Native Checkout — Customer Account area
 * Reuses the same CSS variables and card styling as the
 * checkout above so the two screens feel like one product.
 * ============================================================ */

.eshb-account {
    color: var(--eshb-text-color);
    padding: 40px 0;
    font-family: var(--eshb-body-font);

    .eshb-card {
        background: #f1f5f9c7;
        border: 1px solid #e5eaef;
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 1px 10px 2px rgb(217 217 217 / 22%);

        h2 {
            margin: 0 0 16px;
            font-size: 20px;
            font-weight: 600;
            font-family: var(--eshb-title-font);
        }
    }

    /* ---- Login ------------------------------------------------ */
    &--login .eshb-account-login-box {
        max-width: 420px;
    }

    .eshb-account-login-intro {
        font-size: 14px;
        color: #6b7280;
        margin: 0 0 16px;
    }

    #loginform label {
    width: 150px;
}

    .eshb-account-login-links {
        margin-top: 14px;
        font-size: 13px;

        a {
            color: var(--eshb-primary-color);
            text-decoration: underline;
        }

        .eshb-sep {
            color: #9ca3af;
            margin: 0 6px;
        }
    }

    /* ---- Layout ----------------------------------------------- */
    .eshb-account-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 20px;
        align-items: start;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    /* ---- Sidebar nav ------------------------------------------ */
    .eshb-account-nav {
        border: 1px solid #e5eaef;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 1px 10px 2px rgb(217 217 217 / 22%);
        position: sticky;
        top: 80px
    }

    .eshb-account-user {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding-bottom: 16px;
        margin-bottom: 12px;
        border-bottom: 1px dashed #e5e7eb;

        img {
            border-radius: 50%;
        }
    }

    .eshb-account-username {
        font-weight: 600;
        font-size: 15px;
    }

    .eshb-account-menu {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            margin: 0 0 4px;
        }
    }

    .eshb-account-menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 6px;
        color: var(--eshb-text-color);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: background 150ms, color 150ms;
        text-decoration: none !important;
        .dashicons {
            font-size: 18px;
            width: 18px;
            height: 18px;
        }

        &:hover,
        &.is-active {
            background: var(--eshb-primary-color);
            color: var(--eshb-white-color);
        }
    }

    /* ---- Content panels --------------------------------------- */
    .eshb-account-content {
        min-width: 0; // allow tables to scroll inside the grid
    }

    .eshb-account-panel {
        border: 1px solid #e5eaef;
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 1px 10px 2px rgb(217 217 217 / 22%);
    }

    .eshb-account-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        h2, h3 {
            margin: 0;
            font-family: var(--eshb-title-font);
        }

        h2 { font-size: 20px; }
        h3 { font-size: 16px; }

        &--spaced {
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px dashed #e5e7eb;
        }
    }

    .eshb-account-viewall {
        font-size: 13px;
        color: var(--eshb-primary-color);
        text-decoration: underline;
    }

    /* ---- Dashboard ------------------------------------------- */
    .eshb-account-welcome {
        margin-bottom: 20px;

        h2 {
            margin: 0 0 6px;
            font-size: 22px;
            font-family: var(--eshb-title-font);
        }
    }

    .eshb-account-welcome-meta {
        margin: 0;
        font-size: 14px;
        color: #6b7280;

        .eshb-sep { margin: 0 6px; }
    }

    .eshb-account-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
        margin-bottom: 28px;

        @media (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .eshb-account-stat {
        background: var(--eshb-white-color);
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 18px 16px;
        text-align: center;
        border-top: 3px solid var(--eshb-primary-color);

        &--active   { border-top-color: var(--eshb-success-color); }
        &--upcoming { border-top-color: var(--eshb-primary-color); }
        &--cancelled{ border-top-color: var(--eshb-danger-color); }
    }

    .eshb-account-stat-value {
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.1;
    }

    .eshb-account-stat-label {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* ---- Tables ----------------------------------------------- */
    .eshb-account-table-wrap {
        overflow-x: auto;
    }

    .eshb-account-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;

        th, td {
            padding: 12px 10px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        thead th {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: #6b7280;
            font-weight: 600;
        }

    }

    .eshb-account-actions {
        white-space: nowrap;
    }

    .eshb-account-date-sep {
        margin: 0 6px;
        color: #9ca3af;
    }

    /* ---- Badges ----------------------------------------------- */
    .eshb-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.6;
        background: #e5e7eb;
        color: #374151;

        &--processing,
        &--completed { background: #dcfce7; color: #166534; }
        &--pending,
        &--on-hold,
        &--deposit-payment { background: #fef9c3; color: #854d0e; }
        &--cancelled,
        &--failed,
        &--refunded { background: #fee2e2; color: #991b1b; }
    }

    /* ---- Buttons ---------------------------------------------- */
    .eshb-btn-link {
        background: none;
        border: none;
        border-radius: 3px;
        padding: 3px 6px;
        color: var(--eshb-primary-color);
        cursor: pointer;
        font-size: 13px;
        text-decoration: underline;

        &:hover {
            background: var(--eshb-primary-color);
            color: var(--eshb-white-color);
        }

        &.eshb-btn-danger {
            color: var(--eshb-danger-color);
             &:hover {
                background: var(--eshb-danger-color);
                color: var(--eshb-white-color);
            }
        }
    }

    .eshb-btn-secondary {
        padding: 10px 16px;
        border: 1px solid var(--eshb-primary-color);
        background: var(--eshb-white-color);
        color: var(--eshb-primary-color);
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
    }

    .eshb-btn-submit {
        padding: 11px 20px;
        background: var(--eshb-primary-color);
        color: var(--eshb-white-color);
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: background 150ms;

        &:hover { background: var(--eshb-territory-color); }
        &:disabled { opacity: 0.6; cursor: wait; }

        &.eshb-btn-danger {
            background: var(--eshb-danger-color);
            &:hover { filter: brightness(0.92); }
        }
    }

    .eshb-account-empty {
        color: #6b7280;
        font-size: 14px;
        padding: 12px 0;
    }

    .eshb-account-notice {
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 14px;
        margin-bottom: 16px;

        &[hidden] {
            display: none;
        }

        &--success {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        &--info {
            background: #e0f2fe;
            color: #075985;
            border: 1px solid #bae6fd;
        }
    }

    /* ---- Forms ------------------------------------------------ */
    .eshb-account-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;

        @media (max-width: 600px) {
            grid-template-columns: 1fr;
        }
    }

    .eshb-account-field {
        margin-bottom: 14px;

        label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 6px;
        }

        input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 14px;
            background: var(--eshb-white-color);
            box-sizing: border-box;

            &:focus {
                border-color: var(--eshb-primary-color);
                outline: 2px solid rgba(171, 137, 101, 0.15);
            }
        }
    }

    .eshb-account-form-actions {
        margin-top: 8px;
    }

    .eshb-account-form-msg,
    .eshb-account-modal-msg {
        font-size: 13px;
        margin: 10px 0 0;

        &.is-error { color: var(--eshb-danger-color); }
        &.is-success { color: var(--eshb-success-color); }
    }

    /* ---- Booking detail (modal) ------------------------------- */
    .eshb-account-detail-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;

        h3 { margin: 0; font-size: 18px; }
    }

    .eshb-account-detail-title {
        margin: 18px 0 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--eshb-territory-color);
    }

    .eshb-account-detail-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;

        th {
            text-align: left;
            font-weight: 500;
            color: #6b7280;
            padding: 5px;
            width: 40%;
        }

        td {
            text-align: right;
            padding: 5px;
        }
    }

    .eshb-account-detail-text {
        font-size: 14px;
        margin: 0;
    }

    /* ---- Cancellation form ------------------------------------ */
    .eshb-account-cancel {
        h3 { margin: 0 0 8px; font-size: 18px; }
    }

    .eshb-account-field-label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        margin: 12px 0 6px;
    }

    .eshb-account-select,
    .eshb-account-textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 14px;
        background: var(--eshb-white-color);
        box-sizing: border-box;
        margin-bottom: 8px;
    }

    .eshb-account-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
    }
}

/* ---- Modal shell (kept outside .eshb-account scroll context) -- */
.eshb-account-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;

    &[hidden] { display: none; }

    .eshb-account-modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(17, 24, 39, 0.55);
    }

    .eshb-account-modal-dialog {
        position: relative;
        background: var(--eshb-white-color);
        border-radius: 10px;
        padding: 24px;
        width: 92%;
        max-width: 520px;
        max-height: 86vh;
        overflow-y: auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    }

    .eshb-account-modal-x {
        position: absolute;
        top: 10px;
        right: 14px;
        background: none;
        border: none;
        font-size: 26px;
        line-height: 1;
        color: var(--eshb-danger-color);
        cursor: pointer;
        box-shadow: none;
    }

    .eshb-account-modal-loading {
        text-align: center;
        color: #6b7280;
        padding: 20px 0;
    }

    /* ----- Multi-accommodation cart ----- */
    .eshb-cart-items-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 8px;
    }

    .eshb-add-more-btn {
        display: inline-block;
        padding: 8px 14px;
        border: 1px solid var(--eshb-text-color);
        border-radius: 6px;
        text-decoration: none;
        font-weight: 600;
        color: var(--eshb-text-color);
        white-space: nowrap;

        &:hover {
            background: var(--eshb-text-color);
            color: #fff;
        }
    }

    .eshb-cart-item {
        background: #fff;
        border: 1px solid #e5eaef;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .eshb-cart-item-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .eshb-cart-item-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        font-family: var(--eshb-title-font);
    }

    .eshb-cart-item-aside {
        display: flex;
        align-items: center;
        gap: 12px;
        white-space: nowrap;
    }

    .eshb-cart-item-total {
        font-weight: 700;
    }

    .eshb-remove-item {
        appearance: none;
        border: none;
        background: #f1f5f9;
        color: var(--eshb-danger-color);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        box-shadow: none;

        &:hover {
            background: #fee2e2;
        }

        &:disabled {
            opacity: 0.5;
            cursor: default;
        }
    }
}

body.eshb-account-modal-open {
    overflow: hidden;
}