/* ==========================================================================
   RIWAJ DARKOM — Premium Moroccan Food Marketplace Redesign
   Loads LAST so it overrides phase3/phase5/phase6 legacy styles.
   Safe to add — all new selectors; overrides use existing .rf-* class names.
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  --dk-red:        #C8342B;
  --dk-red-dark:   #A4261E;
  --dk-red-soft:   #F4D9D6;
  --dk-amber:      #E89A3C;
  --dk-amber-2:    #F3B25A;
  --dk-amber-soft: #FCE8CC;
  --dk-gold:       #E8C547;
  --dk-cream:      #FAF3E8;
  --dk-cream-2:    #F5EDE0;
  --dk-ivory:      #FFFFFF;
  --dk-line:       #EADFCE;
  --dk-text:       #2D1810;
  --dk-muted:      #6B6157;
  --dk-muted-2:    #9A8F83;
  --dk-green:      #3FA35E;
  --dk-green-soft: #DCF0E2;

  --dk-r-sm: 10px; --dk-r-md: 14px; --dk-r-lg: 20px; --dk-r-xl: 28px;
  --dk-pill: 999px;

  --dk-sh-sm: 0 2px 8px rgba(45,24,16,.06);
  --dk-sh-md: 0 8px 24px rgba(45,24,16,.08);
  --dk-sh-lg: 0 18px 40px rgba(45,24,16,.10);
  --dk-sh-red: 0 10px 30px rgba(200,52,43,.22);

  --dk-ff-serif: "DM Sans","Playfair Display","Noto Sans Arabic",Georgia,serif;
  --dk-ff-body:  "Open Sans","DM Sans","Noto Sans Arabic",system-ui,sans-serif;
}

/* ---------- 2. Global base ---------- */
body.riwajfood {
  background: var(--dk-cream) !important;
  color: var(--dk-text);
  font-family: var(--dk-ff-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
body.riwajfood img { max-width:100%; display:block; }
body.riwajfood a   { color: var(--dk-red); text-decoration: none; }
body.riwajfood a:hover { color: var(--dk-red-dark); }

.rf-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- 3. Buttons (upgrade existing .rf-btn) ---------- */
.rf-btn, a.rf-btn, button.rf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--dk-pill);
  font: 600 15px/1 var(--dk-ff-body); letter-spacing: .01em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-decoration: none;
}
.rf-btn:active { transform: translateY(1px); }

.rf-btn-primary,
a.rf-btn-primary,
button.rf-btn-primary {
  background: var(--dk-red) !important;
  color: #fff !important;
  box-shadow: var(--dk-sh-red);
  border-color: var(--dk-red) !important;
}
.rf-btn-primary:hover { background: var(--dk-red-dark) !important; }

.rf-btn-outline,
a.rf-btn-outline,
button.rf-btn-outline {
  background: transparent !important;
  color: var(--dk-red) !important;
  border-color: var(--dk-red) !important;
}
.rf-btn-outline:hover { background: var(--dk-red-soft) !important; }

.rf-btn-cta,
a.rf-btn-cta {
  background: linear-gradient(135deg, var(--dk-amber-2), var(--dk-amber)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 28px rgba(232,154,60,.35);
  padding: 15px 34px;
  font-size: 16px;
}
.rf-btn-cta:hover { filter: brightness(1.05); }

/* ---------- 4. Section scaffolding ---------- */
.rf-section { padding: 72px 0; }
.rf-section-title {
  font-family: var(--dk-ff-serif);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  margin: 0 0 32px;
  color: var(--dk-text);
  text-align: center;
  position: relative;
}
.rf-section-title::after {
  content: ""; display:block;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--dk-amber), var(--dk-red));
  border-radius: var(--dk-pill);
  margin: 10px auto 0;
}
.rf-section-header {
  display:flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 28px;
}
.rf-section-header .rf-section-title {
  text-align: right; margin: 0;
}
.rf-section-header .rf-section-title::after { margin-right: 0; margin-left: auto; }
body[dir="rtl"] .rf-section-header .rf-section-title::after,
html[dir="rtl"] .rf-section-header .rf-section-title::after { margin-right: 0; margin-left: auto; }
.rf-see-all {
  font-weight: 600; color: var(--dk-red);
  font-size: 14px; white-space: nowrap;
}
.rf-empty-msg {
  text-align: center; padding: 40px 20px;
  color: var(--dk-muted); background: var(--dk-ivory);
  border-radius: var(--dk-r-lg); box-shadow: var(--dk-sh-sm);
}

/* ---------- 5. HERO ---------- */
.rf-hero {
  position: relative;
  margin: 24px auto 40px;
  max-width: 1240px;
  min-height: 520px;
  border-radius: var(--dk-r-xl);
  overflow: hidden;
  background-color: var(--dk-cream-2);
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
  isolation: isolate;
}
.rf-hero::before,
.rf-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 24px;
  background: repeating-linear-gradient(
    45deg,
    var(--dk-amber) 0 14px,
    var(--dk-red) 14px 28px
  );
  opacity: .95; z-index: 2;
}
.rf-hero::before { top: 0; }
.rf-hero::after  { bottom: 0; }

.rf-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(250,243,232,.82) 0%,
    rgba(250,243,232,.55) 55%,
    rgba(250,243,232,.15) 100%
  );
  z-index: 1;
}
.rf-hero-content {
  position: relative; z-index: 3;
  text-align: center;
  padding: 90px 28px;
  max-width: 820px;
}
.rf-hero-title {
  font-family: var(--dk-ff-serif);
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--dk-text);
  letter-spacing: -.01em;
}
.rf-hero-title span {
  display: block;
  color: var(--dk-red);
  font-size: .7em;
  font-weight: 700;
  margin-top: 6px;
}
.rf-hero-subtitle {
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--dk-muted);
  margin: 0 auto 32px;
  max-width: 58ch;
}

/* Hero search bar */
.rf-hero-search { margin: 0 auto 22px; max-width: 760px; }
.rf-hero-search-inner {
  background: linear-gradient(135deg, var(--dk-amber-2), var(--dk-amber));
  padding: 14px;
  border-radius: var(--dk-r-lg);
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
  box-shadow: var(--dk-sh-md);
}
.rf-search-field {
  flex: 1 1 180px;
  background: #fff;
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; min-height: 52px;
}
.rf-search-field svg { flex-shrink: 0; color: var(--dk-red); }
.rf-search-field input,
.rf-search-field select {
  border: 0; outline: 0; background: transparent; width: 100%;
  font: 500 15px var(--dk-ff-body); color: var(--dk-text);
}
.rf-search-btn {
  background: var(--dk-red) !important;
  color: #fff !important;
  border: 0; border-radius: 12px;
  padding: 0 30px; min-height: 52px;
  font: 600 15px var(--dk-ff-body);
  cursor: pointer; transition: background .2s;
  box-shadow: var(--dk-sh-red);
}
.rf-search-btn:hover { background: var(--dk-red-dark) !important; }

.rf-hero-cities {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  align-items: center;
  margin-top: 18px;
}
.rf-cities-label { color: var(--dk-muted); font-size: 14px; font-weight: 500; }
.rf-city-tag {
  display: inline-block; padding: 7px 16px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(6px);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-pill);
  font-size: 13px; font-weight: 500; color: var(--dk-text);
  transition: background .2s, color .2s;
}
.rf-city-tag:hover { background: var(--dk-red); color: #fff; border-color: var(--dk-red); }

/* ---------- 6. STATS ---------- */
.rf-stats-section { padding: 56px 0; }
.rf-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.rf-stat-card {
  background: var(--dk-ivory);
  padding: 28px 20px; border-radius: var(--dk-r-lg);
  text-align: center;
  box-shadow: var(--dk-sh-sm);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .2s, box-shadow .25s;
}
.rf-stat-card:hover { transform: translateY(-3px); box-shadow: var(--dk-sh-md); }
.rf-stat-icon { font-size: 36px; display: block; margin-bottom: 4px; }
.rf-stat-number {
  font: 800 30px var(--dk-ff-serif);
  color: var(--dk-red);
  display: block;
}
.rf-stat-label {
  font-size: 14px; color: var(--dk-muted); font-weight: 500;
}

/* ---------- 7. HOW IT WORKS ---------- */
.rf-how-section { padding: 64px 0; }
.rf-steps {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.rf-step {
  flex: 1 1 200px; text-align: center; max-width: 240px; margin: 0 auto;
}
.rf-step-icon {
  width: 88px; height: 88px; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--dk-amber-soft), #FFE0C0);
  border-radius: 24px;
  display: grid; place-items: center;
  position: relative;
  box-shadow: var(--dk-sh-sm);
}
.rf-step-num {
  position: absolute; top: -8px; right: -8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--dk-red); color: #fff;
  display: grid; place-items: center;
  font: 700 14px var(--dk-ff-body);
  box-shadow: var(--dk-sh-sm);
}
.rf-step h3 {
  font: 700 17px var(--dk-ff-serif);
  margin: 0 0 6px; color: var(--dk-text);
}
.rf-step p { font-size: 14px; color: var(--dk-muted); margin: 0; }
.rf-step-line {
  flex: 0 0 24px; height: 2px; align-self: center;
  background: repeating-linear-gradient(90deg, var(--dk-amber) 0 6px, transparent 6px 12px);
  margin-top: 44px;
}

/* ---------- 8. DISH CARD (override existing .rf-dish-card) ---------- */
.rf-dishes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.rf-dishes-scroll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.rf-dish-card {
  background: var(--dk-ivory) !important;
  border-radius: var(--dk-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--dk-sh-sm) !important;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
  border: 0 !important;
  position: relative;
}
.rf-dish-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dk-sh-lg) !important;
}

.rf-dish-card-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dk-cream-2);
}
.rf-dish-card-img img,
.rf-dish-card-img a img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.rf-dish-card:hover .rf-dish-card-img img { transform: scale(1.06); }
.rf-dish-card-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--dk-cream-2), var(--dk-amber-soft));
}

.rf-fav-btn {
  position: absolute; top: 12px; right: 12px; left: auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95) !important;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--dk-sh-sm);
  transition: transform .2s, background .2s;
  z-index: 2;
}
.rf-fav-btn:hover { transform: scale(1.08); }
.rf-fav-btn.active { background: var(--dk-red) !important; }
.rf-fav-btn.active svg path { fill: #fff !important; stroke: #fff !important; }

.rf-badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 12px; border-radius: var(--dk-pill);
  font: 600 11px/1 var(--dk-ff-body);
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff;
  box-shadow: var(--dk-sh-sm);
  z-index: 2;
}
.rf-badge-new { background: var(--dk-green); }
.rf-badge-sponsored { background: var(--dk-amber); }
.rf-badge-cotm {
  position: absolute; top: 12px; left: 12px;
  background: var(--dk-gold); color: var(--dk-text);
  padding: 6px 10px; border-radius: var(--dk-pill);
  font-size: 16px;
  box-shadow: var(--dk-sh-sm);
}

.rf-dish-card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.rf-dish-name {
  font: 700 17px/1.3 var(--dk-ff-serif) !important;
  color: var(--dk-text) !important;
  margin: 0 !important;
}
.rf-dish-name a { color: inherit; text-decoration: none; }
.rf-dish-name a:hover { color: var(--dk-red); }

.rf-dish-cook {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--dk-muted);
}
.rf-dish-cook a {
  display: flex; align-items: center; gap: 8px;
  color: var(--dk-muted); font-weight: 500;
}
.rf-mini-avatar {
  width: 26px !important; height: 26px !important;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--dk-ivory);
  box-shadow: var(--dk-sh-sm);
}

.rf-dish-city {
  font-size: 12.5px; color: var(--dk-muted-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.rf-pin { font-size: 13px; }

.rf-dish-rating {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
}
.rf-stars { display: inline-flex; gap: 1px; }
.rf-star { color: var(--dk-line); font-size: 14px; }
.rf-star.filled { color: var(--dk-gold); }
.rf-rating-num { color: var(--dk-text); font-weight: 700; }
.rf-review-count { color: var(--dk-muted-2); font-size: 12px; }

.rf-dish-bottom {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 6px;
}
.rf-dish-price {
  font: 800 17px var(--dk-ff-body);
  color: var(--dk-text);
}
.rf-add-cart-btn {
  background: var(--dk-red) !important;
  color: #fff !important;
  border: 0; padding: 10px 18px;
  border-radius: var(--dk-pill);
  font: 600 13px var(--dk-ff-body);
  cursor: pointer;
  box-shadow: var(--dk-sh-red);
  transition: background .2s, transform .15s;
}
.rf-add-cart-btn:hover { background: var(--dk-red-dark) !important; }
.rf-add-cart-btn:active { transform: translateY(1px); }

/* ---------- 9. COOK CARD ---------- */
.rf-cooks-grid, .rf-cooks-scroll {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.rf-cook-card {
  background: var(--dk-ivory) !important;
  border-radius: var(--dk-r-lg) !important;
  padding: 24px 20px 20px !important;
  text-align: center !important;
  box-shadow: var(--dk-sh-sm) !important;
  position: relative;
  transition: transform .2s, box-shadow .25s;
  border: 0 !important;
  display: flex; flex-direction: column; gap: 6px;
}
.rf-cook-card:hover { transform: translateY(-3px); box-shadow: var(--dk-sh-md) !important; }
.rf-cook-card-link {
  display: block; text-decoration: none; color: inherit;
}
.rf-cook-avatar {
  width: 104px !important; height: 104px !important;
  margin: 0 auto 14px !important;
  border-radius: 50% !important;
  padding: 4px;
  background: conic-gradient(from 210deg, var(--dk-amber), var(--dk-red), var(--dk-amber));
  position: relative;
}
.rf-cook-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  border: 3px solid #fff;
}
.rf-cook-name {
  font: 700 17px var(--dk-ff-serif) !important;
  margin: 2px 0 4px !important;
  color: var(--dk-text);
}
.rf-cook-city {
  font-size: 13px; color: var(--dk-muted);
  margin-bottom: 4px;
}
.rf-cook-specialty {
  font-size: 13px; color: var(--dk-red);
  font-weight: 500;
  margin-bottom: 10px;
}
.rf-cook-stats {
  display: flex; justify-content: center; gap: 14px;
  font-size: 13px; color: var(--dk-muted);
  margin-bottom: 14px;
}
.rf-cook-rating { color: var(--dk-gold); font-weight: 700; }
.rf-cook-orders { color: var(--dk-muted); }

.rf-cook-card-actions {
  display: flex; justify-content: center; margin-top: auto;
}
.rf-follow-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--dk-red) !important;
  color: #fff !important;
  border: 0; padding: 10px 22px;
  border-radius: var(--dk-pill);
  font: 600 13px var(--dk-ff-body);
  cursor: pointer;
  box-shadow: var(--dk-sh-red);
  transition: background .2s;
}
.rf-follow-btn:hover { background: var(--dk-red-dark) !important; }
.rf-follow-btn.following {
  background: var(--dk-green-soft) !important;
  color: #1F6B3B !important;
  box-shadow: none;
}
.rf-followers-count { font-weight: 500; opacity: .9; }

/* ---------- 10. FEATURES ---------- */
.rf-features-section { padding: 72px 0; background: var(--dk-ivory); }
.rf-features-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.rf-feature-card {
  text-align: center; padding: 20px;
  background: var(--dk-cream);
  border-radius: var(--dk-r-lg);
  transition: transform .2s, box-shadow .25s;
}
.rf-feature-card:hover { transform: translateY(-3px); box-shadow: var(--dk-sh-md); }
.rf-feature-icon {
  width: 72px; height: 72px; margin: 0 auto 14px;
  background: var(--dk-amber-soft);
  border-radius: 20px;
  display: grid; place-items: center;
}
.rf-feature-card h3 {
  font: 700 16px var(--dk-ff-serif);
  margin: 6px 0 8px; color: var(--dk-text);
}
.rf-feature-card p { font-size: 14px; color: var(--dk-muted); margin: 0; }

/* ---------- 11. CATEGORIES ---------- */
.rf-categories-section { padding: 64px 0; }
.rf-categories-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.rf-category-card {
  display: block; text-decoration: none; border-radius: var(--dk-r-lg);
  overflow: hidden; box-shadow: var(--dk-sh-sm);
  transition: transform .2s, box-shadow .25s;
}
.rf-category-card:hover { transform: translateY(-2px); box-shadow: var(--dk-sh-md); }
.rf-category-img {
  position: relative; aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--dk-amber-soft), #FFE0C0);
  background-size: cover; background-position: center;
  display: grid; place-items: end center;
  padding: 0;
}
.rf-category-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(45,24,16,.7), transparent 55%);
}
.rf-category-name {
  position: relative; z-index: 2;
  color: #fff; font: 700 15px var(--dk-ff-serif);
  padding: 14px 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ---------- 12. TESTIMONIALS ---------- */
.rf-testimonials-section { padding: 64px 0; background: var(--dk-cream-2); }
.rf-testimonial-card {
  background: var(--dk-ivory);
  padding: 24px 24px 22px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
  margin: 10px 6px 20px;
  height: 100%;
  position: relative;
}
.rf-testimonial-card::before {
  content: "\201C"; position: absolute; top: -10px; right: 20px;
  font: 800 56px Georgia,serif; color: var(--dk-amber); line-height: 1;
}
.rf-testimonial-stars {
  display: flex; gap: 2px; margin-bottom: 10px; color: var(--dk-gold);
}
.rf-testimonial-text {
  font-size: 15px; color: var(--dk-text);
  margin: 0 0 14px;
  line-height: 1.65;
}
.rf-testimonial-author {
  display: flex; justify-content: space-between;
  align-items: center; font-size: 13px;
}
.rf-testimonial-name { font-weight: 700; color: var(--dk-text); }
.rf-testimonial-city { color: var(--dk-muted); }

/* ---------- 13. CTA BAND ---------- */
.rf-cta-section {
  padding: 64px 0;
}
.rf-cta-content {
  background: linear-gradient(135deg, var(--dk-amber-2), var(--dk-amber));
  border-radius: var(--dk-r-xl);
  padding: 56px 40px;
  text-align: center;
  color: #fff;
  box-shadow: var(--dk-sh-md);
  position: relative;
  overflow: hidden;
}
.rf-cta-content::before {
  content: ""; position: absolute;
  inset: auto -30px -40px auto; width: 220px; height: 220px;
  background: rgba(255,255,255,.08); border-radius: 50%;
}
.rf-cta-content h2 {
  font-family: var(--dk-ff-serif);
  font-size: clamp(22px, 3vw, 32px);
  color: #fff; margin: 0 0 10px;
}
.rf-cta-content p {
  color: rgba(255,255,255,.92);
  margin: 0 auto 26px; max-width: 540px;
  font-size: 16px;
}
.rf-cta-content .rf-btn-cta {
  background: #fff !important; color: var(--dk-red) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}

/* ---------- 14. FOLLOWED SECTION EMPTY ---------- */
.rf-followed-section { padding: 56px 0; }

/* ==========================================================================
   COOK PROFILE PAGE
   ========================================================================== */
.rf-cook-profile-page { background: var(--dk-cream); padding-bottom: 80px; }

.rf-cp-banner {
  position: relative;
  height: 280px;
  background-color: var(--dk-cream-2);
  background-size: cover; background-position: center;
  margin: 0 24px;
  border-radius: 0 0 var(--dk-r-xl) var(--dk-r-xl);
  overflow: hidden;
}
.rf-cp-banner::before {
  content: ""; position: absolute; left:0; right:0; top:0;
  height: 16px;
  background: repeating-linear-gradient(45deg, var(--dk-amber) 0 10px, var(--dk-red) 10px 20px);
  z-index: 2; opacity: .9;
}
.rf-cp-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.3));
}

.rf-cp-header {
  position: relative;
  margin: -80px auto 0;
  background: var(--dk-ivory);
  border-radius: var(--dk-r-lg);
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 170px 1fr auto;
  gap: 26px;
  box-shadow: var(--dk-sh-md);
  z-index: 2;
}

.rf-cp-avatar-wrap {
  position: relative;
  width: 170px; height: 170px;
  border-radius: 50%;
  padding: 5px;
  background: conic-gradient(from 210deg, var(--dk-amber), var(--dk-red), var(--dk-amber));
}
.rf-cp-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  display: block;
}
.rf-cp-cotm-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: var(--dk-gold);
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  border: 3px solid #fff;
  box-shadow: var(--dk-sh-sm);
}

.rf-cp-info { min-width: 0; }
.rf-cp-name {
  font: 800 30px/1.15 var(--dk-ff-serif);
  margin: 0 0 6px;
  color: var(--dk-text);
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.rf-cp-verified {
  width: 24px; height: 24px;
  background: var(--dk-green);
  border-radius: 50%;
  padding: 4px;
}
.rf-cp-meta-row {
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  font-size: 14px; color: var(--dk-muted);
  margin-bottom: 12px;
}
.rf-cp-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.rf-cp-rating-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.rf-cp-rating-row .rf-star { font-size: 18px; }
.rf-cp-rating-num {
  font: 800 16px var(--dk-ff-body);
  color: var(--dk-text);
}
.rf-cp-reviews-count { font-size: 13px; color: var(--dk-muted-2); }

.rf-cp-stats-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--dk-line);
}
.rf-cp-stat strong {
  display: block;
  font: 800 22px var(--dk-ff-serif);
  color: var(--dk-red);
}
.rf-cp-stat span { font-size: 13px; color: var(--dk-muted); }

.rf-cp-actions {
  display: flex; flex-direction: column; gap: 10px;
  align-self: center;
}
.rf-cp-follow-btn, .rf-cp-msg-btn { min-width: 160px; }

/* Specialty chips */
.rf-cp-specialty-chips {
  max-width: 1240px; margin: 20px auto 0;
  padding: 0 24px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.rf-cp-chip {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: var(--dk-pill);
  background: var(--dk-amber-soft); color: #9C5A14;
  font: 500 13px var(--dk-ff-body);
  border: 1px solid transparent;
}
.rf-cp-chip.is-green { background: var(--dk-green-soft); color: #1F6B3B; }
.rf-cp-chip.is-red   { background: var(--dk-red-soft); color: var(--dk-red-dark); }

.rf-cp-bio-section {
  max-width: 1240px; margin: 28px auto 0;
  padding: 0 24px;
}
.rf-cp-bio {
  font-size: 15px; line-height: 1.75; color: var(--dk-text);
  background: var(--dk-ivory);
  padding: 22px 26px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
  margin: 0;
}

/* Tabs */
.rf-cp-tabs {
  max-width: 1240px; margin: 32px auto 20px;
  padding: 0 24px;
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 2px solid var(--dk-line);
}
.rf-cp-tab {
  background: transparent; border: 0;
  padding: 14px 22px; margin-bottom: -2px;
  font: 600 14px var(--dk-ff-body);
  color: var(--dk-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .2s, border-color .2s;
}
.rf-cp-tab:hover { color: var(--dk-red); }
.rf-cp-tab.active {
  color: var(--dk-red);
  border-bottom-color: var(--dk-red);
}
.rf-cp-tab-content {
  max-width: 1240px; margin: 0 auto;
  padding: 20px 24px 0;
}

/* Reviews list */
.rf-cp-reviews-list { display: grid; gap: 14px; }
.rf-cp-review-card {
  background: var(--dk-ivory);
  padding: 20px 22px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
}
.rf-cp-review-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.rf-cp-reviewer-avatar {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
}
.rf-cp-reviewer-name {
  display: block; font: 700 14px var(--dk-ff-body); color: var(--dk-text);
  margin-bottom: 2px;
}
.rf-cp-review-stars { color: var(--dk-gold); font-size: 13px; letter-spacing: 1px; }
.rf-cp-review-date {
  margin-right: 0; margin-left: auto;
  font-size: 12px; color: var(--dk-muted-2);
}
.rf-cp-review-text {
  margin: 6px 0 0;
  font-size: 14.5px; line-height: 1.65; color: var(--dk-text);
}
.rf-cp-review-photos {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.rf-cp-review-photos img {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 10px;
}

/* Write review form */
.rf-cp-write-review {
  background: var(--dk-ivory);
  padding: 24px 26px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
  margin-top: 20px;
}
.rf-cp-write-review h3 {
  margin: 0 0 14px;
  font: 700 18px var(--dk-ff-serif);
}
.rf-star-select { display: inline-flex; gap: 4px; margin-bottom: 12px; }
.rf-star-pick {
  font-size: 28px; color: var(--dk-line);
  cursor: pointer; transition: color .15s, transform .15s;
  user-select: none;
}
.rf-star-pick:hover, .rf-star-pick.hover, .rf-star-pick.selected {
  color: var(--dk-gold);
  transform: scale(1.1);
}
.rf-input, .rf-input-full {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--dk-line);
  border-radius: 12px;
  font: 500 14px var(--dk-ff-body);
  color: var(--dk-text);
  background: var(--dk-cream);
  resize: vertical;
  margin-bottom: 12px;
  transition: border-color .2s, background .2s;
}
.rf-input:focus, .rf-input-full:focus {
  outline: 0; border-color: var(--dk-red);
  background: #fff;
}

/* About grid */
.rf-cp-about-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-bottom: 28px;
}
.rf-cp-about-block {
  background: var(--dk-ivory);
  padding: 20px 22px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
}
.rf-cp-about-block h3 {
  margin: 0 0 8px;
  font: 700 14px var(--dk-ff-body);
  color: var(--dk-red);
  text-transform: uppercase; letter-spacing: .08em;
}
.rf-cp-about-block p { margin: 0; font-size: 15px; color: var(--dk-text); line-height: 1.6; }

/* Gallery */
.rf-cp-gallery {
  background: var(--dk-ivory);
  padding: 24px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
}
.rf-cp-gallery h3 {
  margin: 0 0 16px;
  font: 700 18px var(--dk-ff-serif);
}
.rf-cp-gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.rf-cp-gallery-item {
  display: block; aspect-ratio: 1/1;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--dk-sh-sm);
  transition: transform .2s;
}
.rf-cp-gallery-item:hover { transform: scale(1.03); }
.rf-cp-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .rf-dishes-grid, .rf-dishes-scroll,
  .rf-cooks-grid, .rf-cooks-scroll { grid-template-columns: repeat(3, 1fr); }
  .rf-features-grid { grid-template-columns: repeat(2, 1fr); }
  .rf-categories-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .rf-hero { min-height: 440px; margin: 12px; }
  .rf-hero-content { padding: 60px 22px; }
  .rf-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rf-steps { flex-direction: column; gap: 20px; }
  .rf-step-line { display: none; }
  .rf-cp-header {
    grid-template-columns: 1fr;
    text-align: center;
    margin-top: -70px;
  }
  .rf-cp-avatar-wrap { margin: 0 auto; width: 140px; height: 140px; }
  .rf-cp-name { justify-content: center; }
  .rf-cp-meta-row { justify-content: center; }
  .rf-cp-stats-row { justify-content: center; }
  .rf-cp-actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .rf-cp-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rf-dishes-grid, .rf-dishes-scroll,
  .rf-cooks-grid,  .rf-cooks-scroll { grid-template-columns: 1fr; }
  .rf-features-grid, .rf-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .rf-section { padding: 48px 0; }
  .rf-hero-search-inner { flex-direction: column; }
  .rf-cp-banner { height: 200px; margin: 0 12px; }
  .rf-cp-tabs { padding: 0 12px; }
  .rf-cp-tab { padding: 12px 14px; font-size: 13px; }
  .rf-cta-content { padding: 40px 22px; }
  .rf-cp-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   LAYOUT NUKE + HOVER DROPDOWNS — v1.0.4
   (1) Kill left-side empty gap across ALL pages (sidebar nuke + full width).
   (2) Account/language/cart dropdowns open on HOVER with bridge against flicker.
   (3) Mobile/tablet (<1024px): dropdowns open on tap (native click).
   ========================================================================== */

/* ---- (1) GLOBAL RESET — full bleed, no hidden sidebars --------------- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
body.riwajfood { overflow-x: hidden; }

/* Nuke any sidebar that Astra / Dokan / widgets may have injected */
body.riwajfood #secondary,
body.riwajfood .widget-area,
body.riwajfood aside.sidebar,
body.riwajfood .ast-left-sidebar,
body.riwajfood .ast-right-sidebar,
body.riwajfood .dokan-store-sidebar {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
}

/* Force the primary column and main article to full width */
body.riwajfood #primary,
body.riwajfood .site-main,
body.riwajfood .ast-primary-width,
body.riwajfood .ast-separate-container .ast-article-single,
body.riwajfood .ast-separate-container .ast-article-post {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
}

/* Astra containers — stretch and drop the two-column flex */
body.riwajfood .site-content,
body.riwajfood .site-content > .ast-container,
body.riwajfood .ast-container,
body.riwajfood .ast-full-width-layout .site-content > .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  box-sizing: border-box;
}

/* Elementor stretched sections fill the viewport */
body.riwajfood .elementor-section.elementor-section-stretched {
  width: 100vw !important;
  max-width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
}

/* ---- (2) HEADER BAR — full-width with responsive inner padding ------- */
body.riwajfood .main-header-bar-wrap,
body.riwajfood .ast-main-header-wrap,
body.riwajfood .ast-above-header-wrap,
body.riwajfood .ast-below-header-wrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

body.riwajfood .ast-primary-header-bar,
body.riwajfood .main-header-bar,
body.riwajfood .ast-above-header-wrap > .ast-above-header,
body.riwajfood .ast-below-header-wrap > .ast-below-header {
  --ast-container-width: 100%;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-left: clamp(16px, 3vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
  box-sizing: border-box;
}

body.riwajfood .ast-primary-header-bar .ast-builder-grid-row-container,
body.riwajfood .ast-primary-header-bar .ast-builder-grid-row-container-inner,
body.riwajfood .ast-primary-header-bar .ast-builder-grid-row {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.riwajfood .site-header-section,
body.riwajfood .ast-builder-html-element,
body.riwajfood .ast-header-account-wrap,
body.riwajfood .ast-site-header-cart {
  margin-left: 0;
  margin-right: 0;
}

/* Truncate overly long account labels (email fallback safety net) */
body.riwajfood .ast-header-account-wrap .ast-header-account-type-text,
body.riwajfood .ast-header-account-wrap .ast-account-type,
body.riwajfood .ast-header-account-wrap .ast-header-account-wrap-inner > a {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   (3) SMOOTH HOVER DROPDOWNS — desktop (≥1024px) only
   Mobile/tablet keep native tap behavior.
   ========================================================================== */
@media (min-width: 1024px) {

  /* ---- Relative positioning + cursor affordance on triggers ---- */
  body.riwajfood .ast-header-account-wrap,
  body.riwajfood .ast-site-header-cart,
  body.riwajfood .ast-header-woo-cart,
  body.riwajfood .trp-language-switcher-container,
  body.riwajfood .wpml-ls-statics-shortcode_actions,
  body.riwajfood .wpml-ls-legacy-dropdown,
  body.riwajfood .wpml-ls-legacy-dropdown-click,
  body.riwajfood .ast-header-language-switcher,
  body.riwajfood .lang_sel {
    position: relative;
    cursor: pointer;
  }

  /* ---- Invisible 15px bridge below every trigger
          so the mouse can cross into the panel without flicker ---- */
  body.riwajfood .ast-header-account-wrap::after,
  body.riwajfood .ast-site-header-cart::after,
  body.riwajfood .ast-header-woo-cart::after,
  body.riwajfood .trp-language-switcher-container::after,
  body.riwajfood .wpml-ls-statics-shortcode_actions::after,
  body.riwajfood .wpml-ls-legacy-dropdown::after,
  body.riwajfood .ast-header-language-switcher::after,
  body.riwajfood .lang_sel::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    z-index: 99;
  }

  /* ============ ACCOUNT DROPDOWN ============ */
  body.riwajfood .ast-header-account-wrap .account-main-navigation,
  body.riwajfood .ast-header-account-wrap .main-header-menu-navigation,
  body.riwajfood .ast-header-account-wrap .ast-account-nav-menu,
  body.riwajfood .ast-header-account-wrap .ast-header-account-inner-wrap {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    inset-inline-end: 0; /* right in LTR, left in RTL */
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    margin-top: 12px;
    z-index: 9999;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    list-style: none;
  }

  body.riwajfood .ast-header-account-wrap:hover .account-main-navigation,
  body.riwajfood .ast-header-account-wrap:hover .main-header-menu-navigation,
  body.riwajfood .ast-header-account-wrap:hover .ast-account-nav-menu,
  body.riwajfood .ast-header-account-wrap:hover .ast-header-account-inner-wrap,
  body.riwajfood .ast-header-account-wrap:focus-within .account-main-navigation,
  body.riwajfood .ast-header-account-wrap:focus-within .main-header-menu-navigation,
  body.riwajfood .ast-header-account-wrap:focus-within .ast-account-nav-menu,
  body.riwajfood .ast-header-account-wrap:focus-within .ast-header-account-inner-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  body.riwajfood .ast-header-account-wrap .menu-item a,
  body.riwajfood .ast-account-nav-menu li a,
  body.riwajfood .ast-header-account-inner-wrap a {
    display: block;
    padding: 10px 20px;
    color: #2C1810;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }
  body.riwajfood .ast-header-account-wrap .menu-item a:hover,
  body.riwajfood .ast-account-nav-menu li a:hover,
  body.riwajfood .ast-header-account-inner-wrap a:hover {
    background: #FFF0E5;
    color: #D4511E;
  }

  /* ============ LANGUAGE SWITCHER DROPDOWN ============ */
  body.riwajfood .trp-language-switcher-container .trp-ls-shortcode-language,
  body.riwajfood .wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu,
  body.riwajfood .wpml-ls-legacy-dropdown .wpml-ls-sub-menu,
  body.riwajfood .wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu,
  body.riwajfood .ast-header-language-switcher .sub-menu,
  body.riwajfood .lang_sel .lang_sel_sel + ul,
  body.riwajfood .lang_sel ul.nav-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    min-width: 160px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    margin-top: 12px;
    z-index: 9999;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    list-style: none;
  }

  body.riwajfood .trp-language-switcher-container:hover .trp-ls-shortcode-language,
  body.riwajfood .wpml-ls-statics-shortcode_actions:hover .wpml-ls-sub-menu,
  body.riwajfood .wpml-ls-legacy-dropdown:hover .wpml-ls-sub-menu,
  body.riwajfood .wpml-ls-legacy-dropdown-click:hover .wpml-ls-sub-menu,
  body.riwajfood .ast-header-language-switcher:hover .sub-menu,
  body.riwajfood .lang_sel:hover .lang_sel_sel + ul,
  body.riwajfood .lang_sel:hover ul.nav-menu,
  body.riwajfood .trp-language-switcher-container:focus-within .trp-ls-shortcode-language,
  body.riwajfood .wpml-ls-statics-shortcode_actions:focus-within .wpml-ls-sub-menu,
  body.riwajfood .wpml-ls-legacy-dropdown:focus-within .wpml-ls-sub-menu,
  body.riwajfood .wpml-ls-legacy-dropdown-click:focus-within .wpml-ls-sub-menu,
  body.riwajfood .ast-header-language-switcher:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  body.riwajfood .trp-ls-shortcode-language a,
  body.riwajfood .wpml-ls-sub-menu li a,
  body.riwajfood .ast-header-language-switcher .sub-menu li a,
  body.riwajfood .lang_sel .lang_sel_sel + ul li a {
    display: block;
    padding: 10px 20px;
    color: #2C1810;
    text-decoration: none;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
  }
  body.riwajfood .trp-ls-shortcode-language a:hover,
  body.riwajfood .wpml-ls-sub-menu li a:hover,
  body.riwajfood .ast-header-language-switcher .sub-menu li a:hover,
  body.riwajfood .lang_sel .lang_sel_sel + ul li a:hover {
    background: #FFF0E5;
    color: #D4511E;
  }

  /* ============ MINI-CART DROPDOWN ============ */
  body.riwajfood .ast-site-header-cart .ast-site-header-cart-data,
  body.riwajfood .ast-site-header-cart .widget_shopping_cart,
  body.riwajfood .ast-header-woo-cart .widget_shopping_cart {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    min-width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    padding: 16px;
    margin-top: 12px;
    z-index: 9999;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }

  body.riwajfood .ast-site-header-cart:hover .ast-site-header-cart-data,
  body.riwajfood .ast-site-header-cart:hover .widget_shopping_cart,
  body.riwajfood .ast-header-woo-cart:hover .widget_shopping_cart,
  body.riwajfood .ast-site-header-cart:focus-within .ast-site-header-cart-data,
  body.riwajfood .ast-header-woo-cart:focus-within .widget_shopping_cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ==========================================================================
   DARKOM PARITY EXTENSION — v1.0.5
   Dark header, explorer filters, dashboard, checkout stepper,
   availability calendar, review rating breakdown.
   Pure additive CSS — no existing rules modified.
   ========================================================================== */

/* ============ (A) DARK-BROWN STICKY HEADER (DARKOM look) ============ */
body.riwajfood .ast-main-header-wrap,
body.riwajfood .main-header-bar-wrap {
  background: linear-gradient(180deg, #5C2E0E 0%, #4A2409 100%) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Decorative red/amber stripe under the header */
body.riwajfood .ast-main-header-wrap::after {
  content: '';
  display: block;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--dk-red) 0 12px,
    var(--dk-amber) 12px 24px
  );
}

body.riwajfood .ast-primary-header-bar,
body.riwajfood .main-header-bar {
  background: transparent !important;
  border: 0 !important;
}

/* All header text → cream, logo stays visible */
body.riwajfood .ast-main-header-wrap a,
body.riwajfood .ast-main-header-wrap .ast-builder-menu-1 a,
body.riwajfood .ast-main-header-wrap .menu-item > a,
body.riwajfood .ast-main-header-wrap .ast-header-account-wrap,
body.riwajfood .ast-main-header-wrap .ast-header-account-type-text,
body.riwajfood .ast-main-header-wrap .ast-header-woo-cart a,
body.riwajfood .ast-main-header-wrap .trp-language-switcher-container a {
  color: #FFF8F3 !important;
}

body.riwajfood .ast-main-header-wrap .menu-item > a:hover,
body.riwajfood .ast-main-header-wrap .ast-header-account-wrap:hover {
  color: var(--dk-amber-2) !important;
}

/* Primary nav CTA button inside header */
body.riwajfood .ast-main-header-wrap .ast-builder-button-wrap .ast-custom-button,
body.riwajfood .ast-main-header-wrap .astra-nav-cta-button {
  background: var(--dk-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--dk-pill) !important;
  padding: 10px 22px !important;
  font-weight: 700;
  box-shadow: var(--dk-sh-red);
  transition: transform .15s ease, box-shadow .2s ease;
}
body.riwajfood .ast-main-header-wrap .ast-builder-button-wrap .ast-custom-button:hover {
  background: var(--dk-red-dark) !important;
  transform: translateY(-1px);
}

/* Cart + account icons */
body.riwajfood .ast-main-header-wrap .ast-site-header-cart-li a,
body.riwajfood .ast-main-header-wrap .ast-cart-menu-wrap {
  color: #FFF8F3 !important;
}
body.riwajfood .ast-main-header-wrap .ast-cart-menu-wrap .count {
  background: var(--dk-amber) !important;
  color: #2C1810 !important;
}

/* ============ (B) EXPLORER / SEARCH PAGE ============ */
.rf-explorer-searchbar {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 10px;
  background: linear-gradient(135deg, #F5A623 0%, #E89A3C 100%);
  padding: 20px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-md);
  margin: 24px 0;
}
.rf-explorer-searchbar input,
.rf-explorer-searchbar select {
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  font: 500 15px var(--dk-ff-body);
  color: var(--dk-text);
}
.rf-explorer-searchbar .rf-btn-primary {
  padding: 14px 28px;
  white-space: nowrap;
}

.rf-explorer-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--dk-line);
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rf-explorer-filters strong {
  color: var(--dk-muted);
  font-size: 13px;
  margin-inline-end: 6px;
  align-self: center;
}
.rf-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1.5px solid var(--dk-line);
  border-radius: var(--dk-pill);
  background: #fff;
  color: var(--dk-muted);
  font: 500 13px var(--dk-ff-body);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.rf-filter-chip:hover { border-color: var(--dk-red); color: var(--dk-red); }
.rf-filter-chip.active {
  background: var(--dk-red);
  color: #fff;
  border-color: var(--dk-red);
}

.rf-explorer-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--dk-muted);
}
.rf-explorer-empty img { width: 180px; margin: 0 auto 20px; }

/* Favorite heart on cards */
.rf-dish-card, .rf-cook-card { position: relative; }
.rf-fav-btn {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--dk-sh-sm);
  z-index: 2;
  color: var(--dk-red);
  font-size: 16px;
  transition: transform .15s ease;
}
.rf-fav-btn:hover { transform: scale(1.1); }
.rf-fav-btn.is-favorited { background: var(--dk-red); color: #fff; }

/* ============ (C) AVAILABILITY CALENDAR (cook profile + dashboard) ============ */
.rf-avail-cal {
  background: #fff;
  border-radius: var(--dk-r-lg);
  padding: 24px;
  box-shadow: var(--dk-sh-sm);
}
.rf-avail-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.rf-avail-cal-header h3 {
  font: 700 18px var(--dk-ff-serif);
  color: var(--dk-text);
  margin: 0;
}
.rf-avail-cal-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--dk-muted);
}
.rf-avail-cal-nav button {
  background: none;
  border: 0;
  color: var(--dk-text);
  cursor: pointer;
  padding: 4px 8px;
}

.rf-avail-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.rf-avail-day {
  padding: 14px 8px;
  border-radius: 10px;
  text-align: center;
  font: 600 13px var(--dk-ff-body);
  transition: transform .15s ease;
}
.rf-avail-day-label {
  display: block;
  font-size: 11px;
  color: var(--dk-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.rf-avail-day.available { background: var(--dk-green-soft); color: var(--dk-green); }
.rf-avail-day.booked    { background: #FBE4E2; color: var(--dk-red); }
.rf-avail-day.dayoff    { background: #EFEAE3; color: var(--dk-muted); }
.rf-avail-day:hover { transform: translateY(-2px); }

/* Monthly grid variant (dashboard) */
.rf-avail-month {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.rf-avail-month > div {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font: 500 13px var(--dk-ff-body);
  background: #F8F3EB;
  color: var(--dk-text);
  cursor: pointer;
}
.rf-avail-month > div.selected { background: var(--dk-red); color: #fff; }
.rf-avail-month > div.today {
  outline: 2px solid var(--dk-amber);
  outline-offset: -2px;
}

/* ============ (D) REVIEW RATING BREAKDOWN ============ */
.rf-rating-breakdown {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  background: #fff;
  padding: 24px;
  border-radius: var(--dk-r-lg);
  box-shadow: var(--dk-sh-sm);
  margin-bottom: 24px;
}
.rf-rating-big {
  text-align: center;
}
.rf-rating-big .num {
  font: 700 48px var(--dk-ff-serif);
  color: var(--dk-text);
  line-height: 1;
}
.rf-rating-big .stars { color: var(--dk-gold); margin: 6px 0; font-size: 18px; }
.rf-rating-big .count { color: var(--dk-muted); font-size: 13px; }

.rf-rating-bars { display: flex; flex-direction: column; gap: 8px; }
.rf-rating-bar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  font: 500 13px var(--dk-ff-body);
  color: var(--dk-muted);
}
.rf-rating-bar {
  height: 8px;
  background: #F3ECDF;
  border-radius: var(--dk-pill);
  overflow: hidden;
}
.rf-rating-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--dk-gold), var(--dk-amber));
  border-radius: var(--dk-pill);
}

/* ============ (E) COOK DASHBOARD ============ */
.rf-dash {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 24px;
  min-height: 80vh;
}
.rf-dash-sidebar {
  background: linear-gradient(180deg, var(--dk-red) 0%, var(--dk-red-dark) 100%);
  border-radius: var(--dk-r-lg);
  padding: 20px 12px;
  color: #fff;
  align-self: start;
  position: sticky;
  top: 90px;
}
.rf-dash-sidebar a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: #FFF0E5 !important;
  font: 500 14px var(--dk-ff-body);
  margin-bottom: 4px;
  transition: background .15s ease;
}
.rf-dash-sidebar a:hover,
.rf-dash-sidebar a.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff !important;
}
.rf-dash-sidebar a.active {
  box-shadow: inset 3px 0 0 var(--dk-amber);
}
.rf-dash-sidebar .icon {
  width: 20px;
  text-align: center;
  font-size: 16px;
}

.rf-dash-main {
  background: #fff;
  border-radius: var(--dk-r-lg);
  padding: 28px;
  box-shadow: var(--dk-sh-sm);
}
.rf-dash-welcome {
  font: 700 28px var(--dk-ff-serif);
  color: var(--dk-text);
  margin: 0 0 20px;
}

/* Stat cards row */
.rf-dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.rf-dash-stat {
  background: #FFF8F3;
  border-radius: var(--dk-r-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--dk-line);
}
.rf-dash-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--dk-amber-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.rf-dash-stat-num {
  font: 700 20px var(--dk-ff-serif);
  color: var(--dk-text);
  line-height: 1;
}
.rf-dash-stat-label {
  color: var(--dk-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* Pending order alert card */
.rf-dash-pending-title {
  font: 700 16px var(--dk-ff-body);
  color: var(--dk-red);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rf-dash-pending-card {
  background: #fff;
  border: 2px solid var(--dk-red);
  border-radius: var(--dk-r-lg);
  overflow: hidden;
  box-shadow: var(--dk-sh-md);
  margin-bottom: 24px;
}
.rf-dash-pending-card .badge-row {
  background: var(--dk-red);
  color: #fff;
  padding: 10px 16px;
  font: 700 13px var(--dk-ff-body);
  letter-spacing: .04em;
}
.rf-dash-pending-card .body {
  padding: 20px;
}
.rf-dash-pending-card h3 {
  font: 700 22px var(--dk-ff-serif);
  margin: 0 0 12px;
  color: var(--dk-text);
}
.rf-dash-pending-card .meta {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--dk-muted);
  font-size: 14px;
}
.rf-dash-pending-card .meta strong { color: var(--dk-text); }
.rf-dash-pending-card .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rf-btn-accept {
  background: var(--dk-green);
  color: #fff;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  font: 700 14px var(--dk-ff-body);
  cursor: pointer;
  transition: background .15s ease;
}
.rf-btn-accept:hover { background: #359053; }
.rf-btn-refuse {
  background: var(--dk-red);
  color: #fff;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  font: 700 14px var(--dk-ff-body);
  cursor: pointer;
  transition: background .15s ease;
}
.rf-btn-refuse:hover { background: var(--dk-red-dark); }

/* Orders tabs */
.rf-dash-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #FFF8F3;
  border-radius: var(--dk-pill);
  margin-bottom: 20px;
  overflow-x: auto;
}
.rf-dash-tab {
  padding: 10px 18px;
  border-radius: var(--dk-pill);
  background: transparent;
  border: 0;
  color: var(--dk-muted);
  font: 600 13px var(--dk-ff-body);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.rf-dash-tab.active {
  background: var(--dk-red);
  color: #fff;
}

/* Dish row with ON/OFF toggle */
.rf-dash-dish-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #FFF8F3;
  border-radius: var(--dk-r-md);
  margin-bottom: 10px;
}
.rf-dash-dish-row img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
}
.rf-dash-dish-row .name {
  font: 600 15px var(--dk-ff-body);
  color: var(--dk-text);
}
.rf-dash-dish-row .cook {
  color: var(--dk-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* Simple toggle switch */
.rf-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: #CFC3B4;
  border-radius: var(--dk-pill);
  cursor: pointer;
  transition: background .2s ease;
}
.rf-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: inset-inline-start .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.rf-toggle.is-on { background: var(--dk-green); }
.rf-toggle.is-on::after { inset-inline-start: calc(100% - 21px); }

/* Earnings big card */
.rf-dash-earnings-card {
  background: linear-gradient(135deg, var(--dk-amber) 0%, var(--dk-amber-2) 100%);
  color: #fff;
  border-radius: var(--dk-r-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--dk-sh-md);
}
.rf-dash-earnings-card .big {
  font: 700 34px var(--dk-ff-serif);
  line-height: 1;
}
.rf-dash-earnings-card .sub {
  opacity: .9;
  font-size: 13px;
  margin-top: 6px;
}

/* Transaction row */
.rf-dash-tx-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--dk-line);
  font: 500 13px var(--dk-ff-body);
}
.rf-dash-tx-row:last-child { border: 0; }
.rf-dash-tx-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dk-cream-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rf-dash-tx-row .amount { font-weight: 700; color: var(--dk-text); }
.rf-dash-tx-row .date { color: var(--dk-muted); font-size: 12px; }

/* ============ (F) CHECKOUT STEPPER + SUMMARY ============ */
.rf-checkout-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.rf-stepper {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--dk-line);
}
.rf-step {
  flex: 1;
  padding: 14px 0 16px;
  text-align: center;
  font: 600 13px var(--dk-ff-body);
  color: var(--dk-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all .2s ease;
}
.rf-step.is-active {
  color: var(--dk-red);
  border-bottom-color: var(--dk-red);
}
.rf-step.is-done {
  color: var(--dk-amber);
  border-bottom-color: var(--dk-amber);
}
.rf-step-num {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 50%;
  background: var(--dk-line);
  color: var(--dk-muted);
  font-size: 12px;
  margin-inline-end: 6px;
}
.rf-step.is-active .rf-step-num {
  background: var(--dk-red);
  color: #fff;
}
.rf-step.is-done .rf-step-num {
  background: var(--dk-amber);
  color: #fff;
}

.rf-checkout-panel {
  background: #fff;
  border-radius: var(--dk-r-lg);
  padding: 24px;
  margin-bottom: 14px;
  box-shadow: var(--dk-sh-sm);
  border: 1px solid var(--dk-line);
}
.rf-checkout-panel h3 {
  font: 700 16px var(--dk-ff-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dk-text);
  margin: 0 0 16px;
}
.rf-checkout-panel label {
  display: block;
  font: 500 13px var(--dk-ff-body);
  color: var(--dk-muted);
  margin-bottom: 6px;
}
.rf-checkout-panel input,
.rf-checkout-panel select,
.rf-checkout-panel textarea {
  width: 100%;
  border: 1.5px solid var(--dk-line);
  border-radius: 10px;
  padding: 12px 14px;
  font: 500 14px var(--dk-ff-body);
  background: #FFF8F3;
  box-sizing: border-box;
  margin-bottom: 14px;
}
.rf-checkout-panel input:focus,
.rf-checkout-panel select:focus,
.rf-checkout-panel textarea:focus {
  outline: none;
  border-color: var(--dk-red);
  background: #fff;
}

/* Sticky order summary sidebar */
.rf-order-summary {
  background: #fff;
  border: 2px solid var(--dk-amber);
  border-radius: var(--dk-r-lg);
  padding: 20px;
  box-shadow: var(--dk-sh-md);
  position: sticky;
  top: 100px;
  align-self: start;
}
.rf-order-summary-title {
  font: 700 15px var(--dk-ff-body);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--dk-red);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dk-line);
}
.rf-order-summary-dish {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--dk-line);
}
.rf-order-summary-dish img {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  object-fit: cover;
}
.rf-order-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font: 500 14px var(--dk-ff-body);
  color: var(--dk-text);
}
.rf-order-summary-total {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 2px solid var(--dk-line);
  margin-top: 8px;
  font: 700 18px var(--dk-ff-serif);
  color: var(--dk-text);
}
.rf-order-summary .rf-btn { width: 100%; margin-top: 14px; }

.rf-trust-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.rf-trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 12px var(--dk-ff-body);
  color: var(--dk-muted);
  padding: 4px 10px;
  background: var(--dk-cream-2);
  border-radius: var(--dk-pill);
}

/* Confirmation page */
.rf-confirm-hero {
  text-align: center;
  padding: 60px 24px;
  background: #fff;
  border-radius: var(--dk-r-xl);
  box-shadow: var(--dk-sh-sm);
  margin: 24px auto;
  max-width: 760px;
}
.rf-confirm-check {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--dk-green-soft);
  color: var(--dk-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 22px;
  border: 4px solid var(--dk-green);
}
.rf-confirm-title {
  font: 700 30px var(--dk-ff-serif);
  color: var(--dk-text);
  margin: 0 0 12px;
}
.rf-confirm-order-num {
  font: 500 14px var(--dk-ff-body);
  color: var(--dk-muted);
  margin-bottom: 18px;
}
.rf-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ============ (G) RESPONSIVE ============ */
@media (max-width: 1100px) {
  .rf-dash { grid-template-columns: 1fr; }
  .rf-dash-sidebar { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 10px; }
  .rf-dash-sidebar a { flex-direction: column; gap: 4px; padding: 8px 12px; font-size: 11px; }
  .rf-checkout-wrap { grid-template-columns: 1fr; }
  .rf-order-summary { position: static; }
  .rf-explorer-searchbar { grid-template-columns: 1fr 1fr; }
  .rf-explorer-searchbar .rf-btn-primary { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .rf-dash-stats { grid-template-columns: 1fr; }
  .rf-rating-breakdown { grid-template-columns: 1fr; gap: 14px; }
  .rf-explorer-searchbar { grid-template-columns: 1fr; }
  .rf-stepper { overflow-x: auto; }
  .rf-step { font-size: 11px; padding: 12px 8px; }
  .rf-step-label { display: none; }
  .rf-dash-pending-card .actions { grid-template-columns: 1fr; }
  .rf-avail-week > :nth-child(n+4) .rf-avail-day-label { font-size: 10px; }
}

/* ==========================================================================
   BUG-FIX PASS — v1.0.6
   (1) Hide Astra default footer, keep the custom dark footer
   (2) Dokan dashboard layout
   (3) Notification bell icon
   (4) Registration wizard progress bar
   (5) Registration form visibility
   (6) Account deactivate + delete danger zone
   (8) Explorer view-toggle (grid/map)
   (9) WooCommerce placeholder image styling
   ========================================================================== */

/* ============ (1) KILL OLD ASTRA FOOTER, KEEP .rf-custom-footer ============
   Only hide Astra rows when our custom dark footer exists on the page.
   :has() is supported in all current browsers; fallback below for older. */
body.riwajfood .ast-small-footer,
body.riwajfood .ast-above-footer-wrap,
body.riwajfood .ast-primary-footer-wrap,
body.riwajfood .ast-below-footer-wrap,
body.riwajfood .ast-footer-copyright,
body.riwajfood .ast-footer-row-1,
body.riwajfood .ast-footer-row-2 {
  display: none !important;
}
/* Protect the custom footer if wrapped in <footer class="site-footer rf-custom-footer"> */
body.riwajfood .rf-custom-footer,
body.riwajfood .rf-footer {
  display: block !important;
}

/* ============ (2) DOKAN VENDOR DASHBOARD LAYOUT FIX ============ */
body.riwajfood .dokan-dashboard-wrap {
  display: flex !important;
  flex-direction: row-reverse !important; /* RTL: sidebar on right */
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 24px !important;
  gap: 24px !important;
  box-sizing: border-box;
}

body.riwajfood .dokan-dash-sidebar,
body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
  width: 240px !important;
  min-width: 240px !important;
  flex-shrink: 0 !important;
  background: #fff !important;
  border-radius: var(--dk-r-lg) !important;
  box-shadow: var(--dk-sh-sm) !important;
  padding: 16px !important;
  position: sticky !important;
  top: 90px !important;
  height: fit-content !important;
  align-self: flex-start;
}

body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  background: #fff !important;
  border-radius: var(--dk-r-lg) !important;
  box-shadow: var(--dk-sh-sm) !important;
  padding: 24px !important;
}

body.riwajfood .dokan-dashboard-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.riwajfood .dokan-dashboard-menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  color: var(--dk-text) !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  font: 500 15px var(--dk-ff-body) !important;
  transition: background .15s ease, color .15s ease !important;
}
body.riwajfood .dokan-dashboard-menu li a:hover,
body.riwajfood .dokan-dashboard-menu li.active > a,
body.riwajfood .dokan-dashboard-menu li.current_page_item > a {
  background: #FFF0E5 !important;
  color: var(--dk-red) !important;
}

body.riwajfood .dokan-dashboard-content .dashboard-widget {
  background: #fff !important;
  border-radius: var(--dk-r-lg) !important;
  box-shadow: var(--dk-sh-sm) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--dk-line) !important;
}

/* [RF-RESP-CLEANUP 2026-05-28] Disabled mobile/tablet block.
   Was: @media (max-width: 860px). Forced flex-direction: column +
   sidebar width: 100% pushed content far below the stacked sidebar.
   Dokan's native responsive behavior now runs at ≤860px.
   Reverse by changing `@media not all` back to `@media (max-width: 860px)`. */
@media not all {
  body.riwajfood .dokan-dashboard-wrap {
    flex-direction: column !important;
    padding: 16px !important;
  }
  body.riwajfood .dokan-dash-sidebar,
  body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    position: static !important;
  }
}

/* ============ (3) NOTIFICATION BELL ICON FIX ============
   Neutralize the accidental solid-orange circle and restore the bell glyph.
   Works whether the orange was applied via ::before or as a raw bg-color. */
body.riwajfood .rf-notification-bell,
body.riwajfood .rf-notif-icon,
body.riwajfood .dokan-notification-icon,
body.riwajfood .notification-icon-wrap,
body.riwajfood .ast-header-notification {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: visible !important;
  color: #fff !important; /* bell glyph cream-ish on dark header */
  font-size: 0; /* hide any stray text, ::before fills glyph */
}
/* Re-draw a bell glyph if the inner <img>/<svg> is missing */
body.riwajfood .rf-notification-bell:not(:has(svg)):not(:has(img))::before,
body.riwajfood .rf-notif-icon:not(:has(svg)):not(:has(img))::before {
  content: '🔔';
  font-size: 20px;
  line-height: 1;
}
body.riwajfood .rf-notification-bell svg,
body.riwajfood .rf-notif-icon svg,
body.riwajfood .dokan-notification-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Red count badge */
body.riwajfood .rf-notification-bell .count,
body.riwajfood .rf-notification-bell .rf-notif-badge,
body.riwajfood .notification-count,
body.riwajfood .rf-notif-badge {
  position: absolute !important;
  top: -4px !important;
  inset-inline-end: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  background: #C62828 !important;
  color: #fff !important;
  font: 700 11px var(--dk-ff-body) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* ============ (4) COOK REGISTRATION WIZARD PROGRESS BAR ============
   IMPORTANT: the cook-registration template uses these class names:
     .rf-progress-bar > .rf-progress-step (.active|.completed) +
       (.rf-step-circle, .rf-step-label)   /   .rf-progress-line
   phase4.css also defines .rf-progress-bar (as an 8px earnings bar with a
   .rf-progress-fill child) and collapses the wizard container to an 8px line.
   We scope the wizard bar to its wrapper (#rf-progress) and reset the
   phase4 overrides so the circles + labels + connector lines render again. */
body.riwajfood .rf-progress-bar#rf-progress {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  height: auto !important;
  max-width: 820px;
  margin: 0 auto 40px !important;
  padding: 0 20px;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  direction: rtl;
  position: relative;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0;
  text-align: center;
  min-width: 0;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-step-circle {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #E0D5CF !important;
  color: #8B6550 !important;
  font: 700 15px var(--dk-ff-body) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-step.active .rf-step-circle {
  background: var(--dk-red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 4px rgba(200, 52, 43, 0.15);
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-step.completed .rf-step-circle {
  background: var(--dk-green) !important;
  color: #fff !important;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-step-label {
  font: 500 12px var(--dk-ff-body) !important;
  color: #5C3D2E !important;
  line-height: 1.4;
  text-align: center;
  max-width: 110px;
  display: block !important;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-step.active .rf-step-label {
  color: var(--dk-red) !important;
  font-weight: 700 !important;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-step.completed .rf-step-label {
  color: var(--dk-green) !important;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-line {
  flex: 1 1 auto !important;
  height: 3px !important;
  min-width: 20px;
  margin: 0 4px 28px !important;
  background: #E0D5CF !important;
  transition: background .2s ease;
}
body.riwajfood .rf-progress-bar#rf-progress .rf-progress-line.active {
  background: var(--dk-green) !important;
}
@media (max-width: 720px) {
  body.riwajfood .rf-progress-bar#rf-progress { padding: 0 8px; overflow-x: auto !important; }
  body.riwajfood .rf-progress-bar#rf-progress .rf-step-circle { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  body.riwajfood .rf-progress-bar#rf-progress .rf-step-label { font-size: 10px !important; max-width: 70px; }
}

/* ============ (5) REGISTRATION FORM — FORCE VISIBILITY ============ */
body.riwajfood .rf-cook-registration form input,
body.riwajfood .rf-cook-registration form select,
body.riwajfood .rf-cook-registration form textarea,
body.riwajfood .rf-cook-registration form button,
body.riwajfood .rf-cook-registration form .button,
body.riwajfood .rf-cook-registration form [type="submit"],
body.riwajfood .rf-cook-registration form label {
  visibility: visible !important;
  opacity: 1 !important;
}

body.riwajfood .rf-cook-registration .rf-btn-next,
body.riwajfood .rf-cook-registration .rf-btn-prev,
body.riwajfood .rf-cook-registration .rf-btn-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 32px !important;
  border-radius: 12px !important;
  font: 600 16px var(--dk-ff-body) !important;
  cursor: pointer;
  border: 0;
  min-height: 48px;
  min-width: 120px;
  transition: background .15s ease, transform .15s ease;
}
body.riwajfood .rf-cook-registration .rf-btn-next {
  background: var(--dk-red); color: #fff;
}
body.riwajfood .rf-cook-registration .rf-btn-next:hover {
  background: var(--dk-red-dark);
  transform: translateY(-1px);
}
body.riwajfood .rf-cook-registration .rf-btn-prev {
  background: #fff;
  color: var(--dk-red);
  border: 2px solid var(--dk-red);
}
body.riwajfood .rf-cook-registration .rf-btn-submit {
  background: var(--dk-green); color: #fff;
}

/* ============ (6) ACCOUNT DANGER ZONE ============ */
.rf-account-danger-zone {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--dk-line);
}
.rf-account-danger-zone > h3 {
  color: #C62828;
  font: 700 18px var(--dk-ff-serif);
  margin: 0 0 16px;
}
.rf-danger-option {
  border: 1px solid #E8D5C4;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: #fff;
}
.rf-danger-option.is-critical {
  border-color: #C62828;
  background: #FFF5F5;
}
.rf-danger-option h4 {
  margin: 0 0 6px;
  font: 700 16px var(--dk-ff-body);
  color: var(--dk-text);
}
.rf-danger-option.is-critical h4 { color: #C62828; }
.rf-danger-option p {
  color: #5C3D2E;
  font-size: 14px;
  margin: 0 0 12px;
  line-height: 1.5;
}
.rf-danger-option .warn {
  color: #C62828;
  font-size: 13px;
  font-weight: 600;
}
.rf-btn-deactivate,
.rf-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 10px;
  border: 0;
  font: 600 14px var(--dk-ff-body);
  cursor: pointer;
  color: #fff;
  transition: background .15s ease;
}
.rf-btn-deactivate { background: #E65100; }
.rf-btn-deactivate:hover { background: #BF360C; }
.rf-btn-delete { background: #C62828; }
.rf-btn-delete:hover { background: #8E0000; }

/* ============ (8) EXPLORER VIEW TOGGLE (grid/map) ============
   Earlier passes wrapped both buttons in a single white pill. Against the
   page's cream background the inactive button (transparent on white) read
   as empty space, so the user only saw the red "الأطباق" button and asked
   why the map side was missing.

   New design: each button is its own independent pill, always with a
   visible border + background, regardless of which one is active. That
   guarantees the map button is just as visible as the dishes button. */
body.riwajfood .rf-view-toggle,
body.riwajfood .view-switcher {
  display: inline-flex !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  flex-shrink: 0;
}
body.riwajfood .rf-view-toggle .rf-view-btn,
body.riwajfood .rf-view-toggle button,
body.riwajfood .view-switcher button {
  /* defeat phase3.css width:36px / height:36px icon-only sizing */
  width: auto !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 8px 18px !important;
  /* always a visible pill — works on cream, white, or amber backgrounds */
  background: #FFFFFF !important;
  border: 1.5px solid #E0D5CF !important;
  color: #2C1810 !important;
  font: 700 14px var(--dk-ff-body) !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(44, 24, 16, 0.04);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.riwajfood .rf-view-toggle .rf-view-btn svg,
body.riwajfood .view-switcher button svg {
  stroke: currentColor !important;
  opacity: 1 !important;
  flex-shrink: 0;
}
body.riwajfood .rf-view-btn-label {
  display: inline-block !important;
  font: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Inactive hover — give a clear "this is also clickable" affordance */
body.riwajfood .rf-view-toggle .rf-view-btn:hover:not(.active),
body.riwajfood .view-switcher button:hover:not(.active) {
  border-color: var(--dk-red) !important;
  color: var(--dk-red) !important;
  background: #FFF6F2 !important;
}
/* Active state — solid red pill with white icon + label */
body.riwajfood .rf-view-toggle .rf-view-btn.active,
body.riwajfood .rf-view-toggle button.active,
body.riwajfood .view-switcher button.active {
  background: var(--dk-red) !important;
  border-color: var(--dk-red) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(200, 52, 43, 0.25);
}
body.riwajfood .rf-view-toggle .rf-view-btn.active svg,
body.riwajfood .view-switcher button.active svg { stroke: #FFFFFF !important; }

/* Fallback for older cached templates that may still ship empty buttons —
   inject the labels via ::before so nothing reads as a blank square. */
body.riwajfood .rf-view-toggle button[data-view="grid"]:empty::before,
body.riwajfood .view-switcher button[data-view="grid"]:empty::before { content: 'الأطباق'; }
body.riwajfood .rf-view-toggle button[data-view="map"]:empty::before,
body.riwajfood .view-switcher button[data-view="map"]:empty::before  { content: 'الخريطة'; }
body.riwajfood .rf-view-toggle button[data-view="list"]:empty::before { content: 'قائمة'; }

@media (max-width: 520px) {
  body.riwajfood .rf-view-toggle { gap: 6px !important; }
  body.riwajfood .rf-view-toggle .rf-view-btn { padding: 8px 12px !important; min-height: 36px !important; }
  body.riwajfood .rf-view-btn-label { font-size: 12px !important; }
}

/* ============ (9) WOOCOMMERCE PLACEHOLDER IMAGE ============ */
body.riwajfood img.woocommerce-placeholder,
body.riwajfood .products .product img[src*="placeholder"],
body.riwajfood .woocommerce-product-gallery .wp-post-image[src*="placeholder"] {
  object-fit: cover !important;
  border-radius: 12px 12px 0 0 !important;
  background: #FFF0E5 !important;
  padding: 20px !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   v1.0.7 DELTA — Dokan table/alert/logo + gradient placeholder
   ========================================================================== */

/* ---- Dashboard data tables (used by Orders, Withdraw, etc.) ---- */
body.riwajfood .dokan-dashboard-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
}
body.riwajfood .dokan-dashboard-content table th {
  background: #FFF8F3 !important;
  color: var(--dk-text) !important;
  font: 600 14px var(--dk-ff-body) !important;
  padding: 12px 16px !important;
  text-align: right !important;
  border-bottom: 2px solid #E8D5C4 !important;
}
body.riwajfood .dokan-dashboard-content table td {
  padding: 12px 16px !important;
  text-align: right !important;
  border-bottom: 1px solid #F0E0D0 !important;
  font: 500 14px var(--dk-ff-body) !important;
  color: var(--dk-text);
}

/* ---- Dokan alerts (inside dashboard) ---- */
body.riwajfood .dokan-dashboard-content .dokan-alert {
  border-radius: 12px !important;
  padding: 16px 20px !important;
  font: 500 14px var(--dk-ff-body) !important;
  margin-bottom: 20px !important;
}
body.riwajfood .dokan-dashboard-content .dokan-alert-danger {
  background: #FFF0E5 !important;
  border: 1px solid var(--dk-red) !important;
  color: #C62828 !important;
}
body.riwajfood .dokan-dashboard-content .dokan-alert-success {
  background: var(--dk-green-soft) !important;
  border: 1px solid var(--dk-green) !important;
  color: var(--dk-green) !important;
}

/* ---- Store-name / logo block inside the sidebar ---- */
body.riwajfood .dokan-dash-sidebar .dokan-logo,
body.riwajfood .dokan-dash-sidebar .store-name {
  text-align: center !important;
  padding: 16px 0 !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--dk-line) !important;
  font: 700 16px var(--dk-ff-serif) !important;
  color: var(--dk-text) !important;
}

/* ---- Mobile dashboard: sidebar becomes a wrap-list of chip-style items ---- */
/* [RF-RESP-CLEANUP 2026-05-28] Disabled mobile/tablet block.
   Was: @media (max-width: 860px). Forced the sidebar menu into a
   flex-wrap chip row that still consumed vertical space before
   content. Dokan's native menu rendering now runs at ≤860px.
   Reverse by changing `@media not all` back to `@media (max-width: 860px)`. */
@media not all {
  body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li a {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* ---- Hide notif badge when empty or count=0 ---- */
body.riwajfood .rf-notification-bell .rf-notif-count:empty,
body.riwajfood .rf-notif-badge:empty,
body.riwajfood .rf-notif-count[data-count="0"] {
  display: none !important;
}

/* ---- Gradient placeholder upgrade (replaces flat cream bg from v1.0.6) ---- */
body.riwajfood img.woocommerce-placeholder,
body.riwajfood .products .product img[src*="placeholder"],
body.riwajfood .woocommerce-product-gallery .wp-post-image[src*="placeholder"],
body.riwajfood .attachment-woocommerce_thumbnail[src*="woocommerce-placeholder"] {
  background: linear-gradient(135deg, #FFF0E5 0%, #FFE0CC 100%) !important;
  object-fit: contain !important;
  padding: 20px !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ---- Explorer toggle: additional class aliases from this pass ---- */
body.riwajfood .rf-view-toggle button.grid-view:empty::before,
body.riwajfood .shop-view-toggle button.grid-view:empty::before { content: 'â–¦' !important; font-size: 16px !important; }
body.riwajfood .rf-view-toggle button.map-view:empty::before,
body.riwajfood .shop-view-toggle button.map-view:empty::before  { content: '🗺️' !important; font-size: 16px !important; }

/* ==========================================================================
   v1.0.8 DELTA — DUPLICATE MENU KILL
   User reports two nav menus in the header; only the bottom one should show.
   Astra Header Builder v3 stacks rows: Above Header > Primary Header > Below Header.
   We hide any nav/menu that lives in the Above or Primary row and keep the
   Below row as the single visible menu. Fallback rules cover generic themes
   that render two <nav> elements inside #masthead / .site-header.
   ========================================================================== */

/* 1) Hide nav menus that sit in Astra's upper header rows (keep Below row) */
body.riwajfood .ast-above-header-wrap .ast-builder-menu,
body.riwajfood .ast-above-header-wrap .main-header-menu,
body.riwajfood .ast-above-header-wrap .main-navigation,
body.riwajfood .ast-above-header-wrap nav.site-navigation,
body.riwajfood .ast-primary-header-wrap .ast-builder-menu-1,
body.riwajfood .ast-primary-header-wrap .main-header-menu,
body.riwajfood .ast-primary-header-wrap .main-navigation,
body.riwajfood .ast-primary-header-wrap nav.site-navigation {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 2) Make sure the Below Header row (the one we keep) is fully visible */
body.riwajfood .ast-below-header-wrap,
body.riwajfood .ast-below-header-wrap .ast-builder-menu,
body.riwajfood .ast-below-header-wrap nav.site-navigation,
body.riwajfood .ast-below-header-wrap .main-header-menu {
  display: flex !important;
  visibility: visible !important;
}

/* 3) Generic fallback — if the header still contains two <nav> siblings,
      hide every one except the LAST. Works even when Astra rows are absent
      (e.g. Elementor Pro header with a duplicated menu widget).          */
body.riwajfood #masthead nav.site-navigation:not(:last-of-type),
body.riwajfood .site-header nav.site-navigation:not(:last-of-type),
body.riwajfood #masthead .ast-builder-menu:not(:last-of-type),
body.riwajfood .site-header .ast-builder-menu:not(:last-of-type),
body.riwajfood #masthead .elementor-nav-menu--main:not(:last-of-type),
body.riwajfood .site-header .elementor-nav-menu--main:not(:last-of-type) {
  display: none !important;
}

/* 4) Opt-in class the user can wrap the ONE menu to keep — beats fallbacks */
body.riwajfood .site-header nav:not(.rf-keep-menu):not(:only-of-type) ~ nav.rf-keep-menu,
body.riwajfood .rf-keep-menu { display: flex !important; visibility: visible !important; }
body.riwajfood .rf-kill-menu { display: none !important; }

/* 5) Belt-and-braces: hide WP Customizer's legacy primary menu if it ever
      renders in parallel with the Astra Header Builder output.            */
body.riwajfood .site-header .ast-desktop-header-content + .ast-desktop-header-content,
body.riwajfood .site-header > .main-navigation + .main-navigation {
  display: none !important;
}

/* ==========================================================================
   v1.0.9 DELTA — SELECT CHEVRON AFFORDANCE
   Native <select> elements with a placeholder option (e.g. "اختر مدينتك",
   "كل المدن") read as plain input boxes in RTL because no OS-drawn arrow
   sits on the inline-end. Users don't realise the field is a dropdown.
   We replace the native UI with a visible chevron on the leading edge,
   strengthen the placeholder text colour, and add a hover/focus cue.
   ========================================================================== */
body.riwajfood .rf-field select,
body.riwajfood .rf-search-field select,
body.riwajfood .rf-explorer-searchbar select,
body.riwajfood .rf-checkout-panel select,
body.riwajfood select#rf-explore-city,
body.riwajfood select#cook-city {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8342B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 14px center !important;   /* RTL: arrow on the left */
  background-size: 14px 14px !important;
  padding-inline-start: 38px !important;               /* room for chevron */
  cursor: pointer;
}
/* Mirror chevron on the right for any select that renders LTR */
body.riwajfood .rf-field select[dir="ltr"],
body.riwajfood .rf-search-field select[dir="ltr"] {
  background-position: right 14px center !important;
  padding-inline-start: 14px !important;
  padding-inline-end: 38px !important;
}
/* Placeholder option (value="") should look dimmer than picked options,
   but still legible — readers were complaining the prompt was washed out. */
body.riwajfood .rf-field select:invalid,
body.riwajfood .rf-field select option[value=""] {
  color: #6B4A3A;
}
body.riwajfood .rf-field select option { color: #2C1810; }

/* Hero / explore search field: select shares the white pill with the input,
   so the chevron belongs inside the pill, not overlapping the pin icon. */
body.riwajfood .rf-search-field select {
  background-position: left 8px center !important;
  padding-inline-start: 28px !important;
}

/* ============================================================
   v1.0.11 DELTA — Header dropdown hover-gap + cart badge hardening
   ============================================================
   Two long-standing UX bugs reported from the deployed site:

   1) Hovering the language (AR) or user-account button shows the
      dropdown, but moving the cursor *down* toward the menu items
      makes it vanish. Root cause: phase3.css positions both
      dropdowns at `top: calc(100% + 8px)` and gates visibility on
      `.rf-lang-switch:hover` / `.rf-user-menu:hover`. The 8px gap
      is empty space — when the cursor enters it, no element under
      the pointer is a descendant of the parent, so `:hover` is
      lost and `display:block` flips back to `display:none`.

      Fix: switch the gating from `display` (which can't be
      animated and gives no grace period) to `opacity + visibility`
      with a short transition, AND add a transparent ::before strip
      on each dropdown that physically fills the 8px gap. Hovering
      the strip counts as hovering the dropdown, which propagates
      :hover up to the parent and keeps the menu open. We also
      pad the parent's bottom hit-area by 8px (with a compensating
      negative margin-top on the dropdown) for belt-and-suspenders
      reliability across browsers.

   2) "Orange circle" on the cart icon shows up oversized with
      nothing inside. The cart badge (`.rf-cart-badge`) uses
      `var(--rf-primary)` = #D4511E (brand orange). The PHP renders
      it with inline `display:none` when count == 0, but on AJAX
      fragment refreshes / cached partial states the inline style
      can be stripped while the inner text is empty. A defensive
      `:empty` rule (and a `[data-count="0"]` rule for future-
      proofing) makes the badge stay invisible when there's nothing
      meaningful to show, regardless of whether the inline style is
      present.
   ============================================================ */

/* ---- (1) Header dropdown hover-gap fix ---- */

/* Use opacity/visibility instead of display so we can transition,
   and so the parent's hover area still catches the dropdown box. */
body.riwajfood .rf-lang-dropdown,
body.riwajfood .rf-user-dropdown {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* Override phase3.css's `top: calc(100% + 8px)` — keep the visual
     8px offset but achieve it with a transparent ::before bridge
     so the cursor never crosses an element-less gap. */
  top: 100% !important;
  margin-top: 8px;
  transition: opacity .15s ease, visibility 0s linear .15s;
  z-index: 1000;
}

body.riwajfood .rf-lang-switch:hover .rf-lang-dropdown,
body.riwajfood .rf-lang-switch:focus-within .rf-lang-dropdown,
body.riwajfood .rf-lang-switch.open .rf-lang-dropdown,
body.riwajfood .rf-user-menu:hover .rf-user-dropdown,
body.riwajfood .rf-user-menu:focus-within .rf-user-dropdown,
body.riwajfood .rf-user-menu.open .rf-user-dropdown {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .15s ease, visibility 0s linear 0s;
}

/* Invisible bridge spanning the 8px gap — keeps cursor inside the
   dropdown's hover region while traveling from button to menu. */
body.riwajfood .rf-lang-dropdown::before,
body.riwajfood .rf-user-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;       /* fully cover the 8px gap with 2px slack */
  height: 12px;
  background: transparent;
  /* No pointer-events:none — we WANT this strip to receive hover. */
}

/* Parent hit-area extension (additional safety net). The
   padding-bottom enlarges the parent's hover box downward; the
   negative margin on the dropdown then pulls it back into place
   so visual layout is unchanged. */
body.riwajfood .rf-lang-switch,
body.riwajfood .rf-user-menu {
  padding-bottom: 10px;
  margin-bottom: -10px;
}

/* ---- (2) Cart-badge "empty orange circle" hardening ---- */

/* Hide when there's no text content. This wins regardless of
   whether the inline `display:none` survived the page render. */
body.riwajfood .rf-cart-badge:empty,
body.riwajfood #rf-cart-badge:empty,
body.riwajfood .rf-cart-badge[data-count="0"],
body.riwajfood #rf-cart-badge[data-count="0"] {
  display: none !important;
}

/* When it IS shown, keep it tight and ensure the digit is legible.
   Earlier rules let other stylesheets bloat min-width via padding;
   we re-clamp it here so a single-digit count renders as a 18px
   pill, two-digit as ~22px wide. */
body.riwajfood .rf-cart-badge,
body.riwajfood #rf-cart-badge {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 9px !important;
  font: 700 11px var(--dk-ff-body) !important;
  line-height: 1 !important;
  color: #FFFFFF !important;
  background: var(--rf-primary, #D4511E) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Re-apply :empty hide AFTER the sizing block so it wins the cascade. */
body.riwajfood .rf-cart-badge:empty,
body.riwajfood #rf-cart-badge:empty { display: none !important; }

/* ============================================================
   v1.0.12 DELTA — Registration form: select-placeholder clipping
   + selfie helper text legibility
   ============================================================
   Reported issues from the deployed site:

   A) On both registration pages (customer + cook), the City and
      "How did you hear about us?" selects were rendering with the
      placeholder "اختر مدينتك..." / "اختر..." visibly clipped — a
      horizontal stripe cut through the middle of the Arabic text.

      Root cause: registration.css gives `.rf-field select` a
      `padding: 12px 14px; font-size: 15px;` with NO explicit
      `line-height` or `min-height`. Browsers fall back to
      "normal" line-height (~1.2 × 15 = 18px) and the select's
      built-in `overflow: hidden` clips Arabic glyphs that have
      deep descenders below the baseline (ج ح خ ع ق ل ن ي ...).
      The result: the bottom 4-6 pixels of the Arabic text are
      cropped, which on a cream background looks like a tan stripe
      bisecting the words.

      Fix: enforce `line-height: 1.6`, `min-height: 48px`, and a
      slightly tighter vertical padding so the actual text-box
      inside the select has enough room for descenders. Also
      strengthen the placeholder color from #6B4A3A (which was
      still washed out at 15px) to #4A2E20 — readable against
      white but still visually subordinate to picked options.

   B) On step 2 (التحقق من الهوية), the selfie tile's helper text
      was rendered at 11px in #b09a8d (very pale). Combined with
      the original copy that didn't make it explicit the user must
      hold their CIN, vendors were uploading bare selfies and
      failing verification. The PHP template now states the
      requirement clearly; the CSS here gives the helper text
      enough contrast and size that it actually gets read.
   ============================================================ */

/* ---- (A) Registration select height + placeholder fix ---- */

body.riwajfood .rf-field select {
  /* Re-clamp the box so Arabic descenders never get clipped by
     the browser's default `overflow:hidden` on <select>. */
  min-height: 48px !important;
  line-height: 1.6 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /* Arabic placeholder needs slightly larger glyphs to read on a
     400-500px column without crowding the chevron. */
  font-size: 15px !important;
}

/* Stronger placeholder color — still dimmer than picked options
   so the prompt is visually distinguishable, but no longer reads
   as "ghost text". Wins over v1.0.9's #6B4A3A. */
body.riwajfood .rf-field select:invalid,
body.riwajfood .rf-field select option[value=""] {
  color: #4A2E20 !important;
}
body.riwajfood .rf-field select option { color: #2C1810 !important; }

/* Same treatment for non-required referral select (which is NOT
   :invalid since value="" is acceptable). Target it explicitly. */
body.riwajfood .rf-field select#rf-referral,
body.riwajfood .rf-field select:not([required]) {
  color: #4A2E20 !important;
}
body.riwajfood .rf-field select:not([required]):has(option[value=""]:checked) {
  color: #4A2E20 !important;
}

/* When the user has actually selected a real city / source, the
   text should snap to the strong tone. We can detect this via
   the :valid state for required selects, and via a JS-friendly
   `[data-has-value="1"]` for optional ones. The :valid rule
   handles the city select automatically. */
body.riwajfood .rf-field select:valid {
  color: #2C1810 !important;
}

/* ---- (B) Selfie tile helper-text legibility ---- */

/* The instruction "selfie WITH the national ID" must read as a
   genuine instruction, not muted small print. Keep it visually
   secondary to the call-to-action ("اضغط لرفع الصورة"), but
   bring it to a contrast level that gets read on first scan. */
body.riwajfood .rf-upload-area[data-type="selfie"] .rf-upload-placeholder small {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #6B4A3A !important;
  max-width: 95% !important;
  margin-top: 4px !important;
  /* allow the longer copy to wrap onto 3 lines without the upload
     area collapsing — registration.css sets min-height:140px which
     is enough, but we make sure flex doesn't squash this child. */
  flex-shrink: 0;
}

/* Also subtly enlarge the upload-area for the selfie tile so the
   3-line helper sits comfortably without crowding the icon. */
body.riwajfood .rf-upload-area[data-type="selfie"] {
  min-height: 160px !important;
}

/* ============================================================
   v1.0.13 DELTA — Password show/hide eye toggle + verbose
   upload-error visibility
   ============================================================
   1) Both registration pages now wrap each password input in
      `<div class="rf-pwd-wrap">` containing the input and an
      eye-toggle button. CSS positions the button on the
      *leading* edge (left in RTL) so it doesn't collide with
      the `*` required marker on the trailing edge or the
      browser's autofill icons.

   2) When a file upload fails, the JS now tries to surface the
      server's actual error (instead of falling back to the
      generic "فشل رفع الملف"). Some of those messages can be
      80-200 chars long ("نوع الملف غير مقبول (image/heic) ...").
      Without a wrap rule, they would overflow the .rf-field
      column and stretch the layout. We force `word-break` so
      the diagnostic stays inside its column.
   ============================================================ */

/* ---- (1) Eye toggle wrapper ---- */
body.riwajfood .rf-pwd-wrap {
  position: relative;
  display: block;
  width: 100%;
}
body.riwajfood .rf-pwd-wrap > input {
  width: 100% !important;
  /* Make room for the eye button on the inline-start (left in RTL).
     Default field padding from registration.css is 12px 14px, so we
     bump padding-inline-start to 44px — 14px gap + 24px button + 6px
     breathing room. */
  padding-inline-start: 44px !important;
}
body.riwajfood .rf-pwd-toggle {
  position: absolute;
  inset-inline-start: 8px;          /* RTL → left edge; LTR → right */
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #8B6550;                    /* matches form muted tone */
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
body.riwajfood .rf-pwd-toggle:hover,
body.riwajfood .rf-pwd-toggle:focus-visible {
  color: var(--dk-red, #C8342B);
  background: rgba(200, 52, 43, 0.08);
  outline: none;
}
body.riwajfood .rf-pwd-toggle[aria-pressed="true"] {
  color: var(--dk-red, #C8342B);
}
body.riwajfood .rf-pwd-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  pointer-events: none;             /* clicks always hit the button */
}

/* ---- (2) Upload-error wrap ---- */
body.riwajfood .rf-upload-area + .rf-field-error,
body.riwajfood .rf-upload-area ~ .rf-field-error,
body.riwajfood .rf-field .rf-field-error {
  display: block;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  max-width: 100%;
}

/* ============================================================
   v1.0.14 DELTA — Registration choice page: prominent login CTA
   ============================================================
   The choice page (انضم لرواج فود) shows two primary registration
   cards. Below them, returning users were getting only a tiny
   inline link ("عندك حساب؟ سجل الدخول"). Many missed it and
   re-registered, ending up with duplicate accounts.

   New design: keep the prompt text on the inline-end of a small
   pill row, and put an outline-style "تسجيل الدخول" button on the
   inline-start with a login arrow icon. Outline (orange border,
   orange text on the page's cream background) so it does NOT
   compete visually with the two filled-orange "سجل ك..." cards
   above — but the border + padding still read as an obvious
   button rather than running text.
   ============================================================ */

body.riwajfood .rf-choice-footer {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed #E0D5CF;
  border-radius: 14px;
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
}

body.riwajfood .rf-choice-footer-text {
  color: #6B4A3A;
  font-size: 15px;
  font-weight: 500;
}

body.riwajfood .rf-choice-login-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px !important;
  border: 2px solid #D4511E !important;
  background: #FFFFFF !important;
  color: #D4511E !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(212, 81, 30, 0.08);
  /* Mirror the SVG arrow for RTL (the icon points right by default;
     in RTL we want it pointing toward the page direction). */
}

body.riwajfood .rf-choice-login-btn svg {
  stroke: currentColor;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Page is RTL — flip the arrow so it visually leads INTO the
     button's text the way a "go in / log in" gesture should. */
  transform: scaleX(-1);
}

body.riwajfood .rf-choice-login-btn:hover,
body.riwajfood .rf-choice-login-btn:focus-visible {
  background: #D4511E !important;
  color: #FFFFFF !important;
  outline: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 81, 30, 0.25);
}

/* On small screens, stack vertically so the button gets full width
   and stays comfortable to tap. */
@media (max-width: 480px) {
  body.riwajfood .rf-choice-footer {
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
  }
  body.riwajfood .rf-choice-login-btn {
    width: 100%;
  }
}

/* ============================================================
   v1.0.15 DELTA — Branded login page
   Reuses .rf-register-page container for shared form chrome,
   then adds the login-specific row (remember-me + forgot link)
   and the footer "create account" link.
   ============================================================ */

body.riwajfood .rf-login-page {
  /* Slimmer than the multi-step register pages — single form, single column. */
  max-width: 480px;
  margin: 0 auto;
}
body.riwajfood .rf-login-page .rf-form-header h1 {
  margin-bottom: 6px;
}
body.riwajfood .rf-login-page .rf-form-header p {
  color: #5a3a2e;
  margin: 0;
}

/* Remember-me + forgot password row sits between password and submit. */
body.riwajfood .rf-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 18px;
  flex-wrap: wrap;
}

body.riwajfood .rf-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #4A2E20;
  user-select: none;
}
body.riwajfood .rf-checkbox-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #D4511E;
  cursor: pointer;
}

body.riwajfood .rf-login-forgot {
  color: #D4511E;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.18s ease;
}
body.riwajfood .rf-login-forgot:hover,
body.riwajfood .rf-login-forgot:focus {
  color: #B33E14;
  text-decoration: underline;
}

/* Footer "no account? register" link mirrors choice-footer style but lighter. */
body.riwajfood .rf-login-page .rf-form-footer {
  text-align: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(212, 81, 30, 0.25);
}
body.riwajfood .rf-login-page .rf-form-footer p {
  margin: 0;
  color: #5a3a2e;
  font-size: 14px;
}
body.riwajfood .rf-login-page .rf-form-footer a {
  color: #D4511E;
  font-weight: 600;
  text-decoration: none;
}
body.riwajfood .rf-login-page .rf-form-footer a:hover,
body.riwajfood .rf-login-page .rf-form-footer a:focus {
  text-decoration: underline;
}

/* Inline alert (used for invalid credentials). */
body.riwajfood .rf-login-page .rf-alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}
body.riwajfood .rf-login-page .rf-alert-error {
  background: #FDECE6;
  color: #8E2A0E;
  border: 1px solid #F4B7A1;
}
body.riwajfood .rf-login-page .rf-alert-success {
  background: #E8F5EC;
  color: #1F6B36;
  border: 1px solid #A9D8B5;
}

/* Submit button loader text swap is shared, but make sure
   the inline loader doesn't push the button height around. */
body.riwajfood .rf-login-page .rf-btn-loader {
  display: inline-block;
}

/* Small screens: stack the row so the forgot link doesn't crowd. */
@media (max-width: 420px) {
  body.riwajfood .rf-login-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body.riwajfood .rf-login-forgot {
    align-self: flex-end;
  }
}

/* ============================================================
   [RF-DOKAN-SURGICAL 2026-05-28] BEGIN disabled block
   ────────────────────────────────────────────────────────────
   Disables v1.0.17 through v1.0.25 (Dokan dashboard repaint +
   navbar transform + top-space + flex-direction rewrites).
   Wrapper is `@media not all { ... }` because CSS `/* */`
   does not nest and these blocks contain inline comments.
   `@media not all` never matches any device → all enclosed
   rules are dormant. Original content preserved verbatim
   between the BEGIN and END markers — reverse by deleting
   the wrapper lines only.
   ============================================================ */
@media not all {

/* ============================================================
   v1.0.17 DELTA — Aggressive top-space kill + LTR content flow
   The 500-ish px cream strip above the content card comes from
   four possible places at once: Astra's #content padding-top,
   Dokan's wrapper padding, an empty vendor-banner placeholder
   (rendered even when no banner image is set), and the avatar
   bubble's own margins. We neutralize ALL of them at once.

   This must NOT regress: keep both blocks below intact.
   ============================================================ */

/* (1) Astra page wrappers — zero top padding/margin when a Dokan
       dashboard is inside. :has() handles modern browsers; the
       fallback `.woocommerce-account` body class handles older. */
body.riwajfood.woocommerce-account #content,
body.riwajfood.woocommerce-account .ast-container,
body.riwajfood.woocommerce-account .site-content,
body.riwajfood.woocommerce-account .entry-content,
body.riwajfood:has(.dokan-dashboard-wrap) #content,
body.riwajfood:has(.dokan-dashboard) #content,
body.riwajfood:has(.dokan-vendor-dashboard) #content,
body.riwajfood:has(.dokan-dashboard-wrap) .ast-container,
body.riwajfood:has(.dokan-dashboard-wrap) .site-content,
body.riwajfood:has(.dokan-dashboard-wrap) main,
body.riwajfood:has(.dokan-dashboard-wrap) .entry-content,
body.riwajfood:has(.dokan-dashboard-wrap) #primary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* (2) Dokan wrappers — tight padding-top only */
body.riwajfood .dokan-dashboard-wrap,
body.riwajfood .dokan-dashboard,
body.riwajfood .dokan-vendor-dashboard,
body.riwajfood .dokan-dashboard-layout,
body.riwajfood .dokan-dashboard-content-wrap {
  padding-top: 8px !important;
  margin-top: 0 !important;
}

/* (3) Hide every empty/placeholder header block above the card.
       Dokan's vendor-banner block is rendered even when no image
       is set — that's the biggest contributor to the empty strip. */
body.riwajfood .dokan-dashboard-wrap > header:empty,
body.riwajfood .dokan-dashboard-wrap > div:empty,
body.riwajfood .dokan-dashboard-wrap > .dokan-dashboard-header:empty,
body.riwajfood .dokan-dashboard-wrap > .vendor-dashboard-header:empty,
body.riwajfood .dokan-dashboard-wrap > [class*="dashboard-top" i]:empty,
body.riwajfood .dokan-dashboard-wrap > [class*="vendor-banner" i],
body.riwajfood .dokan-dashboard-wrap > [class*="store-banner" i],
body.riwajfood .dokan-dashboard-wrap > [class*="banner-placeholder" i],
body.riwajfood .dokan-dashboard-wrap > [class*="cover-image" i],
body.riwajfood .dokan-dashboard > [class*="vendor-banner" i],
body.riwajfood .dokan-dashboard > [class*="store-banner" i],
body.riwajfood .dokan-vendor-dashboard > [class*="vendor-banner" i] {
  display: none !important;
}

/* (4) Any header element above the content card that isn't empty
       but isn't strictly the content either — strip its vertical
       spacing so it doesn't add to the gap. */
body.riwajfood .dokan-dashboard-wrap > header,
body.riwajfood .dokan-dashboard-wrap > .dokan-dashboard-header,
body.riwajfood .dokan-dashboard-wrap > .vendor-dashboard-header,
body.riwajfood .dokan-dashboard-wrap > [class*="dashboard-top" i] {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* (5) Content card — pinned to the top of whatever space remains */
body.riwajfood .dokan-dashboard-wrap > .dokan-dashboard-content,
body.riwajfood .dokan-dashboard > .dokan-dashboard-content,
body.riwajfood .dokan-vendor-dashboard > .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-content {
  margin-top: 0 !important;
}

/* (6) Avatar bubble — tight margins so it doesn't push the card */
body.riwajfood [class*="profile-pic" i],
body.riwajfood [class*="vendor-avatar" i]:not(.dokan-vendor-rating *),
body.riwajfood [class*="store-avatar" i] {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

/* (7) Slide inner sections to the LEFT (Overview / Performance /
       Charts headings + their controls). Stat cards keep their
       RTL flow internally so Arabic labels stay right-aligned. */
body.riwajfood .dokan-dashboard-content {
  direction: ltr !important;
}
body.riwajfood .dokan-dashboard-content .dashboard-widget,
body.riwajfood .dokan-dashboard-content .dokan-dashboard-widget,
body.riwajfood .dokan-dashboard-content table,
body.riwajfood .dokan-dashboard-content [class*="stat" i],
body.riwajfood .dokan-dashboard-content [class*="report" i],
body.riwajfood .dokan-dashboard-content [class*="card" i] {
  direction: rtl;
}

/* ============================================================
   v1.0.18 DELTA — Analytics Overview overflow under sidebar
   The vendor dashboard right-hand sidebar (Dashboard / Products /
   Orders / Withdraw / Settings) sits ~260px wide and is sticky.
   On /dashboard/?path=/analytics/Overview the white Overview
   card extends underneath that sidebar, hiding the Balance label
   and the right-most KPI tiles (المنتجات المباعة, المجموعات المباعة).

   Fix: pull the wrap and content card hard to the LEFT edge,
   give the content an explicit right-side clearance equal to
   sidebar width + gap, and force the inner KPI grid to wrap so
   nothing can poke past the clearance line. The sidebar keeps
   its sticky position; nothing here moves the sidebar.
   ============================================================ */
:root {
  --rf-dash-sidebar-w: 260px;
  --rf-dash-sidebar-gap: 24px;
}

body.riwajfood .dokan-dashboard-wrap {
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline-start: 24px !important;
  padding-inline-end: 24px !important;
}

body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  max-width: calc(100% - var(--rf-dash-sidebar-w) - var(--rf-dash-sidebar-gap)) !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* Inner KPI / stat tile grids — never overflow the card; wrap to
   fewer columns rather than poking past the clearance line. */
body.riwajfood .dokan-dashboard-content [class*="stat" i],
body.riwajfood .dokan-dashboard-content [class*="kpi" i],
body.riwajfood .dokan-dashboard-content [class*="metric" i],
body.riwajfood .dokan-dashboard-content [class*="report" i] > [class*="grid" i],
body.riwajfood .dokan-dashboard-content [class*="overview" i] [class*="grid" i] {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}
body.riwajfood .dokan-dashboard-content [class*="overview" i] {
  min-width: 0 !important;
  overflow-x: auto !important;
}

/* Charts row inside Overview — never exceed the card width. */
body.riwajfood .dokan-dashboard-content [class*="chart" i] {
  max-width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  /* On narrower screens the sidebar takes proportionally more room;
     drop to a tighter clearance so the card stays usable. */
  body.riwajfood .dokan-dashboard-content,
  body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
    max-width: calc(100% - 220px - var(--rf-dash-sidebar-gap)) !important;
  }
}

@media (max-width: 860px) {
  /* Sidebar already stacks above content at this width (see (2)
     DOKAN VENDOR DASHBOARD LAYOUT FIX), so release the clearance. */
  body.riwajfood .dokan-dashboard-content,
  body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
    max-width: 100% !important;
  }
}

/* ============================================================
   v1.0.19 DELTA — Lock vendor dashboard layout to the target
   shape: purple sidebar on the LEFT (Riwaj Foo logo top, menu,
   choroq store badge bottom), and the top-bar action trio
   (Visit Store + notification bell + avatar) pinned to the RIGHT.

   v1.0.18 sized the content clearance assuming sidebar-on-right.
   With the sidebar pinned LEFT, content fills the remaining
   space via flex naturally — no clearance needed.
   ============================================================ */

/* (a) Pin sidebar to LEFT regardless of body writing direction.
       `order` beats both row / row-reverse and rtl / ltr. */
body.riwajfood .dokan-dashboard-wrap {
  flex-direction: row !important;
}
body.riwajfood .dokan-dash-sidebar,
body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
  order: 0 !important;
  inset-inline-start: 0 !important;
}
body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  order: 1 !important;
}

/* (b) Release v1.0.18 right-side clearance — flex now allocates
       the leftover width to the content slot automatically. */
body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  max-width: 100% !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

/* (c) Top bar above the Overview card — hamburger LEFT, the
       Visit Store / bell / avatar trio glued to the RIGHT.
       Cover the common Dokan / Dokan-Pro / analytics markups. */
body.riwajfood .dokan-dashboard > header,
body.riwajfood .dokan-dashboard-content > header,
body.riwajfood .dokan-dashboard-content > [class*="topbar" i],
body.riwajfood .dokan-dashboard-content > [class*="appbar" i],
body.riwajfood .dokan-dashboard-content > [class*="dash-header" i],
body.riwajfood .dokan-dashboard-content > [class*="page-header" i] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 24px !important;
  direction: ltr !important;
}

/* Right-aligned action trio: anything that looks like Visit Store,
   notification bell, or the avatar dropdown gets pushed to the
   right via auto-start-margin. The first match in the row wins
   the auto and pulls the rest with it. */
body.riwajfood .dokan-dashboard a[href*="visit-store" i],
body.riwajfood .dokan-dashboard a[href*="/store/" i]:not(.dokan-dashboard-menu a),
body.riwajfood .dokan-dashboard [class*="visit-store" i],
body.riwajfood .dokan-dashboard [class*="visitstore" i],
body.riwajfood .dokan-dashboard [class*="store-link" i],
body.riwajfood .dokan-dashboard [class*="notification-bell" i]:first-of-type,
body.riwajfood .dokan-dashboard [class*="notif" i][class*="bell" i]:first-of-type,
body.riwajfood .dokan-dashboard-content > header [class*="action" i]:last-child,
body.riwajfood .dokan-dashboard-content > header [class*="right" i]:last-child {
  margin-inline-start: auto !important;
}

/* Hamburger toggle — pin to LEFT edge of the top bar. */
body.riwajfood .dokan-dashboard-content > header [class*="hamburger" i],
body.riwajfood .dokan-dashboard-content > header [class*="menu-toggle" i],
body.riwajfood .dokan-dashboard-content > header [class*="sidebar-toggle" i],
body.riwajfood .dokan-dashboard-content > header button[aria-label*="menu" i] {
  order: -1 !important;
  margin-inline-end: auto !important;
}

/* Notification bell + avatar — keep them as a tight cluster on
   the right, immediately after Visit Store. */
body.riwajfood .dokan-dashboard-content [class*="notification" i] + *,
body.riwajfood .dokan-dashboard-content [class*="visit-store" i] + *,
body.riwajfood .dokan-dashboard-content [class*="visit-store" i] ~ [class*="avatar" i],
body.riwajfood .dokan-dashboard-content [class*="visit-store" i] ~ [class*="profile-pic" i] {
  margin-inline-start: 12px !important;
}

/* (d) Sidebar palette — re-assert the purple background so any
       Dokan/Astra override loses, matching the target screenshot.
       The Riwaj Foo logo block at the top and the choroq store
       badge at the bottom stay legible on the purple. */
body.riwajfood .dokan-dash-sidebar,
body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
  background: #3B2A6B !important;       /* the deep purple in the target shot */
  color: #F4F0FA !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: sticky !important;
  top: 0 !important;
  align-self: stretch !important;
  min-height: 100vh !important;
  padding: 16px 12px !important;
}
body.riwajfood .dokan-dashboard-menu li a {
  color: #F4F0FA !important;
}
body.riwajfood .dokan-dashboard-menu li a:hover,
body.riwajfood .dokan-dashboard-menu li.active > a,
body.riwajfood .dokan-dashboard-menu li.current_page_item > a {
  background: #7C3AED !important;       /* the lighter purple "Dashboard" pill */
  color: #fff !important;
}

/* ============================================================
   v1.0.20 DELTA — Orders & Payment (and other Dokan tabs):
   anchor content at the top of the card so it's visible without
   scrolling, matching the Dashboard / Overview layout.

   Cause: on non-Overview tabs Dokan renders empty placeholder
   wrappers (banner / hero / cover / skeleton) inside
   .dokan-dashboard-content. Combined with the sidebar's
   min-height: 100vh from v1.0.19, the card stretches and the
   real content lands below the fold. We hide those empty
   wrappers and force the card's children to start at the top.

   Scope is the inside of .dokan-dashboard-content only — the
   Overview tab already has content as its first child, so
   anchoring to flex-start is a no-op there (visual unchanged).
   ============================================================ */

/* (1) Force every dashboard tab's content card to stack its
       children from the TOP, regardless of how tall the flex
       parent stretches. */
body.riwajfood .dokan-dashboard-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
}

/* (2) Hide empty placeholder blocks anywhere inside the content
       card. These are the actual culprit — Dokan reserves space
       for banner/hero/cover/skeleton elements even when there is
       nothing to render in them. */
body.riwajfood .dokan-dashboard-content > div:empty,
body.riwajfood .dokan-dashboard-content > section:empty,
body.riwajfood .dokan-dashboard-content > header:empty,
body.riwajfood .dokan-dashboard-content > aside:empty,
body.riwajfood .dokan-dashboard-content [class*="placeholder" i]:empty,
body.riwajfood .dokan-dashboard-content [class*="skeleton" i]:empty,
body.riwajfood .dokan-dashboard-content [class*="hero" i]:empty,
body.riwajfood .dokan-dashboard-content [class*="cover" i]:empty,
body.riwajfood .dokan-dashboard-content [class*="banner" i]:empty,
body.riwajfood .dokan-dashboard-content [class*="vendor-banner" i],
body.riwajfood .dokan-dashboard-content [class*="store-banner" i],
body.riwajfood .dokan-dashboard-content [class*="page-cover" i] {
  display: none !important;
}

/* (3) Whatever element actually carries the tab content, kill
       any inherited top spacing so it pins to the card's top
       edge — same visual anchor the Overview tab has. */
body.riwajfood .dokan-dashboard-content > *:first-child,
body.riwajfood .dokan-dashboard-content > *:first-child > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* (4) Tab content (forms on Payment, the orders table on Orders)
       must fill the card width so it's not a narrow column adrift
       in empty space — matching Overview's full-width Performance
       and Charts sections. */
body.riwajfood .dokan-dashboard-content > form,
body.riwajfood .dokan-dashboard-content > table,
body.riwajfood .dokan-dashboard-content > div,
body.riwajfood .dokan-dashboard-content > section,
body.riwajfood .dokan-dashboard-content > [class*="content" i],
body.riwajfood .dokan-dashboard-content > [class*="wrapper" i] {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* ============================================================
   v1.0.21 DELTA — Sidebar/footer overlap + Orders/Payment
   empty-white-area fix.

   Both symptoms trace back to v1.0.19's sidebar rules:
     • min-height: 100vh + align-self: stretch on the sidebar
     • These forced the wrap (and the white content card) to
       stretch to 100vh on short tabs (Payment with "no payment
       methods", Orders with no rows) → big empty white block.
     • They also made the sidebar exactly as tall as its parent,
       leaving position:sticky no room to scroll inside the
       wrap, so on long pages the sidebar visually overflowed
       past the wrap's bottom and overlapped the site footer.

   Fix: return the sidebar to its v1.0.0 intrinsic height
   (fit-content + flex-start) and cap it to the viewport so it
   can never extend past the wrap. Stop the content card from
   stretching too, so empty-state tabs fall back to the cream
   wrap background below the actual content instead of an
   oversized white card.

   This does NOT touch the Dashboard / Overview layout — that
   tab has a tall content card, the sidebar still stretches up
   to its viewport cap, choroq badge still anchors at the
   bottom of the wrap on tall pages.
   ============================================================ */

/* Sidebar: intrinsic height, no 100vh forcing, never taller
   than the viewport. Sticky positioning preserved — but with
   the sidebar shorter than the wrap, sticky now has room to
   scroll inside its parent and releases cleanly before the
   footer, instead of overflowing into it. */
body.riwajfood .dokan-dash-sidebar,
body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
  min-height: 0 !important;
  height: fit-content !important;
  max-height: calc(100vh - 16px) !important;
  align-self: flex-start !important;
  overflow-y: auto !important;
}

/* Content card: don't stretch to fill the wrap. Empty-state
   tabs (Payment, Orders) now show only their actual content;
   leftover vertical space falls back to the wrap's cream
   background instead of a huge empty white card. */
body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  align-self: flex-start !important;
  min-height: 0 !important;
}

/* Wrap: no forced min-height; size to content so the footer
   starts immediately after the dashboard area. */
body.riwajfood .dokan-dashboard-wrap {
  min-height: 0 !important;
  align-items: flex-start !important;
}

/* ============================================================
   v1.0.22 DELTA — Orders / Payment: residual empty top space
   above the white card + content extending under the sidebar.

   v1.0.20 only anchored the direct children of
   .dokan-dashboard-content. On Orders / Payment, Dokan wraps
   its content in deeper SPA-style containers (page-wrap → main
   → layout → orders/payment root) that carry their own
   min-height / vertical-centering. The actual title element
   ends up below those, hence the ~600px cream gap.

   Fix: force EVERY descendant layout container inside the
   content card to flex-start + min-height: 0, and restore the
   sidebar clearance from v1.0.18 so the white card no longer
   bleeds under the purple sidebar column on these tabs.

   Dashboard remains visually identical — its real content is
   already at the top of the card and already fits inside the
   clearance.
   ============================================================ */

/* (1) Restore sidebar clearance (lost in v1.0.19). The white
       card stops cleanly before the sidebar's inner edge, so the
       Orders tab row + search box and the Payment Methods
       subheader stay fully inside the visible content area. */
body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  max-width: calc(100% - var(--rf-dash-sidebar-w, 260px) - var(--rf-dash-sidebar-gap, 24px)) !important;
}
@media (max-width: 1100px) {
  body.riwajfood .dokan-dashboard-content,
  body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
    max-width: calc(100% - 220px - var(--rf-dash-sidebar-gap, 24px)) !important;
  }
}
@media (max-width: 860px) {
  body.riwajfood .dokan-dashboard-content,
  body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
    max-width: 100% !important;
  }
}

/* (2) Go DEEP into the content card and force every layout
       container to flex-start. This is the actual top-space
       culprit on Orders / Payment — a wrapper that's centering
       its child vertically inside a reserved height. */
body.riwajfood .dokan-dashboard-content [class*="container" i],
body.riwajfood .dokan-dashboard-content [class*="wrapper" i],
body.riwajfood .dokan-dashboard-content [class*="layout" i],
body.riwajfood .dokan-dashboard-content [class*="root" i],
body.riwajfood .dokan-dashboard-content [class*="main-content" i],
body.riwajfood .dokan-dashboard-content [class*="page-content" i],
body.riwajfood .dokan-dashboard-content [class*="page-wrap" i] {
  min-height: 0 !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
}

/* (3) The card itself + every direct child: zero top spacing.
       Nothing inherited from Astra / Dokan / Dokan Pro can keep
       pushing the first visible row downward. */
body.riwajfood .dokan-dashboard-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.riwajfood .dokan-dashboard-content > * {
  margin-top: 0 !important;
}
body.riwajfood .dokan-dashboard-content > *:first-child,
body.riwajfood .dokan-dashboard-content > *:first-child > *:first-child,
body.riwajfood .dokan-dashboard-content > *:first-child > *:first-child > *:first-child,
body.riwajfood .dokan-dashboard-content > *:first-child > *:first-child > *:first-child > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* (4) Hide pre-content placeholder / greeting / vendor-summary
       blocks (extends the v1.0.20 list with welcome / greeting /
       vendor-stats / dashboard-stats / quick-stats — common on
       Orders / Payment landing slots). */
body.riwajfood .dokan-dashboard-content > [class*="welcome" i],
body.riwajfood .dokan-dashboard-content > [class*="greeting" i],
body.riwajfood .dokan-dashboard-content > [class*="vendor-profile" i],
body.riwajfood .dokan-dashboard-content > [class*="vendor-stats" i],
body.riwajfood .dokan-dashboard-content > [class*="dashboard-stats" i],
body.riwajfood .dokan-dashboard-content > [class*="quick-stats" i],
body.riwajfood .dokan-dashboard-content > [class*="vendor-summary" i] {
  display: none !important;
}

/* ============================================================
   v1.0.23 DELTA — Convert the vendor dashboard's vertical purple
   sidebar into a horizontal top navbar (per design update).

   Goal layout (image 1):
     [ ...Riwaj Foo  | Dashboard | Products | Orders | Withdraw
       | Settings | Store | Payment                   Visit Store ▾ ⓐ ]

   Scope of this delta:
     • ONLY the dashboard top section. Cards / charts / stats /
       footer / backend / RTL / responsiveness below the navbar
       are untouched.
     • Re-uses the existing DOM — no template / PHP changes.
       The previous .dokan-dash-sidebar becomes the navbar; the
       Visit Store + bell + avatar trio (already inside
       .dokan-dashboard-content > header) is fixed to the right
       edge of that navbar via position:fixed, so it visually
       lands inside the same purple bar.
     • Overrides the column-on-the-side rules from v1.0.19 / v1.0.21
       / v1.0.22; those rules are kept above so non-dashboard
       Dokan screens that still use the side sidebar are unaffected
       (this delta only fires for elements actually rendered as the
       vendor dashboard wrap).
   ============================================================ */

/* (1) Wrap stops being a flex row with a side column — it becomes
       a single column with the navbar sitting in fixed space above. */
body.riwajfood .dokan-dashboard-wrap {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 80px 24px 24px !important;
}

/* (2) The previous sidebar — repainted as a fixed horizontal navbar
       pinned to the top of the viewport. Purple gradient matches the
       target screenshot; the LTR direction keeps the logo on the LEFT
       and the menu flowing rightward, regardless of body RTL. */
body.riwajfood .dokan-dash-sidebar,
body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 0 !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  background: linear-gradient(90deg, #2E1B6E 0%, #4527A0 55%, #5B36C5 100%) !important;
  color: #F4F0FA !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 12px rgba(46, 27, 110, 0.22) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: visible !important;
  align-self: auto !important;
  order: 0 !important;
  direction: ltr !important;
}

/* (3) Logo block on the LEFT — covers heading-style logo elements
       and explicit logo / brand / title wrappers that Dokan or the
       theme might emit. */
body.riwajfood .dokan-dash-sidebar > h1,
body.riwajfood .dokan-dash-sidebar > h2,
body.riwajfood .dokan-dash-sidebar > h3,
body.riwajfood .dokan-dash-sidebar > a:first-child,
body.riwajfood .dokan-dash-sidebar > [class*="logo" i],
body.riwajfood .dokan-dash-sidebar > [class*="brand" i],
body.riwajfood .dokan-dash-sidebar > [class*="title" i],
body.riwajfood .dokan-dash-sidebar > [class*="profile-pic" i],
body.riwajfood .dokan-dash-sidebar > [class*="store-name" i]:first-child {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  font: 700 16px var(--dk-ff-body) !important;
  color: #fff !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
}

body.riwajfood .dokan-dash-sidebar img,
body.riwajfood .dokan-dash-sidebar svg {
  max-height: 36px !important;
  width: auto !important;
}

/* (4) The menu becomes a horizontal row in the middle of the navbar.
       It can scroll horizontally on very narrow screens without
       breaking layout. */
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu,
body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar ul.dokan-dashboard-menu {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  order: 1 !important;
}
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu::-webkit-scrollbar {
  display: none !important;
}
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  color: #F4F0FA !important;
  background: transparent !important;
  border-radius: 10px !important;
  font: 500 14px var(--dk-ff-body) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
  direction: rtl !important;          /* keep Arabic labels right-aligned inside the pill */
  unicode-bidi: plaintext;
}
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li.active > a,
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li.current_page_item > a,
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li.current-menu-item > a {
  background: #7C3AED !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45) !important;
}

/* Legacy nested sub-menu rules removed in v1.0.29. The Settings
   pill is hidden entirely now; Store / Payment render as their
   own top-level navbar items. */
body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li {
  position: relative !important;
}

/* (5) Hide the legacy bottom-of-sidebar store badge (e.g. "choroq")
       and any sidebar footer — they don't belong in a single-line
       horizontal navbar. */
body.riwajfood .dokan-dash-sidebar > footer,
body.riwajfood .dokan-dash-sidebar > [class*="footer" i],
body.riwajfood .dokan-dash-sidebar > [class*="store-badge" i],
body.riwajfood .dokan-dash-sidebar > [class*="vendor-badge" i],
body.riwajfood .dokan-dash-sidebar > [class*="store-name" i]:last-child,
body.riwajfood .dokan-dash-sidebar > [class*="bottom" i] {
  display: none !important;
}

/* (6) Hide the hamburger / sidebar toggle — the navbar is always
       visible now, so the toggle has no purpose. */
body.riwajfood .dokan-dashboard [class*="hamburger" i],
body.riwajfood .dokan-dashboard [class*="menu-toggle" i],
body.riwajfood .dokan-dashboard [class*="sidebar-toggle" i],
body.riwajfood .dokan-dashboard button[aria-label*="menu" i],
body.riwajfood .dokan-dashboard-content > header [class*="hamburger" i],
body.riwajfood .dokan-dashboard-content > header [class*="menu-toggle" i],
body.riwajfood .dokan-dashboard-content > header [class*="sidebar-toggle" i],
body.riwajfood .dokan-dashboard-content > header button[aria-label*="menu" i],
body.riwajfood .dokan-vendor-dashboard [class*="hamburger" i],
body.riwajfood .dokan-vendor-dashboard button[aria-label*="menu" i] {
  display: none !important;
}

/* (7) Release the right-side clearance from v1.0.18 / v1.0.22.
       There's no side column anymore, so the content card fills
       the full wrap width. */
body.riwajfood .dokan-dashboard-content,
body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
  max-width: 100% !important;
  width: 100% !important;
  margin-inline: 0 !important;
  order: 1 !important;
}
@media (max-width: 1100px) {
  body.riwajfood .dokan-dashboard-content,
  body.riwajfood .dokan-dashboard-wrap .dokan-dashboard-content {
    max-width: 100% !important;
  }
}

/* (8) Pin the Visit Store / notification bell / avatar trio to the
       RIGHT edge of the fixed navbar. The DOM container
       (.dokan-dashboard-content > header) is repositioned as a
       small fixed flex row at the top-right; everything inside it
       (Visit Store link, globe icon, bell, avatar, dropdown arrow)
       is left untouched so the links and click handlers keep
       working exactly as before. */
body.riwajfood .dokan-dashboard > header,
body.riwajfood .dokan-dashboard-content > header,
body.riwajfood .dokan-dashboard-content > [class*="topbar" i],
body.riwajfood .dokan-dashboard-content > [class*="appbar" i],
body.riwajfood .dokan-dashboard-content > [class*="dash-header" i],
body.riwajfood .dokan-dashboard-content > [class*="page-header" i] {
  position: fixed !important;
  top: 0 !important;
  right: 16px !important;
  left: auto !important;
  inset-inline-end: 16px !important;
  inset-inline-start: auto !important;
  height: 64px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  direction: ltr !important;
  pointer-events: auto !important;
}

/* Trio link / icon colors — light on the dark purple navbar. */
body.riwajfood .dokan-dashboard > header a,
body.riwajfood .dokan-dashboard > header button,
body.riwajfood .dokan-dashboard-content > header a,
body.riwajfood .dokan-dashboard-content > header button,
body.riwajfood .dokan-dashboard-content > header [class*="visit-store" i],
body.riwajfood .dokan-dashboard-content > header [class*="store-link" i] {
  color: #fff !important;
}
body.riwajfood .dokan-dashboard-content > header svg {
  fill: currentColor !important;
}

/* The v1.0.19 auto-margin push is unnecessary inside a fixed,
   right-anchored container — release it so items don't shove off
   the visible area. */
body.riwajfood .dokan-dashboard-content > header [class*="visit-store" i],
body.riwajfood .dokan-dashboard-content > header [class*="action" i]:last-child,
body.riwajfood .dokan-dashboard-content > header [class*="right" i]:last-child {
  margin-inline-start: 0 !important;
}

/* (9) Footer-overlap JS (riwajfood_dashboard_sidebar_footer_fix)
       still runs and may set inline `bottom:` on the sidebar.
       With `top: 0 !important` and `height: 64px !important` both
       fixed, the `bottom` value is ignored by the box-model — the
       navbar stays a 64px-tall top bar in every scroll state. */

/* (10) Mobile: tighten paddings; menu can scroll horizontally. */
@media (max-width: 720px) {
  body.riwajfood .dokan-dashboard-wrap {
    padding: 76px 12px 16px !important;
  }
  body.riwajfood .dokan-dash-sidebar,
  body.riwajfood .dokan-dashboard-wrap aside.dokan-dashboard-sidebar {
    padding: 0 10px !important;
    gap: 8px !important;
  }
  body.riwajfood .dokan-dash-sidebar ul.dokan-dashboard-menu li a {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  body.riwajfood .dokan-dashboard-content > header {
    right: 10px !important;
    inset-inline-end: 10px !important;
    gap: 8px !important;
  }
}

/* ============================================================
   v1.0.24 DELTA — React Dokan Pro top-navbar transform.

   v1.0.23 only matched the legacy class names (.dokan-dash-sidebar
   etc.). The actual running dashboard is the React app inside
   #dokan-vendor-dashboard-layout-root, which emits CSS-module
   class names like "Sidebar_a1b2c3" that change between builds.
   riwaj-darkom.js v1.0.12 tags those elements with STABLE marker
   classes (rf-tn-root / rf-tn-wrap / rf-tn-sidebar / rf-tn-content
   / rf-tn-actions) at runtime, and this block styles them.

   Effect: the React sidebar physically stays in the DOM (so React
   keeps it rendered and event listeners intact), but is repainted
   as a fixed horizontal navbar pinned to the top; the Visit Store
   + bell + avatar cluster (.rf-tn-actions) is fixed to the top-
   right corner; the content slot fills the freed horizontal space.

   Scope: only fires when body has .rf-tn-on (set by the JS), so
   nothing on non-dashboard pages can match.
   ============================================================ */

/* (A) Body class set by the JS once a dashboard root is found. */
body.riwajfood.rf-tn-on .rf-tn-root {
  /* Re-baseline the React layout host — drop any inherited grid /
     flex / sticky positioning that would keep the sidebar in a
     side column. */
  display: block !important;
  position: relative !important;
  padding-top: 80px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* (B) The flex/grid wrap directly containing the sidebar +
       content — force a single column so the sidebar (now
       position:fixed) doesn't reserve column space. */
body.riwajfood.rf-tn-on .rf-tn-wrap {
  display: block !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "main" !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* (C) THE SIDEBAR → top horizontal navbar. */
body.riwajfood.rf-tn-on .rf-tn-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 0 !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 96px 0 16px !important;          /* right padding clears the .rf-tn-actions cluster */
  background: linear-gradient(90deg, #2E1B6E 0%, #4527A0 55%, #5B36C5 100%) !important;
  color: #F4F0FA !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 12px rgba(46, 27, 110, 0.22) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow: visible !important;
  align-self: auto !important;
  order: 0 !important;
  direction: ltr !important;
  /* Defeat sticky / transform-positioning from React. */
  transform: none !important;
  inset-block-start: 0 !important;
}

/* Right pad collapses on narrow screens — the actions cluster
   shrinks to icon-only there. */
@media (max-width: 720px) {
  body.riwajfood.rf-tn-on .rf-tn-sidebar {
    padding: 0 72px 0 10px !important;
  }
}

/* Logo / brand block inside the sidebar (first heading / image
   anchor / brand wrapper) — pin to the LEFT, white text. */
body.riwajfood.rf-tn-on .rf-tn-sidebar > h1,
body.riwajfood.rf-tn-on .rf-tn-sidebar > h2,
body.riwajfood.rf-tn-on .rf-tn-sidebar > h3,
body.riwajfood.rf-tn-on .rf-tn-sidebar > a:first-child,
body.riwajfood.rf-tn-on .rf-tn-sidebar > div:first-child:not(:has(a[href])),
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="logo" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="brand" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="Logo" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="Brand" i] {
  order: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  font: 700 16px var(--dk-ff-body) !important;
  color: #fff !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}

body.riwajfood.rf-tn-on .rf-tn-sidebar img,
body.riwajfood.rf-tn-on .rf-tn-sidebar svg {
  max-height: 36px !important;
  width: auto !important;
}

/* Menu list inside the sidebar — horizontal row in the middle. */
body.riwajfood.rf-tn-on .rf-tn-sidebar ul,
body.riwajfood.rf-tn-on .rf-tn-sidebar nav,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Menu" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="menu" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Nav" i] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  order: 1 !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar ul::-webkit-scrollbar,
body.riwajfood.rf-tn-on .rf-tn-sidebar nav::-webkit-scrollbar {
  display: none !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  position: relative !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li a,
body.riwajfood.rf-tn-on .rf-tn-sidebar nav a,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Menu" i] a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  color: #F4F0FA !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  font: 500 14px var(--dk-ff-body) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
  direction: rtl !important;
  unicode-bidi: plaintext;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li.active > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar li.current_page_item > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar li.current-menu-item > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="active" i] > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="selected" i] > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar a[aria-current="page"],
body.riwajfood.rf-tn-on .rf-tn-sidebar a.active {
  background: #7C3AED !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45) !important;
}

/* Nested sub-menu rules removed in v1.0.29 — Settings pill is
   hidden, so there is nothing to drop a panel under. */

/* Footer / "choroq" badge / any bottom block of the sidebar — hide. */
body.riwajfood.rf-tn-on .rf-tn-sidebar > footer,
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="footer" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="Footer" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="store-badge" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="StoreBadge" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="vendor-badge" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="bottom" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="Bottom" i] {
  display: none !important;
}

/* (D) THE CONTENT SLOT — fills the freed horizontal space. */
body.riwajfood.rf-tn-on .rf-tn-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  order: 1 !important;
}

/* (E) Visit Store / bell / avatar cluster — fixed to the top-right
       corner so it visually sits inside the navbar. */
body.riwajfood.rf-tn-on .rf-tn-actions {
  position: fixed !important;
  top: 0 !important;
  right: 16px !important;
  left: auto !important;
  inset-inline-end: 16px !important;
  inset-inline-start: auto !important;
  height: 64px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 50vw !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1100 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  direction: ltr !important;
  pointer-events: auto !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions a,
body.riwajfood.rf-tn-on .rf-tn-actions button,
body.riwajfood.rf-tn-on .rf-tn-actions [class*="visit-store" i],
body.riwajfood.rf-tn-on .rf-tn-actions [class*="store-link" i] {
  color: #fff !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions svg {
  fill: currentColor !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions > * {
  margin: 0 !important;
}

/* (F) Hide every hamburger / sidebar-toggle button — the navbar
       is always visible now. */
body.riwajfood.rf-tn-on [class*="hamburger" i],
body.riwajfood.rf-tn-on [class*="menu-toggle" i],
body.riwajfood.rf-tn-on [class*="sidebar-toggle" i],
body.riwajfood.rf-tn-on [class*="SidebarToggle" i],
body.riwajfood.rf-tn-on [class*="MobileMenu" i],
body.riwajfood.rf-tn-on [class*="mobile-menu" i],
body.riwajfood.rf-tn-on button[aria-label*="menu" i],
body.riwajfood.rf-tn-on button[aria-label*="toggle" i] {
  display: none !important;
}

/* (G) Defeat any sticky-bottom / sticky-side behaviour the React
       sidebar might rely on. */
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="sticky" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Sticky" i] {
  position: static !important;
  bottom: auto !important;
}

/* (H) The footer-overlap JS (riwajfood_dashboard_sidebar_footer_fix)
       may set inline `bottom:` on the sidebar. With top + height
       both fixed via !important, the box-model ignores bottom — the
       navbar stays a constant 64px-tall top bar in every scroll
       state. */

/* ============================================================
   v1.0.25 DELTA — Top-navbar refinement pass.

   v1.0.24 got the structure correct but the proportions and the
   right-side cluster needed tuning to match the reference shot:
     • thinner bar (56px instead of 64px),
     • breathing room between menu pills,
     • all child elements vertically centred,
     • visible borders / hr / separator lines inside the sidebar
       suppressed (those were the "random gray line" complaints),
     • right cluster: globe-icon · Visit Store · vertical divider
       · dropdown arrow · avatar, with proper gaps and a faint
       white divider line between the link and the avatar.

   No structural rewrite — these are tweaks layered on top of
   v1.0.24 with matching selectors so cascade order wins.
   ============================================================ */

/* (1) Thinner navbar (56px), tighter inner padding, larger inter-pill
       gap so the row reads as a real navbar, not a stretched sidebar. */
body.riwajfood.rf-tn-on .rf-tn-root {
  padding-top: 72px !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar {
  height: 56px !important;
  min-height: 0 !important;
  max-height: 56px !important;
  padding: 0 260px 0 20px !important;       /* right padding reserves slot for the actions cluster */
  gap: 8px !important;
  align-items: center !important;
  background: linear-gradient(90deg, #2A1A6A 0%, #3F22A0 55%, #5230CC 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 14px rgba(20, 12, 60, 0.28) !important;
  border: 0 !important;
}
@media (max-width: 720px) {
  body.riwajfood.rf-tn-on .rf-tn-sidebar {
    padding: 0 140px 0 12px !important;
  }
}

/* (2) Logo block — fixed natural width, no stretch, no flex-grow. */
body.riwajfood.rf-tn-on .rf-tn-sidebar > h1,
body.riwajfood.rf-tn-on .rf-tn-sidebar > h2,
body.riwajfood.rf-tn-on .rf-tn-sidebar > h3,
body.riwajfood.rf-tn-on .rf-tn-sidebar > a:first-child,
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="logo" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="brand" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="Logo" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar > [class*="Brand" i] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 220px !important;
  min-width: 0 !important;
  height: 56px !important;
  margin: 0 20px 0 0 !important;
  font-size: 15px !important;
  line-height: 56px !important;
  align-self: center !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar img,
body.riwajfood.rf-tn-on .rf-tn-sidebar svg {
  max-height: 30px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* (3) Vertically centre EVERY direct child of the navbar at 56px line. */
body.riwajfood.rf-tn-on .rf-tn-sidebar > * {
  align-self: center !important;
  margin-block: 0 !important;
}

/* (4) Menu row — generous gap between pills, vertical centring,
       no inherited margins. */
body.riwajfood.rf-tn-on .rf-tn-sidebar ul,
body.riwajfood.rf-tn-on .rf-tn-sidebar nav,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Menu" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="menu" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Nav" i] {
  gap: 6px !important;
  height: 56px !important;
  align-items: center !important;
  align-self: center !important;
  border: 0 !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li {
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li a,
body.riwajfood.rf-tn-on .rf-tn-sidebar nav a,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Menu" i] a {
  padding: 7px 14px !important;
  font-size: 13.5px !important;
  height: 36px !important;
  line-height: 1 !important;
  align-items: center !important;
  border: 0 !important;
}

/* (5) Suppress ANY visible border / divider / hr / separator the
       React sidebar (or legacy markup) draws between items or under
       the bar — those were the "random gray line" complaints. */
body.riwajfood.rf-tn-on .rf-tn-sidebar hr,
body.riwajfood.rf-tn-on .rf-tn-sidebar [role="separator"],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="divider" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Divider" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="separator" i],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="Separator" i] {
  display: none !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar,
body.riwajfood.rf-tn-on .rf-tn-sidebar * {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* Restore the active pill's shadow which the wildcard above would not affect. */
body.riwajfood.rf-tn-on .rf-tn-sidebar li.active > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar a[aria-current="page"] {
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45) !important;
}

/* (6) Active "Dashboard" pill — broaden the match list one more
       time so React state classes are caught too. */
body.riwajfood.rf-tn-on .rf-tn-sidebar a[aria-current],
body.riwajfood.rf-tn-on .rf-tn-sidebar a[data-active="true"],
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="isActive" i] > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="is-active" i] > a,
body.riwajfood.rf-tn-on .rf-tn-sidebar [class*="--active" i] > a {
  background: #7C3AED !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45) !important;
}

/* (7) Right cluster — wider, vertically centred, with a faint
       vertical divider between Visit Store and the avatar / dropdown
       (the divider line the target shot has).

       The cluster lives in .rf-tn-actions (a fixed 56px row at
       top: 0; right: 16px). We:
         • make it the same height as the navbar,
         • space items 14px apart,
         • render a 20px-tall semi-transparent vertical line via the
           parent's ::after, positioned just before the rightmost two
           items so it sits between "Visit Store" and the dropdown
           arrow / avatar.
       */
body.riwajfood.rf-tn-on .rf-tn-actions {
  height: 56px !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 0 4px !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions > * {
  align-self: center !important;
  margin: 0 !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 4px !important;
  color: #fff !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
}

/* Vertical divider — sits between the "Visit Store" anchor and the
   avatar/dropdown cluster. Implemented as a ::before on the LAST
   child (avatar wrap) so it appears just to its inline-start. */
body.riwajfood.rf-tn-on .rf-tn-actions > :nth-last-child(2),
body.riwajfood.rf-tn-on .rf-tn-actions > :last-child {
  position: relative !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions > :nth-last-child(2)::before {
  content: "" !important;
  display: inline-block !important;
  width: 1px !important;
  height: 22px !important;
  margin: 0 6px 0 0 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  vertical-align: middle !important;
}

/* The footer-overlap JS sets inline `bottom: 0`. With top:0 +
   height:56px both !important, bottom is ignored — confirmed
   behaviour in current browsers. */

/* (8) Reset content-card padding-top so it sits flush below the
       72-px reserved navbar zone. (No effect on the cards / charts
       themselves — only the wrapping space.) */
body.riwajfood.rf-tn-on .rf-tn-content {
  padding-top: 8px !important;
}

/* (9) Belt-and-braces: any stray border or hairline UNDER the bar
       (Astra / Dokan sometimes draws a 1px line right below header
       containers) — neutralise. */
body.riwajfood.rf-tn-on .rf-tn-sidebar::after,
body.riwajfood.rf-tn-on .rf-tn-sidebar::before {
  display: none !important;
  content: none !important;
}

}  /* end @media not all */
/* [RF-DOKAN-SURGICAL 2026-05-28] END disabled block (v1.0.17–v1.0.25) */

/* ============================================================
   v1.0.29 DELTA — Hide "Settings" label, keep Store/Payment.

   Dokan's Settings menu item wraps its sub-pages (Store /
   Payment / ...) as nested children inside the SAME <li>:

     <li>
       <a href=".../settings">Settings</a>       ← hidden
       <span class="chevron">▾</span>            ← hidden
       <ul>                                       ← LEFT visible
         <li><a href=".../settings/store">Store</a></li>
         <li><a href=".../settings/payment">Payment</a></li>
       </ul>
     </li>

   Pairs with riwaj-darkom.js v1.0.17 which adds
   .rf-tn-hide-settings to the Settings clickable + any sibling
   chevron icon (never the wrapping LI, never the nested UL).
   v1.0.24 already lays every UL inside the navbar out as a
   flex row, so the nested Store / Payment items render inline
   as flat top-level pills exactly like Dashboard / Products /
   Orders / Withdraw.

   Scope: only inside the dashboard navbar. RTL, fixed
   positioning, purple gradient, active-state pill, Visit-Store
   trio, avatar — all untouched.
   ============================================================ */

/* (1) Hide the tagged Settings anchor + chevron. We do NOT target
       the wrapping LI here — that LI keeps rendering its nested
       Store / Payment children. */
body.riwajfood .rf-tn-hide-settings,
body.riwajfood a.rf-tn-hide-settings,
body.riwajfood span.rf-tn-hide-settings,
body.riwajfood i.rf-tn-hide-settings,
body.riwajfood button.rf-tn-hide-settings,
body.riwajfood [class*="chevron" i].rf-tn-hide-settings,
body.riwajfood [class*="icon" i].rf-tn-hide-settings {
  display: none !important;
  visibility: hidden !important;
}

/* (2) The Settings <li> stays, but with only its nested UL
       visible, it shouldn't carry the menu-pill padding /
       background — collapse it to a transparent flex wrapper so
       the nested children read as top-level pills. */
body.riwajfood.rf-tn-on .rf-tn-sidebar li:has(> a.rf-tn-hide-settings) {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* (3) The nested UL inside the (now-headerless) Settings LI:
       force it to behave as an inline flex row sibling of the
       parent menu items — no absolute positioning, no panel
       background, no border-radius. */
body.riwajfood.rf-tn-on .rf-tn-sidebar li:has(> a.rf-tn-hide-settings) > ul,
body.riwajfood.rf-tn-on .rf-tn-sidebar li:has(> a.rf-tn-hide-settings) > ol {
  position: static !important;
  top: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  list-style: none !important;
  min-width: 0 !important;
  width: auto !important;
  z-index: auto !important;
}

/* (4) Inner LI / anchor in that nested UL: render with the same
       pill styling the other navbar items use. (The v1.0.24
       rules already cover most of this — we just neutralise any
       inherited indentation.) */
body.riwajfood.rf-tn-on .rf-tn-sidebar li:has(> a.rf-tn-hide-settings) > ul > li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li:has(> a.rf-tn-hide-settings) > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  color: #F4F0FA !important;
  background: transparent !important;
  font: 500 13.5px var(--dk-ff-body) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
body.riwajfood.rf-tn-on .rf-tn-sidebar li:has(> a.rf-tn-hide-settings) > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

/* (5) Fallback for browsers without :has() — keep the nested UL
       flowing inline even without parent-selector support. */
@supports not selector(:has(*)) {
  body.riwajfood.rf-tn-on .rf-tn-sidebar ul ul {
    position: static !important;
    display: inline-flex !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}

/* ============================================================
   v1.0.40 DELTA — CUSTOMER MY-ACCOUNT LAYOUT (لوحة حسابي)

   Scope: WooCommerce customer account page (NOT the Dokan vendor
   dashboard). The WC default ships a floated 30/70 layout that
   collapses to a single column on RTL because earlier deltas in
   this file zeroed padding/margin on Astra wrappers and Dokan
   neutralized .woocommerce container styles. Result: navigation
   stacked above content, content wrapping one word per line,
   page title overflowing the viewport on phone/tablet.

   Fix: explicit grid (sidebar-right since RTL), card surfaces,
   pill nav, responsive title, mobile stack. Scoped tightly with
   :not(:has(.dokan-dashboard-wrap)) so the Dokan vendor dashboard
   styles (deltas 17-19) are untouched.
   ============================================================ */

/* (1) Page wrapper — contained, breathing room, no horizontal
       overflow. The pre-existing rule at line ~3260 zeros
       padding-top on these wrappers; we restore lateral padding
       only, on the customer my-account variant. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) #content,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .ast-container,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .site-content,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .entry-content {
  padding-inline: clamp(16px, 4vw, 32px) !important;
  padding-bottom: 48px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .ast-container {
  max-width: 1200px !important;
  margin-inline: auto !important;
}

/* (2) Page title (لوحة حسابي) — contained, responsive, no overflow.
       The WP/Astra entry-title was rendering off-canvas on phone
       because it kept its default ~36px size with no wrapping. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .entry-header,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) header.entry-header,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .ast-archive-description,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .page-header {
  max-width: 100% !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: start !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .entry-title,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) h1.entry-title,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .page-title {
  font: 700 clamp(22px, 4vw, 34px)/1.2 var(--dk-ff-serif) !important;
  color: var(--dk-text) !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: start !important;
}

/* (3) WooCommerce container — two-column CSS grid.
       Sidebar 280px on the inline-start (right in RTL), content
       fills the remaining track on the inline-end (left in RTL).
       Gap is the only thing separating the cards. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 28px !important;
  align-items: start !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* (4) Navigation card — pinned to track 1 (inline-start, which
       is the RIGHT edge under RTL). */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation {
  grid-column: 1 !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 14px !important;
  background: var(--dk-ivory) !important;
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-r-lg) !important;
  box-shadow: var(--dk-sh-sm) !important;
  position: sticky !important;
  top: 96px !important;
  align-self: start !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Kill the cream/tan square markers WC injects before each link
   (the row of small boxes visible in the screenshot). */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li::before,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li::after,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li a::before,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li a::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: var(--dk-r-md) !important;
  background: transparent !important;
  color: var(--dk-text) !important;
  font: 600 14.5px/1.2 var(--dk-ff-body) !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
  text-align: start !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li a:hover {
  background: var(--dk-cream-2) !important;
  color: var(--dk-red) !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li.is-active a,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
  background: var(--dk-red) !important;
  color: #fff !important;
  box-shadow: var(--dk-sh-red) !important;
}

/* "Logout" link — visually subordinate, never picks up brand red. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--dk-muted) !important;
  border-top: 1px solid var(--dk-line) !important;
  margin-top: 8px !important;
  padding-top: 14px !important;
  border-radius: 0 0 var(--dk-r-md) var(--dk-r-md) !important;
}
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: transparent !important;
  color: var(--dk-red) !important;
}

/* (5) Content card — pinned to track 2 (inline-end, LEFT in RTL). */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content {
  grid-column: 2 !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: clamp(20px, 3vw, 32px) !important;
  background: var(--dk-ivory) !important;
  border: 1px solid var(--dk-line) !important;
  border-radius: var(--dk-r-lg) !important;
  box-shadow: var(--dk-sh-sm) !important;
  min-width: 0 !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content p,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content li {
  color: var(--dk-text) !important;
  font: 400 15px/1.7 var(--dk-ff-body) !important;
  max-width: none !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content h2,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content h3 {
  font-family: var(--dk-ff-serif) !important;
  color: var(--dk-text) !important;
  margin: 0 0 18px !important;
}

body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content a {
  color: var(--dk-red) !important;
  font-weight: 600;
}
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content a:hover {
  color: var(--dk-red-dark) !important;
  text-decoration: underline;
}

/* (6) Buttons inside the content card — brand red, not the
       default purple Astra/WC ships. Covers Save Address,
       Save Account Details, View Order, etc. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content .button,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content button[type="submit"],
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 26px !important;
  background: var(--dk-red) !important;
  color: #fff !important;
  border: 1.5px solid var(--dk-red) !important;
  border-radius: var(--dk-pill) !important;
  font: 600 14.5px/1 var(--dk-ff-body) !important;
  box-shadow: var(--dk-sh-red) !important;
  cursor: pointer !important;
  transition: background .15s ease, transform .15s ease !important;
  text-decoration: none !important;
}
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content .button:hover,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content button[type="submit"]:hover,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input[type="submit"]:hover {
  background: var(--dk-red-dark) !important;
  transform: translateY(-1px);
}

/* (7) Form fields inside the content card. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input[type="text"],
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input[type="email"],
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input[type="password"],
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input[type="tel"],
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content select,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  background: #fff !important;
  border: 1.5px solid var(--dk-line) !important;
  border-radius: var(--dk-r-sm) !important;
  font: 400 14.5px var(--dk-ff-body) !important;
  color: var(--dk-text) !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content input:focus,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content select:focus,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content textarea:focus {
  border-color: var(--dk-red) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(200,52,43,.12) !important;
}

/* (8) WC notices inside the content card. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-message,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-info,
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-error {
  background: var(--dk-cream) !important;
  border: 1px solid var(--dk-line) !important;
  border-inline-start: 4px solid var(--dk-red) !important;
  border-radius: var(--dk-r-sm) !important;
  padding: 14px 18px !important;
  color: var(--dk-text) !important;
  margin: 0 0 18px !important;
}

/* (9) Suppress the stray profile-pic / avatar bubble that the
       Dokan global rule (line ~3325) leaves floating at the top
       of the customer my-account page. The customer page has no
       legitimate avatar there — only the vendor dashboard does. */
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="profile-pic" i]:not(.dokan-vendor-rating *):not(.woocommerce-MyAccount-content *),
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="vendor-avatar" i]:not(.dokan-vendor-rating *):not(.woocommerce-MyAccount-content *),
body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="store-avatar" i]:not(.woocommerce-MyAccount-content *) {
  display: none !important;
}

/* (10) Tablet (≤980px) — keep the two-column grid but shrink
        the nav column so the content is still readable. Nav stays
        on the inline-start (right in RTL) via the desktop rules. */
@media (max-width: 980px) {
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce {
    grid-template-columns: 240px 1fr !important;
    gap: 20px !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation {
    padding: 10px !important;
    position: static !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li a {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
}

/* (11) Phone (≤720px) — stack: nav above content, both full width.
        Title scales down via the clamp() in (2). */
@media (max-width: 720px) {
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation {
    grid-column: 1 !important;
    order: 0 !important;
    position: static !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li {
    flex: 0 0 auto !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation li a {
    padding: 9px 14px !important;
    border-radius: var(--dk-pill) !important;
    font-size: 13.5px !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation-link--customer-logout a {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 9px !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content {
    grid-column: 1 !important;
    order: 1 !important;
    padding: 18px !important;
  }
}

/* (12) Fallback for browsers without :has() — same rules without
        the Dokan-exclusion guard. Safe because the Dokan vendor
        dashboard pages don't carry the .woocommerce-account body
        class (they live under /dashboard/, not /my-account/). */
@supports not selector(:has(*)) {
  body.riwajfood.woocommerce-account .woocommerce {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }
  body.riwajfood.woocommerce-account .woocommerce-MyAccount-navigation {
    grid-column: 1 !important;
    background: var(--dk-ivory) !important;
    border: 1px solid var(--dk-line) !important;
    border-radius: var(--dk-r-lg) !important;
    padding: 14px !important;
  }
  body.riwajfood.woocommerce-account .woocommerce-MyAccount-content {
    grid-column: 2 !important;
    background: var(--dk-ivory) !important;
    border: 1px solid var(--dk-line) !important;
    border-radius: var(--dk-r-lg) !important;
    padding: 24px !important;
  }
}

/* ============================================================
   v1.0.41 DELTA — Customer My-Account top gap (tablet/desktop)

   v1.0.40 set up the two-column grid correctly, but a standalone
   avatar element (the orange circle) renders ABOVE / BESIDE the
   .woocommerce container. Grid auto-placement put it into row 1
   col 1, which forced the content card down to row 2 — that's
   the empty band the user marked with X on tablet and desktop.

   Phone layout (≤720px) is reported perfect; gated behind
   min-width: 721px so this delta cannot touch the phone view.
   ============================================================ */
@media (min-width: 721px) {
  /* (a) Hide the orphan avatar / profile-pic that renders above
         the cards. Excludes the header dropdown (where the
         choroq user avatar legitimately lives) and excludes
         anything inside either card. */
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="profile-pic" i]:not(.site-header *):not(.ast-header-account-wrap *):not(.woocommerce-MyAccount-content *):not(.woocommerce-MyAccount-navigation *),
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="vendor-avatar" i]:not(.site-header *):not(.ast-header-account-wrap *):not(.woocommerce-MyAccount-content *):not(.woocommerce-MyAccount-navigation *),
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="user-avatar" i]:not(.site-header *):not(.ast-header-account-wrap *):not(.woocommerce-MyAccount-content *):not(.woocommerce-MyAccount-navigation *),
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) [class*="store-avatar" i]:not(.site-header *):not(.ast-header-account-wrap *):not(.woocommerce-MyAccount-content *):not(.woocommerce-MyAccount-navigation *) {
    display: none !important;
  }

  /* (b) Pin both grid items to row 1. Belt-and-braces against
         any unhidden orphan auto-placing into the first row and
         shoving content down again. */
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-navigation {
    grid-row: 1 !important;
  }
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce-MyAccount-content {
    grid-row: 1 !important;
  }

  /* (c) Any other direct child of .woocommerce that isn't the
         nav, content, or a WC notices wrapper — collapse it so
         it can't claim a grid cell. */
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content):not(.woocommerce-notices-wrapper) {
    display: none !important;
  }
}

/* ============================================================
   v1.0.42 DELTA — Desktop title right-edge alignment

   The .entry-content adds clamp(16px,4vw,32px) of inline padding
   around the .woocommerce grid (v1.0.40), but the .entry-header
   that wraps the title "لوحة حسابي" was set to padding:0, so the
   title's right edge sits ~32px past the welcome card's right
   edge in RTL — visible only on desktop. Mirror the same inline
   padding (plus a 1200px max-width safety cap in case Astra
   renders entry-header in a wider page-header wrapper) so the
   title and the welcome card share a right-edge anchor.

   Phone (≤720px) and tablet (≤980px) are reported perfect, so
   this delta is gated behind min-width: 981px.
   ============================================================ */
@media (min-width: 981px) {
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .entry-header,
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) header.entry-header,
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .ast-page-header,
  body.riwajfood.woocommerce-account:not(:has(.dokan-dashboard-wrap)) .page-header {
    max-width: 1200px !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: clamp(16px, 4vw, 32px) !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
   v1.0.43 DELTA — Desktop primary-menu baseline alignment

   On desktop, items in the kept .ast-below-header-wrap menu
   render on different vertical baselines (المدونة, كن طباخة sit
   slightly higher/lower than their neighbours). Tablet doesn't
   show the issue because the Astra mobile-menu rules already
   force a flex row. Apply the same flex centering on desktop.

   Scope: ≥981px only. The phone/tablet hamburger menu is gated
   by Astra's own breakpoint and is untouched.
   ============================================================ */
@media (min-width: 981px) {
  body.riwajfood .ast-below-header-wrap,
  body.riwajfood .ast-below-header-wrap .ast-builder-menu,
  body.riwajfood .ast-below-header-wrap .ast-builder-menu-1,
  body.riwajfood .ast-below-header-wrap nav.site-navigation,
  body.riwajfood .ast-below-header-wrap .main-navigation,
  body.riwajfood .ast-below-header-wrap .main-header-menu,
  body.riwajfood .ast-below-header-wrap ul.menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  body.riwajfood .ast-below-header-wrap .main-header-menu > li,
  body.riwajfood .ast-below-header-wrap ul.menu > li,
  body.riwajfood .ast-below-header-wrap nav.site-navigation li.menu-item,
  body.riwajfood .ast-below-header-wrap .ast-builder-menu li.menu-item {
    display: flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 40px !important;
    vertical-align: middle !important;
  }

  body.riwajfood .ast-below-header-wrap .main-header-menu > li > a,
  body.riwajfood .ast-below-header-wrap ul.menu > li > a,
  body.riwajfood .ast-below-header-wrap nav.site-navigation li.menu-item > a,
  body.riwajfood .ast-below-header-wrap .ast-builder-menu li.menu-item > a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    vertical-align: middle !important;
  }
}

/* ============================================================
   v1.0.44 DELTA — Notification bell: inline header + sidebar

   Replaces the fixed-position .rf-bell floating orange disc with
   an inline icon button rendered into:
     • the Astra primary header (alongside cart / account / lang)
     • the Dokan vendor dashboard top-nav action trio

   Markup is rendered once in wp_footer by RF_Notifications and
   relocated via JS on DOMContentLoaded. The panel anchor stays
   in the header; the sidebar clone delegates back to the main
   button so a single panel/badge state drives both surfaces.
   ============================================================ */

/* (1) Kill the legacy floating bell entirely. Cached HTML or any
       third-party widget that still injects these classes must
       not render. The wrap is fixed-positioned in legacy markup,
       so display:none is mandatory (visibility:hidden would still
       reserve the orange disc on broken sprites). */
body.riwajfood .rf-bell-wrap,
body.riwajfood .rf-bell-wrap *,
body.riwajfood button.rf-bell,
body.riwajfood .rf-bell-badge,
body.riwajfood .rf-bell-panel {
  display: none !important;
}

/* (2) New inline wrapper — sits anywhere it lands (Astra header
       end cluster, Dokan top-nav, sidebar fallback). */
body.riwajfood .rf-notif-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  margin: 0 6px;
}
body.riwajfood .rf-notif-bell-wrap[hidden] {
  display: none !important;
}

/* (3) Bell button — transparent, brand-aware hover. */
body.riwajfood .rf-notif-bell {
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--dk-text);
  position: relative;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
body.riwajfood .rf-notif-bell:hover,
body.riwajfood .rf-notif-bell:focus-visible {
  background: rgba(200, 52, 43, 0.08);
  color: var(--dk-red);
  outline: 0;
}
body.riwajfood .rf-notif-bell:active {
  transform: scale(0.94);
}
body.riwajfood .rf-notif-bell[aria-expanded="true"] {
  background: rgba(200, 52, 43, 0.10);
  color: var(--dk-red);
}

body.riwajfood .rf-notif-bell-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

/* (4) Count badge — pill shape, brand red, white ring so it pops
       against any header background. Hidden when empty / zero. */
body.riwajfood .rf-notif-bell-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--dk-red);
  color: #fff;
  font: 700 10px/1 var(--dk-ff-body);
  border-radius: 999px;
  border: 2px solid var(--dk-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-sizing: content-box;
  z-index: 1;
}
body.riwajfood .rf-notif-bell-badge[hidden],
body.riwajfood .rf-notif-bell-badge:empty {
  display: none !important;
}

/* (5) Dropdown panel — surfaces match the my-account cards
       (ivory, line border, big shadow). RTL-aware via inset-inline. */
body.riwajfood .rf-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 480px;
  overflow-y: auto;
  background: var(--dk-ivory);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-r-md);
  box-shadow: var(--dk-sh-lg);
  z-index: 10000;
  display: none;
  text-align: start;
  direction: rtl;
}
body.riwajfood .rf-notif-panel.is-open {
  display: block;
  animation: rf-notif-pop .18s ease-out;
}
@keyframes rf-notif-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.riwajfood .rf-notif-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dk-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--dk-cream);
  border-radius: var(--dk-r-md) var(--dk-r-md) 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}
body.riwajfood .rf-notif-title {
  font: 700 15px var(--dk-ff-body);
  color: var(--dk-text);
}
body.riwajfood .rf-notif-action {
  color: var(--dk-red);
  font: 600 12.5px var(--dk-ff-body);
  text-decoration: none;
  white-space: nowrap;
}
body.riwajfood .rf-notif-action:hover { text-decoration: underline; }

body.riwajfood .rf-notif-list { display: flex; flex-direction: column; }

body.riwajfood .rf-notif-empty,
body.riwajfood .rf-notif-loading {
  padding: 36px 18px;
  text-align: center;
  color: var(--dk-muted);
  font: 400 14px var(--dk-ff-body);
}

body.riwajfood .rf-notif-item {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dk-line);
  color: var(--dk-text);
  text-decoration: none;
  transition: background .15s ease;
  position: relative;
}
body.riwajfood .rf-notif-item:last-child { border-bottom: 0; }
body.riwajfood .rf-notif-item:hover { background: var(--dk-cream-2); color: var(--dk-text); }
body.riwajfood .rf-notif-item.is-unread {
  background: rgba(232, 154, 60, 0.07);
}
body.riwajfood .rf-notif-item.is-unread .rf-notif-item-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dk-red);
  margin-inline-end: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

body.riwajfood .rf-notif-item-title {
  font: 600 13.5px/1.3 var(--dk-ff-body);
  color: var(--dk-text);
  margin: 0 0 2px;
}
body.riwajfood .rf-notif-item-message {
  font: 400 12.5px/1.5 var(--dk-ff-body);
  color: var(--dk-muted);
  margin: 0 0 4px;
}
body.riwajfood .rf-notif-item-time {
  font: 400 11px var(--dk-ff-body);
  color: var(--dk-muted-2);
}

/* (6) Mobile / phone — panel becomes a top sheet so it doesn't
       fall off-screen from a small icon button. */
@media (max-width: 600px) {
  body.riwajfood .rf-notif-panel {
    position: fixed;
    top: 64px;
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    width: auto;
    max-width: none;
    max-height: 72vh;
  }
}

/* (7) Tablet tuning — slightly tighter bell so it balances with
       Astra's primary menu items. */
@media (min-width: 721px) and (max-width: 980px) {
  body.riwajfood .rf-notif-bell {
    width: 34px;
    height: 34px;
  }
  body.riwajfood .rf-notif-bell-icon {
    width: 20px;
    height: 20px;
  }
}

/* (8) Dokan vendor dashboard top-nav variant — the bell sits
       inside the dark-purple .rf-tn-actions trio, so flip the
       glyph to white and adapt the badge ring colour. */
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell-wrap {
  margin: 0 4px;
}
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell {
  color: #fff !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell:hover,
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell-badge {
  border-color: #3B1F66; /* matches the rf-tn purple gradient base */
}

/* (9) Sidebar-clone link (Dokan dashboard sidebar entry).
       Renders only when JS finds .rf-tn-actions or the legacy
       .dokan-dashboard-sidebar. Visually mirrors the inline bell
       but is a plain <a>, so reset link colour + underline. */
body.riwajfood .rf-notif-sidebar-link {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  text-decoration: none;
  transition: background .15s ease;
  margin: 0 4px;
  vertical-align: middle;
}
body.riwajfood .rf-notif-sidebar-link:hover,
body.riwajfood .rf-notif-sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  outline: 0;
}
body.riwajfood .rf-notif-sidebar-link .rf-notif-bell-icon {
  width: 22px;
  height: 22px;
}
body.riwajfood .rf-notif-sidebar-link .rf-notif-bell-badge--sidebar {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  border-color: #3B1F66;
}

/* (10) Astra header context — when the bell lands inside the
        .ast-builder-grid-row-end cluster, neutralise inherited
        list/menu paddings that would push it off-baseline. */
body.riwajfood .ast-builder-grid-row-end-center .rf-notif-bell-wrap,
body.riwajfood .ast-builder-grid-row-end .rf-notif-bell-wrap,
body.riwajfood .ast-header-account-wrap .rf-notif-bell-wrap,
body.riwajfood .main-header-bar .rf-notif-bell-wrap {
  margin: 0 6px;
  align-self: center;
}

/* (v1.0.47: JS-only changes — no CSS edits this turn.
    Broader cart selectors + retry loop in
    class-rf-notifications.php; Visit Store insert flipped from
    "after" to "before" per green-circle marker.) */

/* (v1.0.51: JS-only changes — findAllCarts() returns every cart
    icon in the header (Astra Header Builder ships separate
    desktop / mobile cart components); placeHeaderBell() uses a
    smart insert direction (appendChild if cart is last child,
    insertBefore otherwise) so the bell lands on the inline-end
    side of the cart cluster at every breakpoint, matching the
    green-circle markers in the user's screenshots. CSS for
    .rf-notif-header-link from v1.0.48 covers all positions and
    breakpoints unchanged.) */

/* ============================================================
   v1.0.46 DELTA — Bell placement: cart icon + Visit Store

   v1.0.45's wp_nav_menu_items injection placed the bell in a
   menu that renders above the main header on this Astra layout
   (and above the site logo on the dashboard). Dropped in PHP.
   This delta adds the visual finishing touches for the two
   correct surfaces:

     • Main site → bell sits just before the cart icon
       (data-rf-placement="header-cart")
     • Dashboard → bell sits inside .rf-tn-actions right after
       Visit Store (.rf-notif-sidebar-link inside .rf-tn-actions)
   ============================================================ */

/* (1) Body-fallback state — only used if neither cart nor any
       header end-cluster is found. Renders as a clean fixed chip
       at the top inline-end (NOT the legacy orange disc). */
body.riwajfood .rf-notif-bell-wrap[data-rf-placement="body-fallback"] {
  position: fixed !important;
  top: 14px;
  inset-inline-end: 16px;
  z-index: 9998;
  margin: 0;
  background: var(--dk-ivory);
  border: 1px solid var(--dk-line);
  border-radius: 999px;
  box-shadow: var(--dk-sh-md);
}
body.riwajfood .rf-notif-bell-wrap[data-rf-placement="body-fallback"] .rf-notif-bell {
  width: 40px;
  height: 40px;
}
body.riwajfood .rf-notif-bell-wrap[data-rf-placement="body-fallback"] .rf-notif-bell-badge {
  border-color: var(--dk-ivory);
}
@media (max-width: 600px) {
  body.riwajfood .rf-notif-bell-wrap[data-rf-placement="body-fallback"] {
    top: 10px;
    inset-inline-end: 10px;
  }
}

/* (2) Header-cart placement — the bell now sits as a sibling of
       the Astra cart icon. Match the cart icon's vertical alignment
       and trim the wrap's margin so it tucks in tight. */
body.riwajfood .rf-notif-bell-wrap[data-rf-placement="header-cart"],
body.riwajfood .rf-notif-bell-wrap[data-rf-placement="header-end"] {
  margin: 0 6px;
  align-self: center;
}
/* Also flex-align inside whichever Astra cart wrap is the parent. */
body.riwajfood .ast-site-header-cart > .rf-notif-bell-wrap,
body.riwajfood .ast-cart-menu-wrap > .rf-notif-bell-wrap,
body.riwajfood .ast-builder-cart > .rf-notif-bell-wrap {
  display: inline-flex;
  vertical-align: middle;
}

/* (3) Dashboard .rf-tn-actions context — the v1.0.27 rules force
       the trio children to a 40px row. The .rf-notif-sidebar-link
       inside that row needs to match that height exactly so it
       baselines with Visit Store and the avatar. */
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-sidebar-link,
body.riwajfood .rf-tn-actions .rf-notif-sidebar-link {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: transparent !important;
  border-radius: 50% !important;
  position: relative !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
}
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-sidebar-link:hover,
body.riwajfood .rf-tn-actions .rf-notif-sidebar-link:hover,
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-sidebar-link:focus-visible {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  outline: 0 !important;
}
body.riwajfood .rf-tn-actions .rf-notif-sidebar-link .rf-notif-bell-icon {
  width: 22px !important;
  height: 22px !important;
}
body.riwajfood .rf-tn-actions .rf-notif-sidebar-link .rf-notif-bell-badge--sidebar {
  position: absolute !important;
  top: 2px !important;
  inset-inline-end: 2px !important;
  border-color: #3B1F66 !important; /* dashboard sidebar purple */
}

/* (4) Hide-until-placed safety — if for any reason the JS doesn't
       set a data-rf-placement attribute, keep the bell from
       rendering at the bottom of the page where it was injected.
       The render itself outputs no `hidden` attribute (v1.0.46
       still ships visible-by-default), but uplevel the body-prepend
       fallback so even a worst-case "no placement" state lands as
       a clean chip rather than a stray icon in the footer. */
body.riwajfood > .rf-notif-bell-wrap:not([data-rf-placement]),
body.riwajfood .site-content > .rf-notif-bell-wrap:not([data-rf-placement]),
body.riwajfood .site-footer .rf-notif-bell-wrap:not([data-rf-placement]) {
  position: fixed !important;
  top: 14px;
  inset-inline-end: 16px;
  z-index: 9998;
  background: var(--dk-ivory);
  border: 1px solid var(--dk-line);
  border-radius: 999px;
  box-shadow: var(--dk-sh-md);
  margin: 0 !important;
}

/* ============================================================
   v1.0.48 DELTA — Clone-only triggers, root wrap always hidden

   v1.0.47 still relocated the wp_footer root wrap into Astra
   header elements. On the dashboard, that landed it above the
   "Riwaj Foo..." logo (the duplicate bell the user marked NO ❌).
   On the main site it sometimes missed the cart icon and ended
   up in body-fallback (top-left chip).

   v1.0.48: the root wrap is ALWAYS hidden. It only holds the
   dropdown panel. Visible bells are always JS-created clones:
     • .rf-notif-header-link  — main site header, next to cart
     • .rf-notif-sidebar-link — dashboard trio, before Visit Store
   ============================================================ */

/* (1) Root wrap stays in DOM (panel host) but never renders. */
body.riwajfood .rf-notif-bell-wrap[data-rf-notif="root"] {
  display: none !important;
}
/* When the panel is reparented out of root and opened, the panel
   itself ignores the root's display:none — it's no longer a
   descendant once togglePanel moves it next to a clone. */
body.riwajfood .rf-notif-panel.is-open {
  display: block !important;
}

/* (2) MAIN SITE HEADER CLONE — light-themed icon button that
       lands as an immediate sibling of the Astra cart icon. */
body.riwajfood .rf-notif-header-link {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--dk-text);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 6px;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  align-self: center;
  -webkit-appearance: none;
  appearance: none;
  transition: background .15s ease, color .15s ease;
}
body.riwajfood .rf-notif-header-link:hover,
body.riwajfood .rf-notif-header-link:focus-visible {
  background: rgba(200, 52, 43, 0.08);
  color: var(--dk-red);
  outline: 0;
}
body.riwajfood .rf-notif-header-link:active {
  transform: scale(0.94);
}
body.riwajfood .rf-notif-header-link .rf-notif-bell-icon {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}
body.riwajfood .rf-notif-header-link .rf-notif-bell-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--dk-red);
  color: #fff;
  font: 700 10px/1 var(--dk-ff-body);
  border-radius: 999px;
  border: 2px solid var(--dk-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-sizing: content-box;
  z-index: 1;
}
body.riwajfood .rf-notif-header-link .rf-notif-bell-badge[hidden],
body.riwajfood .rf-notif-header-link .rf-notif-bell-badge:empty {
  display: none !important;
}

/* (3) Inside Astra cart wraps, force flex centering so the
       clone shares the cart icon's baseline regardless of the
       parent's flex / grid layout. */
body.riwajfood .ast-site-header-cart > .rf-notif-header-link,
body.riwajfood .ast-cart-menu-wrap > .rf-notif-header-link,
body.riwajfood .ast-builder-cart > .rf-notif-header-link,
body.riwajfood [class*="ast-builder-cart"] > .rf-notif-header-link,
body.riwajfood [class*="ast-header-cart"] > .rf-notif-header-link {
  align-self: center;
}

/* (4) Tablet — slightly tighter so the bell balances with menu
       items at the smaller header height. */
@media (min-width: 721px) and (max-width: 980px) {
  body.riwajfood .rf-notif-header-link {
    width: 34px;
    height: 34px;
  }
  body.riwajfood .rf-notif-header-link .rf-notif-bell-icon {
    width: 20px;
    height: 20px;
  }
}

/* (5) Mobile — keep the touch target generous but trim margin
       so the bell + cart don't push the cluster off-row. */
@media (max-width: 600px) {
  body.riwajfood .rf-notif-header-link {
    width: 36px;
    height: 36px;
    margin: 0 2px;
  }
}

/* (6) Sidebar clone — confirmed working from earlier deltas;
       just lock its dimensions inside the v1.0.27 .rf-tn-actions
       40px row so it matches Visit Store / avatar exactly. (No
       change vs v1.0.46 — repeated here under the v1.0.48 banner
       so all clone styling lives in one block.) */
body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-sidebar-link,
body.riwajfood .rf-tn-actions .rf-notif-sidebar-link {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  position: relative !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
  cursor: pointer;
}

/* ============================================================
   v1.0.49 DELTA — Notification panel: open/close + position + empty state

   v1.0.48's panel:
     • Used position:absolute relative to whatever parent it landed
       in. On the dashboard trio (.rf-tn-actions has no
       position:relative), absolute coords resolved to <body> and
       the panel rendered far below the viewport — invisible.
     • Used display:none ↔ display:block toggle which can't animate
       on close.
     • Per-clone click listener + document click delegate fired
       togglePanel TWICE per click — net result no visible state
       change.

   v1.0.49:
     • Panel is position:fixed; JS sets top/right/width from the
       trigger's getBoundingClientRect on open. Works in any parent.
     • Animates via opacity/visibility/transform — smooth open AND
       close, both directions. transition timing: 220ms ease.
     • Empty state: icon + heading + helper text, modern minimal.
     • (The double-fire fix lives in the JS — single document
       delegate; per-clone listeners removed.)
   ============================================================ */

/* (1) Panel base — v1.0.50 fix:
       !important removed from top/right/bottom/left/inset-inline-*
       because stylesheet !important beats non-important inline
       styles. JS setting panel.style.top = '100px' was being
       silently discarded, leaving the panel at its static position
       (off-screen at the bottom of <body>). position:fixed keeps
       !important so the legacy v1.0.44 absolute rule can't win. */
body.riwajfood .rf-notif-panel {
  position: fixed !important;
  /* No top/right/bottom/left here — JS sets them via setProperty
     with 'important' priority on each open. Specificity hierarchy:
     inline !important > stylesheet !important > inline > stylesheet. */
  width: 360px;
  max-width: calc(100vw - 20px);
  max-height: 480px;
  overflow-y: auto;
  background: var(--dk-ivory);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-r-md);
  box-shadow: var(--dk-sh-lg);
  z-index: 100000;
  text-align: start;
  direction: rtl;

  /* Animation state — closed by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity      .22s cubic-bezier(.2, .9, .3, 1),
    transform    .22s cubic-bezier(.2, .9, .3, 1),
    visibility   0s   linear .22s;
  pointer-events: none;

  /* Force block — v1.0.44 set display:none which would defeat
     the opacity/visibility animation. */
  display: block !important;
  animation: none !important; /* kill legacy rf-notif-pop keyframes */
}
body.riwajfood .rf-notif-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity      .22s cubic-bezier(.2, .9, .3, 1),
    transform    .22s cubic-bezier(.2, .9, .3, 1),
    visibility   0s   linear 0s;
  pointer-events: auto;
}

/* (2) Panel head — sticky inside the scrollable panel. */
body.riwajfood .rf-notif-panel .rf-notif-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--dk-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--dk-cream);
  border-radius: var(--dk-r-md) var(--dk-r-md) 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* (3) Empty state — icon + title + sub. Replaces the v1.0.44
       plain-text empty state. */
body.riwajfood .rf-notif-empty {
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  color: var(--dk-muted);
}
body.riwajfood .rf-notif-empty-icon {
  width: 48px;
  height: 48px;
  color: var(--dk-muted-2);
  opacity: 0.55;
  margin-bottom: 10px;
  flex-shrink: 0;
}
body.riwajfood .rf-notif-empty-title {
  font: 600 15px/1.3 var(--dk-ff-body);
  color: var(--dk-text);
  margin: 0;
}
body.riwajfood .rf-notif-empty-sub {
  font: 400 12.5px/1.5 var(--dk-ff-body);
  color: var(--dk-muted);
  margin: 0;
  max-width: 240px;
}

/* (4) Loading state — neutral, no bouncing spinner. */
body.riwajfood .rf-notif-loading {
  padding: 36px 20px;
  text-align: center;
  color: var(--dk-muted);
  font: 400 13.5px var(--dk-ff-body);
}

/* (5) Mobile — panel CSS already inset-inline 10px by JS; just
       trim padding inside the empty state. */
@media (max-width: 600px) {
  body.riwajfood .rf-notif-empty {
    padding: 36px 18px;
  }
  body.riwajfood .rf-notif-empty-icon {
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   v1.0.52 DELTA — Header bell inside .rf-header-actions

   Cart on main site is .rf-cart-btn (not Astra). v1.0.51's
   findAllCarts() returned an empty array for every retry, so no
   bell was ever inserted. v1.0.52 targets the custom RIWAJ
   header actions row directly.

   Position-switch via `order` (NOT via different DOM positions):
     • Desktop (≥1025px): bell sits LEFT of cart (per screenshot).
       In RTL flex row, leftmost = LAST in flex order → order: 100.
     • Tablet / mobile (<1025px): bell sits RIGHT of cart (between
       cart and the right-side gap). In RTL flex row, rightmost =
       FIRST in flex order → order: -1.

   Same 1025px breakpoint .rf-lang-switch already uses, so the
   bell flips sides at exactly the same point lang/user hide and
   hamburger shows.

   The flex container .rf-header-actions has gap: 8px (12px on
   desktop), so the bell needs margin:0 to avoid double-spacing.
   ============================================================ */

body.riwajfood .rf-header-actions {
  /* Already display:flex from phase3.css; just make sure align-items
     is centered so the bell baselines with the cart icon. */
  align-items: center;
}

body.riwajfood .rf-header-actions .rf-notif-header-link {
  /* Reset margin — .rf-header-actions uses `gap` for spacing. */
  margin: 0 !important;
  align-self: center;
  /* Desktop default: bell at the inline-end of the row =
     LEFTMOST visually in RTL = LAST in flex order. */
  order: 100;
  /* Match the cart button visual size on desktop. .rf-cart-btn
     is ~38px from phase3.css; keep the bell the same. */
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  body.riwajfood .rf-header-actions .rf-notif-header-link {
    /* Tablet / mobile: bell on the inline-start of the cart =
       RIGHTMOST visually in RTL = FIRST in flex order. Visually
       lands between the cart and the empty gap toward the logo —
       exactly matches the green-circle markers in the screenshots. */
    order: -1;
    /* Slightly smaller touch target inside the more compact
       mobile header row. */
    width: 36px;
    height: 36px;
  }
  body.riwajfood .rf-header-actions .rf-notif-header-link .rf-notif-bell-icon {
    width: 20px;
    height: 20px;
  }
}

/* Make sure the bell is never accidentally collapsed by the
   container's flex shorthand. */
body.riwajfood .rf-header-actions > .rf-notif-header-link {
  min-width: 36px;
}

/* ============================================================
   v1.0.53 DELTA — Click-only triggers + no-clip panel content

   Three targeted fixes:

   (1) Mobile/tablet tap reliability — handled in JS (per-trigger
       click listener with stopPropagation in
       class-rf-notifications.php). The CSS side: explicit
       pointer-events on the trigger and closed panel so nothing
       intercepts the tap.

   (2) Click-only (no hover trigger) — JS already only opens on
       click. CSS just makes sure the closed panel has
       pointer-events:none so it can't be "hovered into" while
       transparent, and the open panel has pointer-events:auto.

   (3) Notification content not clipped — long titles/messages
       break by character/word so they don't push past the panel
       width. Panel itself uses overflow-x:hidden as a safety net.
       Horizontal viewport clipping is fixed in JS (positionPanel
       switches to left-anchor when right-anchor would overflow).
   ============================================================ */

/* (1) Triggers always clickable. The header bell is appended into
       .rf-header-actions which Astra / phase3 may mark with
       touch-action or pointer-events for swipe handlers — force
       auto so taps always register. */
body.riwajfood .rf-notif-trigger,
body.riwajfood .rf-notif-header-link,
body.riwajfood .rf-notif-sidebar-link {
  pointer-events: auto !important;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(200, 52, 43, 0.10);
}

/* (2) Closed panel cannot receive any pointer event. Prevents a
       transparent overlapping panel from triggering hover styles
       or eating clicks meant for the bell. Open panel is fully
       interactive. */
body.riwajfood .rf-notif-panel {
  pointer-events: none;
}
body.riwajfood .rf-notif-panel.is-open {
  pointer-events: auto;
}

/* (3) Notification text wraps — long titles, multi-line messages,
       and timestamps stay inside the panel column. */
body.riwajfood .rf-notif-list,
body.riwajfood .rf-notif-item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
body.riwajfood .rf-notif-item-title,
body.riwajfood .rf-notif-item-message,
body.riwajfood .rf-notif-item-time {
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
body.riwajfood .rf-notif-head {
  min-width: 0;
}
body.riwajfood .rf-notif-head .rf-notif-action {
  white-space: nowrap;
  flex-shrink: 0;
}
body.riwajfood .rf-notif-head .rf-notif-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Panel: horizontal safety net so nothing ever pushes content
   past its right edge even if a child overrides word-break. */
body.riwajfood .rf-notif-panel {
  overflow-x: hidden;
}

/* ============================================================
   v1.0.54 DELTA — Click-only triggers, no iOS double-tap

   Two real bugs identified from your codebase:

   (1) phase3.css line 247 has
       `.rf-user-menu:hover .rf-user-dropdown { display: block }`
       — that's the user (choroq) dropdown opening on hover. It's
       in the same row as the bell; user might see it pop up when
       hovering near the bell area. Not our bug, but unrelated
       dropdown visibility can be mistaken for ours.

   (2) iOS double-tap. Earlier deltas put `:hover` rules on
       .rf-notif-header-link / .rf-notif-bell. On iOS Safari,
       buttons with `:hover` styles often need a SECOND tap before
       click fires — first tap shows hover, second tap clicks.
       Fix: gate every bell `:hover` rule behind
       @media (hover: hover) so touch devices never load them.

   No design or position changes — only the hover styles are
   moved behind a media query, and a touch-safe :active fallback
   replaces the visual feedback so tapping still feels responsive.
   ============================================================ */

/* (1) Neutralise every existing :hover on bell elements when the
       device lacks a hover-capable pointer (= mobile/tablet
       touch). On touch devices these selectors load with the
       same values as the default state — so the rule still
       exists in the cascade but it does not change the painted
       pixels, eliminating the iOS double-tap heuristic. */
@media (hover: none) {
  body.riwajfood .rf-notif-trigger:hover,
  body.riwajfood .rf-notif-header-link:hover,
  body.riwajfood .rf-notif-sidebar-link:hover,
  body.riwajfood .rf-notif-bell:hover {
    background: transparent !important;
    color: var(--dk-text) !important;
    transform: none !important;
    outline: 0 !important;
  }
  body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell:hover,
  body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-sidebar-link:hover,
  body.riwajfood .rf-tn-actions .rf-notif-sidebar-link:hover {
    background: transparent !important;
    color: #fff !important;
  }
  /* Touch-friendly active feedback — visible only while finger
     is pressed, no sticky hover state after release. */
  body.riwajfood .rf-notif-trigger:active,
  body.riwajfood .rf-notif-header-link:active,
  body.riwajfood .rf-notif-sidebar-link:active,
  body.riwajfood .rf-notif-bell:active {
    background: rgba(200, 52, 43, 0.10) !important;
    transform: scale(0.96) !important;
  }
}

/* (2) On hover-capable devices (desktop with mouse), the bell
       hover wash is preserved — same effect you have now. Nothing
       changes visually for mouse users. */
@media (hover: hover) {
  body.riwajfood .rf-notif-header-link:hover,
  body.riwajfood .rf-notif-bell:hover {
    background: rgba(200, 52, 43, 0.08);
    color: var(--dk-red);
  }
  body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-bell:hover,
  body.riwajfood.rf-tn-on .rf-tn-actions .rf-notif-sidebar-link:hover,
  body.riwajfood .rf-tn-actions .rf-notif-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
  }
}

/* (3) Hover does NOT open the panel. The only way the panel gains
       .is-open is the JS click handler. CSS guarantee: closed
       panel is always non-interactive AND visually hidden. No
       :hover or :focus selector in this stylesheet shows the
       panel — and these !importants ensure no external rule can,
       either. */
body.riwajfood .rf-notif-panel:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(0.98) !important;
}
body.riwajfood .rf-notif-panel.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* ========== END RIWAJ DARKOM ========== */