/* =====================================================
 * base.css — Layer 2: reusable components built from tokens.css
 * Load order: tokens.css → base.css → page CSS
 * ===================================================== */


/* =====================================================
 * 1. BUTTONS
 * ===================================================== */

.add-btn,
.checkout-submit,
.view-options-btn,
.cart-empty-cta,
.btn-primary,
.load-more-btn,
.btn-secondary,
.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    font-family: var(--font-base);
    font-size: var(--font-size-button);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    padding: 0 var(--space-5);
    height: var(--control-height);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;

    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.add-btn:focus-visible,
.checkout-submit:focus-visible,
.view-options-btn:focus-visible,
.cart-empty-cta:focus-visible,
.btn-primary:focus-visible,
.load-more-btn:focus-visible,
.btn-secondary:focus-visible,
.btn-danger-outline:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}


/* Green action button — 3D raised effect via ::before edge.
   Press translates the face down onto the edge. */
.add-btn,
.checkout-submit {
    position: relative;
    background-color: var(--color-action);
    color: var(--color-text-on-dark);
    margin-bottom: var(--action-3d-depth);
    transition: background-color 0.12s ease, transform 0.06s ease;
}

.add-btn::before,
.checkout-submit::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--action-3d-depth);
    bottom: calc(-1 * var(--action-3d-depth));
    background-color: var(--color-action-border);
    border-radius: var(--radius-md);
    z-index: -1;
}

.add-btn:hover,
.checkout-submit:hover {
    background-color: var(--color-action-hover);
}

.add-btn:active,
.checkout-submit:active {
    transform: translateY(var(--action-3d-depth));
}


/* Primary blue button */
.view-options-btn,
.cart-empty-cta,
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-on-dark);
    transition: background-color 0.12s ease;
}

.view-options-btn:hover,
.cart-empty-cta:hover,
.view-options-btn:active,
.cart-empty-cta:active,
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--color-primary-hover);
}


/* Secondary outline button */
.btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border);
    font-weight: var(--weight-semibold);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn-secondary:hover {
    background-color: var(--color-bg);
    border-color: var(--color-text-placeholder);
}


/* Danger outline button */
.btn-danger-outline {
    background-color: var(--color-surface);
    color: var(--color-danger);
    border: var(--border-width) solid var(--color-danger);
    font-weight: var(--weight-semibold);
    transition: background-color 0.12s ease;
}

.btn-danger-outline:hover {
    background-color: var(--color-danger-soft);
}


/* Disabled state — flat grey, no pointer, no green 3D edge */
.add-btn:disabled,
.checkout-submit:disabled,
.view-options-btn[aria-disabled="true"],
.cart-empty-cta[aria-disabled="true"],
.btn-secondary:disabled,
.btn-danger-outline:disabled,
.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: var(--color-border);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
    pointer-events: none;
}

.add-btn:disabled::before,
.checkout-submit:disabled::before {
    display: none;
}

.add-btn:disabled,
.checkout-submit:disabled {
    margin-bottom: 0;
    transform: none;
}


/* Loading state — spinner replaces label, width locked.
   Outline buttons (.btn-secondary, .btn-danger-outline)
   are not included; the white-on-dark spinner wouldn't show. */
.add-btn.is-loading,
.checkout-submit.is-loading,
.view-options-btn.is-loading,
.cart-empty-cta.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.add-btn.is-loading::after,
.checkout-submit.is-loading::after,
.view-options-btn.is-loading::after,
.cart-empty-cta.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5em;
    height: 1.5em;
    margin-top: -0.75em;
    margin-left: -0.75em;
    border: 3px solid var(--color-text-on-dark);
    border-top-color: transparent;
    border-radius: var(--radius-pill);
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =====================================================
 * 2. INPUTS / FORM CONTROLS
 * ===================================================== */

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    font-family: var(--font-base);
    font-size: var(--font-size-input);
    /* 14px — +1px vs body on mobile */
    line-height: var(--line-height-base);
    color: var(--color-text);

    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);

    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-input,
.form-select {
    height: var(--control-height);
    padding: 0 var(--space-3);
}

.form-textarea {
    min-height: calc(var(--control-height) * 2);
    padding: var(--space-3);
    resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
    /* Firefox dims placeholders by default; restore */
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.form-input-error {
    border-color: var(--color-danger);
}

.form-input-error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--color-bg);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
}


/* Select arrow — inline SVG (color hardcoded because
   background-image URLs can't read CSS variables; value = --color-text-secondary). */
.form-select {
    padding-inline-end: calc(var(--space-3) * 2 + 1em);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1em 1em;
}


.form-field {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-base);
    font-size: var(--font-size-form-label);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.form-required {
    color: var(--color-danger);
    margin-inline-start: var(--space-1);
}

.form-optional {
    color: var(--color-text-placeholder);
    font-weight: var(--weight-regular);
    font-size: var(--font-size-form-hint);
    margin-inline-start: var(--space-2);
}

.form-hint {
    margin-top: var(--space-2);
    font-size: var(--font-size-form-hint);
    color: var(--color-text-muted);
}

.form-hint-warning {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: var(--font-size-form-hint);
}

.form-error-text {
    margin-top: var(--space-2);
    font-size: var(--font-size-form-hint);
    color: var(--color-danger);
}


/* RTL — flip select arrow to the left side */
[dir="rtl"] .form-select {
    background-position: left var(--space-3) center;
}

/* Global select arrow — single source of truth so EVERY <select> shares the
   same chevron (same SVG/size/position as .form-select and the product form).
   Class-scoped selects (.form-select, product-form, orders period) keep their
   own identical block via higher specificity; this only reaches selects that
   would otherwise show the browser's native arrow. */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1em 1em;
    padding-inline-end: calc(var(--space-3) * 2 + 1em);
}

[dir="rtl"] select {
    background-position: left var(--space-3) center;
}

/* Phone numbers read left-to-right (digits + "+212" prefix), so keep tel
   fields LTR — but align them to the start (right) side in RTL like every
   other field, instead of the browser's default left. */
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}


/* =====================================================
 * 3. CARDS
 * ===================================================== */

.card {
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    box-sizing: border-box;
}

.card--empty {
    border-style: dashed;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.card-title {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-h2);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.card-footer {
    margin-top: var(--space-3);
}


/* =====================================================
 * 4. MODALS
 * ===================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.modal[hidden] {
    display: none !important;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.modal__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
}

.modal__panel--sm {
    max-width: 360px;
}

.modal__panel--lg {
    max-width: 720px;
}

.modal__panel--xl {
    max-width: 960px;
}


.modal__close {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    z-index: 1;

    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.modal__close:hover {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.modal__close:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}


.modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    padding-block-end: var(--space-3);
    padding-inline-end: calc(var(--space-5) + 2.5rem);
    /* reserve room for close button */
}

.modal__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-h1);
}

.modal__icon--danger {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.modal__icon--success {
    background-color: var(--color-success-soft);
    color: var(--color-success);
}

.modal__icon--info {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.modal__title {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--font-size-h1);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.modal__body {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-secondary);
    font-family: var(--font-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
}

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-block-start: var(--border-width) solid var(--color-border);
}


@media (max-width: 600px) {

    .modal__panel,
    .modal__panel--sm,
    .modal__panel--lg,
    .modal__panel--xl {
        max-width: 100%;
    }

    .modal__footer {
        flex-direction: column-reverse;
    }

    .modal__footer .add-btn,
    .modal__footer .checkout-submit,
    .modal__footer .view-options-btn,
    .modal__footer .cart-empty-cta,
    .modal__footer .btn-secondary,
    .modal__footer .btn-danger-outline {
        width: 100%;
    }
}


/* =====================================================
 * 5. BADGES + DISCOUNT TAG
 * ===================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    font-family: var(--font-base);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-semibold);
    line-height: var(--line-height-tight);
    white-space: nowrap;

    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    box-sizing: border-box;
}

/* Dot inherits text color via currentColor.
   Don't combine with .badge--delivered (white dot on green = invisible). */
.badge--with-dot::before {
    content: "";
    flex-shrink: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background-color: currentColor;
}

.badge--new {
    background-color: var(--badge-new-bg);
    color: var(--badge-new-text);
}

.badge--preparing {
    background-color: var(--badge-preparing-bg);
    color: var(--badge-preparing-text);
}

.badge--shipped {
    background-color: var(--badge-shipped-bg);
    color: var(--badge-shipped-text);
}

.badge--delivered {
    background-color: var(--badge-delivered-bg);
    color: var(--badge-delivered-text);
}

.badge--returned {
    background-color: var(--badge-returned-bg);
    color: var(--badge-returned-text);
}

.badge--cancelled {
    background-color: var(--badge-cancelled-bg);
    color: var(--badge-cancelled-text);
}

.badge--bankpend {
    background-color: var(--badge-bankpend-bg);
    color: var(--badge-bankpend-text);
}


/* Discount tag — slanted ribbon shape via clip-path */
.discount-tag {
    display: inline-block;
    background-color: var(--color-danger);
    color: var(--color-text-on-dark);
    font-family: var(--font-base);
    font-size: var(--font-size-helper);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
    clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 100% 50%, calc(100% - 0.5rem) 100%, 0 100%);
}

[dir="rtl"] .discount-tag {
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    clip-path: polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%);
}


/* =====================================================
 * 6. CSS RESET + BASE BODY + RTL FONT SWAP
 * ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ul,
ol,
dl,
dd {
    margin: 0;
}

ul,
ol {
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--line-height-tight);
}

[hidden] {
    display: none !important;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body {
    font-family: var(--font-arabic);
}

img,
picture,
video,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}