/**
 * Locale-aware typography: Arabic + French need slightly larger, roomier type
 * so form fields, tables, and nav labels stay readable (matches field heights).
 */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ─── Arabic ─── */
html[lang^="ar"] body {
    font-family: "Noto Sans Arabic", "Tajawal", "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] h5,
html[lang^="ar"] h6,
html[lang^="ar"] .title-block,
html[lang^="ar"] .content-title-block {
    font-family: "Noto Sans Arabic", "Tajawal", sans-serif;
    line-height: 1.4;
}

html[lang^="ar"] .title-block {
    font-size: 15px;
}

html[lang^="ar"] label,
html[lang^="ar"] .form-label,
html[lang^="ar"] .col-form-label {
    font-size: 0.9375rem;
    line-height: 1.45;
}

html[lang^="ar"] .form-control,
html[lang^="ar"] .form-select,
html[lang^="ar"] input.form-control,
html[lang^="ar"] textarea.form-control,
html[lang^="ar"] select.form-select {
    font-size: 1rem;
    min-height: 2.65rem;
    line-height: 1.5;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

html[lang^="ar"] .input-group-text {
    font-size: 0.9375rem;
}

html[lang^="ar"] .select2-container--default .select2-selection--single {
    min-height: 2.65rem;
    padding-top: 0.35rem;
    font-size: 1rem;
}

html[lang^="ar"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.6;
    padding-top: 2px;
}

html[lang^="ar"] .select2-container--default .select2-selection--multiple {
    min-height: 2.65rem;
    font-size: 1rem;
}

html[lang^="ar"] table.dataTable tbody td,
html[lang^="ar"] table.dataTable thead th,
html[lang^="ar"] .table td,
html[lang^="ar"] .table th {
    font-size: 0.9375rem;
    line-height: 1.5;
}

html[lang^="ar"] .btn {
    font-size: 0.9375rem;
    line-height: 1.45;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

html[lang^="ar"] .nav-link,
html[lang^="ar"] .dropdown-item {
    font-size: 0.9375rem;
}

html[lang^="ar"] small,
html[lang^="ar"] .small {
    font-size: 0.875rem;
}

/* Public catalogue (body.pc-body) */
html[lang^="ar"] body.pc-body {
    font-family: "Noto Sans Arabic", "Tajawal", "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

html[lang^="ar"] body.pc-body .form-control,
html[lang^="ar"] body.pc-body .form-select,
html[lang^="ar"] body.pc-body input,
html[lang^="ar"] body.pc-body select,
html[lang^="ar"] body.pc-body textarea {
    font-size: 1rem;
    min-height: 2.65rem;
}

/* ─── French ─── */
html[lang^="fr"] body {
    font-size: 15px;
    line-height: 1.55;
    font-family: "Inter", "Source Sans 3", "Poppins", sans-serif;
}

html[lang^="fr"] .title-block {
    font-size: 15px;
}

html[lang^="fr"] label,
html[lang^="fr"] .form-label,
html[lang^="fr"] .col-form-label {
    font-size: 0.9375rem;
    line-height: 1.45;
}

html[lang^="fr"] .form-control,
html[lang^="fr"] .form-select,
html[lang^="fr"] input.form-control,
html[lang^="fr"] textarea.form-control,
html[lang^="fr"] select.form-select {
    font-size: 1rem;
    min-height: 2.55rem;
    line-height: 1.45;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

html[lang^="fr"] .select2-container--default .select2-selection--single {
    min-height: 2.55rem;
    padding-top: 0.3rem;
    font-size: 1rem;
}

html[lang^="fr"] .select2-container--default .select2-selection--multiple {
    min-height: 2.55rem;
    font-size: 1rem;
}

html[lang^="fr"] table.dataTable tbody td,
html[lang^="fr"] table.dataTable thead th,
html[lang^="fr"] .table td,
html[lang^="fr"] .table th {
    font-size: 0.9375rem;
}

html[lang^="fr"] .btn {
    font-size: 0.9375rem;
}

html[lang^="fr"] body.pc-body {
    font-size: 15px;
    line-height: 1.55;
    font-family: "Source Sans 3", "Plus Jakarta Sans", sans-serif;
}

html[lang^="fr"] body.pc-body .form-control,
html[lang^="fr"] body.pc-body .form-select,
html[lang^="fr"] body.pc-body input,
html[lang^="fr"] body.pc-body select,
html[lang^="fr"] body.pc-body textarea {
    font-size: 1rem;
    min-height: 2.55rem;
}

/* ═══ Shared UX: focus, wrapping, RTL layout balance ═══ */

html[lang^="ar"] .form-control,
html[lang^="ar"] .form-select,
html[lang^="fr"] .form-control,
html[lang^="fr"] .form-select {
    text-overflow: ellipsis;
}

html[lang^="ar"] .form-control:focus,
html[lang^="ar"] .form-select:focus,
html[lang^="fr"] .form-control:focus,
html[lang^="fr"] .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 81, 123, 0.18);
    border-color: #00517b;
    outline: none;
}

html[lang^="ar"] .container-content,
html[lang^="fr"] .container-content {
    text-wrap: pretty;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

html[dir="rtl"] .container-content {
    margin-left: 0;
    margin-right: 58px;
    padding-left: 20px;
    padding-right: 11px;
}

/* Long labels / Arabic justification */
html[lang^="ar"] label,
html[lang^="ar"] .form-label {
    text-align: right;
}

html[lang^="ar"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

html[lang^="ar"] .form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

/* Toasts & alerts: comfortable line length */
html[lang^="ar"] .toast,
html[lang^="ar"] .alert,
html[lang^="fr"] .toast,
html[lang^="fr"] .alert {
    line-height: 1.55;
    font-size: 0.9375rem;
}

/* Modals */
html[lang^="ar"] .modal-body,
html[lang^="fr"] .modal-body {
    line-height: 1.6;
}

/* Touch targets on small screens */
@media (max-width: 991.98px) {
    html[lang^="ar"] .btn:not(.btn-sm):not(.btn-xs),
    html[lang^="fr"] .btn:not(.btn-sm):not(.btn-xs) {
        min-height: 44px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[lang^="ar"] .form-control,
    html[lang^="ar"] .form-select,
    html[lang^="fr"] .form-control,
    html[lang^="fr"] .form-select {
        transition: none;
    }
}

/* Public catalogue: don’t clip RTL search / cart labels */
html[dir="rtl"][lang^="ar"] body.pc-body .pc-header-shell,
html[dir="rtl"][lang^="ar"] body.pc-body .pc-filter-dropdown-trigger {
    letter-spacing: 0.01em;
}