/*
Theme Name: RaayPharma
Theme URI: https://d-themes.com/wordpress/udesign/envato-market/
Author: Andon
Author URI: https://1.envato.market/OdObz
Description: A slick, powerful and clean theme UDesign provides an intuitive set of options to help you setup your WordPress site quickly and effectively. Flexibility is key and it has been optimized for SEO and speed. It is also responsive & mobile ready should you choose that option. The UDesign theme features include: unlimited colors, widgetized home page, over 600 fonts to choose from, WooCommerce Integration, it is also translation and multilingual ready, step by step documentation, exclusive UDesign support forum and a helpful community. Always up-to-date security and many new features are constantly added as the theme evolves.
Version: 1.0
Template: u-design
License: GNU General Public License v2 and ThemeForest license
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, responsive, one-column, two-columns, three-columns, four-columns, full-width-template, left-sidebar, right-sidebar, custom-menu, custom-background, custom-colors, custom-header, custom-logo, featured-images, flexible-header, microformats, post-formats, rtl-language-support, theme-options, translation-ready, accessibility-ready

*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* =====================================================
   GLOBAL UTILITY STYLES
   ===================================================== */

.w-max-none {
  max-width: none !important;
}

.sticky-content .site-sticky-logo {
  width: 150px;
}

/* =====================================================
   TABLE STYLES
   ===================================================== */

table.table-striped {
  width: 100%;
  border-collapse: collapse;
}

.table-striped th,
.table-striped td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table-striped th {
  background-color: #0C5A98;
  color: #ffffff;
}

.table-striped tr:nth-child(even) {
  background-color: #DDF5CC;
}

.table-striped tr:nth-child(odd) {
  background-color: #DBECFA;
}

/* ===== Global container rhythm (optional) ===== */
.raay-hero { padding: clamp(28px, 4vw, 56px) 0; }
.raay-section { padding: 22px 0; }

/* ===== Badges ===== */
.raay-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 14px;
}
.raay-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  font-size:13px;
  font-weight:600;
}
.raay-badge-icon{ width:18px; height:18px; object-fit:contain; }
.raay-badge-rx{
  border-color: rgba(220,38,38,.25);
  background: rgba(254,242,242,.9);
  color:#991b1b;
}

/* ===== Key facts (your shortcode output) ===== */
.raay-keyfacts{
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.9);
  line-height: 1.6;
}
.raay-keyfacts > div{
  padding: 8px 0;
  border-bottom: 1px dashed rgba(15,23,42,.10);
}
.raay-keyfacts > div:last-child{ border-bottom: 0; }

/* ===== Cards ===== */
.raay-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* Lists inside shortcode sections */
.raay-benefits ul,
.raay-side-effects ul{
  margin: 0;
  padding-left: 18px;
}
.raay-side-effects li{ margin: 6px 0; }

/* ===== Safety grid ===== */
.raay-safety-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1024px){
  .raay-safety-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px){
  .raay-safety-grid{ grid-template-columns: 1fr; }
}

.raay-safety-card{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.raay-safety-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.raay-safety-icon{ width:22px; height:22px; object-fit:contain; }
.raay-safety-topic{ font-weight:800; }
.raay-safety-status{
  margin-left:auto;
  font-size:12px;
  font-weight:800;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
}
.raay-status-safe{ background: rgba(16,185,129,.12); color:#065f46; border-color: rgba(16,185,129,.25); }
.raay-status-caution{ background: rgba(245,158,11,.14); color:#92400e; border-color: rgba(245,158,11,.28); }
.raay-status-consult{ background: rgba(59,130,246,.14); color:#1e3a8a; border-color: rgba(59,130,246,.28); }
.raay-status-unsafe{ background: rgba(239,68,68,.12); color:#991b1b; border-color: rgba(239,68,68,.25); }

/* ================================
   RAAy PRODUCT HERO
   ================================ */

.raay-product-hero{
  position: relative;
  padding: clamp(36px, 5vw, 72px) 0;
  background:
    radial-gradient(
      1200px 500px at 15% 10%,
      #f4f9ff 0%,
      #eaf3ff 45%,
      #ffffff 100%
    );
  overflow: hidden;
}

/* subtle brand accent */
.raay-product-hero::after{
  content:"";
  position:absolute;
  inset:auto -20% 0 -20%;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(11,74,162,.35),
    transparent
  );
}

/* constrain inner width nicely */
.raay-product-hero > .elementor-container{
  max-width: 1200px;
}

/* ===== Title ===== */
.raay-product-hero h1{
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #0f172a;
}

/* ===== Subtitle / positioning line ===== */
.raay-product-hero .elementor-text-editor{
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  color: #5b667a;
  max-width: 48ch;
  margin-bottom: 14px;
}

/* ===== Badges spacing ===== */
.raay-product-hero .raay-badges{
  margin: 10px 0 12px;
}

/* ===== Salt composition emphasis ===== */
.raay-product-hero .raay-salt-composition{
  font-size: 16px;
  font-weight: 700;
  color: #0b4aa2;
  margin: 8px 0 18px;
}

/* ===== Buttons row ===== */
.raay-product-hero .elementor-button{
  border-radius: 12px;
  font-weight: 700;
  padding: 12px 18px;
}

.raay-product-hero .elementor-button:hover{
  transform: translateY(-1px);
}

/* ===== Right-side product image ===== */
.raay-product-hero img{
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 20px 50px rgba(15,23,42,.12);
}

/* ===== Mobile adjustments ===== */
@media (max-width: 980px){
  .raay-product-hero{
    padding: 32px 0 44px;
  }

  .raay-product-hero h1{
    font-size: 32px;
  }

  .raay-product-hero img{
    margin-bottom: 20px;
  }
}

/* ================================
   RAAy Product Hero — Polish Pack
   Add class "raay-product-hero" to the HERO section
   ================================ */

.raay-product-hero{
  --raay-blue:#0b4aa2;
  --raay-text:#0f172a;
  --raay-muted:#5b667a;
  --raay-border:rgba(15,23,42,.12);

  position: relative;
  padding: clamp(34px, 4vw, 64px) 0;
  background:
    radial-gradient(1000px 450px at 18% 10%, #f2f8ff 0%, #eaf3ff 40%, #ffffff 100%);
  overflow: hidden;
}

/* subtle “shine” band */
.raay-product-hero:before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height: 220px;
  transform: rotate(-6deg);
  background: linear-gradient(90deg, transparent, rgba(11,74,162,.10), transparent);
  pointer-events:none;
}

/* tighten overall typography */
.raay-product-hero h1,
.raay-product-hero .elementor-heading-title{
  color: var(--raay-text);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 10px;
}

/* The salt composition line (your [raay_product_salt]) */
.raay-product-hero .raay-salt-composition{
  color: var(--raay-blue);
  font-weight: 800;
  font-size: 16px;
  margin: 10px 0 16px;
}

/* Badges wrapper */
.raay-product-hero .raay-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0 12px;
}

/* Badge style (works with your shortcode output) */
.raay-product-hero .raay-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--raay-border);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.raay-product-hero .raay-badge-rx{
  background: rgba(254,242,242,.9);
  border-color: rgba(220,38,38,.25);
  color:#991b1b;
}

.raay-product-hero .raay-badge-icon{
  width:18px;
  height:18px;
  object-fit:contain;
}

/* Buttons: make one primary + one secondary.
   If you can add class to buttons: 
   - PDF button class: raay-btn-primary
   - Enquire button class: raay-btn-ghost
*/
.raay-product-hero .elementor-button{
  border-radius: 14px;
  font-weight: 800;
  padding: 12px 18px;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.raay-product-hero .elementor-button:hover{
  transform: translateY(-1px);
}

/* If you DON'T add button classes, this will still improve both */
.raay-product-hero .elementor-button-link{
  margin-right: 10px;
}

/* Optional: set these if you can add classes to each button widget */
.raay-product-hero .raay-btn-primary .elementor-button{
  background: linear-gradient(180deg, #0b4aa2 0%, #0a3f8f 100%);
  color:#fff;
  box-shadow: 0 14px 28px rgba(11,74,162,.18);
  border: 1px solid rgba(11,74,162,.25);
}
.raay-product-hero .raay-btn-ghost .elementor-button{
  background: rgba(255,255,255,.80);
  color: var(--raay-blue);
  border: 1px solid rgba(11,74,162,.28);
}

/* Product image card — targets the column image container nicely */
.raay-product-hero img{
  border-radius: 0;
  box-shadow:none;
  padding:0;
  border:0;
  height:250px;
  background: none;
}

/* If your image sits inside a white rounded box (Elementor column background),
   add this class to that right column: "raay-hero-media" */
.raay-product-hero .raay-hero-media{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--raay-border);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 24px 55px rgba(15,23,42,.14);
}

/* Reduce the “empty feel” by tightening column spacing on desktop */
@media (min-width: 1025px){
  .raay-product-hero .elementor-container{
    align-items: center;
  }
}

/* Mobile refinements */
@media (max-width: 980px){
  .raay-product-hero{
    padding: 28px 0 36px;
  }
  .raay-product-hero .raay-salt-composition{
    font-size: 15px;
  }
  .raay-product-hero .elementor-button{
    width: auto;
  }
}



/* =========================================
   QUICK JUMP MENU — Corporate Tab Bar
   Wrapper: .quick-jump-menu
   ========================================= */

.quick-jump-menu{
  position: sticky;
  top: var(--raay-sticky-top, 90px);
  z-index: 999;

  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;

  padding: 12px 0;
  margin: 0;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(15,23,42,.10);
}

/* Tabs */
.quick-jump-menu a{
  position: relative;
  padding: 10px 4px;

  font-size: 14px;
  font-weight: 750;

  color: rgba(15,23,42,.72);
  text-decoration: none !important;

  border: 0 !important;
  background: transparent !important;

  transition: color .12s ease, opacity .12s ease;
}

.quick-jump-menu a:hover{
  color: #0b4aa2;
}

/* Active tab */
.quick-jump-menu a.is-active{
  color: #0b4aa2;
}

.quick-jump-menu a.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:3px;
  border-radius: 2px;
  background: #0b4aa2;
}

/* Mobile: single-line scroll */
@media (max-width: 767px){
  .quick-jump-menu{
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    gap: 16px;
    padding: 10px 0;
  }
  .quick-jump-menu::-webkit-scrollbar{ height: 6px; }
  .quick-jump-menu::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,.16);
    border-radius: 99px;
  }
}

/* Prevent anchors/sections being hidden under sticky header + menu */
html{
  scroll-padding-top: calc(var(--raay-sticky-top, 90px) + 62px);
}


/* =========================================
   KEY FACTS — List Card w/ Font Awesome icons
   HTML remains unchanged
   ========================================= */

.raay-keyfacts-panel{ position: relative; }

/* Card header strip behind the "Key facts" heading */
.raay-keyfacts-panel .elementor-widget-heading .elementor-widget-container{
  background: linear-gradient(180deg, rgba(11,74,162,.14) 0%, rgba(11,74,162,.06) 100%);
  border-radius: 4px 4px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(22,59,99,.12);
  border-bottom: 0;
}

.raay-keyfacts-panel .elementor-heading-title{
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  color: #163b63;
}

/* Remove any outer widget styling */
.raay-keyfacts-panel > .raay-keyfacts{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Card container (shortcode output) */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts{
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22,59,99,.12);
  border-top: 0;
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

/* Each row */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 14px 14px 14px 16px;
  font-size: 15px;
  line-height: 1.45;
  color: #0f172a;

  border-bottom: 1px solid rgba(22,59,99,.10);
}

.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:last-child{
  border-bottom: 0;
}

/* Hide label text visually but keep semantics */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div > strong{
  position: absolute;
  left: -9999px;
}

/* Left icon using Font Awesome */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div::before{
  /* Font Awesome 5 Free */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  background: rgba(11,74,162,.10);
  border: 1px solid rgba(11,74,162,.18);
  color: #0b4aa2;

  content: "\f07a"; /* default fallback icon */
  margin-top: 1px;
}

/* Row-specific icons */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:nth-child(1)::before{
  content: "\f2b9"; /* id-badge / marketer */
}
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:nth-child(2)::before{
  content: "\f0c2"; /* cloud / storage (alt: \f1b3 cube) */
}
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:nth-child(3)::before{
  content: "\f48e"; /* pills */
}

/* Right chevron */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div::after{
  content:"\f105"; /* fa-angle-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);

  font-size: 18px;
  color: rgba(11,74,162,.55);
}

/* Hover affordance */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:hover{
  background: rgba(11,74,162,.05);
}
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:hover::after{
  color: rgba(11,74,162,.90);
}

/* Optional: highlight salt row slightly */
.raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div:nth-child(3){
  background: rgba(11,74,162,.04);
}

/* Sticky on desktop (optional) */
@media (min-width: 1024px){
  .raay-keyfacts-panel{
    position: sticky;
    top: calc(var(--raay-sticky-top, 90px) + 16px);
  }
}

/* Mobile: tighten spacing */
@media (max-width: 480px){
  .raay-keyfacts-panel .elementor-shortcode > .raay-keyfacts > div{
    padding: 12px 40px 12px 14px;
    font-size: 14px;
  }
}


.raay-keyfacts .elementor-widget-container
{
	padding:0;
}



/* =========================================
   Combined Key Facts Box (raay-kfbox)
   ========================================= */
.raay-kfbox{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22,59,99,.12);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

.raay-kfbox-head{
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(11,74,162,.14) 0%, rgba(11,74,162,.06) 100%);
  border-bottom: 1px solid rgba(22,59,99,.10);
}

.raay-kfbox-title{
  font-size: 20px;
  font-weight: 900;
  color: #163b63;
}

.raay-kfbox-body{
  padding: 6px 0;
}

/* Sections */
.raay-kfbox .rkf-sec{
  padding: 10px 0;
}

.raay-kfbox .rkf-sec + .rkf-sec{
  border-top: 1px solid rgba(22,59,99,.10);
}

.raay-kfbox .rkf-sec-title{
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

/* Key-value items */
.raay-kfbox .rkf-items .rkf-item{
  position: relative;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 12px;
  align-items: start;
}

.raay-kfbox .rkf-items .rkf-item + .rkf-item{
  border-top: 1px dashed rgba(22,59,99,.14);
}

.raay-kfbox .rkf-k{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

.raay-kfbox .rkf-v{
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
}

/* Uses list */
.raay-kfbox .rkf-list{
  margin: 0;
  padding: 0 16px 10px 34px;
}
.raay-kfbox .rkf-list li{
  margin: 6px 0;
  line-height: 1.45;
  font-size: 14px;
  color: #0f172a;
}

/* Compact variant */
.raay-kfbox.raay-kfbox-compact .rkf-items .rkf-item{
  padding: 10px 16px;
}
.raay-kfbox.raay-kfbox-compact .rkf-v{
  font-weight: 600;
}

/* Mobile stacking */
@media (max-width: 480px){
  .raay-kfbox .rkf-items .rkf-item{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
}

/* =========================================
   raay_product_key_facts_box_v2 styles
   ========================================= */

.raay-kfbox{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22,59,99,.12);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

.raay-kfbox-head{
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(11,74,162,.14) 0%, rgba(11,74,162,.06) 100%);
  border-bottom: 1px solid rgba(22,59,99,.10);
}

.raay-kfbox-title{
  font-size: 20px;
  font-weight: 900;
  color: #163b63;
}

.raay-kfbox-body{ padding: 6px 0; }

.raay-kfbox .rkf-sec{ padding: 10px 0; }
.raay-kfbox .rkf-sec + .rkf-sec{ border-top: 1px solid rgba(22,59,99,.10); }

.raay-kfbox .rkf-sec-title{
  padding: 10px 16px 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

/* Badge area */
.rkf-badges-wrap{ padding: 0 16px 10px; }
.rkf-badges-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.rkf-badge-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(22,59,99,.10);
  border-radius: 12px;
  background: rgba(11,74,162,.04);
}

.rkf-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  border: 1px solid rgba(15,23,42,.12);
}

.rkf-badge-label{
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

/* Badge variants */
.rkf-badge-rx{ background: rgba(220,38,38,.10); color: #b91c1c; border-color: rgba(220,38,38,.20); }
.rkf-badge-nppa{ background: rgba(245,158,11,.12); color: #b45309; border-color: rgba(245,158,11,.22); }
.rkf-badge-tc{ background: rgba(11,74,162,.10); color: #0b4aa2; border-color: rgba(11,74,162,.22); }

/* Key-value items */
.raay-kfbox .rkf-items .rkf-item{
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 12px;
  align-items: start;
}

.raay-kfbox .rkf-items .rkf-item + .rkf-item{
  border-top: 1px dashed rgba(22,59,99,.14);
}

.raay-kfbox .rkf-k{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

.raay-kfbox .rkf-v{
  font-size: 14px;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.45;
}

/* Uses list */
.raay-kfbox .rkf-list{
  margin: 0;
  padding: 0 16px 10px 34px;
}
.raay-kfbox .rkf-list li{
  margin: 6px 0;
  line-height: 1.45;
  font-size: 14px;
  color: #0f172a;
}

/* Compact */
.raay-kfbox.raay-kfbox-compact .rkf-items .rkf-item{ padding: 10px 16px; }
.raay-kfbox.raay-kfbox-compact .rkf-badge-item{ padding: 9px 12px; }

/* Mobile */
@media (max-width: 480px){
  .raay-kfbox .rkf-items .rkf-item{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
}


/* =========================================
   Key Facts Box v3 — single structured card
   ========================================= */

.raay-kfbox-v3{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22,59,99,.12);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
}

/* Header */
.raay-kfbox-v3__head{
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(11,74,162,.14) 0%, rgba(11,74,162,.06) 100%);
  border-bottom: 1px solid rgba(22,59,99,.10);
}
.raay-kfbox-v3__title{
  font-size: 22px;
  font-weight: 900;
  color: #163b63;
}
.raay-kfbox-v3__body{ padding: 4px 0; }

/* Section rhythm */
.rkf-section{ padding: 12px 0; }
.rkf-section + .rkf-section{ border-top: 1px solid rgba(22,59,99,.10); }

.rkf-section-title{
  padding: 0 16px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}

/* Highlights */
.rkf-highlights{
  padding: 0 16px 2px;
  display: grid;
  gap: 10px;
}
.rkf-hi{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(22,59,99,.10);
  background: rgba(11,74,162,.04);
}
.rkf-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.12);
  letter-spacing: .04em;
  white-space: nowrap;
}
.rkf-hi-text{
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}

/* Chip variants */
.rkf-chip-rx{
  background: rgba(220,38,38,.10);
  color: #b91c1c;
  border-color: rgba(220,38,38,.22);
}
.rkf-chip-class{
  background: rgba(11,74,162,.10);
  color: #0b4aa2;
  border-color: rgba(11,74,162,.22);
}
.rkf-chip-habit{
  background: rgba(100,116,139,.10);
  color: rgba(15,23,42,.85);
  border-color: rgba(15,23,42,.14);
}

/* Habit emphasis Yes/No */
.rkf-hi-habit-yes{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
}
.rkf-hi-habit-yes .rkf-chip-habit{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.30);
  color: #b45309;
}

.rkf-hi-habit-no{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
}
.rkf-hi-habit-no .rkf-chip-habit{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.30);
  color: #15803d;
}

/* Uses */
.rkf-uses{
  margin: 0;
  padding: 0 16px 0 34px;
}
.rkf-uses li{
  margin: 8px 0;
  font-size: 15px;
  font-weight: 650;
  color: #0f172a;
  line-height: 1.45;
}

/* Grid rows (core facts + classification) */
.rkf-grid{ padding: 0 16px; }
.rkf-row{
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  padding: 14px 0;
}
.rkf-row + .rkf-row{ border-top: 1px dashed rgba(22,59,99,.14); }

.rkf-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
}
.rkf-value{
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.45;
}

/* Emphasize Salt composition row */
.rkf-row-salt{
  background: rgba(11,74,162,.04);
  border-radius: 12px;
  padding: 14px 12px;
}
.rkf-row-salt .rkf-value{ font-weight: 900; }
.rkf-section-core .rkf-grid .rkf-row-salt + .rkf-row{ border-top: none; }

/* Storage as instruction-like row (but last) */
.rkf-row-storage .rkf-value{
  font-weight: 750;
}

/* Classification quieter */
.rkf-grid-quiet .rkf-row{ padding: 12px 0; }
.rkf-row-quiet .rkf-value{
  font-weight: 700;
  color: rgba(15,23,42,.92);
}

/* Mobile */
@media (max-width: 480px){
  .rkf-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .rkf-hi-text{ font-size: 15px; }
}


/* ================================
   v3 override: stack label + value
   ================================ */

/* Make each row vertical instead of 2-column */
.rkf-row{
  display: block !important;
  padding: 12px 0 !important;     /* reduces height */
}

/* Reduce divider weight and spacing */
.rkf-row + .rkf-row{
  border-top: 1px dashed rgba(22,59,99,.14) !important;
}

/* Label becomes a compact header line */
.rkf-label{
  display: block;
  margin: 0 0 6px 0 !important;
  font-size: 12px;
  line-height: 1.2;
}

/* Value becomes the main readable text */
.rkf-value{
  display: block;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}

/* Salt row highlight tuned for stacked layout */
.rkf-row-salt{
  padding: 12px 12px !important;
  border-radius: 12px;
  background: rgba(11,74,162,.04);
}

/* When salt row is highlighted, avoid a divider immediately after it */
.rkf-section-core .rkf-grid .rkf-row-salt + .rkf-row{
  border-top: none !important;
  margin-top: 8px;
}

/* Optional: keep marketer slightly quieter */
.rkf-row-marketer .rkf-value{
  font-weight: 750;
}

/* Optional: storage readability */
.rkf-row-storage .rkf-value{
  font-weight: 700;
  color: rgba(15,23,42,.92);
}

.rkf-row-storage{
  background: rgba(15,23,42,.02);
  border-radius: 12px;
  padding: 12px 12px !important;
}
.rkf-row-storage .rkf-label{
  color: rgba(15,23,42,.65);
}

/* Highlights: slightly tighter to reduce top-heaviness */
.rkf-hi{
  padding: 10px 12px !important;      /* was ~12px */
}

.rkf-highlights{
  gap: 9px !important;               /* slightly tighter */
}

/* Uses: designed list (no default bullet) */
.rkf-uses{
  list-style: none !important;
  padding: 0 16px 0 16px !important;
  margin: 0 !important;
}

.rkf-uses li{
  position: relative;
  padding-left: 20px;
  margin: 10px 0;
  font-size: 15px;                   /* match other values */
  font-weight: 750;
  color: #0f172a;
  line-height: 1.45;
}

/* Use a subtle check icon (Font Awesome 5 Free is already loaded) */
.rkf-uses li:before{
  content: "\f00c";                  /* fa-check */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 12px;
  opacity: .65;
}

/* Marketed by should not compete with Salt */
.rkf-row-marketer .rkf-value{
  font-weight: 650 !important;
  color: rgba(15,23,42,.80) !important;
}

/* Classification: slightly calmer than core facts */
.rkf-grid-quiet .rkf-label{
  opacity: .75;
}

.rkf-row-quiet .rkf-value{
  font-weight: 650 !important;
  color: rgba(15,23,42,.85) !important;
}

/* Footer meta section: calmer */
.rkf-grid-meta .rkf-row{
  padding: 10px 0 !important;
}

.rkf-row-meta .rkf-label{
  opacity: .75;
}

/* Storage in footer still readable, “instruction note” style */
.rkf-row-storage-note{
  background: rgba(15,23,42,.02);
  border-radius: 12px;
  padding: 12px 12px !important;
  margin-top: 8px;
}

/* Storage value: readable sentence case */
.rkf-row-storage .rkf-value{
  text-transform: none !important;
  letter-spacing: normal !important;
}
.rkf-row-storage .rkf-value{
  font-weight: 650 !important;
}
/* Storage instruction style */
.rkf-row-storage{
  background: rgba(15,23,42,.025) !important;
  border-radius: 10px;
  padding: 12px 14px !important;
}
.rkf-row-storage .rkf-value{
  line-height: 1.55;
  max-width: 95%;
}
.rkf-row-storage .rkf-label{
  opacity: .65;
}
/* Visually soften uppercase storage text */
.rkf-row-storage .rkf-value{
  font-variant: normal;
}

/* ================================
   Patient guidance section
   ================================ */

.raay-guidance{
  margin: 18px 0 28px;
}

.raay-guidance-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom: 14px;
}

.raay-guidance-title{
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 850;
  color: #0f172a;
}

/* Grid: 2 cards */
.raay-guidance-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Card */
.raay-guidance-card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 16px 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

/* Full-width card */
.raay-guidance-card-wide{
  padding: 16px 18px;
}

/* Card header */
.raay-guidance-card-head{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.raay-guidance-card-icon{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,74,162,.08);
  color: rgba(11,74,162,.95);
  flex: 0 0 36px;
}

.raay-guidance-kicker{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  margin-bottom: 4px;
  font-weight: 800;
}

.raay-guidance-card-title{
  font-size: 16px;
  font-weight: 850;
  color: #0f172a;
  line-height: 1.2;
}

/* Lists */
.raay-guidance-list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 10px;
}

.raay-guidance-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  line-height: 1.45;
  color: rgba(15,23,42,.92);
  font-size: 15px;
}

.raay-guidance-list li i{
  font-size: 10px;
  margin-top: 6px;
  opacity: .55;
}

/* Side effects: softer bullets */
.raay-guidance-list-effects li i{
  font-size: 7px;
  margin-top: 8px;
}

/* Tips: check icon */
.raay-guidance-list-tips li i{
  font-size: 13px;
  margin-top: 3px;
  opacity: .70;
}

/* Note text */
.raay-guidance-note p{
  margin: 0 0 10px 0;
  color: rgba(15,23,42,.88);
  line-height: 1.55;
  font-size: 15px;
}

.raay-guidance-note p:last-child{
  margin-bottom: 0;
}

/* Empty */
.raay-guidance-empty{
  color: rgba(15,23,42,.55);
}

/* Responsive */
@media (max-width: 900px){
  .raay-guidance-grid{
    grid-template-columns: 1fr;
  }
  .raay-guidance-title{
    font-size: 24px;
  }
}

/* ================================
   Side effects box (refined)
   ================================ */

.raay-sebox{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  overflow: hidden;
}

/* Header */
.raay-sebox__head{
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(11,74,162,.10); /* slightly more intentional */
  background: linear-gradient(180deg, rgba(11,74,162,.06) 0%, rgba(255,255,255,1) 100%);
}

.raay-sebox__title{
  font-size: 18px;
  font-weight: 850;
  color: #0f172a;
  margin: 0 0 8px 0;
}

/* Note as "reassurance" with subtle info cue */
.raay-sebox__note{
  position: relative;
  padding-left: 22px;
  color: rgba(15,23,42,.82);
  font-size: 14px;
  line-height: 1.55;
}

.raay-sebox__note:before{
  content: "i";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 850;
  background: rgba(11,74,162,.10);
  color: rgba(11,74,162,.95);
}

.raay-sebox__note p{ margin: 0 0 8px 0; }
.raay-sebox__note p:last-child{ margin-bottom: 0; }

/* Body */
.raay-sebox__body{
  padding: 14px 18px 18px;
 /* max-width: 1100px;  improves column balance on wide screens */
}

/* 3-column list */
.raay-sebox__list{
  margin: 0;
  padding-left: 35px;
  column-count: 3;
  column-gap: 22px; /* slightly tighter + more cohesive */
}

/* Item rhythm + scanability */
.raay-sebox__list li{
  break-inside: avoid;
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: rgba(15,23,42,.92);
  font-size: 13.5px;
}

/* Softer bullets */
.raay-sebox__list li::marker{
  color: rgba(15,23,42,.35);
  font-size: .9em;
}

/* Tablet: 2 columns */
@media (max-width: 1023px){
  .raay-sebox__body{ max-width: none; }
  .raay-sebox__list{ column-count: 2; }
}

/* Mobile: 1 column + tighter spacing */
@media (max-width: 767px){
  .raay-sebox__head{ padding: 14px 14px 10px; }
  .raay-sebox__body{ padding: 12px 14px 14px; }
  .raay-sebox__list{ column-count: 1; }
  .raay-sebox__note{ padding-left: 20px; }
}

/* Additions for updated structure (keep your existing CSS, append these) */

.raay-sebox__intro{
  font-size: 14px;
  color: rgba(15,23,42,.75);
  line-height: 1.55;
  margin: 0;
}

/* Footer guidance */
.raay-sebox__footer{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.08);
  font-size: 13.5px;
  color: rgba(15,23,42,.78);
  line-height: 1.55;
}

.raay-sebox__footer p{ margin: 0 0 8px 0; }
.raay-sebox__footer p:last-child{ margin-bottom: 0; }

/* Optional: subtle info cue in footer */
.raay-sebox__footer:before{
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  background: rgba(11,74,162,.10);
  color: rgba(11,74,162,.9);
  font-weight: 850;
  font-size: 11px;
  transform: translateY(-1px);
}

/* Mobile tightening (optional) */
@media (max-width: 767px){
  .raay-sebox__intro{ font-size: 13.5px; }
  .raay-sebox__footer{ font-size: 13px; }
}

.raay-sebox__list{
  padding-left: 34px; /* was 18px */
}

.raay-sebox__list{
  padding-left: 34px; /* was 18px */
}

.raay-sebox__list{
  column-gap: 26px;
}

.raay-sebox__footer{
  background: rgba(11,74,162,.03);
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 767px){
  .raay-sebox__footer{
    padding: 12px 14px;
  }
}




.raay-news-card{
  
  margin: 40px auto;
  position: relative;
}

.raay-news-card-inner{
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 34px 38px;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.05),
    0 2px 10px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.raay-news-card-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(30, 58, 138, 0.045), transparent 28%);
}

.raay-news-card:hover .raay-news-card-inner{
  transform: translateY(-3px);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.07),
    0 6px 18px rgba(15, 23, 42, 0.05);
  border-color: rgba(30, 58, 138, 0.14);
}

.raay-news-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5b6472;
  margin-bottom: 20px;
}

.raay-news-label::before{
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(15, 23, 42, 0.18);
  display: inline-block;
}

.raay-news-logo-wrap{
  margin-bottom: 18px;
	float: right;
}

.raay-news-logo{
  display: block;
  width: auto;
  max-height: 34px;
  max-width: 180px;
  object-fit: contain;
}

.raay-news-meta{
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 10px;
}

.raay-news-title{
  margin: 0 0 16px;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #0f172a;
}

.raay-news-summary{
  
  font-size: 17px;
  line-height: 1.85;
  color: #475569;
}

.raay-news-summary p{
  margin: 0;
}

.raay-news-divider{
  height: 1px;
  margin: 24px 0 22px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.04));
}

.raay-news-button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #1e3a8a;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(30, 58, 138, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.raay-news-button:hover{
  color: #ffffff !important;
  background: #17327a;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(30, 58, 138, 0.24);
}

.raay-news-button-icon{
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.raay-news-button:hover .raay-news-button-icon{
  transform: translateX(2px);
}

@media (max-width: 1024px){
  .raay-news-title{
    font-size: 34px;
  }
}

@media (max-width: 767px){
  .raay-news-card{
    margin: 24px auto;
  }

  .raay-news-card-inner{
    padding: 24px 20px;
    border-radius: 18px;
  }

  .raay-news-logo{
    max-height: 28px;
    max-width: 150px;
  }

  .raay-news-meta{
    font-size: 12px;
    margin-bottom: 8px;
  }

  .raay-news-title{
    font-size: 26px;
    line-height: 1.18;
    margin-bottom: 14px;
  }

  .raay-news-summary{
    font-size: 15px;
    line-height: 1.75;
  }

  .raay-news-divider{
    margin: 20px 0 18px;
  }

  .raay-news-button{
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
  }
}