/* الصفحة الرئيسية — الرحاب */
:root {
    --rh-yellow: #f6b01e; --rh-yellow-dark: #e09d0b; --rh-dark: #1f2329; --rh-text: #2b2f36;
    --rh-muted: #8a8f98; --rh-border: #eceef1; --rh-bg: #f5f6f8; --rh-radius: 12px;
}
.rh-home { text-align: start; background: var(--rh-bg); padding: 16px 0 32px; color: var(--rh-text); }
.rh-home *, .rh-home *::before, .rh-home *::after { box-sizing: border-box; }
.rh-container { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
.rh-section { margin-top: 36px; }
.rh-btn { border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; transition: background .2s; }
.rh-btn--yellow { background: var(--rh-yellow); color: var(--rh-dark); }
.rh-btn--yellow:hover { background: var(--rh-yellow-dark); }
.rh-link { background: none; border: 0; color: var(--rh-dark); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; }
.rh-link:hover { color: var(--rh-yellow-dark); }

/* ── Hero ── */
.rh-hero { position: relative; border-radius: 16px; overflow: hidden; background: var(--rh-dark); aspect-ratio: 1320 / 490; }
.rh-hero__track { position: absolute; inset: 0; }
.rh-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; display: block; }
.rh-hero__slide.active { opacity: 1; z-index: 1; }
.rh-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-hero__text { position: absolute; inset-inline-start: 6%; top: 50%; transform: translateY(-50%); color: #fff; max-width: 45%; }
.rh-hero__text h2 { font-size: clamp(22px, 3.2vw, 44px); font-weight: 800; margin: 0 0 8px; color: #fff; }
.rh-hero__text p { margin: 0; font-size: clamp(13px, 1.2vw, 17px); opacity: .9; }
.rh-hero__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.rh-hero__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.5); padding: 0; cursor: pointer; }
.rh-hero__dots button.active { background: #fff; width: 22px; border-radius: 6px; }

/* ── Finder ── */
.rh-finder { background: #fff; border-radius: 16px; padding: 24px; margin-top: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.04); }
.rh-finder__title { text-align: center; font-size: 22px; font-weight: 800; color: var(--rh-dark); margin: 0 0 20px; }
.rh-finder__row { display: flex; gap: 12px; }
.rh-finder__input { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--rh-bg); border-radius: 10px; padding: 0 16px; color: var(--rh-muted); }
.rh-finder__input input { flex: 1; border: 0; background: transparent; height: 48px; outline: none; font-size: 15px; color: var(--rh-text); min-width: 0; }
.rh-finder__go { width: 200px; height: 48px; font-size: 17px; }
.rh-finder__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.rh-select { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 10px; border: 1px solid var(--rh-border); border-radius: 10px; padding: 0 14px; height: 48px; color: var(--rh-text); margin: 0; }
.rh-select select { width: 100%; text-overflow: ellipsis; flex: 1; border: 0; background: transparent; height: 100%; outline: none; font-size: 14px; cursor: pointer; min-width: 0; }

.rh-results { margin-top: 24px; }
.rh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.rh-empty { text-align: center; color: var(--rh-muted); padding: 30px; grid-column: 1 / -1; }
.rh-loading { grid-column: 1 / -1; height: 40px; margin: 30px auto; width: 40px; border: 4px solid var(--rh-border); border-top-color: var(--rh-yellow); border-radius: 50%; animation: rhSpin .8s linear infinite; }
@keyframes rhSpin { to { transform: rotate(360deg); } }

/* ── Section head ── */
.rh-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.rh-section__title { font-size: 22px; font-weight: 800; color: var(--rh-dark); margin: 0; position: relative; padding-bottom: 8px; }
.rh-section__title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; height: 3px; background: var(--rh-yellow); border-radius: 2px; }
.rh-section__tools { display: flex; align-items: center; gap: 8px; }

/* ── Slider ── */
.rh-slider { position: relative; }
.rh-slider__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.rh-slider__track::-webkit-scrollbar { display: none; }
.rh-slider__track > * { scroll-snap-align: start; flex: 0 0 auto; }
.rh-slider__nav { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, opacity .2s; }
.rh-slider__nav[hidden] { display: none; }
.rh-slider__nav:disabled { opacity: .4; cursor: default; }
.rh-slider__nav::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; }
/* السهم بيشاور في اتجاه الحركة؛ في العربي "السابق" على اليمين */
.rh-slider__nav--prev::before, [data-dir="prev"]::before { transform: rotate(135deg); }
.rh-slider__nav--next::before, [data-dir="next"]::before { transform: rotate(-45deg); }
[dir="rtl"] .rh-slider__nav--prev::before, [dir="rtl"] [data-dir="prev"]::before { transform: rotate(-45deg); }
[dir="rtl"] .rh-slider__nav--next::before, [dir="rtl"] [data-dir="next"]::before { transform: rotate(135deg); }
.rh-slider__nav--square { width: 30px; height: 30px; border-radius: 6px; background: var(--rh-yellow); color: var(--rh-dark); }
.rh-slider__nav--square:hover:not(:disabled) { background: var(--rh-yellow-dark); }
.rh-slider__nav--round { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--rh-dark); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.rh-slider__nav--round:hover:not(:disabled) { background: var(--rh-yellow); }
.rh-slider__nav--round.rh-slider__nav--prev { inset-inline-start: -20px; }
.rh-slider__nav--round.rh-slider__nav--next { inset-inline-end: -20px; }

/* ── Categories: صفين، وبيتحركوا أفقي ── */
.rh-cats { --cols: 7; gap: 0; }
.rh-cats-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));  padding: 2px; align-content: start; }
.rh-cat { display: flex; flex-direction: column; align-items: center; background: #fff; border: 1px solid var(--rh-border);  padding: 12px 8px 10px; text-align: center; text-decoration: none !important; color: var(--rh-dark); transition: border-color .2s; min-width: 0; }
.rh-cat:hover { border-color: var(--rh-yellow); }
.rh-cat__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-height: 110px; background: #fff; margin-bottom: 10px; overflow: hidden; }
.rh-cat__img img { max-width: 85%; max-height: 85%; object-fit: contain; transition: transform .3s; }
.rh-cat:hover .rh-cat__name { color: var(--rh-yellow-dark); }
.rh-cat__name { font-size: 13px; font-weight: 700; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Product card ── */
.rh-slider--products .rh-card { width: calc((100% - 16px * 4) / 5); min-width: 190px; }

/* ── Features ── */
.rh-features { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--rh-yellow); border-radius: 16px; margin-top: 40px; padding: 22px 0; }
.rh-feature { display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.rh-feature + .rh-feature { border-inline-start: 1px solid rgba(0,0,0,.12); }
.rh-feature__icon { color: #1f2329; flex: 0 0 auto; }
.rh-feature b { display: block; font-size: 15px; color: #1f2329; }
.rh-feature p { margin: 2px 0 0; font-size: 12px; color: rgba(31,35,41,.75); }

/* ── Responsive ── */
@media (max-width: 1199px) {
    .rh-cats { --cols: 5; }
    .rh-slider--products .rh-card { width: calc((100% - 16px * 3) / 4); }
    .rh-features { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
    .rh-feature:nth-child(3) { border-inline-start: 0; }
}
@media (max-width: 767px) {
    .rh-hero { aspect-ratio: 16 / 10; border-radius: 12px; }
    .rh-hero__text { max-width: 80%; }
    .rh-finder { padding: 16px; }
    .rh-finder__title { font-size: 17px; }
    .rh-finder__row { flex-direction: column; }
    .rh-finder__go { width: 100%; }
    .rh-finder__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .rh-select { height: 44px; padding: 0 10px; }
    .rh-section__title { font-size: 18px; }
    .rh-cats { --cols: 3; }
   
    .rh-cat { padding: 8px 6px; }
    .rh-cat__name { font-size: 12px; }
    .rh-slider__track { gap: 12px; }
    .rh-slider--products .rh-card { width: 100%; min-width: 0; }
    .rh-slider__nav--round { display: none; }
    .rh-card { padding: 10px; }
    .rh-card__img { height: 120px; }
    .rh-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .rh-features { grid-template-columns: 1fr; padding: 8px 0; }
    .rh-feature { padding: 12px 18px; }
    .rh-feature + .rh-feature { border-inline-start: 0; border-top: 1px solid var(--rh-border); }
}