/*
Theme Name: Coffee Kiosk
Theme URI: https://example.com
Author: Your Company
Author URI: https://example.com
Description: A bold, bright coffee shop theme. Sell coffee packages with orders taken by email and paid by bank transfer. Show your kiosk robot solution and every drink you serve, each with a photo and ingredients.
Version: 3.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: coffee-kiosk
*/

/* -------------------------------------------------
   0. Variables

   Site-wide dark theme: every page shares the same dark
   background (--bg). Text and interactive elements use the
   light tones (--text-main, --paper) so they stay readable
   against it. --surface is for cards/panels that sit a shade
   lighter than the page for separation, without going all the
   way to white.
------------------------------------------------- */
:root{
  --bg: #3b3b47;
  --navy: #3b3b47;
  --navy-2: #555364;
  --cream: #3b3b47;
  --surface: #47465a;
  --surface-2: #55536a;
  --paper: #ffffff;
  --paper-2: #4c4b5e;
  --accent: #7c7e8d;
  --accent-text: #a7aabf; /* same family as --accent, lightened to pass 4.5:1 text contrast on the dark background — use for text/links, not backgrounds */
  --accent-dark: #2e2e38;
  --btn-hover: #b2b3c0;
  --gold: #b2b3c0;
  --text-main: #f2f2f7;
  --text-muted: #b2b3c0;
  --line: rgba(255,255,255,.14);
  --radius: 16px;
  --max-width: 1220px;

  /* Animated order button (.order) — self-contained palette */
  --order-primary: #275EFE;
  --order-primary-light: #7699FF;
  --order-dark: #1C212E;
  --order-grey-dark: #3F4656;
  --order-grey: #6C7486;
  --order-grey-light: #CDD9ED;
  --order-white: #FFF;
  --order-green: #16BF78;
  --order-sand: #DCB773;
  --order-sand-light: #EDD9A9;
}

/* -------------------------------------------------
   1. Reset / base
------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
body{
  margin:0;
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--text-main);
  background: var(--bg);
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Poppins', sans-serif; font-weight:800; margin:0 0 .5em; line-height:1.15; letter-spacing:-.01em; color: var(--text-main); }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width: var(--max-width); margin:0 auto; padding:0 24px; }
.section{ padding: 80px 0; }
.section-title{
  text-align:center; font-size: 2.4rem; margin-bottom: 12px; color: var(--text-main);
  text-transform:uppercase; letter-spacing:.01em;
}
.section-subtitle{ text-align:center; color: var(--text-muted); max-width:640px; margin:0 auto 46px; font-size:1.05rem; }
.btn{
  display:inline-block;
  background: var(--paper);
  color: var(--navy);
  padding: 13px 30px;
  border-radius: 50px;
  font-weight:700;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.04em;
  border:none;
  cursor:pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ background: var(--btn-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.btn-outline{
  background: transparent;
  border: 2px solid var(--paper);
  color: var(--paper);
}
.btn-outline:hover{ background: var(--paper); color: var(--navy); }

/* -------------------------------------------------
   2. Header (transparent, sticky, dual pill: logo + menu)
------------------------------------------------- */
.site-header {
  background: transparent !important;
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 999;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Stil general pentru ambele capsule — liquid glass with rain streaks */
.pill-nav-wrapper {
  display: flex;
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 0;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.pill-nav-wrapper::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 6% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 60%, transparent 75%),
    radial-gradient(circle 2px at 14% 68%, rgba(255,255,255,.5), rgba(255,255,255,.06) 60%, transparent 75%),
    radial-gradient(circle 4px at 22% 18%, rgba(255,255,255,.6), rgba(255,255,255,.1) 55%, transparent 75%),
    radial-gradient(circle 2px at 30% 78%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(circle 5px at 38% 42%, rgba(255,255,255,.55), rgba(255,255,255,.08) 55%, transparent 75%),
    radial-gradient(circle 2px at 45% 12%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(circle 3px at 52% 62%, rgba(255,255,255,.5), rgba(255,255,255,.08) 60%, transparent 75%),
    radial-gradient(circle 6px at 60% 28%, rgba(255,255,255,.6), rgba(255,255,255,.1) 55%, transparent 78%),
    radial-gradient(circle 2px at 68% 72%, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(circle 3px at 75% 22%, rgba(255,255,255,.5), rgba(255,255,255,.08) 60%, transparent 75%),
    radial-gradient(circle 7px at 83% 55%, rgba(255,255,255,.55), rgba(255,255,255,.1) 50%, transparent 78%),
    radial-gradient(circle 2px at 90% 18%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(circle 4px at 95% 65%, rgba(255,255,255,.5), rgba(255,255,255,.08) 60%, transparent 75%),
    radial-gradient(circle 2px at 10% 88%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(circle 3px at 50% 88%, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(circle 2px at 80% 88%, rgba(255,255,255,.4), transparent 70%);
  animation: droplet-glow 5s ease-in-out infinite;
}
@keyframes droplet-glow{
  0%, 100%{ opacity: .7; }
  50%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .pill-nav-wrapper::before{ animation: none; }
}

/* Capsula specială pentru Logo (cu nuanța închisă de negru/navy) */
.pill-logo-wrapper {
  background: rgba(59, 59, 71, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 18px;
}

.pill-logo-wrapper .site-branding a {
  color: var(--paper);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.pill-logo-wrapper .site-branding span { color: var(--accent-text); }
.pill-logo-wrapper .site-branding img { max-height: 40px; width: auto; }

/* Capsula pentru meniu și coș */
.pill-menu-wrapper {
  background: rgba(76, 75, 94, 0.55);
  border: 1px solid var(--line);
  padding: 6px 10px 6px 16px;
}

.pill-menu-wrapper .main-nav ul {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-menu-wrapper .main-nav a {
  color: var(--paper);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.pill-menu-wrapper .main-nav a:hover {
  background: var(--paper);
  color: var(--navy);
  transform: none !important;
}

/* Butonul de coș pătratos */
.pill-menu-wrapper .cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  background: var(--navy);
  color: var(--paper);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.pill-menu-wrapper .cart-link:hover {
  background: var(--accent);
}

.pill-menu-wrapper .cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 1.6rem;
  cursor: pointer;
}

/* Responsiveness pentru mobil */
@media (max-width: 820px) {
  .pill-menu-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: var(--navy);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 20px;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
  }

  .site-header.menu-open .pill-menu-wrapper {
    display: flex;
  }

  .pill-menu-wrapper .main-nav ul {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .pill-menu-wrapper .main-nav a {
    display: block;
    text-align: center;
    color: var(--paper);
  }

  .pill-menu-wrapper .cart-link {
    margin: 15px 0 0 0;
    width: 100%;
    border-radius: 8px;
    height: 42px;
  }

  .nav-toggle {
    display: block;
  }
}
/* -------------------------------------------------
   3. Hero
------------------------------------------------- */
/* Scroll-spacer: its height is the amount of scrolling it takes
   to play through the video. The .hero inside is pinned (sticky)
   for that entire distance, so the page doesn't visibly move
   until the video reaches its last frame. */
.hero-scroll-wrap{
  position: relative;
  height: 180vh;
}
.hero{
  position: sticky;
  top: 0;
  overflow: hidden;
  color: var(--paper);
  text-align:center;
  padding: 24px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Reusable pattern: on mobile, show a plain image instead of a heavy
   background video. Used for the homepage hero (scroll-scrubbed video
   is unreliable on many mobile browsers) and the Our Kiosk banner
   (avoids forcing a large autoplay video download on mobile data).
   Apply .mobile-video-fallback to the fallback <img>, and
   .mobile-hide-on-video to the <video> itself. */
.mobile-video-fallback{ display: none; }
@media (max-width: 768px){
  .mobile-video-fallback{ display: block; }
  .mobile-hide-on-video{ display: none; }
}
.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--navy) 45%, var(--accent-dark) 130%);
  opacity: .68;
}
.hero-inner{
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-content{
  max-width: 720px;
  margin: 0 auto;
  opacity: 0;
  will-change: opacity, transform;
}
.hero h1{
  font-size: 3.2rem; color:var(--paper); text-transform:uppercase;
}
.hero p{ font-size:1.15rem; max-width:640px; margin:0 auto 34px; color: #e0e1e9; font-weight:400; }
.hero-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }

/* -------------------------------------------------
   4. Category tabs
------------------------------------------------- */
.cat-tabs{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin: 0 0 46px; }
.cat-tabs a{
  display:inline-block; padding:10px 24px; border-radius:50px;
  border: 2px solid var(--paper); color: var(--paper);
  font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  transition: background .2s ease, color .2s ease;
}
.cat-tabs a:hover, .cat-tabs a.is-active{ background: var(--paper); color: var(--navy); }

/* -------------------------------------------------
   5. Cards / grids & Drink Photos
------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
/* Drinks at the kiosk: capped at 4 per row, centered, instead of
   auto-filling however many columns happen to fit the screen. */
.drinks-grid{
  grid-template-columns: repeat(4, minmax(0, 260px));
  justify-content: center;
}
.drinks-grid .card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}
.drinks-grid .card:hover{
  background: rgba(255,255,255,0.05);
}
@media (max-width: 1100px){
  .drinks-grid{ grid-template-columns: repeat(3, minmax(0, 260px)); }
}
@media (max-width: 820px){
  .drinks-grid{ grid-template-columns: repeat(2, minmax(0, 260px)); }
}
@media (max-width: 520px){
  .drinks-grid{ grid-template-columns: repeat(1, minmax(0, 280px)); }
}
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:visible;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
  padding: 16px;
}
.card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }

.card-image{
  aspect-ratio: 4 / 3;
  overflow: visible;
  background: transparent;
  position: relative;
  margin-bottom: 12px;
}


/* Cadru comun pentru imaginile de băutură (Carduri + Pagina de Produs) */
.drink-photo-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3 !important;
  background: transparent;
}
.drink-photo-wrap::after{ display:none; }

/* 1. IMAGINEA MARE: Triunghi rotunjit lat la bază */
.card .drink-blob-photo,
.drink-photo-wrap .drink-blob-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: none !important;
border-radius: 90% 50% 70% 50% / 100% 100% 40% 40% !important;
/*border-radius: 50% 50% 10% 10% / 95% 95% 10% 10% !important;*/
  box-shadow: 0 10px 25px rgba(59, 59, 71, 0.12);
  display: block;
  mask-image: radial-gradient(ellipse at center, black 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 62%, transparent 100%);
}

/* 2. IMAGINEA MICĂ (Cerc): Mutată cu încă 2 cm mai jos */
.card .drink-cup-photo,
.drink-photo-wrap .drink-cup-photo{
  position: absolute;
  left: 1.2rem;
  bottom: -3.3rem;    /* Coborâtă cu încă 2 cm */
  width: 36%;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  border-radius: 50% !important; /* Cerc perfect */
  border: none !important;
  outline: none !important;
  box-shadow: 0 8px 20px rgba(59, 59, 71, 0.18);
  z-index: 10;
  transition: transform 0.3s ease;
}

.card:hover .drink-cup-photo,
.drink-photo-wrap:hover .drink-cup-photo{
  transform: scale(1.05) rotate(-3deg);
}

.card-body{ padding: 12px 6px 6px; flex:1; display:flex; flex-direction:column; 
  margin-top: 2.8rem; }
.card-body h3{ font-size:1.15rem; margin-bottom:8px; text-transform:none; }
.card-desc{ color:var(--text-muted); font-size:.95rem; flex:1; font-weight:400; }
.card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; }
.card-price{ font-weight:800; font-size:1.2rem; color: var(--accent-text); }
.card-tag{
  display:inline-block; background: var(--paper-2); color: var(--paper);
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; margin-bottom:12px;
  align-self: flex-start;
}
.card .btn{ padding:9px 20px; font-size:.75rem; }

/* -------------------------------------------------
   6. Kiosk section
------------------------------------------------- */
.kiosk-section{ position: relative; z-index: 0; overflow: hidden; background: var(--navy); color: #e0e1e9; }
.kiosk-section .section-media{ z-index: -1; }
.kiosk-section .section-title{ color: var(--paper); }
.kiosk-section .section-subtitle{ color: #b2b3c0; }
.kiosk-section .cat-tabs a{ border-color: var(--paper); color: var(--paper); }
.kiosk-section .cat-tabs a:hover, .kiosk-section .cat-tabs a.is-active{ background: var(--paper); color: var(--navy); }
.kiosk-flex{
  display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center;
  margin-bottom: 70px;
}
.kiosk-flex img{ border-radius: var(--radius); }
.kiosk-flex h3{ color: var(--paper); font-size:1.7rem; text-transform:uppercase; }
.kiosk-flex p{ color: #b2b3c0; font-weight:400; }
@media (max-width: 820px){
  .kiosk-flex{ grid-template-columns:1fr; }
}

/* -------------------------------------------------
   7. Single product / drink page
------------------------------------------------- */
.single-wrap{
  display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:start;
  padding: 70px 0;
}

.single-wrap .drink-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.single-wrap h1{ text-transform:none; }
.single-price{ font-size:1.8rem; color: var(--accent-text); font-weight:800; margin: 10px 0 20px; }
.entry-content{ color: var(--text-muted); font-weight:400; }
.ingredients-list{ margin: 14px 0 24px; }
.ingredients-list li{ padding:8px 0; border-bottom:1px solid var(--line); color:var(--text-muted); font-weight:400; }
.photo-disclaimer{ font-size:.8rem; color:var(--text-muted); opacity:.8; margin-top:10px; line-height:1.5; }

@media (max-width: 820px){ 
  .single-wrap{ grid-template-columns:1fr; } 
  .single-wrap .drink-photo-wrap {
    max-width: 360px;
  }
}

/* -------------------------------------------------
   8. Order Form & Bank Details
------------------------------------------------- */
.order-form-wrapper {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.form-section {
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.field-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-title-name { grid-template-columns: 100px 1fr 1fr; }
.grid-street { grid-template-columns: 3fr 1fr; }
.grid-building { grid-template-columns: repeat(4, 1fr); }
.grid-location { grid-template-columns: 2fr 1fr 1.5fr; }

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-main);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--cream);
  color: var(--text-main);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(178, 179, 192, 0.2);
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

.company-fields-box {
  background-color: var(--paper-2);
  padding: 20px;
  border-radius: 12px;
  border: 1px dashed var(--gold);
  margin-top: 15px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.custom-checkbox a {
  color: var(--accent);
  text-decoration: underline;
}

/* -------------------------------------------------
   Animated "Complete Order" submit button (truck delivery)
------------------------------------------------- */
.order {
  appearance: none;
  border: 0;
  background: var(--order-dark);
  position: relative;
  height: 63px;
  width: 240px;
  margin: 25px auto 0;
  padding: 0;
  outline: none;
  cursor: pointer;
  border-radius: 32px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  display: block;
  transition: transform 0.3s ease;
}
.order span {
  --o: 1;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 19px;
  line-height: 24px;
  color: var(--order-white);
  font-size: 16px;
  font-weight: 500;
  opacity: var(--o);
  transition: opacity 0.3s ease;
}
.order span.default {
  transition-delay: 0.3s;
}
.order span.success {
  --offset: 16px;
  --o: 0;
}
.order span.success svg {
  width: 12px;
  height: 10px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 7px 0 0 4px;
  stroke: var(--order-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: var(--offset);
  transition: stroke-dashoffset 0.3s ease;
}
.order:active {
  transform: scale(0.96);
}
.order[aria-disabled="true"] {
  cursor: default;
}
.order .lines {
  opacity: 0;
  position: absolute;
  height: 3px;
  background: var(--order-white);
  border-radius: 2px;
  width: 6px;
  top: 30px;
  left: 100%;
  box-shadow: 15px 0 0 var(--order-white), 30px 0 0 var(--order-white), 45px 0 0 var(--order-white), 60px 0 0 var(--order-white), 75px 0 0 var(--order-white), 90px 0 0 var(--order-white), 105px 0 0 var(--order-white), 120px 0 0 var(--order-white), 135px 0 0 var(--order-white), 150px 0 0 var(--order-white), 165px 0 0 var(--order-white), 180px 0 0 var(--order-white), 195px 0 0 var(--order-white), 210px 0 0 var(--order-white), 225px 0 0 var(--order-white), 240px 0 0 var(--order-white), 255px 0 0 var(--order-white), 270px 0 0 var(--order-white), 285px 0 0 var(--order-white), 300px 0 0 var(--order-white), 315px 0 0 var(--order-white), 330px 0 0 var(--order-white);
}
.order .back, .order .box {
  --start: var(--order-white);
  --stop: var(--order-grey-light);
  border-radius: 2px;
  background: linear-gradient(var(--start), var(--stop));
  position: absolute;
}
.order .truck {
  width: 60px;
  height: 41px;
  left: 100%;
  z-index: 1;
  top: 11px;
  position: absolute;
  transform: translateX(24px);
}
.order .truck:before, .order .truck:after {
  --r: -90deg;
  content: '';
  height: 2px;
  width: 20px;
  right: 58px;
  position: absolute;
  display: block;
  background: var(--order-white);
  border-radius: 1px;
  transform-origin: 100% 50%;
  transform: rotate(var(--r));
}
.order .truck:before {
  top: 4px;
}
.order .truck:after {
  --r: 90deg;
  bottom: 4px;
}
.order .truck .back {
  left: 0;
  top: 0;
  width: 60px;
  height: 41px;
  z-index: 1;
}
.order .truck .front {
  overflow: hidden;
  position: absolute;
  border-radius: 2px 9px 9px 2px;
  width: 26px;
  height: 41px;
  left: 60px;
}
.order .truck .front:before, .order .truck .front:after {
  content: '';
  position: absolute;
  display: block;
}
.order .truck .front:before {
  height: 13px;
  width: 2px;
  left: 0;
  top: 14px;
  background: linear-gradient(var(--order-grey), var(--order-grey-dark));
}
.order .truck .front:after {
  border-radius: 2px 9px 9px 2px;
  background: var(--order-primary);
  width: 24px;
  height: 41px;
  right: 0;
}
.order .truck .front .window {
  overflow: hidden;
  border-radius: 2px 8px 8px 2px;
  background: var(--order-primary-light);
  transform: perspective(4px) rotateY(3deg);
  width: 22px;
  height: 41px;
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 1;
  transform-origin: 0 50%;
}
.order .truck .front .window:before, .order .truck .front .window:after {
  content: '';
  position: absolute;
  right: 0;
}
.order .truck .front .window:before {
  top: 0;
  bottom: 0;
  width: 14px;
  background: var(--order-dark);
}
.order .truck .front .window:after {
  width: 14px;
  top: 7px;
  height: 4px;
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  transform: skewY(14deg);
  box-shadow: 0 7px 0 rgba(255, 255, 255, 0.14);
}
.order .truck .light {
  width: 3px;
  height: 8px;
  left: 83px;
  transform-origin: 100% 50%;
  position: absolute;
  border-radius: 2px;
  transform: scaleX(0.8);
  background: #f0dc5f;
}
.order .truck .light:before {
  content: '';
  height: 4px;
  width: 7px;
  opacity: 0;
  transform: perspective(2px) rotateY(-15deg) scaleX(0.94);
  position: absolute;
  transform-origin: 0 50%;
  left: 3px;
  top: 50%;
  margin-top: -2px;
  background: linear-gradient(90deg, #f0dc5f, rgba(240, 220, 95, 0.7), rgba(240, 220, 95, 0));
}
.order .truck .light.top {
  top: 4px;
}
.order .truck .light.bottom {
  bottom: 4px;
}
.order .box {
  --start: var(--order-sand-light);
  --stop: var(--order-sand);
  width: 21px;
  height: 21px;
  right: 100%;
  top: 21px;
}
.order .box:before, .order .box:after {
  content: '';
  top: 10px;
  position: absolute;
  left: 0;
  right: 0;
}
.order .box:before {
  height: 3px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.1);
}
.order .box:after {
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.order.animate .default {
  --o: 0;
  transition-delay: 0s;
}
.order.animate .success {
  --offset: 0;
  --o: 1;
  transition-delay: 7s;
}
.order.animate .success svg {
  transition-delay: 7.3s;
}
.order.animate .truck {
  animation: truck 10s ease forwards;
}
.order.animate .truck:before {
  animation: door1 2.4s ease forwards 0.3s;
}
.order.animate .truck:after {
  animation: door2 2.4s ease forwards 0.6s;
}
.order.animate .truck .light:before, .order.animate .truck .light:after {
  animation: light 10s ease forwards;
}
.order.animate .box {
  animation: box 10s ease forwards;
}
.order.animate .lines {
  animation: lines 10s ease forwards;
}
@keyframes truck {
  10%, 30% { transform: translateX(-164px); }
  40% { transform: translateX(-104px); }
  60% { transform: translateX(-224px); }
  75%, 100% { transform: translateX(24px); }
}
@keyframes lines {
  0%, 30% { opacity: 0; transform: scaleY(0.7) translateX(0); }
  35%, 65% { opacity: 1; }
  70% { opacity: 0; }
  100% { transform: scaleY(0.7) translateX(-400px); }
}
@keyframes light {
  0%, 30% { opacity: 0; transform: perspective(2px) rotateY(-15deg) scaleX(0.88); }
  40%, 100% { opacity: 1; transform: perspective(2px) rotateY(-15deg) scaleX(0.94); }
}
@keyframes door1 {
  30%, 50% { transform: rotate(32deg); }
}
@keyframes door2 {
  30%, 50% { transform: rotate(-32deg); }
}
@keyframes box {
  8%, 10% { transform: translateX(40px); opacity: 1; }
  25% { transform: translateX(112px); opacity: 1; }
  26% { transform: translateX(112px); opacity: 0; }
  27%, 100% { transform: translateX(0px); opacity: 0; }
}
@media (max-width: 600px){
  .order{ width: 100%; max-width: 240px; }
}

.form-notice {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-weight: 600;
}
.form-notice.success { background: #e4f3e6; color: #2c6b34; }
.form-notice.error { background: #fbe6e6; color: #a13232; }

.bank-details-card {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 40px;
  border-left: 5px solid var(--accent);
}

.bank-details-card h4 {
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--paper);
}

.bank-details-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.bank-details-card p a{ color: var(--accent-text); font-weight:700; }

@media (max-width: 680px) {
  .order-form-wrapper { padding: 24px 18px; }
  .grid-2, .grid-title-name, .grid-street, .grid-building, .grid-location {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------
   Stilizare compactă și modernă pentru Tip Client
------------------------------------------------- */
.customer-type-group {
    margin-bottom: 20px;
}
.customer-type-group > label {
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-main);
}
.customer-type-options {
    display: flex;
    gap: 12px;
}
.customer-type-card {
    flex: 1;
    position: relative;
}
.customer-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.customer-type-card label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.2s ease;
    text-align: center;
}
.customer-type-card label:hover {
    border-color: var(--accent);
    background-color: var(--paper);
    color: var(--navy);
}
.customer-type-card input[type="radio"]:checked + label {
    border-color: var(--accent);
    background-color: var(--paper);
    color: var(--navy);
    box-shadow: 0 4px 12px rgba(85, 83, 100, 0.12);
}
.customer-type-card .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.customer-type-card .customer-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain;
    display: block;
    /* Icons are solid black PNGs. On the default dark, unselected
       background they'd be nearly invisible, so invert them to white.
       Reverted back to black below once the background turns white
       (selected / hover), where black is the visible choice. */
    filter: brightness(0) invert(1);
    transition: filter 0.2s ease;
}
.customer-type-card label:hover .customer-icon,
.customer-type-card input[type="radio"]:checked + label .customer-icon {
    filter: none;
}

/* Ajustare Grilă pentru Județ, Localitate, Cod Poștal, Țară */
.grid-location {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .customer-type-options {
        flex-direction: column;
        gap: 8px;
    }
    .grid-location {
        grid-template-columns: 1fr;
    }
}


/* -------------------------------------------------
   9. About / static content
------------------------------------------------- */
.about-section{ text-align:center; }
.about-section p{ max-width:700px; margin:0 auto; color:var(--text-muted); font-weight:400; }

.about-section.has-video,
.kiosk-banner.has-video{
  position: relative;
  overflow: hidden;
  color: var(--paper);
  padding: 110px 24px;
}
.kiosk-banner.has-video{
  /* 1.3x taller again on top of the earlier 1.5x increase (was 580px/150px padding) */
  min-height: 754px;
  padding: 195px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 600px){
  .kiosk-banner.has-video{
    min-height: 559px;
    padding: 117px 24px;
  }
}
.about-section.has-video .container,
.kiosk-banner.has-video .container{
  position: relative;
  z-index: 1;
}
.about-section.has-video .section-title,
.kiosk-banner.has-video .section-title{
  color: var(--paper);
}
.about-section.has-video p,
.kiosk-banner.has-video p,
.kiosk-banner.has-video .entry-content{
  color: var(--paper);
  opacity: .9;
}
.section-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--navy) 45%, var(--accent-dark) 130%);
  opacity: .68;
}
.kiosk-banner.has-video .section-media::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--navy) 100%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 600px){
  .kiosk-banner.has-video .section-media::after{ height: 140px; }
}
.kiosk-section .section-media::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  background: linear-gradient(to top, transparent 0%, var(--navy) 100%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 600px){
  .kiosk-section .section-media::before{ height: 140px; }
}

/* -------------------------------------------------
   10. Footer
------------------------------------------------- */
.site-footer{ background: var(--navy); color: var(--paper); padding: 60px 0 30px; font-family: inherit; }
.site-footer a{ display:block; margin-bottom:8px; padding:0; font-size:14px; color: var(--text-muted); font-weight:400; text-decoration:none; transition: color .2s ease; }
.site-footer a:hover{ color: var(--paper); }
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap:30px; margin-bottom:34px; }
.footer-grid h4{ color: var(--paper); margin-bottom:20px; text-transform:uppercase; font-size:15px; font-weight:700; letter-spacing:1px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom-row{ flex-direction:column; text-align:center; }
  .footer-legal-links{ justify-content:center; }
}

/* Social "ticket" links */
.footer-social-tickets{ display:flex; flex-wrap:wrap; gap:14px; margin:0; padding:0; list-style:none; box-sizing:border-box; }
.footer-social-tickets li{ list-style:none; margin:0; }
.footer-social-tickets li a{
  position:relative; display:flex; align-items:center; gap:10px;
  width:150px; height:46px; background: var(--paper);
  padding-left:18px; text-decoration:none; text-align:left; overflow:hidden;
  border-radius:4px; transform: rotate(-6deg) skew(10deg);
  box-shadow: -8px 8px 10px rgba(0,0,0,.35); transition: .35s;
}
.footer-social-tickets li a svg{ flex:0 0 auto; color: var(--navy); transition: .35s; }
.footer-social-tickets li a .ticket-label{
  margin:0; padding:0; font-size:12px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color: var(--navy); transition: .35s;
}
.footer-social-tickets li a::before{
  content:''; position:absolute; top:0; left:-10px; height:100%; width:10px;
  background-color: var(--text-muted); transform: skewY(-45deg); transition: .35s;
}
.footer-social-tickets li a::after{
  content:''; position:absolute; bottom:-10px; left:-6px; height:10px; width:100%;
  background-color: var(--text-muted); transform: skewX(-45deg); transition: .35s;
}
.footer-social-tickets li a:hover{
  transform: rotate(-6deg) skew(10deg) translate(6px,-6px);
  box-shadow: -16px 16px 20px rgba(0,0,0,.4);
}
.footer-social-tickets li:hover svg,
.footer-social-tickets li:hover .ticket-label{ color: var(--paper); }
/* Brand colors on hover, in TikTok / Instagram / Telegram / WhatsApp order */
.footer-social-tickets li:nth-child(1):hover a{ background:#010101; }
.footer-social-tickets li:nth-child(1):hover a::before,
.footer-social-tickets li:nth-child(1):hover a::after{ background:#25f4ee; }
.footer-social-tickets li:nth-child(2):hover a{ background:#e4405f; }
.footer-social-tickets li:nth-child(2):hover a::before,
.footer-social-tickets li:nth-child(2):hover a::after{ background:#c13584; }
.footer-social-tickets li:nth-child(3):hover a{ background:#229ed9; }
.footer-social-tickets li:nth-child(3):hover a::before,
.footer-social-tickets li:nth-child(3):hover a::after{ background:#0088cc; }
.footer-social-tickets li:nth-child(4):hover a{ background:#25d366; }
.footer-social-tickets li:nth-child(4):hover a::before,
.footer-social-tickets li:nth-child(4):hover a::after{ background:#128c7e; }
@media (max-width: 600px){ .footer-social-tickets{ justify-content:center; } }
.footer-bottom{ text-align:center; border-top:1px solid rgba(255,255,255,.08); padding-top:22px; font-size:.85rem; color:#7c7e8d; }

/* -------------------------------------------------
   11. Products page intro
------------------------------------------------- */
.products-intro{ text-align:center; max-width:760px; margin:0 auto 30px; color:var(--text-muted); font-weight:400; }
/* -------------------------------------------------
   nou e pentru butoanele de pe prima pagina
------------------------------------------------- */
/* Circle-expand action button */
.custom-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  width: max-content;
  min-width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.custom-action-btn .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.76, 1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  margin: 0;
  width: 3rem;
  height: 3rem;
  background: var(--paper, #fff);
  border-radius: 1.625rem;
}

.custom-action-btn .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: var(--paper, #fff);
}

.custom-action-btn .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.125rem;
  height: 0.125rem;
  background: none;
}

.custom-action-btn .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.29rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid var(--navy, #3b3b47);
  border-right: 0.125rem solid var(--navy, #3b3b47);
  transform: rotate(45deg);
}

.custom-action-btn .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.76, 1);
  position: relative;
  z-index: 1;
  padding: 0.75rem 1.5rem 0.75rem 0;
  margin: 0 0 0 3.5rem;
  color: var(--paper, #fff);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  text-transform: uppercase;
}

.custom-action-btn:hover .circle {
  width: 100%;
}

.custom-action-btn:hover .circle .icon.arrow {
  background: var(--navy, #3b3b47);
  transform: translate(1rem, 0);
}

.custom-action-btn:hover .button-text {
  color: var(--navy, #3b3b47);
}
/* -------------------------------------------------
https://integratedbio.com/newsroom/
------------------------------------------------- */

/* -------------------------------------------------
   12. Misc / WP defaults
------------------------------------------------- */
.alignleft{ float:left; margin-right:20px; }
.alignright{ float:right; margin-left:20px; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.empty-state{ text-align:center; color:var(--text-muted); padding:70px 0; }
/* -------------------------------------------------
   14. Header cart icon/badge
------------------------------------------------- */
.cart-link{ position:relative; display:inline-flex; align-items:center; justify-content:center; margin-left:20px; font-size:1.3rem; }

/* Language switcher: Polylang dropdown, or native EN|RO toggle when no plugin is active */
.lang-switcher{
  display: inline-flex;
  align-items: center;
  margin-left: 14px;
}
.lang-switcher-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--navy);
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 30px 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
}
.lang-switcher-select option{
  color: var(--navy);
  background: var(--paper);
}
.lang-switcher-select:focus{
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}
.lang-switcher-native{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 3px;
}
.lang-switcher-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 6px 10px;
  border-radius: 16px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.lang-switcher-btn:hover{ color: var(--paper); }
.lang-switcher-btn.is-active{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.cart-count{
  position:absolute; top:-8px; right:-10px;
  background: var(--accent); color:#fff;
  font-size:.7rem; font-weight:700; line-height:1;
  min-width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 4px;
}

/* -------------------------------------------------
   15. Package cards: share the same "blob" photo shape as kiosk drinks
------------------------------------------------- */
.char-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.char-tag{
  font-size:.7rem; font-weight:600; color:var(--text-muted);
  background: var(--cream); border:1px solid var(--line);
  padding:3px 10px; border-radius:20px;
}
.card-actions{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.btn-outline-dark, .btn-info{
  background: transparent; border:2px solid var(--paper); color: var(--paper);
  text-align:center; padding:9px 18px; font-size:.75rem;
}
.btn-outline-dark:hover, .btn-info:hover{ background: var(--paper); color: var(--navy); }
.add-to-cart-group{ display:flex; gap:8px; }
.btn-add-cart{ flex:1; border:none; }
.btn-add-cart.is-added{ background: #2c6b34; animation: btn-added-pop .35s ease; }
@keyframes btn-added-pop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
.cart-count-bump{ animation: cart-count-bump .4s ease; }
@keyframes cart-count-bump{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.4); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .btn-add-cart.is-added{ animation: none; }
  .cart-count-bump{ animation: none; }
}

/* -------------------------------------------------
   16. Order page: multi-line cart + VAT totals
------------------------------------------------- */
.cart-lines{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cart-line{
  display:grid; grid-template-columns: 2fr 116px 90px 90px 32px;
  gap:10px; align-items:center; padding:12px 14px;
  border-bottom:1px solid var(--line); font-size:.9rem;
}
.cart-line:last-child{ border-bottom:none; }
.cart-line-head{ background: var(--paper-2); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); }

.cart-line-remove{
  background:none; border:none; color:var(--text-muted); font-size:1.2rem;
  cursor:pointer; line-height:1;
}
.cart-line-remove:hover{ color: var(--accent-text); }
.cart-totals{ margin-top:16px; padding:16px 18px; background: var(--paper-2); border-radius:10px; }
.totals-row{ display:flex; justify-content:space-between; padding:4px 0; color:var(--text-muted); }
.totals-row-final{ font-weight:800; font-size:1.1rem; color:var(--paper); border-top:1px solid var(--line); margin-top:6px; padding-top:10px; }
@media (max-width: 600px){
  .cart-line{ grid-template-columns: 1fr 92px 64px 28px; gap:6px; }
  .cart-line-price{ display:none; }
  .cart-line-qty .qty-stepper{ width:88px; }
  .cart-line-qty .qty-stepper input{ width:24px; }
  .cart-line-qty .qty-stepper button{ width:28px; flex:0 0 28px; }
  .cart-line-total{ font-size:.8rem; }
}
.single-add-to-cart{ margin-top:22px; max-width:320px; }

/* -------------------------------------------------
   17. Contact page
------------------------------------------------- */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; margin-top:20px; align-items:start; }
.contact-details{ display:flex; flex-direction:column; gap:26px; }
.contact-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-icon{
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 60% 40% 50% 50% / 50% 40% 60% 50%;
  border: 1px solid rgba(124,126,141,0.2);
}
.contact-item h4{ margin-bottom:4px; text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; color:var(--paper); }
.contact-item p{ color:var(--text-muted); font-weight:400; margin:0; }
.contact-item a{ color:var(--accent-text); font-weight:600; }
.contact-map{ height:320px; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); }
@media (max-width: 820px){ .contact-layout{ grid-template-columns:1fr; } }
.empty-cart-notice{ text-align:center; padding:50px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.empty-cart-notice p{ color:var(--text-muted); margin-bottom:18px; font-size:1.05rem; }
/* -------------------------------------------------
   Stilizare iconițe pagina de contact
------------------------------------------------- */
.contact-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
/* -------------------------------------------------
   18. Quantity stepper (- / + buttons instead of native number arrows)
------------------------------------------------- */
.qty-stepper{
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background: var(--surface);
}
.qty-stepper button{
  width:34px; flex:0 0 34px;
  border:none; background: var(--paper-2); color: var(--paper);
  font-size:1rem; font-weight:700; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.qty-stepper button:hover{ background: var(--accent); color:#fff; }
.qty-stepper input{
  width:42px; border:none; text-align:center; font-family:inherit; font-size:.95rem;
  background:transparent; color:var(--text-main);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{
  -webkit-appearance: none; margin:0;
}
.add-to-cart-group{ align-items:center; }
.add-to-cart-group .qty-stepper{ flex:0 0 auto; }
.cart-line-qty .qty-stepper{ width:104px; }
.cart-line-qty .qty-stepper input{ width:36px; }


/* -------------------------------------------------
   Kiosk page: "How to Order" flow — interactive hover states
   (base look stays in the inline styles already on the page;
   these rules only add motion/feedback on top of them)
------------------------------------------------- */
.order-flow-grid{ position:relative; }
.flow-step:hover{
  transform: translateY(-10px) !important;
  border-color: rgba(124,126,141,.5) !important;
  background: rgba(255,255,255,.06) !important;
}
.flow-icon{ transition: transform .35s ease, box-shadow .35s ease; }
.flow-step:hover .flow-icon{
  transform: scale(1.12) rotate(-6deg) !important;
  box-shadow: 0 14px 30px rgba(124,126,141,.35) !important;
}
.flow-icon img{ transition: transform .3s ease; }
.flow-step:hover .flow-icon img{ transform: scale(1.12); }

/* Connecting arrows between steps, shown once they sit in a single row */
@media (min-width: 950px){
  .flow-step{ position:relative; }
  .flow-step:not(:last-child)::after{
    content:"\203A";
    position:absolute; top:38px; right:-26px;
    font-size:1.8rem; font-weight:700; color: rgba(124,126,141,.5);
    line-height:1; z-index:2;
  }
}

/* Ingredient cards (Advanced Dispensing Tech) — hover feedback */
.kiosk-ingredients-system .grid > div:hover{
  transform: translateY(-8px) !important;
  border-color: rgba(124,126,141,.4) !important;
  background: rgba(255,255,255,.06) !important;
}
.kiosk-ingredients-system .grid > div > div{ transition: transform .3s ease, background .3s ease; }
.kiosk-ingredients-system .grid > div:hover > div{
  transform: scale(1.08) !important;
}

/* -------------------------------------------------
   Kiosk drink sizes (S / M / L)
------------------------------------------------- */
.size-badges{ display:flex; gap:6px; margin: 8px 0 4px; }
.size-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background: var(--paper-2); color: var(--paper);
  font-size:.75rem; font-weight:800;
  border:1px solid var(--line);
}
.sizes-list{ margin: 10px 0 24px; }
.sizes-list li{
  display:flex; align-items:center; gap:10px;
  padding:6px 0; border-bottom:1px solid var(--line);
  color:var(--text-muted); font-weight:400;
}
.sizes-list .size-badge{ flex:0 0 auto; }

/* -------------------------------------------------
   Kiosk page: 3D coverflow photo gallery (moving cards)
------------------------------------------------- */
.kiosk-gallery{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  padding: 70px 0;
  perspective: 1400px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.kiosk-gallery-track{
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  transform-style: preserve-3d;
  will-change: transform;
}
.kiosk-gallery-card{
  flex: 0 0 auto;
  width: 260px;
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.kiosk-gallery-card.is-focused{
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.22);
}
.kiosk-gallery-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 600px){
  .kiosk-gallery{ padding: 50px 0; }
  .kiosk-gallery-card{ width: 190px; height: 250px; border-radius: 16px; }
  .kiosk-gallery-track{ gap: 14px; }
}
@media (prefers-reduced-motion: reduce){
  .kiosk-gallery-track{ transition: none; }
}

/* -------------------------------------------------
   Stock status
------------------------------------------------- */
.stock-badge-out{
  display:inline-block; background:#f7dede; color:#a13232;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 12px; border-radius:20px; margin-bottom:10px;
}
.stock-badge-low{
  display:inline-block; background:#fbe8cc; color:#9a5b0a;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 12px; border-radius:20px; margin-bottom:10px;
}
.stock-badge-in{
  display:inline-block; background:#dcf0e0; color:#2c6b34;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 12px; border-radius:20px; margin-bottom:10px;
}
.stock-limit-message{
  display:none;
  font-size:.75rem; color:#a13232; font-weight:600;
  margin-top:6px;
}
.stock-limit-message.is-visible{ display:block; }
.stock-adjusted-notice{
  background:#fbe8cc; color:#9a5b0a; font-weight:600; font-size:.85rem;
  padding:12px 16px; border-radius:10px; margin-bottom:16px;
}
.package-card.out-of-stock{ opacity:.75; }
.package-card.out-of-stock .drink-blob-photo{ filter: grayscale(60%); }
.btn-add-cart:disabled{
  background: #e0e1e9; color:#7c7e8d; cursor:not-allowed;
}
.btn-add-cart:disabled:hover{ background:#e0e1e9; }

/* -------------------------------------------------
   VAT-inclusive price display
------------------------------------------------- */
.price-with-vat{ display:flex; flex-direction:column; gap:2px; }
.vat-note{ font-size:.7rem; color:var(--text-muted); font-weight:500; }
.price-breakdown{
  background: var(--paper-2); border-radius: var(--radius);
  padding:18px 20px; margin:16px 0 20px;
}
.price-breakdown-row{
  display:flex; justify-content:space-between; padding:4px 0;
  color:var(--text-muted); font-size:.95rem;
}
.price-breakdown-total{
  font-weight:800; font-size:1.2rem; color:var(--paper);
  border-top:1px solid var(--line); margin-top:6px; padding-top:10px;
}
.price-vat-note{ margin:10px 0 0; font-size:.8rem; color:var(--text-muted); }

/* -------------------------------------------------
   Drinks menu (café-menu style rows, replacing the card grid)
------------------------------------------------- */
.drink-menu{ display:flex; flex-direction:column; max-width:820px; margin:0 auto; }
.menu-row{
  display:flex; align-items:center; gap:22px;
  padding:22px 8px; border-bottom:1px dashed var(--line);
  transition: transform .2s ease, padding-left .2s ease;
}
.menu-row:last-child{ border-bottom:none; }
.menu-row:hover{ transform: translateX(4px); }
.menu-row-photo{
  flex:0 0 76px; width:76px; height:76px; border-radius:50%;
  overflow:hidden; box-shadow:0 6px 16px rgba(59,59,71,.18);
  background: var(--paper-2);
}
.menu-row-photo img{ width:100%; height:100%; object-fit:cover; }
.menu-row-body{ flex:1; min-width:0; }
.menu-row-top{ display:flex; align-items:baseline; gap:8px; }
.menu-row-top h3{ font-size:1.1rem; margin:0; white-space:nowrap; text-transform:none; }
.menu-row-dots{
  flex:1; border-bottom:2px dotted var(--line); height:1px;
  margin-bottom:6px; min-width:20px;
}
.menu-row-price{ font-weight:800; color:var(--accent-text); font-size:1.05rem; white-space:nowrap; }
.menu-row-desc{ color:var(--text-muted); font-size:.9rem; margin:6px 0 0; font-weight:400; }
.menu-row .size-badges{ margin:6px 0 0; }

@media (max-width: 560px){
  .menu-row{ gap:14px; padding:16px 4px; }
  .menu-row-photo{ flex-basis:56px; width:56px; height:56px; }
  .menu-row-top{ flex-wrap:wrap; }
  .menu-row-dots{ display:none; }
}
/* -------------------------------------------------
   Minimal drink card (Our Kiosk page): photo + name + size only
------------------------------------------------- */
.drink-card-minimal .card-body{ text-align:center; padding:18px 16px 22px; }
.drink-card-minimal h3{ margin-bottom:6px; }
.drink-card-minimal .size-badges{ justify-content:center; margin-top:6px; }
/* -------------------------------------------------
   Kiosk page: swap desktop/mobile image variants
------------------------------------------------- */
@media (max-width: 768px){
  .kiosk-desktop-image{ display: none !important; }
  .kiosk-desktop-right-col{ display: none !important; }
  .kiosk-mobile-image{ display: flex !important; }
  .kiosk-extra-mobile-item{ display: flex !important; }
  .kiosk-layout-container{ flex-direction: column !important; gap: 20px !important; }
  .kiosk-layout-container > div{ text-align: left !important; width: 100% !important; }
}

/* -------------------------------------------------
   Cookie consent banner + preferences modal
------------------------------------------------- */
.cookie-consent-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10000;
  padding: 20px 24px;
  background: rgba(59,59,71,0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
  animation: cookie-banner-in .4s ease;
}
@keyframes cookie-banner-in{
  from{ transform: translateY(100%); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.cookie-consent-banner-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-consent-text strong{ display:block; color: var(--paper); font-size: 1rem; margin-bottom: 4px; }
.cookie-consent-text p{ color: var(--text-muted); font-size: .88rem; line-height: 1.55; margin: 0; max-width: 640px; }
.cookie-consent-actions{ display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.cookie-consent-actions .btn,
.cookie-consent-actions .btn-outline-dark{ white-space: nowrap; padding: 10px 20px; font-size: .78rem; }

.cookie-consent-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cookie-overlay-in .25s ease;
}
.cookie-consent-modal:not([hidden]){
  display: flex;
}
@keyframes cookie-overlay-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.cookie-consent-modal-box{
  position: relative;
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 55%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 34px 32px 32px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
  animation: cookie-modal-pop .35s cubic-bezier(.2,.9,.3,1.3);
}
.cookie-consent-modal-box::before{
  content: '';
  position: absolute;
  top: 0; left: 22px; right: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent));
  opacity: .8;
}
@keyframes cookie-modal-pop{
  from{ opacity: 0; transform: scale(.9) translateY(16px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .cookie-consent-modal-box{ animation: none; }
  .cookie-consent-modal{ animation: none; }
}
.cookie-modal-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cookie-modal-close:hover{ background: var(--paper-2); color: var(--paper); transform: rotate(90deg); }
.cookie-consent-modal-box h3{
  color: var(--paper);
  margin-bottom: 8px;
  font-size: 1.35rem;
  display: flex; align-items: center; gap: 10px;
}
.cookie-consent-modal-box h3::before{
  content: '🍪';
  font-size: 1.2rem;
}
.cookie-consent-modal-box > p{ color: var(--text-muted); font-size: .9rem; line-height: 1.55; margin-bottom: 24px; }
.cookie-category{
  padding: 16px 14px;
  margin: 0 -14px;
  border-radius: 12px;
  transition: background .2s ease;
}
.cookie-category:hover{ background: rgba(255,255,255,0.04); }
.cookie-category:not(:last-of-type){ margin-bottom: 4px; }
.cookie-category:last-of-type{ margin-bottom: 26px; }
.cookie-category-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cookie-category-head strong{ color: var(--paper); font-size: .95rem; }
.cookie-category p{ color: var(--text-muted); font-size: .85rem; line-height: 1.5; margin: 0 0 0 52px; }
.cookie-consent-modal-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-consent-modal-actions .btn,
.cookie-consent-modal-actions .btn-outline-dark{ flex: 1; text-align: center; }

/* Toggle switch */
.cookie-toggle{ position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.cookie-toggle input{ opacity: 0; width: 0; height: 0; }
.cookie-toggle-slider{
  position: absolute; inset: 0; cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 22px; transition: background .2s ease, box-shadow .2s ease;
}
.cookie-toggle-slider::before{
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s ease, background .2s ease;
}
.cookie-toggle input:checked + .cookie-toggle-slider{
  background: var(--accent);
  box-shadow: 0 0 12px rgba(124,126,141,.6);
}
.cookie-toggle input:checked + .cookie-toggle-slider::before{ transform: translateX(18px); background: var(--paper); }
.cookie-toggle input:disabled + .cookie-toggle-slider{ opacity: .6; cursor: default; }

@media (max-width: 680px){
  .cookie-consent-banner-inner{ flex-direction: column; align-items: stretch; }
  .cookie-consent-actions{ justify-content: stretch; }
  .cookie-consent-actions button{ flex: 1; }
}

/* -------------------------------------------------
   Scroll-reveal animation (classes added/removed by JS —
   see main.js. Element returns to its normal, unmodified
   state once the reveal finishes, so it never conflicts
   with hover effects like .card's lift-on-hover.)
------------------------------------------------- */
.reveal-on-scroll{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-on-scroll{ opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------
   FAQ accordion (Contact page)
------------------------------------------------- */
.faq-section{ margin-top: 70px; }
.faq-accordion{ max-width: 760px; margin: 30px auto 0; }
.faq-item{
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
}
.faq-icon{
  flex-shrink: 0;
  position: relative;
  width: 18px;
  height: 18px;
}
.faq-icon::before,
.faq-icon::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent-text);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-icon::before{ width: 14px; height: 2px; }
.faq-icon::after{ width: 2px; height: 14px; }
.faq-item.is-open .faq-icon::after{ transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-answer p{
  margin: 0;
  padding: 0 22px 20px;
  color: var(--text-muted);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce){
  .faq-answer{ transition: none; }
  .faq-icon::before, .faq-icon::after{ transition: none; }
}

/* -------------------------------------------------
   Icon + text rows (product detail icons, grind selector) —
   matches the "Fully automated, hygienic preparation" icon style
   used on the Our Kiosk page.
------------------------------------------------- */
.icon-blob-row{ display:flex; align-items:center; gap:15px; margin-bottom:16px; }
.icon-blob-row:last-child{ margin-bottom:0; }
.icon-blob-badge{
  width:50px; height:50px; flex-shrink:0;
  background:#ffffff;
  border-radius: 60% 40% 50% 50% / 50% 40% 60% 50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(124,126,141,0.2);
}
.icon-blob-badge img{ width:24px; height:24px; object-fit:contain; }
.icon-blob-row p{ color:#b2b3c0; margin:0; }
.product-detail-icons{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.grind-selector{ margin: 24px 0; }
.grind-toggle{ display:flex; gap:12px; margin-top:14px; margin-left:65px; flex-wrap:wrap; }
.grind-option{
  display:inline-block; padding:10px 24px; border-radius:50px;
  border: 2px solid var(--paper); color: var(--paper); background: transparent;
  font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  cursor:pointer; font-family:inherit;
  transition: background .2s ease, color .2s ease;
}
.grind-option:hover, .grind-option.is-active{ background: var(--paper); color: var(--navy); }
.cart-line-grind{ color: var(--text-muted); font-weight: 400; font-size: .85em; }