/*
|--------------------------------------------------------------------------
| KARSA VET CLINIC — BOOKING BRAND
|--------------------------------------------------------------------------
| CSS khusus Booking Wizard.
| Tidak memengaruhi halaman admin.
*/

.booking-brand {
    --karsa-primary: #414A35;
    --karsa-primary-hover: #303A29;
    --karsa-primary-soft: #F0F2EA;

    --karsa-gold: #B9944B;
    --karsa-gold-soft: #F8F3E7;

    --karsa-background: #FAF9F6;
    --karsa-surface: #FFFFFF;

    --karsa-text: #202820;
    --karsa-muted: #667064;

    --karsa-border: #E3E6DC;

    background: var(--karsa-background);
    color: var(--karsa-text);
}

/* Background utama */

.booking-brand .booking-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(185, 148, 75, 0.055),
            transparent 35%
        ),
        #FAF9F6;
}

/* Header */

.booking-brand .booking-header {
    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid var(--karsa-border);

    backdrop-filter: blur(16px);
}

/* Logo */

.booking-brand .booking-logo {
    width: 64px;
    height: 64px;

    object-fit: contain;
}

/* Progress card */

.booking-brand .booking-progress {
    background: #FFFFFF;

    border: 1px solid var(--karsa-border);

    box-shadow:
        0 4px 20px rgba(32, 40, 32, 0.035);
}

/*
|--------------------------------------------------------------------------
| OVERRIDE PRIMARY COLOR
|--------------------------------------------------------------------------
| Utility Tailwind lama tetap bisa digunakan.
| Override hanya berlaku di dalam .booking-brand.
*/

.booking-brand .bg-primary-50 {
    background-color: #F0F2EA;
}

.booking-brand .bg-primary-100 {
    background-color: #E3E8D9;
}

.booking-brand .bg-primary-600 {
    background-color: #414A35;
}

.booking-brand .bg-primary-700 {
    background-color: #303A29;
}

.booking-brand .text-primary-100 {
    color: #E3E8D9;
}

.booking-brand .text-primary-500,
.booking-brand .text-primary-600 {
    color: #414A35;
}

.booking-brand .text-primary-700 {
    color: #303A29;
}

.booking-brand .border-primary-100 {
    border-color: #E3E8D9;
}

.booking-brand .border-primary-200 {
    border-color: #CAD2BE;
}

.booking-brand .border-primary-300 {
    border-color: #B2BFA4;
}

.booking-brand .border-primary-400,
.booking-brand .border-primary-600 {
    border-color: #414A35;
}

.booking-brand .accent-primary-600 {
    accent-color: #414A35;
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.booking-brand .gradient-primary {
    background: #414A35;

    color: #FFFFFF;

    box-shadow:
        0 6px 18px rgba(65, 74, 53, 0.13);

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

.booking-brand .gradient-primary:hover {
    background: #303A29;

    box-shadow:
        0 8px 20px rgba(65, 74, 53, 0.18);
}

.booking-brand .gradient-primary:disabled {
    background: #E8EBE3;

    color: #829080;

    box-shadow: none;
}

/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.booking-brand .ui-label {
    color: #354231;
}

.booking-brand .ui-input,
.booking-brand .ui-select,
.booking-brand .ui-textarea {
    background-color: #FFFFFF;

    border-color: #D9DED3;

    color: #202820;

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

.booking-brand .ui-input:focus,
.booking-brand .ui-select:focus,
.booking-brand .ui-textarea:focus {
    border-color: #414A35;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(65, 74, 53, 0.12);
}

.booking-brand .ui-input::placeholder,
.booking-brand .ui-textarea::placeholder {
    color: #9BA49A;
}

.booking-brand .ui-help {
    color: #788175;
}

/*
|--------------------------------------------------------------------------
| INTERACTIVE STATES
|--------------------------------------------------------------------------
*/

.booking-brand input[type="radio"],
.booking-brand input[type="checkbox"] {
    accent-color: #414A35;
}

.booking-brand button:focus-visible,
.booking-brand a:focus-visible {
    outline: 2px solid #B9944B;
    outline-offset: 3px;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    .booking-brand .booking-logo {
        width: 54px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .booking-brand .gradient-primary {
        transition: none;
    }
}

/*
|--------------------------------------------------------------------------
| KARSA VET CLINIC
| BOOKING COMPONENT DESIGN SYSTEM
|--------------------------------------------------------------------------
*/

/* ================================================================
   1. SECTION CARDS
================================================================ */

.booking-brand main section {
    background-color: #FFFFFF;

    border-color: #E3E6DC;

    box-shadow:
        0 2px 4px rgba(32, 40, 32, 0.02),
        0 12px 30px rgba(32, 40, 32, 0.035);

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

/*
 * Card dengan aksen emas di bagian atas.
 */

.booking-brand .karsa-card {
    position: relative;

    overflow: hidden;

    border: 1px solid #E3E6DC;

    border-radius: 24px;

    background: #FFFFFF;

    box-shadow:
        0 4px 24px rgba(32, 40, 32, 0.04);
}

.booking-brand .karsa-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #414A35 0%,
        #B9944B 100%
    );
}


/* ================================================================
   2. TYPOGRAPHY
================================================================ */

.booking-brand main h1 {
    color: #202820;

    letter-spacing: -0.035em;

    line-height: 1.2;
}

.booking-brand main h2 {
    color: #273128;

    letter-spacing: -0.015em;
}

.booking-brand .karsa-page-heading {
    margin-bottom: 28px;
}

.booking-brand .karsa-page-heading h1 {
    font-weight: 800;
}

.booking-brand .karsa-page-heading p {
    color: #667064;
}


/* ================================================================
   3. ICON CONTAINERS
================================================================ */

.booking-brand .karsa-icon {
    display: flex;

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

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    border-radius: 14px;

    background: #F0F2EA;

    color: #414A35;
}

.booking-brand .karsa-icon-gold {
    background: #F8F3E7;

    color: #99763C;
}


/* ================================================================
   4. RADIO / SELECTION CARDS
================================================================ */

.booking-brand .karsa-choice {
    position: relative;

    display: block;

    background: #FFFFFF;

    border: 1.5px solid #D9DED3;

    border-radius: 18px;

    padding: 18px;

    cursor: pointer;

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

.booking-brand .karsa-choice:hover {
    border-color: #899777;

    background-color: #FAFBF7;

    transform: translateY(-1px);
}

.booking-brand .karsa-choice:has(
    input[type="radio"]:checked:not(:disabled)
) {
    border-color: #414A35;

    background-color: #F0F2EA;

    box-shadow:
        inset 0 0 0 1px #414A35,
        0 5px 16px rgba(65, 74, 53, 0.07);
}

.booking-brand .karsa-choice:focus-within {
    outline: 2px solid #B9944B;

    outline-offset: 3px;
}

.booking-brand .karsa-choice strong {
    color: #273128;
}

.booking-brand .karsa-choice input[type="radio"] {
    accent-color: #414A35;
}


/* ================================================================
   5. FORM FIELDS
================================================================ */

.booking-brand .ui-input,
.booking-brand .ui-select,
.booking-brand .ui-textarea {
    min-height: 46px;

    border-radius: 12px;

    border: 1px solid #D9DED3;

    background: #FFFFFF;

    color: #273128;
}

.booking-brand .ui-textarea {
    min-height: 100px;

    resize: vertical;
}

.booking-brand .ui-input:hover,
.booking-brand .ui-select:hover,
.booking-brand .ui-textarea:hover {
    border-color: #A8B49B;
}

.booking-brand .ui-input:focus,
.booking-brand .ui-select:focus,
.booking-brand .ui-textarea:focus {
    border-color: #414A35;

    outline: none;

    box-shadow:
        0 0 0 3px rgba(65, 74, 53, 0.10);
}

.booking-brand .ui-input:disabled,
.booking-brand .ui-select:disabled {
    background: #F4F5F1;

    cursor: not-allowed;
}

.booking-brand .ui-input[readonly] {
    background: #F0F2EA;
}


/* ================================================================
   6. BACK BUTTON
================================================================ */

.booking-brand .karsa-back {
    display: inline-flex;

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

    gap: 8px;

    flex-shrink: 0;

    padding: 10px 16px;

    border: 1px solid #E3E6DC;

    border-radius: 12px;

    background: #FFFFFF;

    color: #414A35;

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

    box-shadow:
        0 2px 5px rgba(32, 40, 32, 0.025);

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

.booking-brand .karsa-back:hover {
    background: #F0F2EA;

    border-color: #A8B49B;
}

.booking-brand .karsa-back:focus-visible {
    outline: 2px solid #B9944B;

    outline-offset: 3px;
}


/* ================================================================
   7. DATE SELECTION
================================================================ */

.booking-brand .karsa-date {
    min-width: 96px;

    border-radius: 16px;

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

.booking-brand .karsa-date:hover {
    transform: translateY(-2px);
}

.booking-brand .karsa-date.bg-primary-600 {
    background: #414A35;

    border-color: #414A35;

    color: #FFFFFF;

    box-shadow:
        0 6px 14px rgba(65, 74, 53, 0.16);
}

.booking-brand .karsa-date:focus-visible {
    outline: 2px solid #B9944B;

    outline-offset: 3px;
}


/* ================================================================
   8. TIME SLOTS
================================================================ */

.booking-brand .karsa-time {
    min-height: 52px;

    border-radius: 14px;

    font-variant-numeric: tabular-nums;

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

.booking-brand .karsa-time:hover {
    transform: translateY(-1px);
}

.booking-brand .karsa-time.bg-primary-600 {
    background: #414A35;

    border-color: #414A35;

    color: #FFFFFF;
}

.booking-brand .karsa-time:focus-visible {
    outline: 2px solid #B9944B;

    outline-offset: 3px;
}


/* ================================================================
   9. REVIEW SUMMARY
================================================================ */

.booking-brand .karsa-summary-item {
    background: #FAFBF8;

    border: 1px solid #E8EBE2;

    border-radius: 16px;

    padding: 16px;
}

.booking-brand .karsa-summary-item > p:first-child {
    color: #768172;

    font-size: 12px;
}

.booking-brand .karsa-summary-item > p:nth-child(2) {
    color: #273128;

    overflow-wrap: anywhere;
}


/* ================================================================
   10. INFORMATION BOX
================================================================ */

.booking-brand .karsa-info {
    background: #F5F7F1;

    border: 1px solid #DCE4D4;

    border-left: 3px solid #414A35;

    border-radius: 14px;

    padding: 16px;

    color: #354B30;

    font-size: 14px;

    line-height: 1.7;
}


/* ================================================================
   11. SUCCESS COMPONENT
================================================================ */

.booking-brand .karsa-success-header {
    background:
        linear-gradient(
            135deg,
            #F0F5EC,
            #FAF9F4
        );

    border-bottom: 1px solid #E3E6DC;
}

.booking-brand .karsa-success-icon {
    display: grid;

    place-items: center;

    width: 64px;
    height: 64px;

    margin-inline: auto;

    border-radius: 50%;

    background: #414A35;

    color: #FFFFFF;

    font-size: 28px;

    box-shadow:
        0 8px 22px rgba(65, 74, 53, 0.18);
}

.booking-brand .karsa-booking-code {
    background: #F8F6EF;

    border: 1px solid #E9DFC8;

    border-radius: 16px;
}


/* ================================================================
   12. RESPONSIVE
================================================================ */

@media (max-width: 640px) {

    .booking-brand .karsa-card {
        border-radius: 20px;
    }

    .booking-brand .karsa-choice {
        padding: 15px;
    }

    .booking-brand .karsa-date {
        min-width: 86px;
    }

    .booking-brand .karsa-page-heading h1 {
        font-size: 26px;
    }

    .booking-brand .karsa-back {
        padding: 9px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .booking-brand .karsa-choice,
    .booking-brand .karsa-date,
    .booking-brand .karsa-time {
        transition: none;
    }

    .booking-brand .karsa-choice:hover,
    .booking-brand .karsa-date:hover,
    .booking-brand .karsa-time:hover {
        transform: none;
    }
}

/*
|--------------------------------------------------------------------------
| KARSA — MOBILE FIRST LAYOUT FIX
|--------------------------------------------------------------------------
*/

/* Container konten utama */

.booking-brand .booking-content {
    width: 100%;
    max-width: 48rem;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Pembungkus seluruh halaman wizard */

.booking-brand .booking-flow {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Form harus mengikuti lebar container */

.booking-brand .booking-flow form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Card tidak boleh melebar keluar dari form */

.booking-brand .booking-flow section,
.booking-brand .booking-flow .karsa-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Anak grid tidak boleh memaksa container melebar */

.booking-brand .booking-flow .grid > * {
    min-width: 0;
}

/* Input mengikuti lebar kolom */

.booking-brand .booking-flow .ui-input,
.booking-brand .booking-flow .ui-select,
.booking-brand .booking-flow .ui-textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Tombol utama tetap mengikuti form */

.booking-brand .booking-flow form > button[type="submit"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Judul card tidak boleh terjepit */

.booking-brand .karsa-card > .flex.items-start > div:last-child {
    flex: 1 1 0%;
    min-width: 0;
}

/* Layout mobile */

@media (max-width: 639px) {

    .booking-brand .booking-content {
        max-width: 100%;
    }

    .booking-brand .karsa-card {
        border-radius: 20px;
    }

    .booking-brand .booking-flow h1 {
        font-size: 26px;
        line-height: 1.25;
    }

}

/* Layout tablet dan desktop */

@media (min-width: 640px) {

    .booking-brand .booking-content {
        max-width: 48rem;
    }

}