/*
Theme Name:   YallaSaver — REHub Child
Theme URI:    https://yallasaver.com
Description:  Fresh, modern, fluid child theme for REHub on yallasaver.com. Holds all custom design + code so the parent REHub theme can update safely. Edit the design tokens in the :root block to re-skin the whole site in seconds.
Author:       YallaSaver
Template:     rehub-theme
Version:      1.0.0
Text Domain:  yallasaver
*/

/* ============================================================================
   IMPORTANT — HOW THIS FILE WORKS
   ----------------------------------------------------------------------------
   1. "Template: rehub-theme" tells WordPress this is a child of REHub. If your
      installed parent folder is named differently (check
      wp-content/themes/), change that line to match the EXACT folder name,
      or the child theme will not activate.
   2. Almost everything below is driven by the CSS variables in :root. Change a
      handful of values there and the whole site re-skins. The selector blocks
      lower down apply those tokens to REHub's actual elements.
   3. Some REHub builds use slightly different class names by version. Where a
      rule does not "take", open the element in your browser DevTools
      (right-click > Inspect), copy its real class, and add it next to the
      matching selector below. The guide explains this step-by-step.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   FONTS — distinctive but highly readable. Swap freely.
   For Arabic / RTL content, also load an Arabic face (see RTL section near end).
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Figtree:wght@400;500;600;700&display=swap');


/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS  —  edit these to re-theme the entire site
   ---------------------------------------------------------------------------- */
:root {
  /* Brand palette — "yalla, let's save" energy: fresh teal + warm coral accent */
  --ys-bg:            #f7f9fb;   /* page background           */
  --ys-surface:       #ffffff;   /* cards / panels            */
  --ys-surface-2:     #eef2f6;   /* subtle alt surface        */
  --ys-ink:           #0f1c2e;   /* primary text             */
  --ys-ink-soft:      #4a5a6e;   /* secondary text           */
  --ys-line:          #e3e9ef;   /* borders / dividers        */

  --ys-primary:       #00b894;   /* main brand (savings teal) */
  --ys-primary-600:   #029e80;
  --ys-primary-700:   #047a64;
  --ys-accent:        #ff6b5e;   /* deals / CTA coral         */
  --ys-accent-600:    #ec5346;
  --ys-gold:          #ffb43a;   /* badges, ratings, "%off"   */
  --ys-info:          #2f80ed;

  /* Fluid type scale (auto-scales between mobile and desktop) */
  --ys-step--1: clamp(0.80rem, 0.75rem + 0.2vw, 0.90rem);
  --ys-step-0:  clamp(0.95rem, 0.90rem + 0.3vw, 1.05rem);
  --ys-step-1:  clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
  --ys-step-2:  clamp(1.45rem, 1.25rem + 1.0vw, 2.10rem);
  --ys-step-3:  clamp(1.90rem, 1.55rem + 1.8vw, 3.10rem);

  --ys-font-head: 'Sora', system-ui, sans-serif;
  --ys-font-body: 'Figtree', system-ui, -apple-system, sans-serif;

  /* Shape & depth */
  --ys-radius-sm: 10px;
  --ys-radius:    16px;
  --ys-radius-lg: 24px;
  --ys-shadow-sm: 0 1px 2px rgba(15,28,46,.06), 0 2px 6px rgba(15,28,46,.05);
  --ys-shadow:    0 6px 18px rgba(15,28,46,.08), 0 2px 6px rgba(15,28,46,.05);
  --ys-shadow-lg: 0 18px 48px rgba(15,28,46,.14);

  /* Motion */
  --ys-ease: cubic-bezier(.2,.7,.2,1);
  --ys-fast: .18s var(--ys-ease);
  --ys-med:  .28s var(--ys-ease);
}

/* Optional dark mode — flips automatically with the OS setting.
   Comment this whole block out if you want light-only. */
@media (prefers-color-scheme: dark) {
  :root {
    --ys-bg:        #0e1622;
    --ys-surface:   #16202e;
    --ys-surface-2: #1d2937;
    --ys-ink:       #eaf1f8;
    --ys-ink-soft:  #9fb2c6;
    --ys-line:      #263545;
    --ys-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --ys-shadow:    0 8px 22px rgba(0,0,0,.45);
    --ys-shadow-lg: 0 22px 55px rgba(0,0,0,.55);
  }
}


/* ----------------------------------------------------------------------------
   2. GLOBAL BASE
   ---------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body,
body.rehub_default {
  background: var(--ys-bg) !important;
  color: var(--ys-ink);
  font-family: var(--ys-font-body);
  font-size: var(--ys-step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.rh-post-name, .wpsm-titlebar h1, .re_title, .post-name {
  font-family: var(--ys-font-head);
  color: var(--ys-ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h1 { font-size: var(--ys-step-3); font-weight: 800; }
h2 { font-size: var(--ys-step-2); font-weight: 700; }
h3 { font-size: var(--ys-step-1); font-weight: 700; }

a { color: var(--ys-primary-700); transition: color var(--ys-fast); }
a:hover { color: var(--ys-accent); }

/* Comfortable reading width for article bodies */
.entry-content,
.post-inner-content,
article .post-content { max-width: 72ch; }

/* Tasteful selection colour */
::selection { background: color-mix(in srgb, var(--ys-primary) 25%, transparent); }


/* ----------------------------------------------------------------------------
   3. HEADER  —  modern sticky glass bar
   ---------------------------------------------------------------------------- */
#header, .rh-main-header, .rh-header, .top_panel {
  background: color-mix(in srgb, var(--ys-surface) 80%, transparent) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ys-line);
  box-shadow: var(--ys-shadow-sm);
}

#mainmenu a, .rh-header a, .menu-item > a {
  font-family: var(--ys-font-head);
  font-weight: 600;
  font-size: var(--ys-step--1);
  letter-spacing: .01em;
}
.menu-item > a { position: relative; }
.menu-item > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: var(--ys-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--ys-med);
}
.menu-item > a:hover::after { transform: scaleX(1); }


/* ----------------------------------------------------------------------------
   4. CARDS  —  posts, deals, offers, store grids
   ---------------------------------------------------------------------------- */
.post_inner_wrapper, .grid_post_box, .deals_grid_box, .rh-product-cont,
.col_grid_post, .re_post_grid, .top-chart-item, .wpsm_offer_box,
.egg-product, .product-deal {
  background: var(--ys-surface);
  border: 1px solid var(--ys-line);
  border-radius: var(--ys-radius);
  box-shadow: var(--ys-shadow-sm);
  overflow: hidden;
  transition: transform var(--ys-med), box-shadow var(--ys-med), border-color var(--ys-med);
}
.post_inner_wrapper:hover, .grid_post_box:hover, .deals_grid_box:hover,
.rh-product-cont:hover, .col_grid_post:hover, .re_post_grid:hover,
.top-chart-item:hover, .wpsm_offer_box:hover, .egg-product:hover {
  transform: translateY(-4px);
  box-shadow: var(--ys-shadow-lg);
  border-color: color-mix(in srgb, var(--ys-primary) 35%, var(--ys-line));
}

/* Image inside cards: subtle zoom on hover */
.post_inner_wrapper img, .grid_post_box img, .deals_grid_box img {
  transition: transform .5s var(--ys-ease);
}
.post_inner_wrapper:hover img, .grid_post_box:hover img, .deals_grid_box:hover img {
  transform: scale(1.04);
}


/* ----------------------------------------------------------------------------
   5. BUTTONS & PRICES  —  the money moments
   ---------------------------------------------------------------------------- */
.rh-button, .btn_offer_block, .re_offer_btn, .wpsm-button,
.button, button.btn, input[type="submit"], .add_to_cart_button {
  font-family: var(--ys-font-head) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--ys-radius-sm) !important;
  padding: .7em 1.4em !important;
  background: linear-gradient(135deg, var(--ys-accent), var(--ys-accent-600)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ys-accent) 40%, transparent);
  transition: transform var(--ys-fast), box-shadow var(--ys-fast), filter var(--ys-fast);
}
.rh-button:hover, .btn_offer_block:hover, .re_offer_btn:hover, .wpsm-button:hover,
.button:hover, button.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ys-accent) 50%, transparent);
}

/* Secondary / "view deal" style buttons → brand teal */
.rh-button.secondary, .re_offer_btn.green, .btn_more {
  background: linear-gradient(135deg, var(--ys-primary), var(--ys-primary-600)) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--ys-primary) 40%, transparent);
}

/* Price typography */
.price, .rh-price, .product_price, .re_price, .amount {
  font-family: var(--ys-font-head);
  font-weight: 800;
  color: var(--ys-primary-700);
}
.old_price, del .amount { color: var(--ys-ink-soft); opacity: .7; }

/* Discount / cashback badge */
.rh-badge, .sale_offer, .discount_value, .cashback_badge, .badge-discount {
  background: var(--ys-gold) !important;
  color: #3a2a00 !important;
  font-family: var(--ys-font-head);
  font-weight: 800;
  border-radius: 999px !important;
  padding: .2em .7em !important;
  letter-spacing: .02em;
}


/* ----------------------------------------------------------------------------
   6. CASHBACK / ACCOUNT UI  (REHub cashback "RE:Cash" point system)
   ---------------------------------------------------------------------------- */
.rh-cashback, .cashback_amount, .user_points, .rh-points-balance {
  font-family: var(--ys-font-head);
  font-weight: 800;
  color: var(--ys-primary-700);
}
.rh-cashback-card, .points_history_box, .rh-account-panel {
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--ys-primary) 8%, var(--ys-surface)),
              var(--ys-surface));
  border: 1px solid color-mix(in srgb, var(--ys-primary) 22%, var(--ys-line));
  border-radius: var(--ys-radius-lg);
  box-shadow: var(--ys-shadow);
  padding: clamp(1rem, 2vw, 1.75rem);
}
/* "Pending vs approved" status pills */
.points_pending  { color: var(--ys-gold); font-weight: 700; }
.points_approved { color: var(--ys-primary-700); font-weight: 700; }


/* ----------------------------------------------------------------------------
   7. LAYOUT POLISH  —  spacing, grids, forms, footer
   ---------------------------------------------------------------------------- */
#content, .rh-container, .container { padding-block: clamp(1rem, 3vw, 2.5rem); }

/* Slightly airier grids on big screens */
@media (min-width: 1024px) {
  .rh-deals-grid, .grid_layout, .deals_grid { gap: 1.25rem; }
}

input[type=text], input[type=search], input[type=email], textarea, select {
  border: 1px solid var(--ys-line) !important;
  border-radius: var(--ys-radius-sm) !important;
  background: var(--ys-surface) !important;
  color: var(--ys-ink) !important;
  transition: border-color var(--ys-fast), box-shadow var(--ys-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--ys-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ys-primary) 18%, transparent) !important;
}

#footer, .rh-footer, .footer {
  background: var(--ys-ink) !important;
  color: var(--ys-surface-2);
}
#footer a, .rh-footer a { color: color-mix(in srgb, var(--ys-primary) 60%, #fff) !important; }


/* ----------------------------------------------------------------------------
   8. MICRO-ANIMATION  —  gentle staggered reveal on first paint
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .post_inner_wrapper, .grid_post_box, .deals_grid_box, .top-chart-item, .egg-product {
    animation: ys-rise .5s var(--ys-ease) both;
  }
  @keyframes ys-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* ----------------------------------------------------------------------------
   9. RTL / ARABIC SUPPORT  (yalla = Arabic-friendly brand)
   Uncomment the @import and the dir rules if you run Arabic content.
   ---------------------------------------------------------------------------- */
/*
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
html[dir="rtl"] body,
html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', var(--ys-font-body); }
html[dir="rtl"] .menu-item > a::after { transform-origin: right; }
*/


/* ----------------------------------------------------------------------------
   10. YOUR OVERRIDES  —  paste site-specific tweaks below this line
   ---------------------------------------------------------------------------- */