/* ================================================================
   DukanKSA — Email Account Wizard supplementary styles
   Extends inline wizard styles in index.php
   ================================================================ */

/* Responsive additions not in inline block */
@media (max-width: 640px) {
    .wizard-container { padding: 0 12px; }
    .wiz-progress { gap: 8px; }
    .wiz-h2 { font-size: 19px; }
    .wiz-total-amount { font-size: 22px; }
}

/* Email input focus */
.wiz-email-row input:focus {
    outline: 2px solid #0F766E;
    outline-offset: 2px;
    border-color: #0F766E;
    box-shadow: 0 0 0 3px rgba(13,148,136,.2);
}

/* ── Unicode Bidirectional Algorithm: auto-detect per paragraph ──
   Applies unicode-bidi: plaintext to mixed-content elements so each
   paragraph determines its own direction from the first strong character.
   This fixes Arabic+English mixed text rendering in RTL contexts.
   Ref: W3C Internationalization / Unicode Annex #9 */
.wiz-plan-select option,
.wiz-field-label,
.wiz-subtitle,
.wiz-h2,
.wiz-plans-link,
.wiz-total-label,
.wiz-summary-table td {
    unicode-bidi: plaintext;
}

/* RTL step-panel alignment with plaintext */
[dir="rtl"] .wiz-step-panel {
    text-align: start;
}
[dir="rtl"] .wiz-h2,
[dir="rtl"] .wiz-subtitle,
[dir="rtl"] .wiz-field-label,
[dir="rtl"] .wiz-plans-link,
[dir="rtl"] .wiz-total-label {
    text-align: start;
    direction: rtl;
}

/* Contact form labels: ensure right-alignment in RTL */
[dir="rtl"] .wiz-contact label {
    text-align: start;
}

/* Email preview: must remain LTR-left-aligned */
[dir="rtl"] .wiz-email-preview {
    text-align: start;
    direction: ltr;
}

/* Summary table: each cell auto-detects its own direction */
[dir="rtl"] .wiz-summary-table td:last-child {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 200px;
    direction: ltr;
    text-align: start;
}

/* Error messages: right-aligned in RTL */
[dir="rtl"] .wiz-error {
    text-align: start;
}

/* Progress labels: center-align in RTL */
[dir="rtl"] .wiz-step-dot-label {
    text-align: center;
}

/* Total row layout in RTL */
[dir="rtl"] .wiz-total-row {
    direction: rtl;
}

/* ── Remove button: logical positioning ── */
.wiz-email-row .wiz-remove-btn {
    inset-inline-end: 8px;
}

/* Placeholder rule removed: all LTR-input placeholders are now English-only.
   dir="auto" on inputs handles any future Arabic placeholders naturally. */

/* ── Navigation arrows: CSS-controlled for LTR/RTL flipping ──
   In LTR reading order: Next = rightward → , Previous = leftward ←
   In RTL reading order: Next = leftward ←  , Previous = rightward → */
.wiz-arrow-next::after {
    content: '\2192';
    margin-inline-start: 0.5em;
}
.wiz-arrow-prev::after {
    content: '\2190';
    margin-inline-end: 0.5em;
}
[dir="rtl"] .wiz-arrow-next::after {
    content: '\2190';
}
[dir="rtl"] .wiz-arrow-prev::after {
    content: '\2192';
}

/* Step dots ultra-narrow screens */
@media (max-width: 380px) {
    .wiz-step { min-width: 44px; gap: 4px; }
    .wiz-step-dot-label { font-size: 9px; }
}

/* Focus-visible for keyboard navigation */
.wiz-btn:focus-visible, .wiz-add-btn:focus-visible, .wiz-remove-btn:focus-visible,
.wiz-email-row input:focus-visible, #wiz-domain:focus-visible,
.wiz-contact input:focus-visible, .wiz-plan-select:focus-visible {
    outline: 2px solid #0F766E;
    outline-offset: 2px;
}