/* =========================================================
   OHS — Premium Top Bar v3.2
   FINAL MINT-HARMONIZED VERSION
   Updated message text color to #f5f5dc
   ========================================================= */

.oh-topbar{

  /* ======================================================
     1) MAIN COLOR DIALS
     ------------------------------------------------------
     Updated for a more seamless transition into the mint
     header below while preserving premium contrast
     ====================================================== */

  --oh-tb-bg-1: #06373a;   /* Darker teal edge — closer to the mint header */
  --oh-tb-bg-2: #0d4f4d;   /* Softer mint-teal center for smoother transition */

  --oh-tb-ink: #f8fbfb;    /* Brightest white text tone */
  --oh-tb-muted: #f5f5dc;  /* Main sentence color — warm premium ivory/beige */

  --oh-tb-border: rgba(255,255,255,.04); /* Softer bottom edge */
  --oh-tb-glow: rgba(130, 205, 198, .10); /* Mint-leaning glow */


  /* ======================================================
     2) BADGE / PILL DIALS
     ====================================================== */

  --oh-tb-badge-bg: #c8963c;       /* Badge background color */
  --oh-tb-badge-ink: #131313;      /* Badge text color */
  --oh-tb-badge-border: #131313;   /* Badge border color */


  /* ======================================================
     3) LAYOUT DIALS — DESKTOP
     ====================================================== */

  --oh-tb-width-mode: 100vw;       /* Keep as 100vw for full-width bar */
  --oh-tb-max-width: 1440px;       /* Width of inner content area */
  --oh-tb-min-height: 30px;        /* Total top bar height */
  --oh-tb-pad-x: 22px;             /* Left/right inner padding */
  --oh-tb-gap: 16px;               /* Gap between badge, text, ghost */


  /* ======================================================
     4) TEXT DIALS — DESKTOP
     ====================================================== */

  --oh-tb-text-size: 15px;         /* Main sentence size */
  --oh-tb-text-line: 1.35;         /* Main sentence line-height */
  --oh-tb-text-weight: 600;        /* Main sentence thickness */
  --oh-tb-text-spacing: .005em;    /* Main sentence letter spacing */


  /* ======================================================
     5) BADGE SIZE DIALS — DESKTOP
     ====================================================== */

  --oh-tb-badge-minw: 126px;       /* Badge width */
  --oh-tb-badge-h: 28px;           /* Badge height */
  --oh-tb-badge-pad-x: 14px;       /* Left/right padding inside badge */
  --oh-tb-badge-radius: 999px;     /* Fully rounded pill shape */
  --oh-tb-badge-size: 10.5px;      /* Badge text size */
  --oh-tb-badge-weight: 800;       /* Badge text thickness */
  --oh-tb-badge-spacing: 0.16em;   /* Badge letter spacing */
  --oh-tb-badge-border-w: 1px;     /* Badge border thickness */


  /* ======================================================
     6) EFFECT DIALS
     ------------------------------------------------------
     Softened slightly for a calmer, more seamless luxury look
     ====================================================== */

  --oh-tb-top-border: rgba(255,255,255,.025); /* Softer top edge line */
  --oh-tb-highlight: rgba(255,255,255,.03);   /* More subtle gloss overlay */
  --oh-tb-shadow: 0 4px 12px rgba(4, 23, 25, .08); /* Softer outer shadow */

  position: relative;
  width: var(--oh-tb-width-mode);
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(circle at 15% 50%, var(--oh-tb-glow) 0, transparent 26%),
    radial-gradient(circle at 85% 50%, rgba(215,176,106,.06) 0, transparent 20%),
    linear-gradient(90deg, var(--oh-tb-bg-1) 0%, var(--oh-tb-bg-2) 50%, var(--oh-tb-bg-1) 100%);
  border-top: 1px solid var(--oh-tb-top-border);
  border-bottom: 1px solid var(--oh-tb-border);
  box-shadow: var(--oh-tb-shadow);
  overflow: hidden;
}

/* Soft glossy layer on top of the bar */
.oh-topbar::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--oh-tb-highlight), rgba(255,255,255,0) 42%);
  pointer-events: none;
}

/* =========================================================
   INNER WRAPPER — usually do not edit directly
   Use the DIALS above instead
   ========================================================= */
.oh-topbar__inner{
  position: relative;
  z-index: 1;
  max-width: var(--oh-tb-max-width);
  min-height: var(--oh-tb-min-height);
  margin: 0 auto;
  padding: 0 var(--oh-tb-pad-x);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  column-gap: var(--oh-tb-gap);
}

/* =========================================================
   BADGE + GHOST
   - badge = visible pill on the left
   - ghost = invisible balancing element on the right
   Do not remove ghost; it helps keep text centered
   ========================================================= */
.oh-topbar__badge,
.oh-topbar__ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--oh-tb-badge-minw);
  height: var(--oh-tb-badge-h);
  padding: 0 var(--oh-tb-badge-pad-x);
  border-radius: var(--oh-tb-badge-radius);
  font-size: var(--oh-tb-badge-size);
  font-weight: var(--oh-tb-badge-weight);
  letter-spacing: var(--oh-tb-badge-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Visible badge */
.oh-topbar__badge{
  color: var(--oh-tb-badge-ink);
  background: var(--oh-tb-badge-bg);
  border: var(--oh-tb-badge-border-w) solid var(--oh-tb-badge-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 4px 10px rgba(0,0,0,.12);
}

/* Invisible balancing element — do not change */
.oh-topbar__ghost{
  visibility: hidden;
}

/* =========================================================
   MAIN TEXT
   Use the TEXT DIALS above to modify
   ========================================================= */
.oh-topbar__text{
  margin: 0;
  text-align: center;
  color: var(--oh-tb-muted);
  font-size: var(--oh-tb-text-size);
  line-height: var(--oh-tb-text-line);
  font-weight: var(--oh-tb-text-weight);
  letter-spacing: var(--oh-tb-text-spacing);
}

.oh-topbar__text strong{
  color: var(--oh-tb-ink);
  font-weight: 700;
}

/* =========================================================
   BLOCKSY INTEGRATION
   Usually leave these untouched
   They remove extra spacing/background from the top row
   ========================================================= */
[data-row="top"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-row="top"] .ct-container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ct-header-html,
[data-id="html"] .ct-html{
  margin: 0 !important;
  width: 100%;
}

/* =========================================================
   LARGE DESKTOP DIAL
   Increase/decrease text slightly on very wide screens
   ========================================================= */
@media (min-width: 1280px){
  .oh-topbar__text{
    font-size: 15.5px; /* manual large-screen dial */
  }
}

/* =========================================================
   TABLET DIALS
   Change these if tablet spacing feels too big/small
   ========================================================= */
@media (max-width: 1024px){
  .oh-topbar__inner{
    min-height: 48px;   /* tablet bar height */
    padding: 0 16px;    /* tablet left/right padding */
    column-gap: 12px;   /* tablet element spacing */
  }

  .oh-topbar__badge,
  .oh-topbar__ghost{
    min-width: 112px;   /* tablet badge width */
    height: 25px;       /* tablet badge height */
    font-size: 9.5px;   /* tablet badge text size */
  }

  .oh-topbar__text{
    font-size: 13.5px;  /* tablet sentence size */
  }
}

/* =========================================================
   MOBILE DIALS
   Badge is hidden on mobile for a cleaner layout
   Change only if needed
   ========================================================= */
@media (max-width: 767px){
  .oh-topbar__inner{
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 10px 14px; /* mobile top/bottom + left/right padding */
  }

  .oh-topbar__badge,
  .oh-topbar__ghost{
    display: none;
  }

  .oh-topbar__text{
    font-size: 13px;    /* mobile sentence size */
    line-height: 1.45;  /* mobile readability */
  }
}
	
/* =========================================
   OHS — RTL Fix for Premium Top Bar
   Paste at the VERY END of the CSS
   ========================================= */

/* 1) Mirror the full-width offset for Arabic / RTL */
html[lang="ar"] .oh-topbar,
body.rtl .oh-topbar {
  margin-left: 0 !important;
  margin-right: calc(50% - 50vw) !important;
}

/* 2) Make the inner layout truly RTL */
html[lang="ar"] .oh-topbar__inner,
body.rtl .oh-topbar__inner {
  direction: rtl;
}

/* 3) Keep the Arabic sentence visually centered and correctly shaped */
html[lang="ar"] .oh-topbar__text,
body.rtl .oh-topbar__text {
  direction: rtl;
  text-align: center;
}

/* 4) Keep the badge and ghost balanced correctly in RTL */
html[lang="ar"] .oh-topbar__badge,
html[lang="ar"] .oh-topbar__ghost,
body.rtl .oh-topbar__badge,
body.rtl .oh-topbar__ghost {
  justify-self: center;
}