/* ===========================================================
   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; }
}

/* ---------- 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 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; }