/* Desktop-preserving helpers: mobile redesign activates only below 700px. */
.mobile-only,
.mobile-medical-mark,
.patient-response-page .response-header,
.patient-response-page .response-ready-badge {
    display: none;
}

.desktop-only { display: inline; }

/*
 * Mobile UI v1 - Visit project
 * Visual direction: mint/teal medical app, rounded cards, soft surfaces.
 * Desktop styles are intentionally untouched.
 */

@media (max-width: 700px) {
    .mobile-only { display: inline; }
    .desktop-only,
    .desktop-response-title { display: none !important; }
    .mobile-medical-mark { display: block; }
    .patient-response-page .response-header { display: grid; }
    .patient-response-page .response-ready-badge { display: inline-flex; }

    :root {
        --ui-primary: #08bf9d;
        --ui-primary-dark: #07977f;
        --ui-primary-soft: #dff8ef;
        --ui-primary-pale: #f1fbf7;
        --ui-ink: #173247;
        --ui-muted: #7b8c96;
        --ui-border: #e2efea;
        --ui-surface: #ffffff;
        --ui-bg: #eef7f3;
        --ui-shadow: 0 14px 36px rgba(27, 74, 67, .10);
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 12% 8%, rgba(111, 225, 199, .22), transparent 28%),
            var(--ui-bg);
        color: var(--ui-ink);
    }

    /* ------------------------------------------------------------
       Mobile horizontal overflow hard-fix
       Keeps the visit request page locked to the viewport width.
       ------------------------------------------------------------ */
    .visit-form-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
    }

    .visit-form-page .container,
    .visit-form-page .form-card,
    .visit-form-page #visitForm,
    .visit-form-page .row,
    .visit-form-page .form-group,
    .visit-form-page .visit-type-section,
    .visit-form-page .visit-type-grid,
    .visit-form-page .visit-type-option,
    .visit-form-page .visit-type-card,
    .visit-form-page .doctor-grid,
    .visit-form-page .doctor-choice,
    .visit-form-page .doctor-card,
    .visit-form-page .doctor-card-head,
    .visit-form-page .doctor-card-head > span,
    .visit-form-page .doctor-fee-wrap,
    .visit-form-page .selected-price-summary,
    .visit-form-page .voice-box,
    .visit-form-page .voice-buttons,
    .visit-form-page .upload-queue,
    .visit-form-page .upload-item,
    .visit-form-page .upload-item-top,
    .visit-form-page .help {
        min-width: 0;
        max-width: 100%;
    }

    .visit-form-page input,
    .visit-form-page textarea,
    .visit-form-page select,
    .visit-form-page audio,
    .visit-form-page #medicalFiles {
        max-width: 100%;
        min-width: 0;
    }

    .visit-form-page .doctor-name,
    .visit-form-page .doctor-specialty,
    .visit-form-page .doctor-service-note,
    .visit-form-page .doctor-fee,
    .visit-form-page .selected-price-summary span,
    .visit-form-page .selected-price-summary strong {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .visit-form-page .doctor-service-note {
        width: auto;
        white-space: normal;
    }

    .visit-form-page .voice-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .visit-form-page .voice-btn {
        flex: 1 1 120px;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
    }

    .visit-form-page #medicalFiles {
        overflow: hidden;
    }


    body,
    input,
    textarea,
    select,
    button {
        font-family: IRANSans, Tahoma, Arial, sans-serif !important;
    }

    input,
    textarea,
    select,
    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-medical-mark {
        width: 58px;
        height: 58px;
        border-radius: 19px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 10px 24px rgba(7, 103, 87, .12);
        position: relative;
        flex: 0 0 58px;
    }

    .mobile-medical-mark::before,
    .mobile-medical-mark::after {
        content: "";
        position: absolute;
        background: var(--ui-primary);
        border-radius: 999px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .mobile-medical-mark::before { width: 27px; height: 4px; }
    .mobile-medical-mark::after  { width: 4px; height: 27px; }

    /* ------------------------------------------------------------
       Visit request form
       ------------------------------------------------------------ */
    .visit-form-page .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 26px;
    }

    .visit-form-page .form-card {
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .visit-form-page .form-header {
        min-height: 218px;
        margin: 0;
        padding: 38px 24px 70px;
        border-radius: 0 0 38px 38px;
        background: linear-gradient(135deg, #62dfca 0%, #12c8a6 58%, #04b891 100%);
        color: #103a3a;
        position: relative;
        text-align: right;
        display: grid;
        grid-template-columns: 1fr 58px;
        grid-template-areas:
            "title icon"
            "subtitle icon";
        align-items: center;
        column-gap: 16px;
        box-shadow: 0 16px 36px rgba(7, 139, 113, .16);
    }

    .visit-form-page .form-header .mobile-medical-mark { grid-area: icon; justify-self: end; }

    .visit-form-page .form-header h1 {
        grid-area: title;
        margin: 0 0 5px;
        color: #12384a;
        font-size: clamp(23px, 6.2vw, 30px);
        font-weight: 800;
        line-height: 1.5;
    }

    .visit-form-page .form-header p {
        grid-area: subtitle;
        margin: 0;
        color: rgba(17, 59, 65, .72);
        font-size: 13px;
        line-height: 2;
        max-width: 260px;
    }

    .visit-form-page #visitForm {
        width: calc(100% - 24px);
        margin: -40px auto 0;
        padding: 22px 16px 18px;
        border-radius: 34px;
        background: rgba(255,255,255,.98);
        box-shadow: var(--ui-shadow);
        position: relative;
        z-index: 2;
    }

    .visit-form-page .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 22px 0 14px;
        padding: 0;
        border: 0;
        color: var(--ui-ink);
        font-size: 18px;
        font-weight: 800;
    }

    .visit-form-page .section-title::before {
        content: "";
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--ui-primary);
        box-shadow: 0 0 0 8px var(--ui-primary-soft);
        margin-inline: 7px 2px;
        flex: 0 0 auto;
    }

    .visit-form-page .row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .visit-form-page .form-group {
        margin-bottom: 14px;
        min-width: 0;
    }

    .visit-form-page label {
        margin: 0 4px 7px;
        color: #294350;
        font-size: 13px;
        font-weight: 700;
    }

    .visit-form-page input:not([type="file"]),
    .visit-form-page textarea,
    .visit-form-page select {
        min-height: 54px;
        padding: 14px 15px;
        border: 1px solid var(--ui-border);
        border-radius: 15px;
        background: linear-gradient(180deg, #fbfefd, #f4fbf8);
        color: var(--ui-ink);
        font-size: 14px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .visit-form-page input:not([type="file"]):focus,
    .visit-form-page textarea:focus,
    .visit-form-page select:focus {
        border-color: rgba(8, 191, 157, .65);
        box-shadow: 0 0 0 4px rgba(8, 191, 157, .10);
    }

    .visit-form-page textarea {
        min-height: 116px;
        line-height: 1.9;
    }

    .visit-form-page .voice-box {
        padding: 16px;
        border: 1px solid var(--ui-border);
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff, #f6fcfa);
        text-align: center;
    }

    .visit-form-page .voice-btn {
        min-width: 122px;
        min-height: 44px;
        margin: 4px;
        padding: 10px 14px;
        border-radius: 14px;
        background: var(--ui-primary-soft);
        color: var(--ui-primary-dark);
        font-weight: 700;
    }

    .visit-form-page #startRecord {
        background: linear-gradient(135deg, #10cba7, #05b991);
        color: white;
        box-shadow: 0 8px 18px rgba(7, 177, 143, .20);
    }

    .visit-form-page #recordStatus {
        margin-top: 10px;
        color: var(--ui-muted);
        font-size: 12px;
        line-height: 1.8;
    }

    .visit-form-page audio {
        border-radius: 16px;
        background: #f2f7f5;
    }

    .visit-form-page #medicalFiles {
        display: block;
        width: 100%;
        min-height: 96px;
        padding: 14px;
        border: 1.5px dashed rgba(8, 191, 157, .72);
        border-radius: 20px;
        background: #fbfffd;
        color: var(--ui-muted);
        font-size: 12px;
        cursor: pointer;
    }

    .visit-form-page #medicalFiles::file-selector-button {
        border: 0;
        border-radius: 12px;
        padding: 10px 14px;
        margin-inline-end: 10px;
        background: var(--ui-primary-soft);
        color: var(--ui-primary-dark);
        font-family: inherit;
        font-weight: 700;
    }

    .visit-form-page .upload-queue {
        gap: 9px;
        margin-top: 10px;
    }

    .visit-form-page .upload-item {
        padding: 11px;
        border-color: var(--ui-border);
        border-radius: 15px;
        background: #fbfefd;
    }

    .visit-form-page .upload-item-top {
        gap: 6px;
        margin-bottom: 8px;
    }

    .visit-form-page .upload-name {
        font-size: 12px;
        line-height: 1.8;
        color: #28434e;
    }

    .visit-form-page .upload-track {
        height: 6px;
        background: #e3efeb;
    }

    .visit-form-page .upload-bar {
        background: linear-gradient(90deg, #09b994, #55d8c0);
    }

    .visit-form-page .upload-remove {
        border-radius: 10px;
        background: #f1f6f4;
    }

    .visit-form-page .help {
        margin: 8px 4px 0;
        color: #87979d;
        font-size: 11px;
        line-height: 2;
    }

    .visit-form-page .submit-btn {
        min-height: 58px;
        margin-top: 8px;
        border-radius: 18px;
        background: linear-gradient(90deg, #09b996, #06c9a1);
        box-shadow: 0 12px 25px rgba(6, 176, 140, .22);
        font-size: 16px;
        font-weight: 800;
    }

    .visit-form-page .submit-btn:active { transform: translateY(1px) scale(.995); }
    .visit-form-page .submit-status { color: var(--ui-muted); }

    /* ------------------------------------------------------------
       Doctor case panel
       ------------------------------------------------------------ */
    .doctor-case-page .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 28px;
    }

    .doctor-case-page .top-bar {
        min-height: 210px;
        margin: 0 0 -36px;
        padding: 36px 20px 68px;
        border-radius: 0 0 38px 38px;
        background: linear-gradient(135deg, #62dfca, #10c4a2 60%, #04b78f);
        display: grid;
        grid-template-columns: 76px 1fr 58px;
        gap: 12px;
        align-items: start;
        box-shadow: 0 16px 36px rgba(7, 139, 113, .16);
    }

    .doctor-case-page .top-bar-title {
        text-align: center;
        align-self: center;
    }

    .doctor-case-page .top-bar h1 {
        margin: 0;
        color: #12384a;
        font-size: clamp(21px, 5.8vw, 28px);
        line-height: 1.55;
        font-weight: 800;
    }

    .doctor-case-page .top-bar-title p {
        margin: 4px 0 0;
        color: rgba(17, 59, 65, .70);
        font-size: 12px;
        line-height: 1.8;
    }

    .doctor-case-page .back-link {
        align-self: center;
        justify-self: start;
        padding: 8px 9px;
        border-radius: 12px;
        color: #174b4a;
        background: rgba(255,255,255,.20);
        font-size: 12px;
        white-space: nowrap;
    }

    .doctor-case-page .top-bar .mobile-medical-mark {
        align-self: center;
        justify-self: end;
    }

    .doctor-case-page .card {
        width: calc(100% - 24px);
        margin: 14px auto;
        padding: 18px 15px;
        border: 1px solid rgba(222, 238, 232, .75);
        border-radius: 28px;
        box-shadow: var(--ui-shadow);
        background: rgba(255,255,255,.98);
        position: relative;
        z-index: 2;
    }

    .doctor-case-page .top-bar + .card { margin-top: 0; }

    .doctor-case-page h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        color: var(--ui-ink);
        font-size: 18px;
        font-weight: 800;
    }

    .doctor-case-page h2::before,
    .doctor-case-page .section-title::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--ui-primary);
        box-shadow: 0 0 0 7px var(--ui-primary-soft);
        margin-inline: 7px 2px;
        flex: 0 0 auto;
    }

    .doctor-case-page .patient-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .doctor-case-page .info-item {
        min-height: 82px;
        padding: 12px;
        border: 1px solid var(--ui-border);
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff, #f8fcfa);
    }

    .doctor-case-page .label {
        margin-bottom: 5px;
        color: #95a2a8;
        font-size: 11px;
    }

    .doctor-case-page .value {
        color: #29434f;
        font-size: 13px;
        line-height: 1.8;
        font-weight: 600;
    }

    .doctor-case-page .section {
        margin-top: 17px;
        padding-top: 16px;
        border-color: #edf4f1;
    }

    .doctor-case-page .section-title {
        display: flex;
        align-items: center;
        gap: 9px;
        color: var(--ui-ink);
        font-size: 15px;
        font-weight: 800;
    }

    .doctor-case-page .description-box,
    .doctor-case-page .previous-response {
        padding: 14px;
        border: 1px solid var(--ui-border);
        border-radius: 16px;
        background: #fbfefd;
        color: #52666e;
        line-height: 2;
        font-size: 13px;
    }

    .doctor-case-page audio {
        width: 100%;
        margin-top: 8px;
        border-radius: 16px;
        background: #f1f7f5;
    }

    .doctor-case-page .document-item {
        padding: 11px 12px;
        border: 1px solid var(--ui-border);
        border-radius: 14px;
        background: #fbfefd;
    }

    .doctor-case-page .document-item span {
        color: #344e59;
        font-size: 12px;
        line-height: 1.8;
    }

    .doctor-case-page .document-item a {
        padding: 7px 10px;
        border-radius: 10px;
        background: var(--ui-primary-soft);
        color: var(--ui-primary-dark);
        font-size: 11px;
        font-weight: 700;
    }

    .doctor-case-page .status {
        padding: 7px 12px;
        border-radius: 999px;
        background: var(--ui-primary-soft);
        color: var(--ui-primary-dark);
        font-size: 12px;
        font-weight: 700;
    }

    .doctor-case-page .status-form {
        gap: 9px;
    }

    .doctor-case-page select,
    .doctor-case-page textarea {
        padding: 13px 14px;
        border: 1px solid var(--ui-border);
        border-radius: 15px;
        background: #fbfefd;
        color: var(--ui-ink);
    }

    .doctor-case-page textarea { min-height: 128px; line-height: 1.9; }

    .doctor-case-page button {
        min-height: 44px;
        border-radius: 14px;
        background: linear-gradient(135deg, #10c5a3, #06b790);
        font-weight: 700;
        box-shadow: 0 8px 18px rgba(7, 177, 143, .14);
    }

    .doctor-case-page .voice-box {
        padding: 14px;
        border-color: var(--ui-border);
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff, #f6fcfa);
    }

    .doctor-case-page .voice-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .doctor-case-page .record-status {
        color: var(--ui-muted);
        line-height: 1.8;
    }

    .doctor-case-page .send-button {
        min-height: 58px;
        border-radius: 18px;
        background: linear-gradient(90deg, #09b996, #06c9a1);
        font-size: 15px;
        font-weight: 800;
    }

    .doctor-case-page .response-date,
    .doctor-case-page .small-info {
        color: #87979d;
        line-height: 1.8;
    }

    /* ------------------------------------------------------------
       Patient response page
       ------------------------------------------------------------ */
    .patient-response-page .container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 0 28px;
    }

    .patient-response-page .response-header {
        min-height: 220px;
        padding: 38px 24px 70px;
        border-radius: 0 0 38px 38px;
        background: linear-gradient(135deg, #62dfca, #10c4a2 60%, #04b78f);
        display: grid;
        grid-template-columns: 1fr 58px;
        grid-template-areas:
            "title icon"
            "subtitle icon";
        column-gap: 15px;
        align-items: center;
        box-shadow: 0 16px 36px rgba(7, 139, 113, .16);
    }

    .patient-response-page .response-header h1 {
        grid-area: title;
        margin: 0;
        color: #12384a;
        font-size: 28px;
        line-height: 1.5;
        font-weight: 800;
    }

    .patient-response-page .response-header p {
        grid-area: subtitle;
        margin: 3px 0 0;
        color: rgba(17, 59, 65, .72);
        font-size: 13px;
        line-height: 2;
    }

    .patient-response-page .response-header .mobile-medical-mark {
        grid-area: icon;
        justify-self: end;
    }

    .patient-response-page .card {
        width: calc(100% - 24px);
        margin: -38px auto 0;
        padding: 20px 16px;
        border: 1px solid rgba(222, 238, 232, .75);
        border-radius: 32px;
        background: rgba(255,255,255,.99);
        box-shadow: var(--ui-shadow);
        position: relative;
        z-index: 2;
    }

    .patient-response-page .response-ready-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 14px;
        padding: 7px 12px;
        border-radius: 999px;
        background: var(--ui-primary-soft);
        color: var(--ui-primary-dark);
        font-size: 11px;
        font-weight: 700;
    }

    .patient-response-page .response-ready-badge::before {
        content: "✓";
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--ui-primary);
        color: white;
        font-size: 11px;
    }

    .patient-response-page .info {
        margin-bottom: 9px;
        padding: 13px 14px;
        border: 1px solid var(--ui-border);
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff, #f8fcfa);
        color: #29434f;
        font-size: 14px;
        line-height: 1.8;
    }

    .patient-response-page .label {
        margin-bottom: 4px;
        color: #95a2a8;
        font-size: 11px;
    }

    .patient-response-page .response-box {
        margin-top: 15px;
        padding: 16px;
        border: 1px solid var(--ui-border);
        border-radius: 20px;
        background: #fbfefd;
    }

    .patient-response-page .response-box::before {
        content: "پاسخ پزشک";
        display: block;
        margin-bottom: 10px;
        color: var(--ui-ink);
        font-size: 16px;
        font-weight: 800;
    }

    .patient-response-page .response-box p {
        margin: 0;
        color: #4f636c;
        font-size: 14px;
        line-height: 2.15;
    }

    .patient-response-page audio {
        width: 100%;
        margin-top: 15px;
        border-radius: 16px;
        background: #f0f7f4;
    }
}

@media (max-width: 390px) {
    .doctor-case-page .patient-grid {
        grid-template-columns: 1fr;
    }

    .doctor-case-page .top-bar {
        grid-template-columns: 64px 1fr 50px;
        padding-inline: 14px;
    }

    .mobile-medical-mark {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        flex-basis: 50px;
    }
}