/* CAPU:SOUL Booking Widget CSS */
:root {
    --cs-brand:      #1a1a2e;
    --cs-accent:     #2e3192;
    --cs-light:      #f7f9ff;
    --cs-orange:     #f58220;
    --cs-dark:       #0f0f1a;
    --cs-text:       #d1d1d1;
    --cs-text-light: #6b7280;
    --cs-border:     #e5e7eb;
    --cs-white:      #ffffff;
    --cs-radius:     8px;
    --cs-radius-lg:  16px;
    --cs-shadow:     0 4px 24px rgba(0,0,0,0.08);
    --cs-shadow-lg:  0 8px 48px rgba(0,0,0,0.14);
    --cs-transition: all 0.25s ease;
    --cs-container:  1760px;
    --cs-font:       'Inter', system-ui, -apple-system, sans-serif;
}
.cs-booking-widget { font-family: 'Inter', sans-serif; }

/* Search form */
#cs-search-form { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; background:#fff; padding:24px; border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,.08); }
#cs-search-form .cs-field { display:flex; flex-direction:column; gap:6px; flex:1; min-width:160px; }
#cs-search-form .cs-field label { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#6b7280; }
#cs-search-form input, #cs-search-form select { padding:11px 14px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:.92rem; font-family:inherit; transition:border-color .2s; }
#cs-search-form input:focus, #cs-search-form select:focus { outline:none; border-color:var(--cs-accent); box-shadow:0 0 0 3px rgba(233,69,96,.1); }

/* Loader */
#cs-loader { display:none; text-align:center; padding:40px; }
#cs-loader.is-active { display:block; }
.cs-spinner { width:36px; height:36px; border:3px solid #e5e7eb; border-top-color:var(--cs-accent); border-radius:50%; animation:cs-spin .7s linear infinite; margin:0 auto; }
@keyframes cs-spin { to { transform:rotate(360deg); } }

/* Result cards */
.cs-result-card { display:flex; gap:20px; align-items:center; border:1.5px solid #e5e7eb; border-radius:12px; padding:20px; margin-bottom:14px; background:#fff; transition:border-color .2s; }
.cs-result-card:hover { border-color:var(--cs-accent); }
.cs-result-card--sold-out { opacity:.5; pointer-events:none; }
.cs-result-card__img { width:150px; height:105px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.cs-result-card__info { flex:1; }
.cs-result-card__name { font-size:1.05rem; font-weight:700; color:#1a1a2e; margin-bottom:4px; }
.cs-result-card__desc { font-size:.86rem; color:#6b7280; margin-bottom:10px; }
.cs-result-card__price { font-size:1.4rem; font-weight:800; color:var(--cs-accent); }
.cs-result-card__price small { font-size:.75rem; font-weight:400; color:#9ca3af; }
.cs-result-card__avail { font-size:.78rem; color:#6b7280; margin-top:4px; }

/* Guest form + payment */
#cs-guest-section, #cs-payment-section { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:28px; margin-top:28px; }
#cs-guest-section h2, #cs-payment-section h2 { margin:0 0 6px; font-size:1.1rem; color:#1a1a2e; }
#cs-guest-section .cs-selected-info { color:#6b7280; font-size:.88rem; margin-bottom:20px; }
#cs-guest-section .cs-selected-info strong { color:var(--cs-accent); }
#cs-payment-section .cs-selected-info { color:#111827; }
#cs-payment-section #cs-pay-total { color:var(--cs-accent) !important; }

/* WooCommerce-like checkout layout */
.cs-checkout-layout.is-direct { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:24px; align-items:start; }
.cs-checkout-layout.is-direct #cs-guest-section,
.cs-checkout-layout.is-direct #cs-payment-section { margin-top:0; }
.cs-order-review { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:20px; position:sticky; top:90px; }
.cs-order-review h3 { margin:0 0 14px; font-size:1rem; color:#1a1a2e; }
.cs-order-review hr { border:0; border-top:1px solid #e5e7eb; margin:12px 0; }
.cs-order-review__line { display:flex; justify-content:space-between; gap:12px; margin:8px 0; font-size:.9rem; color:#4b5563; }
.cs-order-review__line strong { color:#111827; text-align:right; }
.cs-order-review__line--total { margin-top:10px; font-size:1.02rem; }
.cs-order-review__line--total strong { color:var(--cs-accent); }

.cs-form-row { display:flex; gap:14px; flex-wrap:wrap; }
.cs-form-group { display:flex; flex-direction:column; gap:5px; flex:1; min-width:200px; margin-bottom:0px; }
.cs-form-group label { font-size:.82rem; font-weight:600; color:#374151; }
.cs-form-group input, .cs-form-group select { padding:11px 14px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:.92rem; font-family:inherit; transition:border-color .2s; }
.cs-form-group input:focus, .cs-form-group select:focus { outline:none; border-color:var(--cs-accent); box-shadow:0 0 0 3px rgba(233,69,96,.1); }

/* Stripe element container */
#cs-stripe-element { padding:14px 16px; border:1.5px solid #e5e7eb; border-radius:8px; margin:16px 0; min-height:46px; }
#cs-pay-error { color:#dc2626; font-size:.86rem; margin-bottom:12px; display:none; }
.cs-secure-note { font-size:.75rem; color:#9ca3af; margin-top:10px; }

/* Action buttons row */
.cs-btn-row { display:flex; gap:10px; flex-wrap:wrap; }

/* Alert */
.cs-alert { padding:14px 18px; border-radius:8px; font-size:.88rem; margin-bottom:14px; }
.cs-alert--error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.cs-alert--success { background:#f0fdf4; color:#14532d; border:1px solid #bbf7d0; }

@media (max-width:980px) {
    .cs-checkout-layout.is-direct { grid-template-columns:1fr; }
    .cs-order-review { position:static; }
}
@media (max-width:768px){
   .cs-container{
        padding: 0px 20px ;
    }
    .cs-result-card {
        padding: 24px 12px;
        flex-direction:column;
        align-items: start;
    }
    .cs-section {
        padding-bottom: 0;
    }
}
@media (max-width:640px) {
    .cs-result-card { flex-direction:column; }
    .cs-result-card__img { width:100%; height:180px; }
    .cs-section__subtitle {
        font-size: 0.95rem;
    }
    #cs-search-form {
        padding: 24px 15px;
    }
    .cs-result-card__desc {
        line-height: 1.4;
    }
    .cs-container{
        padding: 0px 15px ;
    }
    .cs-breadcrumb {
        padding: 0px 0 40px 0;
    }
    .cs-section__subtitle {
        font-size: 1.05rem;
        line-height: 1.2;
    }
}
@media(max-width:480px) {
    #cs-search-form .cs-field {
        min-width: 100%;
    }
    button.cs-btn.cs-btn--primary {
        width: 100%;
    }
    .cs-breadcrumb {
        padding-top: 0;
        padding-bottom: 50px;
    }
    #cs-availability-results h2 {
        font-size: 24px;
    }
    .cs-result-card__info {
        width: 100%;
    }
}
.cs-mews-extra { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.cs-mews-extra input { width:72px; }
