/* ==========================================================================
   TenderMitra — Form pages (Contact + Appointment)
   Loads on top of modern.css. Shared by .tm-contact and .tm-appointment.

   Both forms render through {{ form|crispy }} with crispy-bootstrap5, so the
   markup is Bootstrap's: .mb-3 wrapper, .form-label, .form-control /
   .form-select, .invalid-feedback, .asteriskField. Everything here targets
   that output — no form class, widget or view is touched.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

/* Shell and atmosphere come from modern.css; only the padding is local */
.fm-hero {
    padding-top: clamp(3rem, 2rem + 4vw, 5rem);
    padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.fm-hero > .hm-wrap { position: relative; z-index: 1; }

.fm-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    font-size: .8125rem;
    /* Sits on the coloured field, so one step darker than body muted */
    color: var(--s-ink-2);
}

.fm-crumbs a { color: var(--s-ink-2); text-decoration: none; transition: color .2s var(--tm-ease); }
.fm-crumbs a:hover { color: var(--s-ink); }
.fm-crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--s-line-2); }
.fm-crumbs [aria-current="page"] { color: var(--s-ink); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.fm-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    align-items: start;
}

@media (max-width: 991.98px) { .fm-layout { grid-template-columns: 1fr; } }

.fm-aside { display: grid; gap: 1rem; }

/* ==========================================================================
   FORM CARD
   ========================================================================== */

.fm-card {
    padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 24px;
    box-shadow: 0 1px 1px rgb(11 18 32 / .04),
                0 4px 8px rgb(11 18 32 / .03),
                0 16px 32px -16px rgb(11 18 32 / .1);
}

.fm-card-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.012em;
    color: var(--s-ink);
    margin: 0 0 .5rem;
}

.fm-card-sub { font-size: .9063rem; line-height: 1.6; color: var(--s-ink-3); margin: 0 0 1.75rem; }

/* ==========================================================================
   CRISPY / BOOTSTRAP FIELD STYLING
   ========================================================================== */

.fm-form .mb-3 { margin-bottom: 1.15rem !important; }

.fm-form .form-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--s-ink);
    margin-bottom: .45rem;
}

/* Required marker — crispy emits .asteriskField */
.fm-form .asteriskField {
    color: var(--s-orange-d);
    margin-left: .15rem;
    font-weight: 600;
    text-decoration: none;
}

.fm-form .form-control,
.fm-form .form-select {
    /* AppointmentForm's widgets carry col-lg-6/col-md-6/col-6 grid classes,
       which would otherwise pin these inputs to 50% width. */
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;

    padding: .8rem 1rem;
    font-size: .9375rem;
    font-weight: 450;
    line-height: 1.5;
    color: var(--s-ink);
    background-color: #fff;
    border: 1px solid var(--s-line-2);
    border-radius: 12px;
    box-shadow: none;
    transition: border-color .2s var(--tm-ease), box-shadow .2s var(--tm-ease), background-color .2s var(--tm-ease);
}

.fm-form .form-control::placeholder { color: var(--s-ink-3); opacity: 1; }

.fm-form .form-control:hover,
.fm-form .form-select:hover { border-color: var(--s-ink-3); }

.fm-form .form-control:focus,
.fm-form .form-select:focus {
    outline: none;
    border-color: var(--s-orange);
    box-shadow: 0 0 0 4px rgb(246 147 30 / .16);
    background-color: #fff;
}

.fm-form textarea.form-control { min-height: 128px; resize: vertical; }

/* Native select arrow, redrawn to match the palette */
.fm-form .form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%234a5878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
    padding-right: 2.6rem;
}

/* Errors */
.fm-form .form-control.is-invalid,
.fm-form .form-select.is-invalid {
    border-color: var(--s-danger);
    background-image: none;
}

.fm-form .form-select.is-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23e02424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

.fm-form .form-control.is-invalid:focus,
.fm-form .form-select.is-invalid:focus { box-shadow: 0 0 0 4px rgb(224 36 36 / .18); }

.fm-form .invalid-feedback,
.fm-form .errorlist {
    display: block;
    margin: .45rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--s-danger-d);
}

.fm-form .invalid-feedback strong { font-weight: 500; }

.fm-form .form-text { font-size: .8125rem; color: var(--s-ink-3); margin-top: .35rem; }

/* Non-field errors */
.fm-alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.5rem;
    border-radius: 14px;
    font-size: .875rem;
    line-height: 1.55;
    background: var(--s-danger-bg);
    color: var(--s-danger-d);
}

.fm-alert i { margin-top: .1rem; flex: 0 0 auto; }

/* Submit row */
.fm-submit { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.fm-note { font-size: .8125rem; color: var(--s-ink-3); margin: 0; }

/* Success banner (Django messages) */
.fm-success {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.75rem;
    border-radius: 16px;
    background: var(--t-mint);
    color: var(--s-teal);
    font-size: .9063rem;
    line-height: 1.6;
}

.fm-success i { font-size: 1.15rem; margin-top: .05rem; flex: 0 0 auto; }

/* ==========================================================================
   SIDEBAR CARDS
   ========================================================================== */

.fm-side {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 20px;
}

.fm-side--tint { background: var(--t-cream); border-color: transparent; }
.fm-side--lilac { background: var(--t-lilac); border-color: transparent; }

.fm-side-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--s-ink);
    margin: 0 0 .9rem;
}

.fm-side-text { font-size: .875rem; line-height: 1.65; color: var(--s-ink-2); margin: 0 0 1rem; }
.fm-side-text:last-child { margin-bottom: 0; }

.fm-links { display: grid; gap: .7rem; }

.fm-links a,
.fm-links span.fm-static {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--s-ink-2);
    text-decoration: none;
    transition: color .2s var(--tm-ease);
}

.fm-links a:hover { color: var(--s-ink); }
.fm-links i { color: var(--s-orange); margin-top: .12rem; flex: 0 0 auto; }

/* Option rows (booking modes) */
.fm-opt {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 0;
    border-bottom: 1px solid rgb(11 18 32 / .07);
}

.fm-opt:last-child { border-bottom: 0; padding-bottom: 0; }
.fm-opt:first-child { padding-top: 0; }

.fm-opt-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;
    font-size: .85rem;
    color: var(--s-ink);
    background: rgb(255 255 255 / .85);
}

.fm-opt-name { font-size: .875rem; font-weight: 600; color: var(--s-ink); margin: 0; line-height: 1.35; }
.fm-opt-meta { font-size: .8125rem; color: var(--s-ink-2); margin: .15rem 0 0; line-height: 1.4; }

.fm-price {
    display: inline-block;
    margin-top: .3rem;
    padding: .15rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgb(255 255 255 / .9);
    color: var(--s-ink);
}

/* Numbered "what happens next" list */
.fm-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: fm; }

.fm-steps li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--s-ink-2);
}

.fm-steps li::before {
    counter-increment: fm;
    content: counter(fm);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: .8125rem;
    color: var(--s-ink);
    background: rgb(255 255 255 / .9);
}

/* Booked-date chips */
.fm-dates { display: flex; flex-wrap: wrap; gap: .4rem; }

.fm-date {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--s-ink-2);
    background: #fff;
    border: 1px solid var(--s-line);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.fm-date i { color: #c23b3b; font-size: .7rem; }

/* ==========================================================================
   jQuery UI datepicker — brought in line with the palette
   ========================================================================== */

.tm-appointment .ui-datepicker {
    padding: .6rem;
    border: 1px solid var(--s-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px -12px rgb(11 18 32 / .22);
    font-family: 'Inter', sans-serif;
    font-size: .8125rem;
    z-index: 1060 !important;
}

.tm-appointment .ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: 0;
    padding: .35rem 0 .6rem;
    font-weight: 600;
    color: var(--s-ink);
}

.tm-appointment .ui-datepicker .ui-datepicker-title { font-size: .875rem; }

.tm-appointment .ui-datepicker .ui-datepicker-prev,
.tm-appointment .ui-datepicker .ui-datepicker-next {
    border: 0;
    background: transparent;
    cursor: pointer;
    top: .3rem;
}

.tm-appointment .ui-datepicker .ui-state-default {
    border: 0;
    background: transparent;
    text-align: center;
    padding: .45rem 0;
    border-radius: 9px;
    color: var(--s-ink-2);
    transition: background-color .15s linear, color .15s linear;
}

.tm-appointment .ui-datepicker .ui-state-default:hover { background: var(--t-cream); color: var(--s-ink); }

.tm-appointment .ui-datepicker .ui-state-active,
.tm-appointment .ui-datepicker .ui-state-highlight {
    background: var(--s-orange) !important;
    color: #fff !important;
}

.tm-appointment .ui-datepicker th { color: var(--s-ink-3); font-weight: 600; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fm-form .form-control,
    .fm-form .form-select { transition: none !important; }
}