/* ===========================================================
   Arabic / RTL layer for the Step1Kids storefront.
   Loaded LAST so it wins over the theme's LTR rules.
   Removing this file + its <link> restores the original look.
   =========================================================== */

:root {
    /* ONE font for the whole site. To try another, change this line only
       (and the matching Google Fonts <link> in layouts/app.blade.php):
       'Beiruti' · 'Tajawal' · 'Readex Pro' · 'Cairo' · 'IBM Plex Sans Arabic' */
    --ar-font: 'Beiruti', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- Typography: one family everywhere ---------- */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th, label, small, strong, b, em, div,
input, select, textarea, button,
.btn, .form-control, .form--control,
.navbar-brand, .logo, .title, .card-title,
.section-heading__title, .price, .amount {
    font-family: var(--ar-font) !important;
}

body {
    line-height: 1.8;
    letter-spacing: 0;
}

/* headings keep their weight, just a calmer rhythm */
h1, h2, h3, h4, h5, h6 { line-height: 1.5; }

/* tabular numerals so prices line up */
.price, .amount, .product-price, .total, del, ins, [data-price] {
    font-feature-settings: "tnum";
}

/* ---------- Product card: let long names breathe ----------
   The theme clamps the title to a single line, so most of our product
   names were cut off. Two lines + a reserved height keeps every card
   the same height while showing far more of the name. */
.shop-block-one .inner-box .lower-content h4 {
    font-size: 16px;
    line-height: 26px;
}

.shop-block-one .inner-box .lower-content h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 52px;          /* 2 lines × 26px — cards stay aligned */
    white-space: normal;
    word-break: break-word;
}

@media screen and (max-width: 575px) {
    .shop-block-one .inner-box .lower-content h4 { font-size: 15px; line-height: 24px; }
    .shop-block-one .inner-box .lower-content h4 a { min-height: 48px; }
}

/* same treatment anywhere else a product name is clamped to one line */
.product-item__title a,
.cart-product__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Hero banner: was ~1950px tall, pushing products far below the fold ---------- */
.banner-section,
.banner-section .banner-carousel,
.banner-section .slide-item,
.banner-section .image-layer {
    max-height: 620px;
}

.banner-section .slide-item,
.banner-section .content-box {
    min-height: auto;
}

@media screen and (max-width: 991px) {
    .banner-section,
    .banner-section .slide-item,
    .banner-section .image-layer { max-height: 420px; }
}

@media screen and (max-width: 575px) {
    .banner-section,
    .banner-section .slide-item,
    .banner-section .image-layer { max-height: 320px; }
}

/* ---------- Phone numbers / emails ----------
   "010 70340002" contains a space, so the bidi algorithm treats it as two runs
   and renders them right-to-left ("70340002 010"). Isolating them as LTR keeps
   the number readable. */
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .phone-number,
html[dir="rtl"] .contact-info li a {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ---------- Mega menu (القائمة المنسدلة الكبيرة) ----------
   The theme forces `text-align:left` on the links and indents the column
   headings with padding-left, so in RTL every heading sat far to the right of
   its own items. The promo panel is pinned right with a matching 360px
   padding-right; mirroring both keeps the columns and the panel apart. */
html[dir="rtl"] .main-menu .navigation > li > .megamenu li > a,
html[dir="rtl"] .main-menu .navigation > li > ul > li > a,
html[dir="rtl"] .mobile-menu .navigation > li > .megamenu li > a {
    text-align: right;
}

html[dir="rtl"] .main-menu .navigation li.dropdown .megamenu li h5 {
    padding-left: 0;
    padding-right: 16px;
}

html[dir="rtl"] .main-menu .navigation > li.dropdown > .megamenu {
    padding-right: 50px;
    padding-left: 360px;
}

html[dir="rtl"] .main-menu .navigation > li.dropdown > .megamenu .advice-box {
    right: auto;
    left: 0;
    border-radius: 10px 0 0 10px;
}

/* The menu lists every category now, so let the columns share the row instead of
   being locked to a fixed Bootstrap width — 4 categories fill one row, and more
   only wrap once a column would get too narrow to read. */
.main-menu .navigation > li.dropdown > .megamenu > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.main-menu .navigation > li.dropdown > .megamenu > .row > .column {
    flex: 1 1 0;
    min-width: 165px;
    max-width: none;
    margin-bottom: 18px;
}

@media screen and (max-width: 991px) {
    .main-menu .navigation > li.dropdown > .megamenu > .row > .column {
        flex-basis: 45%;
    }
}

.main-menu .navigation li.dropdown .megamenu li h5 a {
    color: inherit;
}

.main-menu .navigation li.dropdown .megamenu li h5 a:hover {
    color: hsl(var(--base));
}

/* plain dropdowns hang from the correct edge */
html[dir="rtl"] .main-menu .navigation > li > ul {
    left: auto;
    right: 0;
    text-align: right;
}

/* keep a latin word inside an Arabic label from being reordered */
html[dir="rtl"] .megamenu li > a,
html[dir="rtl"] .megamenu li h5,
html[dir="rtl"] .navigation li > a {
    unicode-bidi: plaintext;
}

/* ---------- Banner decorations: mirror them for RTL ----------
   The shapes are absolutely positioned for the LTR layout (text on the left,
   photo on the right). After flipping the site the text moved to the right and
   the flower (anim-icon-18) and rocket (anim-icon-20) landed on top of it.
   Mirroring left <-> right puts every shape back beside the photo. */
html[dir="rtl"] .banner-section .anim-icon .anim-icon-13 { left: auto; right: 280px; }
html[dir="rtl"] .banner-section .anim-icon .anim-icon-14 { left: auto; right: 50%; }
html[dir="rtl"] .banner-section .anim-icon .anim-icon-15 { right: auto; left: 47px; }
html[dir="rtl"] .banner-section .anim-icon .anim-icon-16 { left: auto; right: 52px; }
/* 17 mirrors straight into the middle of the text column, so drop it below the copy */
html[dir="rtl"] .banner-section .anim-icon .anim-icon-17 { left: auto; right: 511px; bottom: 25px; }
html[dir="rtl"] .banner-section .anim-icon .anim-icon-18 { left: auto; right: 57%; }
html[dir="rtl"] .banner-section .anim-icon .anim-icon-19 { right: auto; left: 136px; }
html[dir="rtl"] .banner-section .anim-icon .anim-icon-20 { right: auto; left: 50px; }

/* the text column always sits above the decorations */
html[dir="rtl"] .banner-section .content-box,
html[dir="rtl"] .banner-section .content-box * {
    position: relative;
    z-index: 10;
}

/* on small screens the shapes only add clutter over the text */
@media screen and (max-width: 991px) {
    .banner-section .anim-icon [class*="anim-icon-"] { display: none; }
}

/* ---------- Colour swatches: show the name under each one ---------- */
.product-details__color-box-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.product-details__color-box-wrapper .title {
    font-size: 12px;
    line-height: 1.4;
    color: hsl(var(--body-color, 220 9% 46%));
    white-space: nowrap;
}

/* ---------- Brands carousel ---------- */
.brands-style-two .brand-carousel .brands-block-two {
    margin-bottom: 0;
}

/* the chips are short, so keep every slide the same height */
.brands-style-two .brand-carousel .owl-item .inner-box {
    height: 100%;
}

.brands-style-two .brand-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

/* Arrows: copied rule-for-rule from `.popular-product .owl-nav` in main.css so the
   brands carousel looks identical to the product carousels — a coloured circle
   pinned to each side of the strip rather than two icons sitting together. */
.brands-style-two .brand-carousel {
    position: relative;
}

.brands-style-two .brand-carousel .owl-nav {
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
}

.brands-style-two .brand-carousel .owl-nav button {
    --size: 36px;   /* main.css shrinks the product arrows to 36px below 1400px */
    width: var(--size);
    height: var(--size);
    font-size: calc(var(--size) * 0.6);
    line-height: 1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--white));
    background-color: hsl(var(--base));
    position: absolute;
    top: 50%;
    margin: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-box-shadow: 0px 0px 3px 0px hsl(var(--black)/0.1);
    box-shadow: 0px 0px 3px 0px hsl(var(--black)/0.1);
    transition: all .3s ease;
}

.brands-style-two .brand-carousel .owl-nav button:hover,
.brands-style-two .brand-carousel .owl-nav button:focus {
    color: hsl(var(--base));
    background-color: hsl(var(--white));
}

/* same -9px overhang the product carousels end up with at this breakpoint */
.brands-style-two .brand-carousel .owl-nav button.owl-prev {
    left: calc(var(--size) * -0.25);
    right: auto;
}

.brands-style-two .brand-carousel .owl-nav button.owl-next {
    right: calc(var(--size) * -0.25);
    left: auto;
}

@media only screen and (max-width: 1199px) {
    .brands-style-two .brand-carousel .owl-nav {
        display: none;   /* same as the product carousels — swipe works on touch */
    }
}

/* ---------- Brands without a logo: a tidy name chip, not a grey placeholder ---------- */
.brands-block-two.no-logo .inner-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 14px 18px;
    border: 1px solid hsl(var(--black, 0 0% 0%) / 0.08);
    border-radius: 14px;
    background: #fff;
    transition: all .25s ease;
}

.brands-block-two.no-logo .inner-box:hover {
    border-color: hsl(var(--base, 210 70% 30%) / 0.35);
    transform: translateY(-2px);
}

.brands-block-two.no-logo h6 {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

/* ---------- Mobile: make small buttons comfortable to tap ---------- */
@media (hover: none) and (pointer: coarse) {
    .btn, .btn--sm, .product-item a.btn, .lower-content .btn {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .product-details__color-box,
    .form--radio.size-buttons label {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ---------- Direction ---------- */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* latin brand names / codes / prices stay left-to-right inside Arabic text */
.ltr, .brand-name, .sku-text, [dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* ---------- Bits the theme hard-codes to the left ---------- */
html[dir="rtl"] .text-start  { text-align: right !important; }
html[dir="rtl"] .text-end    { text-align: left  !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end   { float: left  !important; }

html[dir="rtl"] .dropdown-menu {
    text-align: right;
    right: 0;
    left: auto;
}

/* carousels keep their own LTR maths — flip only the slide contents */
html[dir="rtl"] .owl-carousel,
html[dir="rtl"] .slick-slider { direction: ltr; }
html[dir="rtl"] .owl-carousel .owl-item,
html[dir="rtl"] .slick-slider .slick-slide { direction: rtl; }

/* selects: arrow on the correct side */
html[dir="rtl"] .form--control.attribute-selector,
html[dir="rtl"] select.form-control,
html[dir="rtl"] select.form--control {
    padding-right: 12px;
    padding-left: 38px;
    background-position: left 0.75rem center;
}

html[dir="rtl"] .input-group > .form-control,
html[dir="rtl"] .input-group > .form--control { text-align: right; }

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1);
    display: inline-block;
}

html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 0; }

html[dir="rtl"] .product-item__badge,
html[dir="rtl"] .badge-corner { right: auto; left: 10px; }

html[dir="rtl"] .product-details-info__available .form--radio,
html[dir="rtl"] .product-details__color-box { margin-left: 8px; margin-right: 0; }

html[dir="rtl"] .navbar-nav { padding-right: 0; }

html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: right; }
html[dir="rtl"] .table th:last-child,
html[dir="rtl"] .table td:last-child { text-align: left; }

/* ============================================================
   Product gallery
   The main image had no arrows and the thumbnails gave no sign of
   which one you were on, so the gallery read as a static picture.
   ============================================================ */

/* --- arrows over the main image --- */
.product-details-slider { position: relative; }

.product-details-slider .main-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1c3d8f;
    font-size: 15px;
    box-shadow: 0 2px 12px rgba(15, 30, 70, .18);
    opacity: 0;
    transition: opacity .2s ease, background .2s ease;
    cursor: pointer;
}

.product-details-slider:hover .main-slider-arrow { opacity: 1; }
.product-details-slider .main-slider-arrow:hover { background: #fff; }

/* Both sides must be stated. The theme sets .slick-prev{left:-20px} and
   .slick-next{right:-20px} globally, so setting only the side we want leaves the
   old one in place — each arrow ended up with both left and right, left won, and
   the pair sat together outside the left edge of the image. */
.product-details-slider .main-slider-arrow.slick-prev { right: 12px; left: auto; }
.product-details-slider .main-slider-arrow.slick-next { left: 12px; right: auto; }
.product-details-slider .main-slider-arrow.slick-disabled { display: none !important; }

/* Touch devices have no hover, so keep them visible there. */
@media (hover: none) {
    .product-details-slider .main-slider-arrow { opacity: .85; }
}

@media screen and (max-width: 575px) {
    .product-details-slider .main-slider-arrow { width: 34px; height: 34px; font-size: 13px; }
}

/* --- thumbnails --- */
.product-details-preview-slider .slick-slide {
    cursor: pointer;
    padding: 3px 0;
}

.product-details-preview-slider .slick-slide img {
    transition: border-color .2s ease, opacity .2s ease;
    opacity: .62;
}

.product-details-preview-slider .slick-slide:hover img { opacity: 1; }

/* Which photo you are looking at, at a glance. */
.product-details-preview-slider .slick-current img,
.product-details-preview-slider .slick-slide.slick-current img {
    opacity: 1;
    border-color: #1c3d8f !important;
    border-width: 2px !important;
}

/* The main image was free to be any shape, so the page jumped as you moved
   between a tall photo and a wide one. */
.product-details-slider .slick-slide img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    border-radius: 10px;
}

/* ============================================================
   Mobile usability
   ============================================================ */

/* The header buttons shrank to 28px on phones — cart, search and the menu
   toggle were all smaller than a fingertip. Apple asks for 44px, Material for
   48dp; 42 keeps the header compact while still being reliably tappable. */
@media screen and (max-width: 575px) {
    .main-header .option-list__btn,
    .main-header .category-toggle {
        --size: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }
    .main-header .option-list { gap: 6px !important; }
}

@media screen and (min-width: 576px) and (max-width: 1199px) {
    .main-header .option-list__btn,
    .main-header .category-toggle {
        --size: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }
}

/* The mobile drawer is built by cloning the desktop menu, which carries the
   header logo along as a list item and the mega-menu's promo box with it.
   Neither belongs in a narrow drawer — the drawer already has its own logo. */
.mobile-menu .menu-outer li > a.logo-box,
.mobile-menu .menu-outer .advice-box { display: none !important; }
.mobile-menu .menu-outer li:has(> a.logo-box) { display: none !important; }

/* Menu rows big enough to hit, and a clear line between them. */
@media screen and (max-width: 991px) {
    .mobile-menu .menu-outer .navigation > li > a {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        font-size: 16px !important;
    }
    .mobile-menu .menu-outer .megamenu h5 > a { font-size: 15px !important; }
    .mobile-menu .menu-outer .megamenu li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: block;
    }
    /* The mega-menu grid is built for a wide dropdown; stack it in the drawer. */
    .mobile-menu .menu-outer .megamenu .column { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
}

/* One language installed, so the picker is only taking up the top of the drawer. */
.mobile-menu .menu-box__body > .custom-dropdown:only-of-type:has(.custom-dropdown__list-item:only-child) { display: none; }

/* ============================================================
   Mobile reachability
   ============================================================ */

/* The theme shrinks the header buttons to 28px on phones — search, cart,
   menu — which is well under the ~44px a fingertip needs, so every tap had
   to be aimed. Keep the icon its size, give the button a real target. */
@media screen and (max-width: 991px) {
    .main-header .option-list__btn,
    .main-header .category-toggle,
    .main-header .mobile-nav-toggler {
        --size: 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .main-header .option-list {
        gap: 6px;
    }
}

@media screen and (max-width: 575px) {
    .main-header .option-list__btn,
    .main-header .category-toggle,
    .main-header .mobile-nav-toggler {
        --size: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }
    .main-header .option-list { gap: 4px; }
}

/* Links inside the mobile drawer were list-height only; a whole row is easier
   to hit than the words in it. */
@media screen and (max-width: 991px) {
    .mobile-menu .navigation > li > a {
        padding-top: 13px;
        padding-bottom: 13px;
        font-size: 16px;
    }

    .mobile-menu .navigation li .dropdown-btn {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Belt and braces: the clone strips the header's logo <li> in JS, this
       hides it if that ever fails to run. */
    .mobile-menu .navigation > li > a.logo-box {
        display: none !important;
    }
}

/* Product grid on phones: two per row with room for the name and price. */
@media screen and (max-width: 575px) {
    .shop-block-one .inner-box .lower-content {
        padding: 10px 8px 14px;
    }
    .shop-block-one .inner-box .lower-content .price {
        font-size: 15px;
    }
}