/* ============================================================
   Refill — 2026 site redesign shared styles
   Used by: /index.php, /about-us/, /suite/, /pharmacies/, /contact/
   ============================================================ */

:root {
  --rf-ink: #0B0E12;
  --rf-teal: #10D0D8;
  --rf-teal-deep: #0B8A90;
  --rf-teal-tint: #E4FAFB;
  --rf-mist: #F4F7F6;
  --rf-line: #E4EAE8;
  --rf-card-line: #E9EEEC;
  --rf-body: #42554F;
  --rf-muted: #5B6B68;
  --rf-dark-muted: #9AA7AD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.rf {
  background: var(--rf-mist);
  color: var(--rf-ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
body.rf ::selection { background: var(--rf-ink); color: #fff; }
body.rf a { text-decoration: none; color: inherit; }
body.rf img { max-width: 100%; }

@keyframes rf-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rf-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---- interactive helpers (from design) ---- */
.navlink { position: relative; transition: color .2s; }
.navlink:hover { color: var(--rf-teal-deep); }
.btnp { transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btnp:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(8,12,18,.55); }
.btns { transition: background .2s ease, border-color .2s ease; }
.btns:hover { background: var(--rf-teal-tint); border-color: var(--rf-teal-deep); }
.card-lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -24px rgba(12,42,40,.32); border-color: #CDE3DA; }
.svc:hover .svc-arrow { transform: translateX(4px); opacity: 1; }
.svc-arrow { transition: transform .2s ease, opacity .2s ease; }
.plogo { filter: grayscale(1); opacity: .62; transition: filter .25s, opacity .25s; }
.plogo:hover { filter: grayscale(0); opacity: 1; }

/* ---- layout ---- */
.rf-wrap { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; }
.rf-sec { padding-top: 96px; }

/* ---- typography ---- */
.rf-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-teal-deep); }
.rf-kicker.on-dark { color: var(--rf-teal); }
.rf-h1 {
  font-family: 'League Spartan', sans-serif; font-weight: 800;
  font-size: clamp(38px, 5.2vw, 62px); line-height: 1; letter-spacing: -.02em;
  color: var(--rf-ink); text-wrap: balance;
}
.rf-h2 {
  font-family: 'League Spartan', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--rf-ink);
}
.rf-h2.on-dark { color: #fff; }

/* ---- announcement bar ---- */
.rf-annc { background: var(--rf-ink); color: #CDD6D9; font-size: 13px; letter-spacing: .01em; }
.rf-annc-inner {
  max-width: 1240px; margin: 0 auto; padding: 9px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.rf-annc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rf-teal); box-shadow: 0 0 0 4px rgba(16,208,216,.18); }
.rf-annc-right { display: flex; gap: 18px; color: #8A969C; font-variant-numeric: tabular-nums; }

/* ---- nav ---- */
.rf-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,247,246,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rf-line);
}
.rf-nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.rf-nav-links { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.rf-nav-links a.active { color: var(--rf-teal-deep); font-weight: 600; }
.rf-nav-cta { display: flex; align-items: center; gap: 14px; }
.rf-btn-teal {
  background: var(--rf-teal); color: #06181A; font-weight: 700; font-size: 15px;
  padding: 11px 20px; border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(16,208,216,.7);
  display: inline-block;
}
.rf-nav-toggle {
  display: none; border: 1px solid var(--rf-line); background: #fff; border-radius: 9px;
  width: 40px; height: 40px; cursor: pointer; place-items: center; color: var(--rf-ink);
}

/* ---- suite dropdown ---- */
.rf-dropdown { position: relative; display: flex; align-items: center; gap: 4px; }
.rf-drop-toggle {
  border: none; background: transparent; cursor: pointer; color: inherit;
  display: grid; place-items: center; padding: 2px; border-radius: 6px; transition: transform .2s ease;
}
.rf-dropdown.open > .rf-drop-toggle { transform: rotate(180deg); }
.rf-dropdown-menu { display: none; }
@media (min-width: 901px) {
  .rf-dropdown-menu {
    position: absolute; top: calc(100% + 18px); left: -14px; z-index: 60;
    background: #fff; border: 1px solid var(--rf-card-line); border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(12,42,40,.25);
    padding: 8px; min-width: 232px; flex-direction: column;
  }
  .rf-dropdown-menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
  .rf-dropdown:hover .rf-dropdown-menu,
  .rf-dropdown:focus-within .rf-dropdown-menu,
  .rf-dropdown.open .rf-dropdown-menu { display: flex; }
  .rf-dropdown.open > .rf-drop-toggle, .rf-dropdown:hover > .rf-drop-toggle { color: var(--rf-teal-deep); }
  .rf-dropdown-menu a { padding: 10px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 500; color: var(--rf-ink); }
  .rf-dropdown-menu a:hover { background: var(--rf-teal-tint); color: var(--rf-teal-deep); }
}
@media (max-width: 900px) {
  .rf-nav-links .rf-dropdown { width: 100%; flex-wrap: wrap; }
  .rf-dropdown.open .rf-dropdown-menu {
    display: flex; flex-direction: column; gap: 14px; width: 100%;
    margin-top: 14px; padding-left: 14px; border-left: 2px solid #BFEFF1; font-size: 14.5px;
  }
}

/* ---- stat bar ---- */
.rf-statbar {
  background: var(--rf-ink); border-radius: 20px; padding: 34px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; color: #fff;
}
.rf-statbar > div + div { border-left: 1px solid rgba(255,255,255,.12); padding-left: 28px; }
.rf-stat-num { font-family: 'League Spartan', sans-serif; font-weight: 800; font-size: 34px; color: #fff; }
.rf-stat-label { font-size: 14px; color: var(--rf-dark-muted); margin-top: 4px; }

/* ---- grids ---- */
.rf-grid { display: grid; gap: 20px; }
.rf-cols-2 { grid-template-columns: 1fr 1fr; }
.rf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.rf-cols-4 { grid-template-columns: repeat(4, 1fr); }
.rf-cols-5 { grid-template-columns: repeat(5, 1fr); }
.rf-cols-market { grid-template-columns: 1.25fr 1fr 1fr; }
.rf-split { display: grid; gap: 56px; align-items: center; grid-template-columns: 1fr 1fr; }
.rf-split-hero { grid-template-columns: 1.05fr .95fr; }
.rf-split-9-11 { grid-template-columns: .9fr 1.1fr; }
.rf-split-85-115 { grid-template-columns: .85fr 1.15fr; align-items: start; }
.rf-split-8-12 { grid-template-columns: .8fr 1.2fr; align-items: start; }

/* ---- product card (suite) ---- */
.rf-product { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; }

/* ---- marquee ---- */
.rf-marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rf-marquee { display: flex; gap: 54px; width: max-content; align-items: center; animation: rf-marquee 32s linear infinite; }
.rf-marquee img { height: 38px; width: auto; object-fit: contain; max-width: none; }

/* ---- request form ---- */
.rf-form-card {
  background: #fff; border: 1px solid var(--rf-card-line); border-radius: 24px; overflow: hidden;
  display: grid; grid-template-columns: .9fr 1.1fr;
  box-shadow: 0 40px 80px -50px rgba(12,42,40,.4);
}
.rf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rf-field { display: flex; flex-direction: column; gap: 6px; }
.rf-field.rf-span-2 { grid-column: 1 / -1; }
.rf-label { font-size: 13px; font-weight: 600; color: #26403B; }
.rf-input {
  border: 1px solid #D7E2DE; border-radius: 10px; padding: 12px 14px; width: 100%;
  font-size: 14.5px; font-family: inherit; outline: none; background: #FAFCFB; color: var(--rf-ink);
}
.rf-input:focus { border-color: var(--rf-teal-deep); }
select.rf-input { color: #26403B; }
.rf-phone { display: flex; align-items: center; border: 1px solid #D7E2DE; border-radius: 10px; background: #FAFCFB; }
.rf-phone:focus-within { border-color: var(--rf-teal-deep); }
.rf-phone span { padding: 12px 0 12px 14px; font-size: 14.5px; font-weight: 600; color: #26403B; font-variant-numeric: tabular-nums; }
.rf-phone input {
  border: none; background: transparent; flex: 1; min-width: 0; padding: 12px 14px 12px 8px;
  font-size: 14.5px; font-family: inherit; outline: none; color: var(--rf-ink);
}
.rf-note { display: none; padding: 12px 14px; border-radius: 10px; font-weight: 600; text-align: center; margin-bottom: 16px; font-size: 14px; }
.rf-note.success { display: block; background: var(--rf-teal-tint); color: #0B5E63; border: 1px solid #BFEFF1; }
.rf-note.error { display: block; background: #FDECEC; color: #8A2323; border: 1px solid #F5C6C6; }

/* ---- footer ---- */
.rf-footer { background: var(--rf-ink); color: var(--rf-dark-muted); margin-top: 96px; padding: 64px 0 30px; }
.rf-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.rf-foot-title { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 16px; }
.rf-foot-links { display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.rf-foot-bottom {
  max-width: 1240px; margin: 44px auto 0; padding: 24px 28px 0;
  border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #7A858B;
}
.rf-social {
  width: 36px; height: 36px; border-radius: 9px; background: #1B2128;
  display: grid; place-items: center; color: var(--rf-dark-muted);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .rf-sec { padding-top: 72px; }
  .rf-cols-4, .rf-cols-5 { grid-template-columns: repeat(2, 1fr); }
  .rf-cols-market { grid-template-columns: 1fr; }
  .rf-split, .rf-split-hero, .rf-split-9-11, .rf-split-85-115, .rf-split-8-12 { grid-template-columns: 1fr; gap: 40px; }
  .rf-product { grid-template-columns: 1fr; gap: 32px; }
  .rf-statbar { grid-template-columns: repeat(2, 1fr); }
  .rf-statbar > div + div { border-left: none; padding-left: 0; }
  .rf-form-card { grid-template-columns: 1fr; }
  .rf-foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .rf-nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--rf-mist); border-bottom: 1px solid var(--rf-line);
    flex-direction: column; align-items: flex-start; padding: 20px 28px 24px; gap: 18px;
    box-shadow: 0 24px 40px -28px rgba(12,42,40,.35);
  }
  .rf-nav-links.open { display: flex; }
  .rf-nav-toggle { display: grid; }
  .rf-nav-cta .rf-nav-login { display: none; }
}

@media (max-width: 680px) {
  .rf-sec { padding-top: 56px; }
  .rf-annc-right { display: none; }
  .rf-cols-2, .rf-cols-3, .rf-cols-4, .rf-cols-5 { grid-template-columns: 1fr; }
  .rf-statbar { grid-template-columns: 1fr; padding: 28px; }
  .rf-form-grid { grid-template-columns: 1fr; }
  .rf-field.rf-span-2 { grid-column: auto; }
  .rf-foot-grid { grid-template-columns: 1fr; }
  .rf-pad-lg { padding-left: 28px !important; padding-right: 28px !important; }
  .rf-chip-left { left: 10px !important; }
  .rf-chip-right { right: 10px !important; }
}