/**
 * global.css — MarketLinq global styles
 *
 * This file is loaded alongside tailwind.css and custom.css.
 * It provides site-wide typography, layout helpers, and utility
 * classes using locally hosted Arial webfonts.
 *
 * Font files are located in: web/fonts/arial-webfont/
 */

html {
    font-size: 100%;
}

html[lang="ar"] {
    direction: rtl;
}

/* ─── Local Arial @font-face declarations ────────────────────────────────── */
@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    src: local('Arial'), url('../fonts/arial-webfont/ARIAL.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    font-style: italic;
    font-weight: 400;
    src: local('Arial Italic'), url('../fonts/arial-webfont/ARIALI.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 500;
    src: local('Arial Medium'), url('../fonts/arial-webfont/ArialMdm.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    font-style: italic;
    font-weight: 500;
    src: local('Arial Medium Italic'), url('../fonts/arial-webfont/ArialMdmItl.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 700;
    src: local('Arial Bold'), url('../fonts/arial-webfont/ARIALBD.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Arial';
    font-style: italic;
    font-weight: 700;
    src: local('Arial Bold Italic'), url('../fonts/arial-webfont/ARIALBI.woff') format('woff');
    font-display: swap;
}


@font-face {
    font-family: 'Gotham';
    src: url('../fonts/gotham-medium-webfont.woff2') format('woff2'),
        url('../fonts/gotham-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Suisse Intl — Hairline (100) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Hairline.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-HairlineIt.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Thin (200) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Thin.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-ThinIt.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Light (300) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-LightIt.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Book (350) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Book.woff2') format('woff2');
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-BookIt.woff2') format('woff2');
    font-weight: 350;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Regular (400) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-RegularIt.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Medium (500) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-MediumIt.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Semibold (600) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-SemiboldIt.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Bold (700) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-BoldIt.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Suisse Intl — Black (900) */
@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse';
    src: url('../fonts/suisse-webfont/SuisseIntl-BlackIt.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* ─── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --font-arial: "Arial", Helvetica, sans-serif;
    --font-suisse: "Suisse", "Arial", Helvetica, sans-serif;
    --color-brand-primary: #E00700;
    --color-brand-secondary: #000000;
    --color-brand-tertiary: #E00900;
    --color-brand-text-dark: #000000;
    --color-brand-text-light: #ffffff;
    --color-brand-gray: #9C9C9A;
    --color-brand-green: #228745;
    --color-brand-body-back: #F5F5F5;
}

/* ─── Base reset / typography ────────────────────────────────────────────── */
html,
body {
    font-family: var(--font-suisse);
    color: var(--color-brand-text-dark);
    background-color: var(--color-brand-body-back);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-suisse);
    font-weight: 600;
}

/* Utility to ensure gradient text renders across browsers */
.text-gradient {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
button {
    font-family: var(--font-suisse);
}

/* ─── Utility classes ────────────────────────────────────────────────────── */

/* Font family utilities */
.font-arial {
    font-family: var(--font-arial) !important;
}

/* Font weight utilities */
.font-arial-regular {
    font-family: var(--font-arial);
    font-weight: 400;
}

.font-arial-medium {
    font-family: var(--font-arial);
    font-weight: 500;
}

.font-arial-semibold {
    font-family: var(--font-arial);
    font-weight: 600;
}

.font-arial-bold {
    font-family: var(--font-arial);
    font-weight: 700;
}

/* Color utilities */
.text-brand-primary {
    color: var(--color-brand-primary);
}

.text-brand-gray {
    color: var(--color-brand-gray);
}

.text-brand-dark {
    color: var(--color-brand-text-dark);
}

.text-brand-light {
    color: var(--color-brand-text-light);
}

.bg-brand-gray-light {
    background-color: var(--color-brand-gray-light);
}

.bg-brand-primary-40 {
    background-color: color-mix(in srgb, var(--color-brand-primary) 15%, transparent);
}

.bg-brand-primary-30 {
    background-color: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
}

@media (max-width: 767px) {
    .mobile-bg-transparent {
        background-color: transparent;
    }
}

/* Override Magento Lumma CSS */

.columns .column.main {
    padding-bottom: 0;
}

a:visited, .alink:visited {
    color: unset;
    text-decoration: none;
}

a:hover, .alink:hover {
    color: unset;
    text-decoration: unset;
}

button:hover,
button:focus,
button:active {
    background: unset;
    border: 1px solid transparent;  
    color: unset;
}

.page-wrapper {
    min-height: unset;
}

form .form-input-control, .addr-field .form-input-control {
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    background: #F8FAFC;
    padding: 20px;
}
.coun-field .form-input-control, .regis-filed .form-input-control, .billing-address .form-input-control{
    border: 1px solid #D8D8D8;
    border-radius: 6px;
    background: #F8FAFC;
    min-height: 42px;
    padding-left: 20px !important;
    padding: 0;
}

input[type="checkbox"] {
    width: 23px;
    height: 23px;
    appearance: none;
    -webkit-appearance: none;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    top: -1px;
    margin: 0;
}

input[type="checkbox"]:checked {
    background-color: #302B3F;
    border: 1px solid #302B3F;
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 1px;
    width: 8px;
    height: 15px;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

form .mage-error {
    font-size: 12px;
}

.page.messages {
    display: flex;
    justify-content: center;
}

.page.messages .message {
    font-size: 1rem;
    margin-top: 2rem;
    display: inline-block;
    border-radius: 6px;
}

html[lang="ar"] .subscription-nav a:first-child {
    margin-left: 2rem;
}

.checkout-index-index .page-main {
    max-width: 100%;
    padding: 0;
}