/* =========================================================
   IVORY FOREST — calm, bright, premium eco theme
   Works with your current HTML (nav/hero/values/stats/process/forms/map/slideshow)
   ========================================================= */

/* --- Palette --- */
:root{
  --bg: #f5f3ec;          /* ivory page background (not white) */
  --bg-2:#f1efe8;         /* soft wash for hero/strips */
  --surface:#ffffff;      /* cards */
  --surface-2:#fbfaf6;    /* alt card */
  --text:#263328;         /* readable body */
  --muted:#667566;        /* secondary text */
  --heading:#0f3a22;      /* deep forest */
  --accent:#1f8d5b;       /* primary green */
  --accent-2:#166d46;     /* deeper green */
  --sun:#d6a85b;          /* warm golden accent */
  --line:#dad5c8;         /* soft lines */
  --ring:rgba(31,141,91,.25);

  --sh-sm:0 10px 24px -20px rgba(0,0,0,.28);
  --sh-md:0 18px 42px -24px rgba(0,0,0,.28);
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 420px at -10% -10%, #f0eee6 0%, transparent 65%),
    radial-gradient(700px 380px at 110% -10%, #efeade 0%, transparent 60%),
    var(--bg);
  scroll-behavior:smooth;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92%);margin:0 auto}

/* --- Top strip --- */
.top-strip{
  background:linear-gradient(180deg,#f1efe8,#efece3);
  border-bottom:1px solid var(--line);
  color:var(--muted); font-size:14px;
}
.top-strip .inner{
  width:min(1200px,92%); margin:0 auto;
  height:40px; display:flex; align-items:center; gap:18px; justify-content:flex-end;
}
.top-strip a{color:var(--accent-2); font-weight:600}
.top-strip a:hover{color:var(--accent)}

/* --- Nav --- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 26px -24px rgba(0,0,0,.18);
}
.nav-inner{height:72px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; color:var(--heading)}

.brand img{
  height:42px;
  width:42px;          /* makes a fixed box */
  object-fit: contain; /* ✅ fits logo inside without cropping */
  background:#fff;
  padding:4px;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.links{display:flex; gap:24px; font-weight:700}
.links a{color:var(--heading); opacity:.9}
.links a:hover{opacity:1; color:var(--accent)}

/* --- Buttons --- */
.btn{
  padding:12px 18px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  border:2px solid transparent; cursor:pointer; transition:transform .12s, box-shadow .2s, background .2s;
}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; box-shadow:0 10px 22px -16px rgba(22,109,70,.35);
}
.btn.primary:hover{transform:translateY(-2px); box-shadow:0 16px 30px -18px rgba(22,109,70,.38)}
.btn.ghost{
  background:#fff; border-color:var(--accent); color:var(--accent-2)
}
.btn.ghost:hover{background:#f4fbf6}

/* --- Hero --- */
.hero{
  padding:96px 0 64px;
  background:
    radial-gradient(820px 400px at 0% 10%, rgba(214,168,91,.16), transparent 68%),
    var(--bg);
}
.hero-wrap{display:grid; grid-template-columns:1.08fr .92fr; gap:36px; align-items:center}
@media (max-width:900px){.hero-wrap{grid-template-columns:1fr}}

.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:#f7f4ec; border:1px solid var(--line);
  color:var(--accent-2); font-weight:800; font-size:12px;
}
.hero h1{
  font-size:clamp(40px,5.8vw,68px);
  line-height:1.03; margin:12px 0 12px; color:var(--heading); font-weight:900;
}
.hero h1 .accent{
  background:linear-gradient(135deg,var(--accent),var(--sun));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{color:var(--muted); font-size:18px; max-width:720px; margin:0}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}

/* Hero visual + slideshow */
.hero-visual{
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--sh-md); aspect-ratio:16/11; background:#f0eee7;
}
.hero-visual .image-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.18)); z-index:1}
.ribbon{
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  color:var(--accent-2); padding:6px 10px; border-radius:999px; font-weight:800;
}
.slideshow{position:relative; overflow:hidden}
.slideshow .slide.active{opacity:1}

/* --- Sections / cards --- */
.section{padding:60px 0}
.section h2{margin:0 0 12px; font-size:clamp(24px,3.2vw,32px); color:var(--heading); font-weight:900; text-transform:uppercase}
.section p.lead{color:var(--muted); margin:0 0 16px}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.values{padding:24px 0}
.v-card{
  grid-column:span 4; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--sh-sm)
}
.v-card:hover{transform:translateY(-2px); box-shadow:var(--sh-md)}
.v-card h3{margin:0 0 6px; color:var(--heading)}
.v-card p{margin:0; color:var(--muted)}
@media (max-width:900px){.v-card{grid-column:span 12}}

/* --- Stats --- */
.stats{padding:40px 0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:16px; padding:18px; text-align:center; box-shadow:var(--sh-sm)
}
.stat .big{font-size:26px; font-weight:900; color:var(--accent-2)}
.stat .small{color:var(--muted)}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}

/* --- Process --- */
.process{padding:8px 0 40px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--sh-sm)
}
.step .n{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px;
  background:#eef7f1; border:1px solid var(--line); color:var(--accent-2); font-weight:900; margin-bottom:8px
}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}

/* --- Tables (inventory) --- */
table{width:100%; border-collapse:collapse}
th,td{padding:12px 10px; text-align:left; border-bottom:1px solid var(--line)}
th{color:#6f7a6e; background:#f7f4ec; font-weight:900; text-transform:uppercase; font-size:13px; letter-spacing:.3px}
td{color:var(--heading); font-weight:600}
.chip-soft{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:#eef7f1; border:1px solid var(--line); color:var(--accent-2); font-weight:800; font-size:12px}

/* --- Forms --- */
input,textarea,select{
  width:100%; padding:12px; border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--text); outline:none;
}
input::placeholder,textarea::placeholder{color:#8e9b8f}
input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 5px var(--ring)}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (max-width:800px){.form-grid{grid-template-columns:1fr}}

/* --- Contact map --- */
.contact-split{display:grid; grid-template-columns:1.15fr .85fr; gap:20px}
@media (max-width:900px){.contact-split{grid-template-columns:1fr}}
.map-card{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--sh-md)}
.map-frame{width:100%; aspect-ratio:16/9; border:0}
.info-list{list-style:none; padding:0; margin:0}
.info-list li{margin:8px 0; color:var(--text)}

/* --- CTA band --- */
.cta-band{
  margin:36px 0; background:linear-gradient(135deg,#f2f7f2,#e9f3ec);
  color:#123923; border:1px solid var(--line);
  border-radius:18px; padding:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:var(--sh-md)
}
.cta-band .btn{background:#fff; color:var(--accent-2); border:1px solid var(--accent-2)}
.cta-band .btn:hover{background:#f3fbf5}

/* --- Footer --- */
.footer{
  margin:44px 0 24px; color:var(--muted); text-align:center; border-top:1px solid var(--line); padding-top:20px;
}

/* --- Slideshow (keep your JS) --- */
.slideshow{position:relative; overflow:hidden}
.slideshow .slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease}
.slideshow .slide.active{opacity:1}

/* --- Raw-material mix (compatible) --- */
#rmx-order .rmx-toolbar{display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:8px 0 12px}
#rmx-order .rmx-moist{display:flex; flex-direction:column; gap:6px; margin-left:auto; color:var(--muted); font-weight:600}
#rmx-order .rmx-pill{background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-weight:800; color:var(--heading)}
#rmx-order .rmx-tablewrap{margin-top:6px}
#rmx-order .rmx-table{width:100%; border-collapse:separate; border-spacing:0 8px}
#rmx-order .rmx-table thead th{color:#6f7a6e; background:#f7f4ec; font-weight:900}
#rmx-order .rmx-table tbody tr{background:#fff; border:1px solid var(--line); border-radius:12px}
#rmx-order .rmx-table tbody td{padding:10px 12px}
#rmx-order .rmx-table tbody td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
#rmx-order .rmx-table tbody td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
#rmx-order .rmx-del{border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer}
#rmx-order .rmx-del:hover{border-color:#cfc7b6}
#rmx-order select, #rmx-order input[type="number"]{width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--text); outline:none; font:inherit}
#rmx-order select:focus, #rmx-order input[type="number"]:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
argin-bottom: 10px;
}
/* === How We Work Flow Redesign === */
.flow-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  margin-top: 20px;
}

.flow-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  width: 180px;
  box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}
.flow-item:hover {
  transform: translateY(-4px);
}
.flow-item .icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.arrow {
  font-size: 22px;
  color: var(--accent);
  animation: pulseArrow 2s infinite;
}
@keyframes pulseArrow {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.extra-info {
  margin-top: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--accent-2);
  background: #f3fdf6;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  box-shadow: inset 0 1px 0 #fff;
}

/* blinking end product */
.blink {
  animation: blinkGlow 1.5s infinite alternate;
}
@keyframes blinkGlow {
  from { box-shadow: 0 0 0px rgba(31,141,91,0.3); }
  to { box-shadow: 0 0 12px rgba(31,141,91,0.6); transform: scale(1.02); }
}
/* --- Elegant Horizontal Factory Flow --- */
.workflow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  text-align: center;
}

.stage {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  width: 180px;
  min-height: 150px;
  box-shadow: 0 10px 20px -16px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.stage:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.25);
}

.stage .icon {
  font-size: 32px;
  margin-bottom: 10px;
}
.stage h3 {
  color: var(--heading);
  font-size: 16px;
  margin: 0 0 4px;
}
.stage p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.arrow {
  font-size: 28px;
  color: var(--accent);
  animation: flowPulse 1.8s infinite;
}

@keyframes flowPulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.blink {
  animation: blinkGlow 1.4s infinite alternate;
  border: 1px solid var(--accent);
}
@keyframes blinkGlow {
  from { box-shadow: 0 0 0 rgba(31,141,91,0.3); }
  to { box-shadow: 0 0 12px rgba(31,141,91,0.6); transform: scale(1.02); }
}

.extra-info {
  margin-top: 28px;
  background: #f3fbf6;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--accent-2);
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 1px 0 #fff;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
  .workflow {
    flex-direction: column;
    gap: 16px;
  }
  .arrow {
    display: none;
  }
}
/* --- How We Work (Uniform Box Sizes) --- */
.workflow {
  display: flex;
  align-items: stretch; /* force same height */
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 24px;
  text-align: center;
}

.stage {
  flex: 1 1 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 220px; /* 👈 fixed equal height */
}

.stage:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.25);
}

.stage .icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.stage h3 {
  color: var(--heading);
  font-size: 16px;
  margin: 0 0 4px;
  flex-shrink: 0;
}

.stage p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  flex-grow: 1;
}

.arrow {
  font-size: 26px;
  color: var(--accent);
  align-self: center;
  animation: flowPulse 1.8s infinite;
}

@keyframes flowPulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.blink {
  animation: blinkGlow 1.4s infinite alternate;
  border: 1px solid var(--accent);
}
@keyframes blinkGlow {
  from { box-shadow: 0 0 0 rgba(31,141,91,0.3); }
  to { box-shadow: 0 0 12px rgba(31,141,91,0.6); transform: scale(1.02); }
}

/* Make it mobile-friendly */
@media (max-width: 900px) {
  .workflow {
    flex-direction: column;
    gap: 16px;
  }
  .stage {
    height: auto; /* let it grow naturally on small screens */
  }
  .arrow {
    display: none;
  }
}
/* =======================
   Contact page redesign
   ======================= */
.contact-head{margin-bottom:18px}
.contact-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 900px){
  .contact-grid{grid-template-columns:1fr}
}

.contact-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh-md);
  overflow:hidden;
}

.info-card{padding:18px; position:sticky; top:92px}
@media (max-width: 900px){
  .info-card{position:static}
}

.card-title{
  margin:0 0 10px;
  color:var(--heading);
  font-weight:900;
}

.info-list-modern li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px dashed rgba(0,0,0,.08);
}
.info-list-modern li:last-child{border-bottom:0}
.info-ico{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:12px;
  background:#eef7f1;
  border:1px solid var(--line);
  flex:0 0 auto;
}

.muted{color:var(--muted)}
.mini-note{
  margin-top:12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  color:var(--muted);
  font-weight:600;
}

.map-frame{aspect-ratio: 16/10}
.map-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #fbfaf6);
}
.kicker{
  font-size:12px;
  font-weight:900;
  color:var(--accent-2);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.map-foot-title{font-weight:900; color:var(--heading)}

.contact-form-wrap{margin-top:18px}
.form-card{padding:18px}
.form-head{margin-bottom:10px}

.success{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(31,141,91,.25);
  background:#f3fbf6;
  color:var(--accent-2);
  font-weight:800;
}

/* ===== Lead Gate Overlay ===== */
.gate{
  position:fixed; inset:0;
  background:rgba(15,58,34,.55);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.gate-card{
  width:min(520px, 100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh-md);
  padding:18px;
}

.gate-title{margin:0 0 6px; color:var(--heading); font-weight:900}
.gate-sub{margin:0 0 14px; color:var(--muted); font-weight:600}

.gate-label{display:block; margin:10px 0 6px; font-weight:800; color:var(--heading)}
.gate-note{margin:12px 0 0; color:var(--muted); font-size:13px}
.gate-consent{
  display:flex; gap:10px; align-items:flex-start;
  margin:12px 0 12px; color:var(--muted); font-weight:700;
}
.gate-consent input{width:auto; margin-top:3px}

/* ===== Hero slideshow (logo fits perfectly) ===== */
.hero-visual{
  position: relative;
  overflow: hidden;
  background: #f0eee7;
}

/* Default: photos */
.hero-visual .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;      /* photos stay full */
  opacity:0;
  transition:opacity 1s ease;
}

.hero-visual .slide.active{
  opacity:1;
}

/* Logo slide ONLY */
.hero-visual .slide.contain{
  object-fit: contain;    /* 👈 no crop */

  background: #f5f3ec;    /* matches site */

}
/* Logo slide: fit nicely, no crop, no ugly side bars */
.hero-visual .slide.contain{
  object-fit: contain !important;
  background: transparent !important;   /* remove grey bars */
  padding: 10px !important;            /* less empty space */
  transform: scale(1.08);              /* make logo look bigger */
  box-sizing: border-box !important;
}

/* =========================
   Responsive Nav (Desktop + Mobile)
   ========================= */

/* Desktop default */
.nav-toggle { display:none; }

/* Mobile */
@media (max-width: 900px){
  .nav-inner{ gap:12px; }
  .brand a{ font-size:14px; }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid var(--line);
    background:#fff;
    font-size:20px;
    font-weight:900;
    color:var(--heading);
    cursor:pointer;
  }

  /* turn nav into dropdown panel */
  .links{
    position:absolute;
    top:72px;
    right:4%;
    left:4%;
    display:none;
    flex-direction:column;
    gap:10px;
    padding:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--sh-md);
    z-index:100;
  }

  .links a{
    padding:10px 12px;
    border-radius:12px;
  }

  .links a:hover{
    background:#f7f4ec;
  }

  /* when menu is open */
  .nav-open .links{ display:flex; }
}
/* ===== NAV: desktop vs mobile ===== */

/* Hide hamburger on desktop */
.nav-toggle{
  display: none;
}

/* Mobile only */
@media (max-width: 900px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
  }

  /* Hide menu links by default on mobile */
  .links{
    display: none;
  }

  /* Show menu when hamburger is clicked */
  .nav.nav-open .links{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    right: 16px;
    width: min(260px, 90%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--sh-md);
    gap: 12px;
    z-index: 999;
  }
}

/* ===== How We Work: better mobile layout (2 columns) ===== */
@media (max-width: 900px){

  /* turn the flow into a grid */
  .workflow{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  /* hide arrows on mobile */
  .workflow .arrow{
    display: none !important;
  }

  /* cards fit nicely in grid */
  .workflow .stage{
    width: auto !important;
    height: auto !important;
    min-height: 160px;
    padding: 14px 14px;
    border-radius: 16px;
  }

  .workflow .stage .icon{font-size: 28px}
  .workflow .stage h3{font-size: 15px}
  .workflow .stage p{font-size: 13px}

  /* if screen is very small, go back to 1 column */
  @media (max-width: 420px){
    .workflow{
      grid-template-columns: 1fr;
    }
  }
}

/* ===== Fix % IN MIX visibility on mobile ===== */
@media (max-width: 600px){

  /* Make the raw-mix table rows wrap nicely */
  #rmx-order .rmx-table tbody tr{
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
  }

  /* % IN MIX input */
  #rmx-order input[type="number"]{
    min-width: 72px;          /* 👈 ensures numbers are visible */
    font-size: 16px;          /* 👈 readable on mobile */
    padding: 10px 8px;
    text-align: center;
  }

  /* Material select */
  #rmx-order select{
    font-size: 15px;
    padding: 10px 8px;
  }

  /* HHV field */
  #rmx-order input[readonly]{
    font-size: 15px;
    padding: 10px 8px;
  }

  /* Delete (×) button */
  #rmx-order .rmx-del{
    padding: 8px 10px;
    font-size: 14px;
  }
}
/* =========================
   Google Form Gate - Responsive (Desktop + Mobile)
   ========================= */
.gate{
  padding: 14px;
}

.gate-card{
  width: min(720px, 100%);
  max-height: min(86vh, 820px);
  overflow: hidden;              /* keep iframe clean */
  display: flex;
  flex-direction: column;
}

.gate-iframe{
  width: 100%;
  flex: 1;                       /* takes remaining space */
  min-height: 420px;             /* desktop baseline */
}

.gate-iframe iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile tuning */
@media (max-width: 600px){
  .gate-card{
    max-height: 88vh;
    padding: 14px;
    border-radius: 16px;
  }

  .gate-title{font-size: 20px;}
  .gate-sub{font-size: 14px;}

  .gate-iframe{
    min-height: 58vh;            /* makes form BIG on mobile */
  }

  /* Keep Continue button visible */
  #gateContinue{
    width: 100%;
  }
}
/* Hide Google Forms help icon area */
.gate-form-wrap{
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden; /* 👈 key */
  border-radius: 14px;
}

.gate-form-wrap iframe{
  width: 100%;
  height: 560px; /* slightly taller */
  border: 0;
  margin-top: -20px; /* 👈 pushes help icon out of view */
}