/* Medica Clinic — Form UI polish and customer customization layer. */
.mc-appointment-wrap {
    padding: clamp(42px, 6vw, 84px) 0;
}

/* Do not let the Jalali picker get clipped by the appointment shell. */
.mc-form-card-head > div {
    min-width: 0;
}
.mc-form-card-head small {
    display: block;
    margin-top: 4px;
    color: var(--mc-muted);
    font-size: 10px;
    line-height: 1.7;
}

.mc-appointment {
    overflow: visible !important;
    position: relative;
    background: var(--mc-appointment-bg);
    background-image: radial-gradient(circle at 88% 10%, var(--mc-appointment-accent), transparent 32%), linear-gradient(145deg, var(--mc-appointment-bg), var(--mc-background));
    border: 1px solid color-mix(in srgb, var(--mc-border) 78%, transparent);
    box-shadow: 0 24px 70px rgba(31, 61, 100, .10);
    align-items: stretch;
}

.mc-appointment__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--mc-form-text);
}
.mc-appointment__content h2 {
    color: var(--mc-form-label);
}
.mc-appointment__content p {
    color: var(--mc-muted);
}
.mc-appointment__meta {
    color: var(--mc-form-text);
}
.mc-appointment-trust span {
    border-color: color-mix(in srgb, var(--mc-form-button-bg) 12%, var(--mc-border));
    background: rgba(255,255,255,.72);
    color: var(--mc-form-text);
}

.mc-appointment__panel,
.mc-stage6-booking-form,
.mc-contact-form,
.mc-tracking-card,
.mc-booking-page-card {
    background: var(--mc-form-panel-bg) !important;
    color: var(--mc-form-text);
    border-color: var(--mc-form-field-border) !important;
    box-shadow: 0 18px 50px rgba(31, 61, 100, .08);
}

.mc-appointment__panel {
    border-radius: 26px;
    padding: clamp(22px, 3vw, 32px);
}

.mc-appointment__panel label,
.mc-stage6-booking-form label,
.mc-contact-form label,
.mc-tracking-form .mc-field > span {
    color: var(--mc-form-label) !important;
}

.mc-appointment__panel input,
.mc-appointment__panel select,
.mc-appointment__panel textarea,
.mc-stage6-booking-form input,
.mc-stage6-booking-form select,
.mc-stage6-booking-form textarea,
.mc-contact-form input,
.mc-contact-form select,
.mc-contact-form textarea,
.mc-tracking-form input {
    background: var(--mc-form-field-bg) !important;
    color: var(--mc-form-text) !important;
    border-color: var(--mc-form-field-border) !important;
}

.mc-appointment__panel input:hover,
.mc-appointment__panel select:hover,
.mc-appointment__panel textarea:hover,
.mc-stage6-booking-form input:hover,
.mc-stage6-booking-form select:hover,
.mc-stage6-booking-form textarea:hover,
.mc-contact-form input:hover,
.mc-contact-form select:hover,
.mc-contact-form textarea:hover,
.mc-tracking-form input:hover {
    background: var(--mc-background) !important;
}

.mc-appointment__panel input:focus,
.mc-appointment__panel select:focus,
.mc-appointment__panel textarea:focus,
.mc-stage6-booking-form input:focus,
.mc-stage6-booking-form select:focus,
.mc-stage6-booking-form textarea:focus,
.mc-contact-form input:focus,
.mc-contact-form select:focus,
.mc-contact-form textarea:focus,
.mc-tracking-form input:focus {
    background: var(--mc-background) !important;
    border-color: var(--mc-form-button-bg) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc-form-button-bg) 13%, transparent) !important;
}

.mc-appointment__panel .mc-btn,
.mc-stage6-booking-form .mc-btn,
.mc-contact-form .mc-btn,
.mc-tracking-form .mc-btn {
    background: var(--mc-form-button-bg) !important;
    color: var(--mc-form-button-text) !important;
}

.mc-appointment__panel .mc-date-field {
    z-index: 30;
}
.mc-appointment__panel .mc-jalali-picker {
    z-index: 9999;
}

/* Neutral date picker surface that remains legible over both sections. */
.mc-jalali-picker {
    background: var(--mc-background) !important;
    border-color: var(--mc-form-field-border) !important;
    box-shadow: 0 24px 70px rgba(17, 43, 79, .16), 0 2px 8px rgba(17,43,79,.05) !important;
}
.mc-jalali-picker__nav {
    background: var(--mc-form-field-bg) !important;
    border-color: var(--mc-form-field-border) !important;
}
.mc-jalali-picker__today {
    background: color-mix(in srgb, var(--mc-teal) 11%, var(--mc-background)) !important;
    color: var(--mc-teal) !important;
}

.mc-jalali-picker--above,
.mc-date-field--above .mc-jalali-picker {
    top: auto !important;
    bottom: calc(100% + 9px) !important;
}

.mc-availability {
    background: color-mix(in srgb, var(--mc-form-field-bg) 88%, transparent) !important;
    border-color: var(--mc-form-field-border) !important;
}

@media (max-width: 960px) {
    .mc-form-card-head > div {
    min-width: 0;
}
.mc-form-card-head small {
    display: block;
    margin-top: 4px;
    color: var(--mc-muted);
    font-size: 10px;
    line-height: 1.7;
}

.mc-appointment {
        gap: 32px;
        padding: clamp(24px, 5vw, 40px);
    }
}

@media (max-width: 720px) {
    .mc-appointment,
    .mc-appointment__panel,
    .mc-stage6-booking-form,
    .mc-contact-form {
        border-radius: 22px;
    }
    .mc-appointment__panel {
        padding: 20px;
    }
    .mc-jalali-picker {
        width: min(340px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

@media (max-width: 440px) {
    .mc-appointment-wrap {
        padding-inline: 0;
    }
    .mc-form-card-head > div {
    min-width: 0;
}
.mc-form-card-head small {
    display: block;
    margin-top: 4px;
    color: var(--mc-muted);
    font-size: 10px;
    line-height: 1.7;
}

.mc-appointment {
        margin-inline: -1px;
        padding: 18px;
        border-radius: 20px;
    }
    .mc-appointment__panel {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mc-appointment *,
    .mc-appointment *::before,
    .mc-appointment *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Stage 27.1 UI hardening: labels, full-width slots and confirmation. */
.mc-stage6-booking-form label > span,
.mc-appointment__panel label > span,
.mc-contact-form label > span,
.mc-tracking-form .mc-field > span {
    display:block;
    margin-bottom:8px;
    color:var(--mc-form-label, var(--mc-ink));
    font-size:11px;
    font-weight:900;
    line-height:1.6;
}
.mc-stage6-booking-form input,
.mc-stage6-booking-form select,
.mc-stage6-booking-form textarea,
.mc-appointment__panel input,
.mc-appointment__panel select,
.mc-appointment__panel textarea,
.mc-contact-form input,
.mc-contact-form select,
.mc-contact-form textarea {
    font-size:13px;
}
.mc-stage6-booking-form .mc-availability-wrap,
.mc-appointment__panel .mc-availability-wrap {
    grid-column:1/-1;
    width:100%;
    min-width:0;
}
.mc-stage6-booking-form .mc-availability,
.mc-appointment__panel .mc-availability {
    width:100%;
    margin-top:0;
    padding:15px 16px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(247,251,255,.98),rgba(241,247,253,.94));
    border:1px solid var(--mc-form-field-border,#dfe7f0);
}
.mc-stage6-booking-form .mc-availability__slots,
.mc-appointment__panel .mc-availability__slots {
    width:100%;
    min-width:0;
    gap:10px;
    margin-top:10px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:8px;
}
.mc-stage6-booking-form .mc-availability-slot,
.mc-appointment__panel .mc-availability-slot {
    flex:0 0 92px;
    min-width:92px;
    min-height:42px;
    border-radius:12px;
}
.mc-date-field .mc-jalali-picker {
    max-height:min(460px,calc(100vh - 32px));
    overflow:auto;
}
.mc-appointment-confirmation {
    min-height:70vh;
    background:radial-gradient(circle at 15% 15%,rgba(10,166,168,.08),transparent 24%),radial-gradient(circle at 85% 10%,rgba(23,105,224,.10),transparent 28%),linear-gradient(180deg,#f7fbff 0%,#fff 65%);
}
.mc-confirmation-card {
    width:min(760px,100%);
    margin:35px auto 0;
    padding:clamp(24px,4vw,42px);
    border:1px solid #dfe8f1;
    border-radius:28px;
    background:rgba(255,255,255,.96);
    box-shadow:0 25px 70px rgba(17,43,79,.10);
}
.mc-confirmation-card--error{text-align:center}
.mc-confirmation-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.mc-confirmation-card h1{margin:4px 0 8px;color:var(--mc-ink);font-size:clamp(26px,4vw,38px);line-height:1.35}
.mc-confirmation-card__head p{margin:0;color:var(--mc-muted);line-height:1.9}
.mc-confirmation-icon{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;border-radius:17px;background:linear-gradient(135deg,var(--mc-primary),var(--mc-teal));color:#fff;font-size:24px;font-weight:900;box-shadow:0 12px 28px rgba(23,105,224,.18)}
.mc-confirmation-code{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px;padding:16px 18px;border:1px dashed #a9cdbf;border-radius:18px;background:#f3fcf8}
.mc-confirmation-code span{color:#517568;font-size:11px;font-weight:800}
.mc-confirmation-code code{direction:ltr;unicode-bidi:plaintext;padding:8px 12px;border-radius:10px;background:#fff;color:#137a4b;border:1px solid #cde9de;font:700 15px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}
.mc-confirmation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.mc-confirmation-grid>div{padding:15px 16px;border:1px solid #e6edf4;border-radius:16px;background:#fbfdff}
.mc-confirmation-grid span,.mc-confirmation-grid strong{display:block}
.mc-confirmation-grid span{color:#7a8897;font-size:9px}
.mc-confirmation-grid strong{margin-top:5px;color:var(--mc-ink);font-size:13px}
.mc-confirmation-note{margin-top:18px;padding:14px 16px;border-radius:15px;background:#f7faff;color:#647386;font-size:11px;line-height:1.9}
.mc-confirmation-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mc-confirmation-actions .mc-btn{flex:1 1 180px;text-align:center}
@media(max-width:620px){
 .mc-confirmation-card{margin-top:20px;padding:20px;border-radius:22px}
 .mc-confirmation-card__head{flex-direction:column-reverse}
 .mc-confirmation-code{flex-direction:column;align-items:flex-start}
 .mc-confirmation-grid{grid-template-columns:1fr}
 .mc-confirmation-actions{flex-direction:column}
 .mc-confirmation-actions .mc-btn{width:100%}
}