/* =========================================================
   Market UI v2 — Choices Component
   Path: public/assets/marketv2/components/choices/choices.css

   الهدف من هذا الملف:
   ---------------------------------------------------------
   هذا الملف هو طبقة العرض والبنية لمكوّن Choices.

   العائلات المدعومة:
   - .m-check
   - .m-radio
   - .m-switch

   ويدعم:
   - native input preservation
   - labels / hints / groups
   - sizes: sm / md / lg
   - states: hover / focus-visible / checked / disabled
   - helper states: .is-invalid / .is-disabled / .is-readonly

   هذا الملف لا يحتوي على:
   ✘ business logic
   ✘ readonly logic
   ✘ check-all logic
   ✘ route logic
   ✘ theme resolution logic
   ✘ slot mapping logic

   ملاحظات معمارية:
   ---------------------------------------------------------
   - هذا الملف يستهلك choice contract فقط
   - لا يجب ربطه مباشرة بألوان خام
   - أي تخصيص لون أو حالة يجب أن يمر عبر:
     preset → component variables → context override → instance override

   علاقة هذا الملف بالمعمارية العامة:
   ---------------------------------------------------------
   Choices هو المرجع الرسمي لعناصر الاختيار داخل النظام:
   checkbox / radio / switch / grouped choices
========================================================= */


/* =========================================================
   1) BASE FAMILY
========================================================= */

.m-check,
.m-radio,
.m-switch {
    --choice-bg: var(--choice_default_bg);
    --choice-text: var(--choice_default_text);
    --choice-border: var(--choice_default_border);

    --choice-hover-bg: var(--choice_default_hover_bg);
    --choice-hover-text: var(--choice_default_hover_text);
    --choice-hover-border: var(--choice_default_hover_border);

    --choice-disabled-bg: var(--choice_default_disabled_bg);
    --choice-disabled-text: var(--choice_default_disabled_text);
    --choice-disabled-border: var(--choice_default_disabled_border);

    --choice-local-gap: var(--m-choice-gap-md);
    --choice-local-label-size: var(--m-choice-label-font-size-md);
    --choice-local-check-radio-min-h: var(--m-choice-min-height-check-radio-md);
    --choice-local-switch-min-h: var(--m-choice-min-height-switch-md);

    --choice-local-checkbox-size: var(--m-choice-checkbox-size-md);
    --choice-local-radio-size: var(--m-choice-radio-size-md);
    --choice-local-radio-dot-size: var(--m-choice-radio-dot-size-md);
    --choice-local-check-icon-size: var(--m-choice-check-icon-size-md);

    --choice-local-switch-track-width: var(--m-choice-switch-track-width-md);
    --choice-local-switch-track-height: var(--m-choice-switch-track-height-md);
    --choice-local-switch-thumb-size: var(--m-choice-switch-thumb-size-md);
    --choice-local-switch-thumb-offset: var(--m-choice-switch-thumb-offset-md);

    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: var(--choice-local-gap);
    max-width: 100%;
    min-width: 0;

    cursor: pointer;
    user-select: none;
    color: var(--choice-text);
}

.m-check,
.m-radio {
    min-height: var(--choice-local-check-radio-min-h);
}

.m-switch {
    min-height: var(--choice-local-switch-min-h);
}

.m-check,
.m-radio,
.m-switch,
.m-check__content,
.m-radio__content,
.m-switch__content,
.m-choice-group,
.m-choice-group__items {
    min-width: 0;
}


/* =========================================================
   2) NATIVE INPUT
========================================================= */

.m-check__input,
.m-radio__input,
.m-switch__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}


/* =========================================================
   3) CONTENT
========================================================= */

.m-check__content,
.m-radio__content,
.m-switch__content {
    min-width: 0;
    flex: 1 1 auto;
}

.m-check__label,
.m-radio__label,
.m-switch__label {
    display: block;
    margin: 0;

    font-size: var(--choice-local-label-size);
    font-weight: var(--m-choice-label-font-weight);
    line-height: var(--m-choice-label-line-height);
    color: inherit;

    word-break: break-word;
}

.m-choice__label-row {
    align-items: flex-start;
}

.m-check__hint,
.m-radio__hint,
.m-switch__hint {
    display: block;
    margin-top: var(--m-choice-hint-gap);

    font-size: var(--m-choice-hint-font-size);
    line-height: var(--m-choice-hint-line-height);
    color: var(--choice_hint_text);

    word-break: break-word;
}


/* =========================================================
   4) CHECKBOX
========================================================= */

.m-check__box {
    position: relative;
    flex: 0 0 auto;

    inline-size: var(--choice-local-checkbox-size);
    block-size: var(--choice-local-checkbox-size);

    border-radius: var(--m-choice-checkbox-radius);
    border: var(--m-field-border-width) solid var(--choice_checkbox_border);
    background: var(--choice_checkbox_bg);

    transition:
        background-color var(--m-choice-transition-base),
        border-color var(--m-choice-transition-base),
        box-shadow var(--m-choice-transition-base),
        transform var(--m-choice-transition-fast);
}

.m-check__icon {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--choice-local-check-icon-size);
    line-height: 1;
    color: var(--choice_checkbox_icon);

    opacity: 0;
    transform: scale(.7);

    transition:
        opacity var(--m-choice-transition-fast),
        transform var(--m-choice-transition-fast);
}

@media (hover: hover) {
    .m-check:hover .m-check__box {
        background: var(--choice_checkbox_hover_bg);
        border-color: var(--choice_checkbox_hover_border);
    }
}

.m-check__input:checked + .m-check__box {
    background: var(--choice_checkbox_checked_bg);
    border-color: var(--choice_checkbox_checked_border);
}

.m-check__input:checked + .m-check__box .m-check__icon {
    opacity: 1;
    transform: scale(1);
}

.m-check__input:focus {
    outline: none;
}

.m-check__input:focus-visible + .m-check__box {
    box-shadow: var(--m-choice-focus-shadow);
    border-color: var(--choice_focus_border);
}


/* =========================================================
   5) RADIO
========================================================= */

.m-radio__box {
    position: relative;
    flex: 0 0 auto;

    inline-size: var(--choice-local-radio-size);
    block-size: var(--choice-local-radio-size);

    border-radius: var(--m-choice-radio-radius);
    border: var(--m-field-border-width) solid var(--choice_radio_border);
    background: var(--choice_radio_bg);

    transition:
        background-color var(--m-choice-transition-base),
        border-color var(--m-choice-transition-base),
        box-shadow var(--m-choice-transition-base),
        transform var(--m-choice-transition-fast);
}

.m-radio__dot {
    position: absolute;
    inset: 50% auto auto 50%;

    inline-size: var(--choice-local-radio-dot-size);
    block-size: var(--choice-local-radio-dot-size);

    border-radius: 999px;
    background: var(--choice_radio_dot);

    transform: translate(-50%, -50%) scale(.5);
    opacity: 0;

    transition:
        opacity var(--m-choice-transition-fast),
        transform var(--m-choice-transition-fast);
}

@media (hover: hover) {
    .m-radio:hover .m-radio__box {
        background: var(--choice_radio_hover_bg);
        border-color: var(--choice_radio_hover_border);
    }
}

.m-radio__input:checked + .m-radio__box {
    background: var(--choice_radio_checked_bg);
    border-color: var(--choice_radio_checked_border);
}

.m-radio__input:checked + .m-radio__box .m-radio__dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.m-radio__input:focus {
    outline: none;
}

.m-radio__input:focus-visible + .m-radio__box {
    box-shadow: var(--m-choice-focus-shadow);
    border-color: var(--choice_focus_border);
}


/* =========================================================
   6) SWITCH
========================================================= */

.m-switch__track {
    position: relative;
    flex: 0 0 auto;

    inline-size: var(--choice-local-switch-track-width);
    block-size: var(--choice-local-switch-track-height);

    border-radius: var(--m-choice-switch-radius);
    border: var(--m-field-border-width) solid var(--choice_switch_border);
    background: var(--choice_switch_bg);

    transition:
        background-color var(--m-choice-transition-base),
        border-color var(--m-choice-transition-base),
        box-shadow var(--m-choice-transition-base);
}

.m-switch__thumb {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;

    inline-size: var(--choice-local-switch-thumb-size);
    block-size: var(--choice-local-switch-thumb-size);

    border-radius: var(--m-choice-switch-thumb-radius);
    background: var(--choice_switch_thumb_bg);
    box-shadow: var(--choice_switch_thumb_shadow);

    transition:
        transform var(--m-choice-transition-base),
        background-color var(--m-choice-transition-base);
}

@media (hover: hover) {
    .m-switch:hover .m-switch__track {
        background: var(--choice_switch_hover_bg);
        border-color: var(--choice_switch_hover_border);
    }
}

.m-switch__input:checked + .m-switch__track {
    background: var(--choice_switch_checked_bg);
    border-color: var(--choice_switch_checked_border);
}

.m-switch__input:checked + .m-switch__track .m-switch__thumb {
    transform: translateX(var(--choice-local-switch-thumb-offset));
}

[dir="rtl"] .m-switch__input:checked + .m-switch__track .m-switch__thumb {
    transform: translateX(calc(var(--choice-local-switch-thumb-offset) * -1));
}

.m-switch__input:focus {
    outline: none;
}

.m-switch__input:focus-visible + .m-switch__track {
    box-shadow: var(--m-choice-focus-shadow);
    border-color: var(--choice_focus_border);
}


/* =========================================================
   7) INVALID STATE
========================================================= */

.m-check.is-invalid .m-check__box,
.m-radio.is-invalid .m-radio__box,
.m-switch.is-invalid .m-switch__track {
    border-color: var(--choice_invalid_border);
    box-shadow: 0 0 0 var(--m-field-focus-width) var(--choice_invalid_ring);
}


/* =========================================================
   8) DISABLED / READONLY
========================================================= */

.m-check__input:disabled + .m-check__box,
.m-radio__input:disabled + .m-radio__box,
.m-switch__input:disabled + .m-switch__track,
.m-check.is-disabled .m-check__box,
.m-radio.is-disabled .m-radio__box,
.m-switch.is-disabled .m-switch__track,
.m-check.is-readonly .m-check__box,
.m-radio.is-readonly .m-radio__box,
.m-switch.is-readonly .m-switch__track {
    background: var(--choice-disabled-bg);
    border-color: var(--choice-disabled-border);
    cursor: not-allowed;
}

.m-check__input:disabled ~ .m-check__content,
.m-radio__input:disabled ~ .m-radio__content,
.m-switch__input:disabled ~ .m-switch__content,
.m-check.is-disabled .m-check__content,
.m-radio.is-disabled .m-radio__content,
.m-switch.is-disabled .m-switch__content,
.m-check.is-readonly .m-check__content,
.m-radio.is-readonly .m-radio__content,
.m-switch.is-readonly .m-switch__content {
    color: var(--choice-disabled-text);
}

.m-check__input:disabled ~ *,
.m-radio__input:disabled ~ *,
.m-switch__input:disabled ~ * {
    pointer-events: none;
}

.m-check.is-disabled,
.m-radio.is-disabled,
.m-switch.is-disabled,
.m-check.is-readonly,
.m-radio.is-readonly,
.m-switch.is-readonly {
    cursor: not-allowed;
}

.m-check.is-disabled,
.m-radio.is-disabled,
.m-switch.is-disabled {
    opacity: var(--m-choice-state-disabled-opacity);
}

.m-check.is-readonly,
.m-radio.is-readonly,
.m-switch.is-readonly {
    opacity: var(--m-choice-state-readonly-opacity);
}


/* =========================================================
   9) SIZES
========================================================= */

.m-choice-sm.m-check,
.m-choice-sm.m-radio,
.m-choice-sm.m-switch {
    --choice-local-gap: var(--m-choice-gap-sm);
    --choice-local-label-size: var(--m-choice-label-font-size-sm);
    --choice-local-check-radio-min-h: var(--m-choice-min-height-check-radio-sm);
    --choice-local-switch-min-h: var(--m-choice-min-height-switch-sm);

    --choice-local-checkbox-size: var(--m-choice-checkbox-size-sm);
    --choice-local-radio-size: var(--m-choice-radio-size-sm);
    --choice-local-radio-dot-size: var(--m-choice-radio-dot-size-sm);
    --choice-local-check-icon-size: var(--m-choice-check-icon-size-sm);

    --choice-local-switch-track-width: var(--m-choice-switch-track-width-sm);
    --choice-local-switch-track-height: var(--m-choice-switch-track-height-sm);
    --choice-local-switch-thumb-size: var(--m-choice-switch-thumb-size-sm);
    --choice-local-switch-thumb-offset: var(--m-choice-switch-thumb-offset-sm);
}

.m-choice-lg.m-check,
.m-choice-lg.m-radio,
.m-choice-lg.m-switch {
    --choice-local-gap: var(--m-choice-gap-lg);
    --choice-local-label-size: var(--m-choice-label-font-size-lg);
    --choice-local-check-radio-min-h: var(--m-choice-min-height-check-radio-lg);
    --choice-local-switch-min-h: var(--m-choice-min-height-switch-lg);

    --choice-local-checkbox-size: var(--m-choice-checkbox-size-lg);
    --choice-local-radio-size: var(--m-choice-radio-size-lg);
    --choice-local-radio-dot-size: var(--m-choice-radio-dot-size-lg);
    --choice-local-check-icon-size: var(--m-choice-check-icon-size-lg);

    --choice-local-switch-track-width: var(--m-choice-switch-track-width-lg);
    --choice-local-switch-track-height: var(--m-choice-switch-track-height-lg);
    --choice-local-switch-thumb-size: var(--m-choice-switch-thumb-size-lg);
    --choice-local-switch-thumb-offset: var(--m-choice-switch-thumb-offset-lg);
}


/* =========================================================
   10) GROUPS
========================================================= */

.m-choice-group {
    display: flex;
    flex-direction: column;
    gap: var(--m-choice-group-gap);
    min-width: 0;
}

.m-choice-group__label {
    margin: 0;

    font-size: var(--m-choice-group-label-font-size);
    font-weight: var(--m-choice-group-label-font-weight);
    line-height: var(--m-choice-group-label-line-height);
    color: var(--choice_group_label_text);

    word-break: break-word;
}

.m-choice-group__hint {
    margin: -4px 0 0;

    font-size: var(--m-choice-group-hint-font-size);
    line-height: var(--m-choice-group-hint-line-height);
    color: var(--choice_group_hint_text);

    word-break: break-word;
}

.m-choice-group__items {
    display: flex;
    flex-direction: column;
    gap: var(--m-choice-group-items-gap);
}

.m-choice-group--inline .m-choice-group__items {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--m-choice-group-inline-gap);
}

.m-choice-group--stack .m-choice-group__items {
    flex-direction: column;
}

.m-choice-group--segmented,
.m-choice-group--cards {
    --choice-group-option-min-height: var(--m-choice-group-option-min-height-md);
    --choice-group-option-padding-x: var(--m-choice-group-option-padding-x-md);
}

.m-choice-group--sm {
    --choice-group-option-min-height: var(--m-choice-group-option-min-height-sm);
    --choice-group-option-padding-x: var(--m-choice-group-option-padding-x-sm);
}

.m-choice-group--lg {
    --choice-group-option-min-height: var(--m-choice-group-option-min-height-lg);
    --choice-group-option-padding-x: var(--m-choice-group-option-padding-x-lg);
}

.m-choice-group--segmented .m-choice-group__items {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: var(--m-choice-group-segment-gap);
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: var(--m-choice-group-segment-padding);
    border: var(--m-field-border-width) solid var(--m-choice-group-border);
    border-radius: calc(var(--m-choice-group-segment-radius) + var(--m-choice-group-segment-padding));
    background: var(--m-choice-group-bg);
    box-shadow: var(--m-choice-group-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

.m-choice-group--segmented .m-choice-group__items::-webkit-scrollbar {
    display: none;
}

.m-choice-group--block .m-choice-group__items {
    inline-size: 100%;
}

.m-choice-group--block .m-choice-group__option {
    flex: 1 1 0;
}

.m-choice-group--cards .m-choice-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--m-choice-group-items-gap);
}

.m-choice-group--inline .m-choice-group__option,
.m-choice-group--stack .m-choice-group__option,
.m-choice-group--cards .m-choice-group__option,
.m-choice-group--segmented .m-choice-group__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-choice-group-option-gap);
    min-inline-size: 0;
    min-block-size: var(--choice-group-option-min-height, var(--m-choice-group-option-min-height-md));
    padding-inline: var(--choice-group-option-padding-x, var(--m-choice-group-option-padding-x-md));
    border: var(--m-field-border-width) solid var(--m-choice-group-option-border);
    border-radius: var(--m-choice-group-option-radius);
    background: var(--m-choice-group-option-bg);
    color: var(--m-choice-group-option-text);
    font: inherit;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    appearance: none;
    transition:
        background-color var(--m-choice-transition-base),
        border-color var(--m-choice-transition-base),
        color var(--m-choice-transition-base),
        box-shadow var(--m-choice-transition-base),
        transform var(--m-choice-transition-fast);
}

.m-choice-group--cards .m-choice-group__option {
    justify-content: flex-start;
    text-align: start;
    white-space: normal;
}

.m-choice-group__option-text {
    display: inline-flex;
    flex-direction: column;
    align-items: inherit;
    justify-content: center;
    min-inline-size: 0;
    max-inline-size: 100%;
    gap: 2px;
}

.m-choice-group__option-label {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--m-choice-group-option-label-font-size);
    font-weight: var(--m-choice-group-option-label-font-weight);
    line-height: 1.2;
    color: inherit;
}

.m-choice-group__option-hint {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--m-choice-group-option-hint-font-size);
    line-height: var(--m-choice-group-option-hint-line-height);
    color: currentColor;
    opacity: .76;
}

.m-choice-group__option i,
.m-choice-group__option svg {
    flex: 0 0 auto;
    color: inherit;
}

@media (hover: hover) {
    .m-choice-group__option:hover {
        background: var(--m-choice-group-option-hover-bg);
        color: var(--m-choice-group-option-hover-text);
        border-color: var(--m-choice-group-option-hover-border);
    }
}

.m-choice-group__option:focus {
    outline: none;
}

.m-choice-group__option:focus-visible {
    outline: none;
    box-shadow: var(--m-choice-focus-shadow);
    border-color: var(--choice_focus_border);
}

.m-choice-group__option.is-active,
.m-choice-group__option[aria-checked="true"],
.m-choice-group__option[aria-pressed="true"] {
    background: var(--m-choice-group-option-selected-bg);
    color: var(--m-choice-group-option-selected-text);
    border-color: var(--m-choice-group-option-selected-border);
}

.m-choice-group__option:active {
    transform: translateY(1px);
}

.m-choice-group__option:disabled,
.m-choice-group__option.is-disabled,
.m-choice-group.is-disabled .m-choice-group__option {
    background: var(--m-choice-group-option-disabled-bg);
    color: var(--m-choice-group-option-disabled-text);
    border-color: var(--m-choice-group-option-disabled-border);
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .m-choice-group--segmented .m-choice-group__items {
        inline-size: 100%;
    }

    .m-choice-group--segmented .m-choice-group__option {
        flex: 1 1 0;
        padding-inline: max(10px, calc(var(--choice-group-option-padding-x, 16px) - 4px));
    }
}


/* =========================================================
   11) REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .m-check__box,
    .m-check__icon,
    .m-radio__box,
    .m-radio__dot,
    .m-switch__track,
    .m-switch__thumb,
    .m-choice-group__option {
        transition: none !important;
    }
}