/* =========================================================================
   Cuatro website layer
   -------------------------------------------------------------------------
   Loaded ONLY by resources/views/website/layouts/app.blade.php. No dashboard
   layout references public/website assets, so nothing in this file can reach
   the Admin, School or Store dashboards.

   Keep dashboard-affecting rules out of here and out of styles.css.
   ========================================================================= */

/* ------------------------------------------------------------------ RTL --
   The bundled Bootstrap is the 5.3.2 LTR build: .ms-*, .me-*, .ps-*, .pe-*,
   .text-start / .text-end and .float-start / .float-end all compile to
   physical left/right, so they do NOT flip on Arabic pages. These rules give
   them back their logical meaning wherever the document is right-to-left.
   Scoped to [dir="rtl"], which the layout sets on <html>.
   ------------------------------------------------------------------------ */

[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left  !important; }

[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }

[dir="rtl"] .ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .25rem !important; }
[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem  !important; }
[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem   !important; }
[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-left: 0 !important; margin-right: 3rem   !important; }
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }

[dir="rtl"] .me-0 { margin-right: 0 !important; margin-left: 0 !important; }
[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .25rem !important; }
[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem  !important; }
[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem   !important; }
[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-right: 0 !important; margin-left: 3rem   !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: .25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: .5rem  !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem   !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-right: 3rem   !important; }

[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-left: 0 !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: .25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: .5rem  !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem   !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-left: 3rem   !important; }

/* Borders follow the same LTR-only pattern. */
[dir="rtl"] .border-start { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-left: 0 !important; }
[dir="rtl"] .border-end   { border-left:  var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-right: 0 !important; }

/* Only lists that actually carry a marker are re-indented. A blanket ul/ol
   rule would also hit the theme's nav, footer and menu lists, which are reset
   to zero padding on purpose. */
[dir="rtl"] .tf-page-content ul:not([class]),
[dir="rtl"] .tf-page-content ol:not([class]) {
    padding-right: 2rem;
    padding-left: 0;
}

/* Numbers, prices, phone numbers and OTP inputs must stay left-to-right even
   inside an Arabic paragraph, or the digits and separators reorder. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[inputmode="numeric"] {
    direction: ltr;
    text-align: right;
}


/* ------------------------------------------------------------ HEADER ----
   Moved out of resources/views/website/layouts/components/nav.blade.php,
   where it was re-sent inline on every page request.
   ------------------------------------------------------------------------ */

.tf-languages .dropdown {
    position: relative;
    display: inline-block;
}

.tf-languages .dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
}

.tf-languages .dropdown-menu {
    display: none;
    position: absolute;
    background: #fff;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-width: 100px;
    text-align: center;
}

.tf-languages .dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-item {
    padding: 5px 10px;
    text-decoration: none;
    display: block;
    color: #000;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: #000;
    color: #fff;
}

.tf-languages .dropdown-menu li {
    width: 100%;
}

/* The current language is shown but not clickable. */
.disabled-link {
    pointer-events: none;
    color: gray;
    font-weight: bold;
}

.nav-account {
    position: relative;
}

.nav-account .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 150px;
    z-index: 1000;
}

[dir="rtl"] .nav-account .dropdown-menu {
    right: auto;
    left: 0;
}

.nav-account:hover .dropdown-menu {
    display: block;
}

/* Wallet chip in the header. */
.nav-wallet-chip {
    background: #fc5732;
    padding: .4rem .7rem;
    border-radius: 15px;
}

.nav-wallet-chip,
.nav-wallet-chip a,
.nav-wallet-chip p {
    color: #fff;
    margin: 0;
}


/* ------------------------------------------------- SEMANTIC HEADINGS ----
   Storefront page titles were <div class="heading"> and product names were
   <h5>. They are now real headings, so the element-level type scale has to be
   pinned back to what the theme already rendered - h1 is 80px in styles.css.
   The global `* { margin: 0 }` reset already removes UA heading margins.
   ------------------------------------------------------------------------ */

.tf-page-title h1.heading {
    font-size: 42px;
    font-weight: 400;
    line-height: 50px;
}

/* Section titles promoted from <span class="title"> to <h2 class="title">. */
.flat-title h2.title {
    font-weight: inherit;
}

/* Product name, previously <h5> inside .tf-product-info-title. */
.product-title-h1 {
    font-size: 28px;
    line-height: 33.6px;
    font-weight: 400;
}

@media only screen and (max-width: 1149px) {
    .product-title-h1 {
        font-size: 26px;
        line-height: 31.2px;
    }
}

@media only screen and (max-width: 767px) {
    .tf-page-title h1.heading {
        font-size: 30px;
        line-height: 38px;
    }
}


/* ------------------------------------------------------ ACCESSIBILITY ----
   The theme removes focus outlines wholesale. Keyboard users need to see
   where they are, so the ring is restored for keyboard focus only
   (:focus-visible), which leaves mouse clicks looking unchanged.
   ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--main, #181818);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip link: first thing in the tab order, visible only once focused. */
.skip-to-content {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--main, #181818);
    color: #fff;
    text-decoration: none;
    transform: translateY(-120%);
}

.skip-to-content:focus {
    transform: translateY(0);
    color: #fff;
}

/* Respect the OS "reduce motion" setting: the theme animates on scroll. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Product card titles are now <h3 class="card-product-title"> wrapping the
   existing <a class="title link">. The heading is structural only: the link
   inside keeps the theme's type scale. */
.card-product-title {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}


/* ---------------------------------------------------------------- CART ----
   Moved out of the inline <style> in
   resources/views/website/cart/components/cart.blade.php.
   ------------------------------------------------------------------------ */

.tf-page-cart-checkout .cart-checkbox .tf-check {
    border-color: #ee4545;
}

/* The subtotal was an <h3> purely for its size. It is an <h2> now so the page
   outline reads h1 > h2, and the theme's h3 rule no longer applies to it. */
.tf-page-cart-checkout .tf-cart-totals-discounts .cart-subtotal-heading {
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
}

/* "Remove" was a <span onclick>: invisible to the keyboard and announced as
   plain text. It is a <button> now, stripped back to the theme's link look. */
.tf-cart-item .tf-cart-item_product .cart-info button.remove-cart {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

.cart-empty {
    padding: 60px 15px 80px;
}

.cart-empty .cart-empty-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 8px;
}

.cart-empty .cart-empty-text {
    color: var(--text);
    margin-bottom: 24px;
}

.cart-empty .tf-btn {
    display: inline-flex;
    padding-left: 32px;
    padding-right: 32px;
}

/* Moved out of the checkout success page's inline <style>. */
.tf-check {
    border-color: #ee4545;
}