/* =========================
   GR-QRCode.gr (UI CSS)
   - Desktop: platform-wide layout (2 columns)
   - Local History (localStorage)
   - Search/Filter + Pin
   - Colors: #ec7127 gradient
   - Menu-ready header
   - QR Engine: qr-code-styling
   - + Logo module + Subtabs (Logo/Frame/Shape)
   - + Frame presets (None/Card/Sticker/Badge + Ribbon/Ticket)
   ========================= */

*{ box-sizing: border-box; }

:root{
  --brand: #ec7127;
  --brandHover: #d65f17;
  --text: #111;
  --muted: #555;
  --border: rgba(0,0,0,0.12);
  --card: rgba(255,255,255,0.95);
  --soft: rgba(255,255,255,0.72);

  --accentSoft: rgba(236,113,39,0.14);
  --accentLine: rgba(236,113,39,0.55);
  --accentShadow: 0 10px 22px rgba(236,113,39,0.22), 0 6px 14px rgba(0,0,0,0.10);
}

body{
  margin:0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, var(--brand) 100%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  color: var(--text);
}

.container{
  width:100%;
  max-width: 560px;
  padding: 10px;
}

.card{
  background: var(--card);
  padding: 28px;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Header */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 0 0 10px;
}

.brand{ display:block; text-decoration:none; }

.brand img{
  display:block;
  width: clamp(220px, 46vw, 420px);
  height:auto;
  margin: 0;
}

.menu-btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: not-allowed;
  opacity: 0.55;
}

/* Platform layout */
.platform-layout{ display:block; }
.panel{ text-align: center; }

.title{
  margin: 6px 0 8px;
  line-height: 1.05;
  font-size: clamp(24px, 5.2vw, 34px);
  text-align:center;
}

.subtitle{
  color: var(--muted);
  margin: 0 0 18px;
  text-align:center;
}

textarea{
  width:100%;
  height: 110px;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,0.12);
  padding: 12px;
  resize: none;
  font-size: 16px;
  outline: none;
  background:#fff;
}
textarea:focus{ border-color: var(--brand); }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
  text-align:left;
}

.qr-controls-grid{
  align-items:end;
}

.qr-scan-check{
  min-height:74px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  background:#f8fafc;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.qr-scan-check-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:1000;
  font-size:16px;
  background:#ecfdf5;
  color:#047857;
  border:1px solid #a7f3d0;
}

.qr-scan-check-title{
  font-weight:900;
  color:#111827;
  line-height:1.15;
}

.qr-scan-check-text{
  margin-top:3px;
  font-size:12px;
  line-height:1.25;
  color:#64748b;
}

.qr-scan-check-swatches{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.qr-scan-check-swatches span{
  width:22px;
  height:22px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.16);
}

.qr-scan-check-neutral{
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  border-color:#e5e7eb;
}

.qr-scan-check-neutral .qr-scan-check-icon{
  background:#f1f5f9;
  color:#475569;
  border-color:#cbd5e1;
}

.qr-scan-check-good{
  background:linear-gradient(180deg,#f0fdf4,#ffffff);
  border-color:#bbf7d0;
}

.qr-scan-check-good .qr-scan-check-icon{
  background:#dcfce7;
  color:#047857;
  border-color:#86efac;
}

.qr-scan-check-warn{
  background:linear-gradient(180deg,#fff7ed,#ffffff);
  border-color:#fed7aa;
}

.qr-scan-check-warn .qr-scan-check-icon{
  background:#ffedd5;
  color:#c2410c;
  border-color:#fdba74;
}

.qr-scan-check-bad{
  background:linear-gradient(180deg,#fff1f2,#ffffff);
  border-color:#fecdd3;
}

.qr-scan-check-bad .qr-scan-check-icon{
  background:#ffe4e6;
  color:#be123c;
  border-color:#fda4af;
}

.field label{
  display:block;
  font-weight:700;
  margin: 0 0 6px;
  color:#333;
}

select{
  width:100%;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.12);
  padding: 10px 12px;
  font-size: 15px;
  outline:none;
  background:#fff;
}
select:focus{ border-color: var(--brand); }

button{
  border:none;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  cursor:pointer;
}

.primary{
  margin-top: 16px;
  width: min(360px, 100%);
  border-radius: 999px;
  background: var(--brand);
  color:#fff;
  font-size: 16px;
}
.primary:hover{ background: var(--brandHover); }

.secondary{
  background:#9a9a9a;
  color:#fff;
}
.secondary:hover{ background:#7f7f7f; }

.ghost{
  background: transparent;
  border: 1px solid var(--border);
  color:#111;
  padding: 10px 14px;
}
.ghost:hover{ background: rgba(0,0,0,0.04); }

button:disabled{ opacity:0.55; cursor:not-allowed; }

/* Status */
.status{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-align:center;
  border: 1px solid #b7e7ca;
  min-height: 20px;
}

.status[data-type="ok"]{
  background:#ecfdf5;
  color:#065f46;
}

.status[data-type="error"]{
  background:#fef2f2;
  color:#991b1b;
}

.status[data-type="info"]{
  background:#ecfdf5;
  color:#065f46;
}

/* Preview card */
.account-preview-sticky{
  position:relative;
}

.preview-card{
  margin-top: 18px;
  background: var(--soft);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 14px;
  overflow:hidden;
}

.preview-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;

  padding: 10px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236,113,39,0.10), rgba(255,255,255,0));
}

.preview-title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  position: relative;
  padding-left: 12px;
}
.preview-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(236,113,39,0.25);
}

.preview-hint{ font-size: 12px; color:#666; }

.qr-wrapper{
  margin-top: 6px;
  width:100%;
  text-align:center;
  overflow:hidden;
}

/* ✅ Stage wrapper */
.qr-stage{
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  padding: 10px;
  max-width: 100%;
}

#qrCanvas{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 220px;
  max-width: 100%;
}

#qrCanvas > canvas,
#qrCanvas > svg{
  max-width: 100%;
  height: auto;
  display:block;
}

/* Download buttons aligned */
.actions{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.actions button{ width: 100%; }

/* History */
.history{
  margin-top: 18px;
  text-align:left;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 16px;
}

.history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;

  padding: 10px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236,113,39,0.10), rgba(255,255,255,0));
}

.history-title h2{
  margin: 0;
  font-size: 18px;
  position: relative;
  padding-left: 12px;
}
.history-title h2::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(236,113,39,0.25);
}

.history-sub{ margin: 4px 0 0; color:#666; font-size: 13px; }

.history-tools{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
}

.history-search,
.history-filter{
  width: 100%;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.12);
  padding: 10px 12px;
  font-size: 14px;
  outline:none;
  background:#fff;
}
.history-search:focus,
.history-filter:focus{ border-color: var(--brand); }

.history-empty{
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 14px;
  color:#444;
  background: rgba(255,255,255,0.6);
}

.account-links-guest-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "title visual"
    "text visual"
    "button visual";
  align-items:center;
  column-gap:18px;
  gap:12px;
  border:1px solid rgba(236,113,39,.22);
  border-radius:20px;
  padding:18px;
  background:
    radial-gradient(520px 190px at 12% 0%, rgba(236,113,39,.13), transparent 60%),
    linear-gradient(180deg,#ffffff,#fff8f3);
  box-shadow:0 16px 34px rgba(15,23,42,.06), 0 8px 22px rgba(236,113,39,.08);
  color:#111827;
}

.account-links-guest-cta-title{
  grid-area:title;
  margin:0;
  font-size:20px;
  line-height:1.2;
  font-weight:1000;
}

.account-links-guest-cta-text{
  grid-area:text;
  margin:0;
  color:#5b6472;
  font-size:15px;
  line-height:1.55;
}

.account-links-guest-cta-btn{
  grid-area:button;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  background:linear-gradient(135deg,#ec7127,#fb7f27);
  color:#fff;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 14px 26px rgba(236,113,39,.24);
}

.account-links-guest-cta-btn:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}

.account-links-guest-cta-visual{
  grid-area:visual;
  width:clamp(76px, 10vw, 104px);
  height:auto;
  justify-self:end;
  align-self:center;
  filter:drop-shadow(0 12px 18px rgba(236,113,39,.18));
}

@media (max-width: 560px){
  .account-links-guest-cta{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "text"
      "visual"
      "button";
  }

  .account-links-guest-cta-visual{
    width:76px;
    justify-self:center;
    margin-top:-4px;
  }
}

.history-list{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.history-item{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
}

.history-meta{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}

.history-text{
  font-weight: 900;
  color:#111;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.history-subline{ font-size: 12px; color:#666; }

.history-controls{
  display:flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content:flex-end;
  align-items:center;
}

.history-controls button{
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

.history-load{
  background: rgba(236,113,39,0.12);
  color: #7a2b00;
  border: 1px solid rgba(236,113,39,0.25);
}
.history-load:hover{ background: rgba(236,113,39,0.18); }

.history-del{
  background: rgba(176,0,32,0.08);
  color: #7a0b1f;
  border: 1px solid rgba(176,0,32,0.18);
}
.history-del:hover{ background: rgba(176,0,32,0.12); }

.history-pin{
  background: rgba(0,0,0,0.04);
  color:#111;
  border: 1px solid rgba(0,0,0,0.10);
}
.history-pin:hover{ background: rgba(0,0,0,0.06); }

.history-pin.is-pinned{
  background: rgba(236,113,39,0.16);
  border-color: rgba(236,113,39,0.26);
  color: #7a2b00;
}

/* Save-count CTA modal */
.grqr-save-cta-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(17,24,39,.48);
  backdrop-filter:blur(8px);
}

.grqr-save-cta-card{
  position:relative;
  width:min(920px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:26px;
  border:1px solid rgba(236,113,39,.24);
  background:
    radial-gradient(circle at top right, rgba(236,113,39,.16), transparent 36%),
    linear-gradient(180deg,#ffffff 0%,#fff8f3 100%);
  box-shadow:0 28px 78px rgba(15,23,42,.24);
}

.grqr-save-cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0));
}

.grqr-save-cta-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 230px;
  gap:24px;
  align-items:center;
  padding:28px;
}

.grqr-save-cta-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#111827;
  font-size:26px;
  line-height:1;
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}

.grqr-save-cta-kicker{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  margin:0 0 12px;
  border-radius:999px;
  background:#fff3e9;
  color:#c85d18;
  border:1px solid rgba(236,113,39,.18);
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.grqr-save-cta-copy h2{
  margin:0 0 12px;
  color:#111827;
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.08;
  font-weight:1000;
}

.grqr-save-cta-copy p{
  margin:0 0 10px;
  color:#4b5563;
  font-size:15px;
  line-height:1.65;
}

.grqr-save-cta-main-btn,
.grqr-save-cta-back,
.grqr-save-cta-plan a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:48px;
  padding:12px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.grqr-save-cta-main-btn{
  margin-top:8px;
  color:#fff;
  background:linear-gradient(135deg,#ec7127,#f28c38);
  box-shadow:0 14px 28px rgba(236,113,39,.26);
}

.grqr-save-cta-back{
  margin-top:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#111827;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}

.grqr-save-cta-main-btn:hover,
.grqr-save-cta-back:hover,
.grqr-save-cta-plan a:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}

.grqr-save-cta-visual{
  display:flex;
  align-items:center;
  justify-content:center;
}

.grqr-save-cta-visual img{
  display:block;
  width:min(220px, 100%);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 20px 22px rgba(15,23,42,.18));
}

.grqr-save-cta-plans{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:16px 0 4px;
}

.grqr-save-cta-plan{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:100%;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.grqr-save-cta-plan.start{
  background:linear-gradient(180deg,#ffffff,#fff8f3);
}

.grqr-save-cta-plan.advance{
  background:linear-gradient(180deg,#fffef8,#fff7de);
}

.grqr-save-cta-plan.professional{
  background:linear-gradient(180deg,#f8fbff,#eef5ff);
}

.grqr-save-cta-plan h4{
  margin:0;
  color:#111827;
  font-size:17px;
  line-height:1.2;
  font-weight:1000;
}

.grqr-save-cta-plan p{
  flex:1;
  margin:0;
  font-size:12px;
  line-height:1.45;
  color:#5b6472;
}

.grqr-save-cta-plan ul{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.grqr-save-cta-plan li{
  position:relative;
  padding-left:20px;
  color:#4b5563;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
}

.grqr-save-cta-plan li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(135deg,#ec7127,#f7a24d);
  box-shadow:0 0 0 3px rgba(236,113,39,.12);
}

.grqr-save-cta-plan a{
  min-height:40px;
  padding:10px 12px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,#ec7127,#f28c38);
  box-shadow:0 10px 20px rgba(236,113,39,.18);
}

@media (max-width: 760px){
  .grqr-save-cta-overlay{
    align-items:flex-start;
    padding:12px;
    overflow:auto;
  }

  .grqr-save-cta-card{
    max-height:none;
    border-radius:22px;
  }

  .grqr-save-cta-layout{
    grid-template-columns:1fr;
    gap:12px;
    padding:58px 18px 20px;
  }

  .grqr-save-cta-visual{
    order:-1;
  }

  .grqr-save-cta-visual img{
    width:min(176px, 58vw);
  }

  .grqr-save-cta-plans{
    grid-template-columns:1fr;
  }

  .grqr-save-cta-main-btn,
  .grqr-save-cta-back{
    width:100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .grqr-save-cta-main-btn,
  .grqr-save-cta-back,
  .grqr-save-cta-plan a{
    transition:none !important;
  }
}

/* Mobile */
@media (max-width: 560px){
  body{ padding: 14px; }
  .card{ padding: 22px; border-radius: 18px; }
  .primary{ width: 100%; }
  .actions{ grid-template-columns: 1fr; }
  .topbar{
    align-items:flex-start;
    gap:10px;
  }
  .brand{
    min-width:0;
    flex:1 1 auto;
    max-width:calc(100% - 4px);
  }
  .brand img{
    width:100%;
  }
  .menu-wrap,
  .top-actions{
    flex:0 0 auto;
  }
  .menu-btn{
    width:44px;
    height:44px;
  }
  .history-tools{ grid-template-columns: 1fr; }
  .history-item{ grid-template-columns: 1fr; align-items:start; }
  .history-controls{ justify-content:flex-start; flex-wrap: wrap; }
}

@media (max-width: 979px){
  .status.status-mobile-relocated{
    margin-top: 12px;
    margin-bottom: 16px;
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 980px){
  .account-preview-sticky.is-member-preview-sticky{
    position: sticky;
    top: 18px;
    align-self: start;
    z-index: 1;
  }

  .status.status-desktop-preview{
    margin: 16px 0 0;
    width: 100%;
    text-align: center;
    position: relative;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(236,113,39,0.20);
    background:
      radial-gradient(680px 240px at 14% 0%, rgba(236,113,39,0.12), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,241,0.88));
    color: #065f46;
    box-shadow:
      0 14px 34px rgba(15,23,42,0.07),
      0 8px 22px rgba(236,113,39,0.08);
    overflow: hidden;
  }

  .status.status-desktop-preview::before{
    content: "";
    position: absolute;
    left: 16px;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 8px 18px rgba(236,113,39,0.25);
  }

  .status.status-desktop-preview[data-type="ok"],
  .status.status-desktop-preview[data-type="info"]{
    background:
      radial-gradient(680px 240px at 14% 0%, rgba(236,113,39,0.12), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(236,253,245,0.88));
    border-color: rgba(16,185,129,0.20);
    color: #065f46;
  }

  .status.status-desktop-preview[data-type="error"]{
    background:
      radial-gradient(680px 240px at 14% 0%, rgba(236,113,39,0.10), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(254,242,242,0.90));
    border-color: rgba(239,68,68,0.22);
    color: #991b1b;
  }
}

/* Desktop */
@media (min-width: 980px){
  .container{ max-width: 1120px; }
  .card{ padding: 30px; }

  .platform-layout{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items:start;
  }

  .panel{ text-align:left; }
  .title, .subtitle{ text-align:left; }

  .grid{ grid-template-columns: 1fr 1fr; }
  .qr-controls-grid{ grid-template-columns: 1fr 1fr; }
  .qr-scan-check{ grid-column: 2; }

  .preview-card{ margin-top: 6px; }

  .actions{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .history{
    border-top: none;
    padding-top: 0;
    margin-top: 14px;
  }

  .history-list{
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
  }
}

/* Feature shell */
.feature{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.65);
}

.feature-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;

  padding: 10px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(236,113,39,0.10), rgba(255,255,255,0));
}

.feature-title{
  font-weight: 900;
  font-size: 14px;
  position: relative;
  padding-left: 12px;
}
.feature-title::before{
  content:"";
  position:absolute;
  left:0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(236,113,39,0.25);
}

.feature-body .hint{ margin-top: 6px; font-size: 12px; color: #666; }
.feature-grid{ margin-top: 10px; }
.range-meta{ margin-top: 6px; font-size: 12px; color:#444; }

.feature-actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-start;
  gap:10px;
}

/* Switch */
.switch{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
  cursor:pointer;
}
.switch input{ position:absolute; opacity:0; pointer-events:none; }

.switch-ui{
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(0,0,0,0.06);
  position: relative;
  flex: 0 0 auto;
}
.switch-ui::after{
  content:"";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.15);
  position:absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: left .18s ease;
}
.switch-text{ font-weight: 900; font-size: 12px; color:#333; }

.switch input:checked + .switch-ui{
  background: rgba(236,113,39,0.22);
  border-color: rgba(236,113,39,0.35);
}
.switch input:checked + .switch-ui::after{ left: 21px; }

.feature input[type="file"]{
  width: 100%;
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,0.12);
  padding: 10px 12px;
  background: #fff;
}
.feature input[type="range"]{ width: 100%; }

/* Subtabs */
.subtabs{
  display:flex;
  gap:10px;
  margin: 10px 0 12px;
  padding: 6px;
  border: 1px solid rgba(236,113,39,0.18);
  background: linear-gradient(180deg, rgba(236,113,39,0.10), rgba(255,255,255,0.70));
  border-radius: 14px;
}

.subtab{
  flex:1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.88);
  font-weight: 900;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
.subtab:hover{
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.10);
}
.subtab.is-active{
  background: var(--brand);
  color: #fff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: var(--accentShadow);
  transform: translateY(-1px);
}
.subtab.is-active:hover{ background: var(--brandHover); }

.subpane{ display:none; }
.subpane.is-active{ display:block; }

/* Corner Colors premium panel */
.corner-colors-panel{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(236,113,39,0.18);
  background:
    radial-gradient(560px 220px at 12% 0%, rgba(236,113,39,0.13), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,241,0.82));
  box-shadow:0 12px 28px rgba(15,23,42,0.06);
  text-align:left;
}

.corner-colors-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.corner-colors-copy{
  min-width:0;
}

.corner-colors-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(236,113,39,0.12);
  color:#c85d18;
  border:1px solid rgba(236,113,39,0.18);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:8px;
}

.corner-colors-title{
  margin:0;
  font-size:17px;
  line-height:1.2;
  font-weight:1000;
  color:#111827;
  position:relative;
  padding-left:12px;
}

.corner-colors-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:18px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 8px 18px rgba(236,113,39,0.25);
}

.corner-colors-text{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#6b7280;
}

.corner-colors-lock{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff7f1;
  color:#c85d18;
  border:1px solid rgba(236,113,39,0.20);
  box-shadow:0 8px 18px rgba(236,113,39,0.10);
  flex:0 0 auto;
}

.corner-colors-panel:not(.is-locked) .corner-colors-lock{
  display:none;
}

.corner-colors-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.corner-colors-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,0.74);
  border:1px dashed rgba(236,113,39,0.20);
  color:#6b7280;
  font-size:12px;
  line-height:1.45;
}

.corner-colors-panel.is-locked{
  border-color:rgba(15,23,42,0.08);
  background:
    radial-gradient(520px 220px at 12% 0%, rgba(236,113,39,0.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.82));
}

.corner-colors-panel.is-locked .corner-colors-kicker{
  background:#f8fafc;
  color:#6b7280;
  border-color:rgba(15,23,42,0.08);
}

@media (max-width: 680px){
  .corner-colors-grid{
    grid-template-columns:1fr;
  }

  .corner-colors-panel{
    padding:12px;
  }

  .corner-colors-head{
    gap:10px;
  }
}

/* Frame presets UI */
.frame-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.frame-preset{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.75);
  text-align:left;
}
.frame-preset:hover{ background: rgba(255,255,255,0.88); }
.frame-preset.is-active{
  border-color: rgba(236,113,39,0.35);
  box-shadow: 0 10px 24px rgba(236,113,39,0.12);
}

.frame-thumb{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}

.frame-name{ font-weight: 900; font-size: 13px; }

.frame-thumb-none::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 2px dashed rgba(0,0,0,0.18);
  border-radius: 10px;
}

.frame-thumb-card::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 2px solid rgba(0,0,0,0.12);
  border-radius: 10px;
}

/* =========================
   ✅ UPDATED: Frame thumbs match NEW perimeter frames
   (Icons only — no JS/engine impact)
   ========================= */

/* Perimeter Blue-Top (data-frame="sticker") */
.frame-thumb-sticker::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 3px solid rgba(16,183,255,0.95);
  border-radius: 10px;
}
.frame-thumb-sticker::before{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(16,183,255,0.95);
  /* small top pointer */
  clip-path: polygon(46% 100%, 54% 100%, 50% 140%);
}

/* Perimeter Yellow-Top (data-frame="badge") */
.frame-thumb-badge::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 3px solid rgba(255,216,77,0.95);
  border-radius: 10px;
}
.frame-thumb-badge::before{
  content:"";
  position:absolute;
  left: 9px;
  right: 9px;
  top: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,216,77,0.95);
}

/* Perimeter Red-Bottom (data-frame="ribbon") */
.frame-thumb-ribbon::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 3px solid rgba(255,107,107,0.95);
  border-radius: 10px;
}
.frame-thumb-ribbon::before{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,107,107,0.95);
}

/* Speech Bottom (data-frame="speech") */
.frame-thumb-speech::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:7px;
  bottom:15px;
  border:3px solid rgba(0,0,0,0.82);
  border-radius:10px;
}

.frame-thumb-speech::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:5px;
  height:12px;
  border-radius:5px;
  background:rgba(0,0,0,0.82);
  box-shadow:0 -2px 0 rgba(0,0,0,0.82);
  clip-path:polygon(
    0 30%,
    42% 30%,
    50% 0,
    58% 30%,
    100% 30%,
    100% 100%,
    0 100%
  );
}

/* Speech Card (data-frame="speech_card") - representative speech QR card thumb */
.frame-thumb-speech-card{
  overflow:hidden;
  background:#fff;
}

/* outer black rounded card + small white text bars */
.frame-thumb-speech-card::before{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:4px;
  bottom:4px;
  border-radius:9px;
  background:
    linear-gradient(#ffffff,#ffffff) center 30px / 18px 3px no-repeat,
    linear-gradient(#ffffff,#ffffff) center 35px / 13px 2px no-repeat,
    rgba(0,0,0,0.88);
  z-index:1;
}

/* white QR panel with bottom-left speech diagonal notch */
.frame-thumb-speech-card::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  height:23px;
  border-radius:3px 3px 1px 1px;
  background:
    linear-gradient(#111,#111) 4px 4px / 5px 5px no-repeat,
    linear-gradient(#111,#111) 12px 4px / 3px 3px no-repeat,
    linear-gradient(#111,#111) 18px 4px / 4px 4px no-repeat,

    linear-gradient(#111,#111) 4px 11px / 3px 3px no-repeat,
    linear-gradient(#111,#111) 10px 10px / 5px 5px no-repeat,
    linear-gradient(#111,#111) 18px 12px / 3px 3px no-repeat,

    linear-gradient(#111,#111) 5px 18px / 4px 4px no-repeat,
    linear-gradient(#111,#111) 13px 17px / 3px 3px no-repeat,
    linear-gradient(#111,#111) 19px 18px / 4px 4px no-repeat,
    #ffffff;
  clip-path:polygon(
    0 0,
    100% 0,
    100% 78%,
    43% 78%,
    0 100%
  );
  z-index:2;
}

/* Bottom Label (data-frame="labelbottom") */
.frame-thumb-labelbottom::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:6px;
  bottom:13px;
  border:4px solid rgba(0,0,0,0.86);
  border-radius:10px 10px 4px 4px;
}

.frame-thumb-labelbottom::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:5px;
  height:12px;
  border-radius:0 0 8px 8px;
  background:rgba(0,0,0,0.86);
}

/* Perimeter-Plain (data-frame="ticket") */
.frame-thumb-ticket::after{
  content:"";
  position:absolute;
  inset: 10px;
  border: 3px solid rgba(0,0,0,0.18);
  border-radius: 10px;
}
/* ensure no old bottom bar remains */
.frame-thumb-ticket::before{
  content:"";
  position:absolute;
  inset: 0;
  background: transparent;
}

/* Order frame (data-frame="order") - clean aligned thumb */
.frame-thumb-order{
  overflow:hidden;
}

.frame-thumb-order::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:7px;
  bottom:5px;
  border-radius:8px;
  background:rgba(0,0,0,0.86);
}

.frame-thumb-order::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:14px;
  height:17px;
  border-radius:3px;
  background:#fff;
  z-index:2;
}

/* Bug frame (data-frame="bug") - clean aligned thumb */
.frame-thumb-bug{
  overflow:hidden;
}

.frame-thumb-bug::before{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  top:3px;
  height:16px;
  border-radius:10px 10px 3px 3px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0.45) 42%,
      transparent 43%,
      transparent 100%
    ),
    rgba(0,0,0,0.86);
  z-index:1;
}

.frame-thumb-bug::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:14px;
  bottom:5px;
  border-radius:8px;
  background:
    linear-gradient(#fff,#fff) center 7px / calc(100% - 9px) 13px no-repeat,
    rgba(0,0,0,0.86);
  z-index:2;
}

/* Chef frame (data-frame="chef") - clean chef hat thumb */
.frame-thumb-chef{
  overflow:hidden;
}

.frame-thumb-chef::before{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:4px;
  height:16px;
  border-radius:12px 12px 5px 5px;
  background:
    radial-gradient(circle at 50% 15%, rgba(0,0,0,0.86) 0 6px, transparent 7px),
    radial-gradient(circle at 28% 42%, rgba(0,0,0,0.86) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 42%, rgba(0,0,0,0.86) 0 5px, transparent 6px),
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) center 10px / 18px 7px no-repeat;
  z-index:3;
}

.frame-thumb-chef::after{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:16px;
  bottom:6px;
  border-radius:7px;
  background:
    linear-gradient(#fff,#fff) center 6px / calc(100% - 10px) 11px no-repeat,
    rgba(0,0,0,0.86);
  z-index:2;
}

/* Watch frame (data-frame="watch") - refined aligned thumb */
.frame-thumb-watch{
  overflow:hidden;
}

.frame-thumb-watch::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:6px;
  bottom:8px;
  border-radius:7px;
  background:
    linear-gradient(#fff,#fff) center 7px / calc(100% - 8px) 13px no-repeat,
    rgba(0,0,0,0.86);
  z-index:1;
}

.frame-thumb-watch::before{
  content:"";
  position:absolute;
  left:7px;
  bottom:5px;
  width:18px;
  height:14px;
  border-radius:999px;
  background:rgba(0,0,0,0.86);
  z-index:2;
  box-shadow:
    6px 0 0 0 rgba(0,0,0,0.86),
    10px 0 0 0 rgba(0,0,0,0.86);
}

/* Cup frame (data-frame="cup") - clean cup thumb */
.frame-thumb-cup{
  overflow:hidden;
}

.frame-thumb-cup::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:4px;
  height:10px;
  background:
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) left 1px top 0 / 3px 10px no-repeat,
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) center top 0 / 3px 10px no-repeat,
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) right 1px top 0 / 3px 10px no-repeat;
  border-radius:999px;
  z-index:3;
}

.frame-thumb-cup::after{
  content:"";
  position:absolute;
  left:8px;
  right:10px;
  top:14px;
  bottom:9px;
  border-radius:5px 5px 9px 9px;
  background:
    linear-gradient(#fff,#fff) center 6px / calc(100% - 9px) 11px no-repeat,
    rgba(0,0,0,0.86);
  z-index:2;
  box-shadow:
    8px 3px 0 -2px #fff,
    12px 3px 0 -1px rgba(0,0,0,0.86),
    0 15px 0 -5px rgba(0,0,0,0.86);
}

/* Box frame (data-frame="box") - clean box thumb */
.frame-thumb-box{
  overflow:hidden;
}

.frame-thumb-box::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:5px;
  bottom:5px;
  border-radius:7px;
  background:rgba(0,0,0,0.86);
  z-index:1;
}

.frame-thumb-box::before{
  content:"";
  position:absolute;
  left:11px;
  right:11px;
  top:9px;
  height:20px;
  border-radius:3px;
  background:
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) 4px 4px / 4px 4px no-repeat,
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) 11px 4px / 4px 4px no-repeat,
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) 18px 4px / 4px 4px no-repeat,
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) 4px 11px / 4px 4px no-repeat,
    linear-gradient(rgba(0,0,0,0.86), rgba(0,0,0,0.86)) 18px 11px / 4px 4px no-repeat,
    #fff;
  z-index:2;
}

/* Stamp frame (data-frame="stamp") - clean zig-zag stamp icon */
.frame-thumb-stamp{
  overflow:hidden;
  background:#fff;
}

.frame-thumb-stamp::before{
  content:"";
  position:absolute;
  inset:3px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:36px 36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 6H52C55.3 6 58 8.7 58 12V49L54 45L50 49L46 45L42 49L38 45L34 49L30 45L26 49L22 45L18 49L14 45L10 49V12C10 8.7 8.7 6 12 6Z' fill='white' stroke='%23111' stroke-width='4' stroke-linejoin='round'/%3E%3Crect x='17' y='13' width='34' height='27' rx='2' fill='white'/%3E%3Crect x='21' y='17' width='6' height='6' fill='%23111'/%3E%3Crect x='31' y='17' width='5' height='5' fill='%23111'/%3E%3Crect x='41' y='17' width='6' height='6' fill='%23111'/%3E%3Crect x='21' y='27' width='5' height='5' fill='%23111'/%3E%3Crect x='30' y='28' width='6' height='6' fill='%23111'/%3E%3Crect x='42' y='29' width='5' height='5' fill='%23111'/%3E%3Cpath d='M17 41H51' stroke='%23111' stroke-width='2' stroke-linecap='round' opacity='.28'/%3E%3Cpath d='M23 47H41' stroke='%23111' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  z-index:2;
}

.frame-thumb-stamp::after{
  content:none;
  display:none;
}

/* Stamp Box frame (data-frame="stamp_box") - perforated stamp with dark box thumb */
.frame-thumb-stamp-box{
  overflow:hidden;
  background:#f0f0f0;
}

.frame-thumb-stamp-box::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:10px;
  background:
    radial-gradient(circle at 6px 0, transparent 0 3px, #cfcfcf 3.2px) top left / 10px 10px repeat-x,
    radial-gradient(circle at 6px 100%, transparent 0 3px, #cfcfcf 3.2px) bottom left / 10px 10px repeat-x,
    radial-gradient(circle at 0 6px, transparent 0 3px, #cfcfcf 3.2px) top left / 10px 10px repeat-y,
    radial-gradient(circle at 100% 6px, transparent 0 3px, #cfcfcf 3.2px) top right / 10px 10px repeat-y,
    #d9d9d9;
  z-index:1;
}

.frame-thumb-stamp-box::before{
  content:"";
  position:absolute;
  left:9px;
  right:9px;
  top:9px;
  bottom:9px;
  border-radius:2px;
  background:
    linear-gradient(#ffffff, #ffffff) center 6px / calc(100% - 10px) 18px no-repeat,
    linear-gradient(#ffffff, #ffffff) center 28px / 18px 2px no-repeat,
    #111;
  z-index:2;
}

/* Serve frame (data-frame="serve") - clean QR tray hand icon */
.frame-thumb-serve{
  overflow:hidden;
  background:#fff;
}

.frame-thumb-serve::before{
  content:"";
  position:absolute;
  inset:3px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:36px 36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='18' y='4' width='30' height='26' rx='4' fill='white' stroke='%23111' stroke-width='4'/%3E%3Crect x='23' y='9' width='6' height='6' fill='%23111'/%3E%3Crect x='33' y='9' width='5' height='5' fill='%23111'/%3E%3Crect x='41' y='9' width='4' height='4' fill='%23111'/%3E%3Crect x='23' y='18' width='5' height='5' fill='%23111'/%3E%3Crect x='34' y='18' width='4' height='4' fill='%23111'/%3E%3Crect x='42' y='20' width='4' height='4' fill='%23111'/%3E%3Cpath d='M9 36H57' stroke='%23111' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17 36H49C48 41 45 44 39 44H27C21 44 18 41 17 36Z' fill='%23111'/%3E%3Cpath d='M6 46L18 42L23 55L6 63Z' fill='%23111'/%3E%3Cpath d='M21 44C29 41 37 41 45 44L51 41C55 39 58 43 54 46L41 57C36 61 29 60 23 57L16 54' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 49H41C45 49 45 54 41 54H32' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  z-index:2;
}

.frame-thumb-serve::after{
  content:none;
  display:none;
}

/* Message frame (data-frame="message") - clean envelope/message thumb */
.frame-thumb-message{
  overflow:hidden;
  background:#fff;
}

.frame-thumb-message::before{
  content:"";
  position:absolute;
  inset:3px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:36px 36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='17' y='4' width='30' height='27' rx='4' fill='white' stroke='%23111' stroke-width='4'/%3E%3Crect x='22' y='9' width='6' height='6' fill='%23111'/%3E%3Crect x='32' y='9' width='5' height='5' fill='%23111'/%3E%3Crect x='40' y='9' width='5' height='5' fill='%23111'/%3E%3Crect x='22' y='19' width='5' height='5' fill='%23111'/%3E%3Crect x='32' y='19' width='6' height='6' fill='%23111'/%3E%3Crect x='41' y='20' width='4' height='4' fill='%23111'/%3E%3Cpath d='M8 28H56V56C56 58.2 54.2 60 52 60H12C9.8 60 8 58.2 8 56V28Z' fill='white' stroke='%23111' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M8 31L32 47L56 31' fill='none' stroke='%23111' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9 56L28 41Q32 37 36 41L55 56' fill='none' stroke='%23111' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  z-index:2;
}

.frame-thumb-message::after{
  content:none;
  display:none;
}

 /* Gift frame (data-frame="gift") - clean gift icon */
.frame-thumb-gift{
  overflow:hidden;
  background:#fff;
}

.frame-thumb-gift::before{
  content:"";
  position:absolute;
  inset:3px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:36px 36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M8 22H56V34H8Z' fill='%23111'/%3E%3Cpath d='M13 34H51V58H13Z' fill='%23111'/%3E%3Cpath d='M29 22H35V58H29Z' fill='white'/%3E%3Cpath d='M13 31H51V36H13Z' fill='white' opacity='.95'/%3E%3Cpath d='M19 8C27 6 32 20 32 20C23 20 16 16 19 8Z' fill='none' stroke='%23111' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M45 8C37 6 32 20 32 20C41 20 48 16 45 8Z' fill='none' stroke='%23111' stroke-width='5' stroke-linejoin='round'/%3E%3Crect x='21' y='40' width='7' height='7' fill='white'/%3E%3Crect x='37' y='40' width='7' height='7' fill='white'/%3E%3C/svg%3E");
  z-index:2;
}

.frame-thumb-gift::after{
  content:none;
  display:none;
}

@media (max-width: 560px){
  .frame-grid{ grid-template-columns: 1fr; }
}

  /* =========================
   Frame Custom Settings UI
   ========================= */

.frame-custom-panel{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(236,113,39,0.18);
  background:
    radial-gradient(560px 220px at 12% 0%, rgba(236,113,39,0.13), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,241,0.82));
  box-shadow:0 12px 28px rgba(15,23,42,0.06);
  text-align:left;
}

.frame-custom-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.frame-custom-title{
  margin:0;
  font-size:17px;
  line-height:1.2;
  font-weight:1000;
  color:#111827;
  position:relative;
  padding-left:12px;
}

.frame-custom-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:18px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 8px 18px rgba(236,113,39,0.25);
}

.frame-custom-note{
  max-width:340px;
  color:#6b7280;
  font-size:12px;
  line-height:1.45;
  text-align:right;
}

.frame-custom-grid{
  margin-top:10px;
}

.frame-text-field{
  margin-top:12px;
}

.frame-text-field input{
  width:100%;
  min-height:46px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,0.12);
  padding:10px 12px;
  font-size:15px;
  font-weight:700;
  outline:none;
  background:#fff;
  color:#111827;
}

.frame-text-field input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(236,113,39,0.12);
}

.frame-custom-panel .hint{
  margin-top:7px;
  font-size:12px;
  line-height:1.45;
  color:#6b7280;
}

@media (max-width: 680px){
  .frame-custom-panel{
    padding:12px;
  }

  .frame-custom-head{
    display:block;
  }

  .frame-custom-note{
    max-width:none;
    margin-top:6px;
    text-align:left;
  }

  .frame-custom-grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   ✅ Preview Frames (v3.3 FIXED)
   ========================= */

.qr-stage-label,
.qr-stage-badge,
.qr-stage-ribbon,
.qr-stage-ticket{
  display:none;
}

/* CARD */
#qrStage[data-frame="card"]{
  background:#fff;
  border:2px solid rgba(0,0,0,0.10);
  border-radius:22px;
  padding:18px;
}

/* STICKER (closer to QR) */
#qrStage[data-frame="sticker"]{
  background:#fff;
  border:2px solid rgba(0,0,0,0.10);
  border-radius:22px;
  padding:18px 18px 52px; /* was 70px */
}

#qrStage[data-frame="sticker"] .qr-stage-label{
  display:block;
  position:absolute;
  left:50%;
  bottom:10px; /* closer */
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:14px;
  padding:10px 18px;
  border-radius:14px;
}

/* BADGE */
#qrStage[data-frame="badge"]{
  background:#fff;
  border:2px solid rgba(0,0,0,0.10);
  border-radius:22px;
  padding:18px;
}

#qrStage[data-frame="badge"] .qr-stage-badge{
  display:flex;
  position:absolute;
  top:14px;
  right:14px;
  width:46px;
  height:46px;
  border-radius:999px;
  background:#111;
  color:#fff;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:12px;
}

/* RIBBON (fixed alignment) */
#qrStage[data-frame="ribbon"]{
  background:#fff;
  border:2px solid rgba(0,0,0,0.10);
  border-radius:22px;
  padding:18px;
}

#qrStage[data-frame="ribbon"] .qr-stage-ribbon{
  display:flex;
  position:absolute;
  top:0;
  right:-40px;
  transform:rotate(45deg);
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:13px;
  padding:8px 70px;
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

/* TICKET (no dashed line) */
#qrStage[data-frame="ticket"]{
  background:#fff;
  border:2px solid rgba(0,0,0,0.10);
  border-radius:22px;
  padding:18px 18px 50px; /* slightly tighter */
}

#qrStage[data-frame="ticket"]::before{
  display:none; /* REMOVED dashed line */
}

#qrStage[data-frame="ticket"] .qr-stage-ticket{
  display:flex;
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:14px;
  padding:10px 18px;
  border-radius:14px;
  min-width:180px;
  justify-content:center;
}

/* =========================
   Account QR Links Buttons
   ========================= */

.account-link-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.account-link-btn{
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  padding:10px 14px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.10);
  background:#f7f7f7;
  color:#111;
  transition: all .15s ease;
}

.account-link-btn:hover{
  background:#ededed;
}

.account-link-btn.use{
  background:#ec7127;
  color:#fff;
  border-color:#ec7127;
}

.account-link-btn.use:hover{
  background:#d65f17;
}

.account-link-btn.is-active-preview,
.history-load.is-active-preview{
  background:#ec7127 !important;
  color:#fff !important;
  border-color:#ec7127 !important;
  box-shadow:0 10px 24px rgba(236,113,39,.18);
}

.account-link-btn.is-active-preview:hover,
.history-load.is-active-preview:hover{
  background:#d65f17 !important;
}

.account-link-btn.pin{
  background:#fff6ec;
  border-color:rgba(236,113,39,0.25);
  color:#7a2b00;
}

.account-link-btn.pause-toggle{
  background:#fff7ed;
  border-color:rgba(236,113,39,0.28);
  color:#9a3412;
}

.account-link-btn.pause-toggle:hover{
  background:#ffedd5;
  border-color:rgba(236,113,39,0.42);
}

.account-link-btn.pause-toggle.is-paused{
  background:#dc2626;
  border-color:#b91c1c;
  color:#fff;
}

.account-link-btn.pause-toggle.is-paused:hover{
  background:#b91c1c;
  border-color:#991b1b;
}

.account-link-btn.delete{
  background:#fff0f0;
  border-color:rgba(176,0,32,0.18);
  color:#7a0b1f;
}

.grqr-badge-ui.inactive{
  background:#dc2626 !important;
  color:#ffffff !important;
  border-color:#b91c1c !important;
  box-shadow:0 8px 20px rgba(220,38,38,.18);
}

.grqr-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,0.42);
  backdrop-filter:blur(2px);
}

.grqr-confirm-box{
  width:min(720px, 100%);
  overflow:hidden;
  border:1px solid rgba(236,113,39,0.22);
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(15,23,42,0.22);
  color:#1f2937;
  text-align:center;
}

.grqr-confirm-box h2{
  margin:0;
  padding:18px 24px 12px;
  color:#111827;
  font-size:24px;
  font-weight:900;
}

.grqr-confirm-box p{
  margin:0;
  padding:44px 72px;
  border-top:1px solid rgba(0,0,0,0.06);
  color:#6b7280;
  font-size:16px;
  line-height:1.55;
}

.grqr-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 24px;
  border-top:1px solid rgba(0,0,0,0.08);
  background:#f7f7f8;
}

.grqr-confirm-actions button{
  min-width:120px;
  border-radius:8px;
  padding:12px 18px;
  font-size:15px;
  font-weight:900;
}

.grqr-confirm-cancel{
  border:1px solid transparent;
  background:transparent;
  color:#8a8f98;
}

.grqr-confirm-cancel:hover{
  color:#111827;
  background:rgba(0,0,0,0.04);
}

.grqr-confirm-accept{
  border:1px solid #ec7127;
  background:#ec7127;
  color:#fff;
}

.grqr-confirm-accept:hover{
  background:#d65f17;
  border-color:#d65f17;
}

@media (max-width:560px){
  .grqr-confirm-box h2{
    font-size:20px;
    padding:16px 18px 10px;
  }

  .grqr-confirm-box p{
    padding:28px 20px;
    font-size:14px;
  }

  .grqr-confirm-actions{
    display:grid;
    grid-template-columns:1fr;
    padding:14px;
  }

  .grqr-confirm-actions button{
    width:100%;
  }
}

/* =========================
   Mobile Layout for Links
   ========================= */

@media (max-width:680px){

.account-link-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.account-link-btn{
  width:100%;
  min-height:42px;
}

.account-link-title{
  font-size:16px;
}

.account-link-meta{
  padding:8px 10px;
}

}

@media (min-width: 980px){
  .platform-layout > .panel{
    min-width:0;
  }

  .panel-left{
    position:relative;
    min-width:0;
    overflow:visible;
  }

  /* Guest: κανονικό πλάτος */
  .panel-left .account-links.account-links-desktop-inline.is-guest{
    position:relative;
    z-index:2;
    width:100%;
    max-width:100%;
    margin:16px 0 0 0;
  }

  /* Logged-in: πιο φαρδύ αλλά ασφαλές */
  .panel-left .account-links.account-links-desktop-inline.is-member{
    position:relative;
    z-index:2;
    width:calc(100% + 260px);
    max-width:calc(100vw - 220px);
    margin-top:16px;
    margin-right:-260px;
  }

  .panel-left .account-links.account-links-desktop-inline .history-head,
  .panel-left .account-links.account-links-desktop-inline #accountLinksQuota,
  .panel-left .account-links.account-links-desktop-inline #accountLinksEmpty,
  .panel-left .account-links.account-links-desktop-inline .account-links-list,
  .panel-left .account-links.account-links-desktop-inline .account-link-card{
    width:100%;
    max-width:100%;
  }
}

.history.is-hidden-for-members{
  display:none !important;
}

/* =========================
   Mobile account-links tools
   Only for logged-in users
   ========================= */
@media (max-width: 979px){
  .account-links.is-member .account-links-tools{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    margin:14px 0 16px;
    padding:12px;
    border-radius:16px;
    background:#ffffff;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
  }

  .account-links.is-member .account-links-search,
  .account-links.is-member .account-links-filter{
    width:100%;
    min-height:46px;
    border:1px solid rgba(15,23,42,.10);
    border-radius:12px;
    background:#fff;
    font-size:14px;
    color:#111827;
    outline:none;
    transition:all .2s ease;
  }

  .account-links.is-member .account-links-search{
    padding:0 14px;
  }

  .account-links.is-member .account-links-filter{
    padding:0 12px;
    cursor:pointer;
  }

  .account-links.is-member .account-links-search:focus,
  .account-links.is-member .account-links-filter:focus{
    border-color:#ec7127;
    box-shadow:0 0 0 4px rgba(236,113,39,.12);
  }
}

/* =========================
   Account Links Assist Cards
   Upgrade CTA + Tips
   Logged-in users only
   ========================= */

.account-links-assist{
  width:100%;
}

.account-links-assist-inner{
  display:grid;
  gap:28px;
  width:100%;
}

.account-links-assist-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#ffffff,#fff8f3);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.account-links-assist-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(236,113,39,.12), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0));
  pointer-events:none;
}

.account-links-assist-card.upgrade{
  border:1px solid rgba(236,113,39,.26);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,246,238,.98));
  box-shadow:
    0 18px 40px rgba(236,113,39,.16),
    0 8px 20px rgba(15,23,42,.06);
  animation:grqrUpgradeFloat 3.2s ease-in-out infinite;
}

.account-links-assist-card.tip{
  background:linear-gradient(180deg,#ffffff,#faf8f6);
}

@keyframes grqrUpgradeFloat{
  0%,100%{
    transform:translateY(0);
    box-shadow:
      0 18px 40px rgba(236,113,39,.16),
      0 8px 20px rgba(15,23,42,.06);
  }
  50%{
    transform:translateY(-4px);
    box-shadow:
      0 24px 46px rgba(236,113,39,.22),
      0 10px 24px rgba(15,23,42,.08);
  }
}

.account-links-assist-body{
  position:relative;
  z-index:1;
  padding:16px 16px 18px;
}

.account-links-assist-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#fff3e9;
  color:#c85d18;
  border:1px solid rgba(236,113,39,.18);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:10px;
}

.account-links-assist-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:22px;
  margin-bottom:12px;
  background:linear-gradient(135deg,#ec7127,#f49a48);
  color:#fff;
  box-shadow:0 12px 24px rgba(236,113,39,.22);
}

.account-links-assist-card.tip .account-links-assist-icon{
  width:40px;
  height:40px;
  font-size:20px;
  background:linear-gradient(135deg,#fff7f1,#fff0e6);
  color:#c85d18;
  border:1px solid rgba(236,113,39,.16);
  box-shadow:none;
}

.account-links-assist-title{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  font-weight:1000;
  color:#111827;
}

.account-links-assist-text{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:#5b6472;
}

.account-links-assist-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:48px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#ec7127,#f28c38);
  border:1px solid rgba(236,113,39,.22);
  box-shadow:0 12px 24px rgba(236,113,39,.22);
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
}

.account-links-assist-link:hover{
  transform:translateY(-2px) scale(1.02);
  filter:saturate(1.06);
  box-shadow:0 18px 34px rgba(236,113,39,.28);
}

.account-links-assist-link::after{
  content:"→";
  font-size:16px;
  line-height:1;
}

.account-links-assist-card.upgrade:hover{
  transform:translateY(-3px);
}

@media (min-width:980px){
  .account-links.account-links-desktop-inline.is-member.has-member-assist{
    position:relative;
    padding-right:250px;
  }

  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksAssist{
    position:absolute;
    top:4px;
    right:0;
    width:228px;
    z-index:3;
  }

  .account-links.account-links-desktop-inline.is-member.has-member-assist .history-head,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksQuota,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksTools,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksEmpty,
  .account-links.account-links-desktop-inline.is-member.has-member-assist .account-links-list{
    width:100%;
    max-width:100%;
  }

    .account-links.account-links-desktop-inline.is-member.has-member-assist .account-link-card{
    width:100%;
    max-width:100%;
  }
}

@media (max-width:979px){
  .account-links-assist{
    margin:0 0 16px;
  }

  .account-links-assist-inner{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .account-links-assist-card.upgrade{
    animation:none !important;
  }

  .account-links-assist-link,
  .account-links-assist-card{
    transition:none !important;
  }
}

/* FIX account links scroll issue */
.account-links-list{
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}

.history-list{
  max-height:none !important;
  height:auto !important;
  overflow:visible !important;
}

.account-links{
  height:auto !important;
  overflow:visible !important;
}

@media (min-width:980px){
  .account-links.account-links-desktop-inline.is-member.has-member-assist{
    position:relative;
    padding-right:260px;
  }

  #accountLinksAssist{
    position:absolute;
    top:0;
    right:0;
    width:240px;
  }
}

/* Upgrade assist button glossy effect */
.account-links-assist-link{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.account-links-assist-link::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:70%;
  height:100%;
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.18) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-22deg);
  pointer-events:none;
  z-index:0;
  animation:grqrGlossSweep 3.2s linear infinite;
}

.account-links-assist-link > *{
  position:relative;
  z-index:1;
}

@keyframes grqrGlossSweep{
  0%{
    left:-140%;
  }
  100%{
    left:170%;
  }
}

.account-links-assist-link:hover::before{
  animation-duration:1.15s;
}

@media (prefers-reduced-motion: reduce){
  .account-links-assist-link::before{
    animation:none !important;
  }
}

/* =========================
   FIX: member assist cards stay aligned
   without breaking empty / non-empty account links states
   ========================= */
@media (min-width:980px){
  .account-links.account-links-desktop-inline.is-member.has-member-assist{
    display:grid;
    grid-template-columns:minmax(0,1fr) 240px;
    column-gap:20px;
    row-gap:14px;
    align-items:start;
    position:relative;
    padding-right:0 !important;
  }

  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksAssist{
    position:static !important;
    width:240px;
    margin:0;
    grid-column:2;
    grid-row:1 / span 20;
    align-self:start;
  }

  .account-links.account-links-desktop-inline.is-member.has-member-assist .history-head,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksQuota,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksTools,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksEmpty,
  .account-links.account-links-desktop-inline.is-member.has-member-assist #accountLinksList{
    grid-column:1;
    width:100%;
    max-width:100%;
  }
}

/* =========================
   QR Type Chooser Pills
   Login users only
   ========================= */

.qr-type-chooser[hidden]{
  display:none !important;
}

.qr-type-chooser{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(236,113,39,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,247,241,0.92));
  box-shadow:0 10px 26px rgba(236,113,39,0.08);
}

.qr-type-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.qr-type-row + .qr-type-row{
  margin-top:10px;
}

.qr-choice-pill{
  min-height:52px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background:linear-gradient(135deg,#ffffff,#fff8f3);
  color:#1f2937;
  font-size:14px;
  font-weight:900;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    opacity .16s ease;
  box-shadow:0 6px 16px rgba(15,23,42,0.05);
}

.qr-choice-pill:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(236,113,39,0.24);
  background:linear-gradient(135deg,#fffaf7,#fff2e8);
  box-shadow:0 10px 22px rgba(236,113,39,0.12);
}

.qr-choice-pill[aria-pressed="true"]{
  background:linear-gradient(135deg,#ec7127,#f28c38);
  color:#ffffff;
  border-color:#ec7127;
  box-shadow:0 14px 28px rgba(236,113,39,0.22);
}

.qr-choice-pill[aria-pressed="true"]:hover:not(:disabled){
  background:linear-gradient(135deg,#d9641f,#eb7f2a);
  border-color:#d9641f;
}

.qr-choice-pill:disabled,
.qr-choice-pill.is-disabled{
  cursor:not-allowed;
  opacity:.52;
  color:#7b8591;
  background:linear-gradient(135deg,#f3f4f6,#eceff3);
  border-color:rgba(15,23,42,0.08);
  box-shadow:none;
  transform:none !important;
}

.qr-choice-pill:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(236,113,39,0.14),
    0 10px 22px rgba(236,113,39,0.12);
}

.qr-type-chooser-hint{
  margin-top:10px;
  min-height:20px;
  font-size:14px;
  font-weight:800;
  line-height:1.55;
  color:#6b7280;
  text-align:center;
}

.qr-type-chooser-hint.is-error{
  color:#b42318;
}

.qr-type-chooser-hint.is-ok{
  color:#117a43;
}

@media (min-width: 980px){
  .qr-choice-pill{
    min-height:46px;
    padding:10px 14px;
    font-size:13px;
  }

  .qr-type-row{
    gap:8px;
  }

  .qr-type-row + .qr-type-row{
    margin-top:8px;
  }
}

@media (max-width: 560px){
  .qr-type-chooser{
    margin-top:12px;
    padding:12px;
    border-radius:16px;
  }

  .qr-type-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .qr-choice-pill{
    min-height:48px;
    font-size:13px;
    padding:11px 14px;
  }

  .qr-type-row + .qr-type-row{
    margin-top:8px;
  }

  .qr-type-chooser-hint{
    font-size:13px;
  }
}

/* =========================
   Guest / Free Info Section
   Independent cards under main platform card
   ========================= */

.guest-free-info-section{
  width:100%;
  max-width:1120px;
  margin:18px auto 0;
}

.guest-free-info-stack{
  display:grid;
  gap:18px;
}

.guest-free-info-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,241,.94));
  box-shadow:
    0 18px 44px rgba(15,23,42,.08),
    0 8px 22px rgba(236,113,39,.08);
  isolation:isolate;
}

.guest-free-info-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(236,113,39,.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(242,140,56,.10), transparent 28%);
  pointer-events:none;
  z-index:0;
}

.guest-free-info-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(236,113,39,.30),
    rgba(255,255,255,.55),
    rgba(236,113,39,.16)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}

.guest-free-info-head,
.guest-free-faq-list,
.guest-free-cta-inner{
  position:relative;
  z-index:1;
}

.guest-free-faq-card{
  padding:22px;
}

.guest-free-info-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#fff3e9;
  border:1px solid rgba(236,113,39,.18);
  color:#c85d18;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:12px;
}

.guest-free-info-title{
  margin:0;
  font-size:clamp(22px, 3vw, 32px);
  line-height:1.18;
  font-weight:1000;
  color:#111827;
  position:relative;
  padding-left:16px;
}

.guest-free-info-title::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#ec7127,#f49a48);
  box-shadow:0 10px 22px rgba(236,113,39,.22);
}

.guest-free-info-subtitle{
  margin:12px 0 0;
  color:#5b6472;
  font-size:15px;
  line-height:1.75;
  max-width:780px;
}

.guest-free-info-decor{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:18px;
  pointer-events:none;
  z-index:0;
  user-select:none;
}

.guest-free-info-decor-left{
  top:18px;
  right:18px;
  width:54px;
  height:54px;
  background:linear-gradient(135deg,#ec7127,#f49a48);
  color:#fff;
  font-size:22px;
  box-shadow:0 14px 28px rgba(236,113,39,.22);
}

.guest-free-info-decor-right{
  right:86px;
  top:36px;
  width:38px;
  height:38px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(236,113,39,.14);
  color:#c85d18;
  font-size:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.guest-free-faq-list{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.guest-free-faq-item{
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.80);
  box-shadow:0 8px 22px rgba(15,23,42,.04);
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.guest-free-faq-item:hover{
  transform:translateY(-1px);
  border-color:rgba(236,113,39,.18);
  box-shadow:0 12px 28px rgba(236,113,39,.08);
}

.guest-free-faq-question{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:16px 18px;
  cursor:pointer;
  font-size:15px;
  line-height:1.5;
  font-weight:900;
  color:#111827;
  user-select:none;
}

.guest-free-faq-question::-webkit-details-marker{
  display:none;
}

.guest-free-faq-question::marker{
  content:"";
}

.guest-free-faq-question-text{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

.guest-free-faq-question-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:linear-gradient(135deg,#fff7f1,#fff0e6);
  border:1px solid rgba(236,113,39,.14);
  color:#c85d18;
  font-size:16px;
}

.guest-free-faq-question-label{
  display:block;
  padding-top:3px;
}

.guest-free-faq-chevron{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  color:#6b7280;
  font-size:18px;
  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.guest-free-faq-item[open] .guest-free-faq-chevron{
  transform:rotate(180deg);
  color:#c85d18;
  border-color:rgba(236,113,39,.18);
  background:#fff7f1;
}

.guest-free-faq-answer{
  padding:0 18px 18px 18px;
}

.guest-free-faq-answer-inner{
  margin-left:46px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,#fffdfa,#fff7f1);
  border:1px solid rgba(236,113,39,.12);
  color:#4b5563;
  font-size:14px;
  line-height:1.8;
}

.guest-free-faq-answer-inner p{
  margin:0;
}

.guest-free-faq-answer-inner a{
  color:#c85d18;
  font-weight:800;
  text-decoration:none;
  border-bottom:1px dashed rgba(200,93,24,.35);
}

.guest-free-faq-answer-inner a:hover{
  color:#9f4a14;
  border-bottom-color:rgba(159,74,20,.55);
}

.guest-free-cta-card{
  background:
    linear-gradient(135deg, rgba(255,250,246,.98), rgba(255,240,228,.96));
  border-color:rgba(236,113,39,.20);
  box-shadow:
    0 22px 48px rgba(236,113,39,.14),
    0 10px 26px rgba(15,23,42,.06);
  animation:guestFreeCardFloat 3.6s ease-in-out infinite;
}

.guest-free-cta-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:22px;
}

.guest-free-cta-icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ec7127,#f49a48);
  color:#fff;
  font-size:28px;
  box-shadow:0 16px 34px rgba(236,113,39,.24);
  flex:0 0 auto;
}

.guest-free-cta-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.guest-free-cta-button{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  border-radius:16px;
  text-decoration:none;
  font-size:14px;
  font-weight:1000;
  color:#fff;
  background:linear-gradient(135deg,#ec7127,#f28c38);
  border:1px solid rgba(236,113,39,.22);
  box-shadow:0 14px 30px rgba(236,113,39,.22);
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
  white-space:nowrap;
}

.guest-free-cta-button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(236,113,39,.28);
  filter:saturate(1.04);
}

.guest-free-cta-button::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:70%;
  height:100%;
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.18) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-22deg);
  animation:guestFreeGloss 3.1s linear infinite;
  pointer-events:none;
}

.guest-free-cta-button span{
  position:relative;
  z-index:1;
}

@keyframes guestFreeCardFloat{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-4px);
  }
}

@keyframes guestFreeGloss{
  0%{ left:-140%; }
  100%{ left:170%; }
}

@media (min-width:980px){
  .guest-free-info-section{
    margin-top:20px;
  }
}

@media (max-width:979px){
  .guest-free-info-section{
    margin-top:16px;
  }

  .guest-free-cta-inner{
    grid-template-columns:1fr;
    align-items:flex-start;
  }

  .guest-free-cta-actions{
    width:100%;
    justify-content:flex-start;
  }

  .guest-free-cta-button{
    width:100%;
  }
}

@media (max-width:680px){
  .guest-free-info-title{
    font-size:24px;
  }

  .guest-free-faq-card,
  .guest-free-cta-inner{
    padding:18px;
  }

  .guest-free-info-decor-left{
    width:46px;
    height:46px;
    top:14px;
    right:14px;
    font-size:20px;
  }

  .guest-free-info-decor-right{
    display:none;
  }

  .guest-free-faq-question{
    padding:14px 14px;
    font-size:14px;
  }

  .guest-free-faq-answer{
    padding:0 14px 14px 14px;
  }

  .guest-free-faq-answer-inner{
    margin-left:0;
    font-size:14px;
    line-height:1.75;
  }

  .guest-free-cta-icon{
    width:56px;
    height:56px;
    font-size:24px;
  }

  .guest-free-cta-button{
    min-height:50px;
    font-size:14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .guest-free-cta-card,
  .guest-free-cta-button::before,
  .guest-free-faq-item,
  .guest-free-cta-button{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================
   Desktop enhancement (FAQ icons bigger)
   ========================= */

@media (min-width: 980px){

  .guest-free-faq-question-icon{
    width:42px;
    height:42px;
    font-size:18px;
    border-radius:14px;
  }

  .guest-free-faq-chevron{
    width:40px;
    height:40px;
    font-size:20px;
    border-radius:14px;
  }

  .guest-free-faq-question{
    font-size:16px;
  }

  .guest-free-faq-answer-inner{
    font-size:15px;
  }

}

/* =========================
   Desktop PRO polish (FAQ)
   ========================= */

@media (min-width: 980px){

  /* ICON (αριστερά) */
  .guest-free-faq-question-icon{
    width:52px;
    height:52px;
    font-size:20px;
    border-radius:16px;

    background:linear-gradient(135deg,#fff8f2,#ffe8d8);
    border:1px solid rgba(236,113,39,.22);

    box-shadow:
      0 12px 26px rgba(236,113,39,.18),
      inset 0 1px 0 rgba(255,255,255,.6);

    transition:
      transform .22s ease,
      box-shadow .22s ease,
      background .22s ease,
      color .22s ease;
  }

  /* CHEVRON (δεξιά) */
  .guest-free-faq-chevron{
    width:46px;
    height:46px;
    font-size:20px;
    border-radius:14px;

    box-shadow:
      0 8px 18px rgba(15,23,42,.08);

    transition:
      transform .25s ease,
      box-shadow .25s ease,
      background .25s ease,
      color .25s ease;
  }

  /* QUESTION TEXT λίγο πιο έντονο */
  .guest-free-faq-question{
    font-size:17px;
    padding:18px 20px;
  }

  /* ANSWER πιο premium */
  .guest-free-faq-answer-inner{
    font-size:15px;
    line-height:1.85;
  }

  /* =========================
     HOVER EFFECT (WOW)
     ========================= */

  .guest-free-faq-item:hover .guest-free-faq-question-icon{
    transform:translateY(-3px) scale(1.05);

    background:linear-gradient(135deg,#ec7127,#f28c38);
    color:#fff;

    box-shadow:
      0 18px 36px rgba(236,113,39,.35),
      0 0 0 6px rgba(236,113,39,.08);
  }

  .guest-free-faq-item:hover .guest-free-faq-chevron{
    transform:translateY(-2px);
    box-shadow:
      0 14px 30px rgba(236,113,39,.18);
  }

  /* =========================
     OPEN STATE (active item)
     ========================= */

  .guest-free-faq-item[open] .guest-free-faq-question-icon{
    background:linear-gradient(135deg,#ec7127,#f28c38);
    color:#fff;

    box-shadow:
      0 16px 34px rgba(236,113,39,.30),
      0 0 0 5px rgba(236,113,39,.08);
  }

  .guest-free-faq-item[open]{
    border-color:rgba(236,113,39,.22);
    box-shadow:
      0 16px 34px rgba(236,113,39,.12);
  }

}

/* =========================
   FAQ advanced polish
   - Mobile readability
   - Better open/close state
   - Subtle pulse on first item
   - Premium active border glow
   ========================= */

/* ---------- Open/close premium state ---------- */
.guest-free-faq-item{
  position: relative;
}

.guest-free-faq-item[open]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,242,.96));
  border-color: rgba(236,113,39,.22);
  box-shadow:
    0 16px 34px rgba(236,113,39,.10),
    0 10px 24px rgba(15,23,42,.05);
}

.guest-free-faq-item[open]::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(236,113,39,.42),
    rgba(255,209,183,.70),
    rgba(236,113,39,.18),
    rgba(255,255,255,.82)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
  opacity:.95;
}

.guest-free-faq-item[open]::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  background:
    radial-gradient(circle at top left, rgba(236,113,39,.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(242,140,56,.10), transparent 26%);
  pointer-events:none;
  z-index:0;
}

/* keep inner content above effect layers */
.guest-free-faq-item > *{
  position:relative;
  z-index:1;
}

/* title becomes more alive when open */
.guest-free-faq-item[open] .guest-free-faq-question-label{
  color:#c85d18;
}

/* icon state when open */
.guest-free-faq-item[open] .guest-free-faq-question-icon{
  background:linear-gradient(135deg,#ec7127,#f28c38);
  color:#fff;
  border-color:rgba(236,113,39,.30);
  box-shadow:
    0 16px 34px rgba(236,113,39,.28),
    0 0 0 5px rgba(236,113,39,.08);
  transform:translateY(-1px);
}

/* chevron state when open */
.guest-free-faq-item[open] .guest-free-faq-chevron{
  transform:rotate(180deg) translateY(-1px);
  color:#c85d18;
  border-color:rgba(236,113,39,.18);
  background:#fff7f1;
  box-shadow:
    0 12px 26px rgba(236,113,39,.14);
}

/* answer panel nicer when open */
.guest-free-faq-item[open] .guest-free-faq-answer-inner{
  background:linear-gradient(180deg,#fffdfa,#fff6ef);
  border-color:rgba(236,113,39,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

/* smoother feel */
.guest-free-faq-question-label,
.guest-free-faq-question-icon,
.guest-free-faq-chevron,
.guest-free-faq-answer-inner,
.guest-free-faq-item{
  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

/* ---------- Subtle pulse on first item ---------- */
.guest-free-faq-item:first-child{
  animation: guestFreeFirstItemPulse 3.8s ease-in-out infinite;
}

@keyframes guestFreeFirstItemPulse{
  0%,100%{
    box-shadow:
      0 8px 22px rgba(15,23,42,.04);
  }
  50%{
    box-shadow:
      0 12px 28px rgba(236,113,39,.10),
      0 8px 20px rgba(15,23,42,.05);
  }
}

/* when first item is open, keep pulse more elegant */
.guest-free-faq-item:first-child[open]{
  animation: guestFreeFirstItemPulseOpen 3.8s ease-in-out infinite;
}

@keyframes guestFreeFirstItemPulseOpen{
  0%,100%{
    box-shadow:
      0 16px 34px rgba(236,113,39,.10),
      0 10px 24px rgba(15,23,42,.05);
  }
  50%{
    box-shadow:
      0 20px 40px rgba(236,113,39,.16),
      0 12px 26px rgba(15,23,42,.06);
  }
}

/* ---------- Desktop hover polish (safe extension) ---------- */
@media (min-width: 980px){
  .guest-free-faq-item:hover .guest-free-faq-question-label{
    color:#a94f18;
  }

  .guest-free-faq-item:hover{
    box-shadow:
      0 14px 30px rgba(236,113,39,.10),
      0 10px 24px rgba(15,23,42,.05);
  }
}

/* ---------- Mobile-specific polish ---------- */
@media (max-width: 680px){

  .guest-free-info-stack{
    gap:14px;
  }

  .guest-free-faq-card{
    padding:16px;
    border-radius:20px;
  }

    .guest-free-ideas-dots{
    gap:5px;
    margin-top:8px;
  }

  .guest-free-ideas-dot{
    width:5px;
    height:5px;
  }

    .guest-free-ideas-dot{
    width:4px;
    height:4px;
  }

  .guest-free-ideas-dot.is-active{
    transform:scale(1.04);
    box-shadow:0 2px 6px rgba(236,113,39,.12);
  }
	
  .guest-free-ideas-dot.is-active{
    transform:scale(1.04);
    box-shadow:0 3px 8px rgba(236,113,39,.14);
  }
	
  .guest-free-info-title{
    font-size:22px;
    line-height:1.22;
    padding-left:14px;
  }

  .guest-free-info-title::before{
    width:4px;
  }

  .guest-free-info-subtitle{
    margin-top:10px;
    font-size:15px;
    line-height:1.7;
  }

  .guest-free-faq-list{
    margin-top:14px;
    gap:10px;
  }

  .guest-free-faq-item{
    border-radius:16px;
  }

  .guest-free-faq-item[open]::before,
  .guest-free-faq-item[open]::after{
    border-radius:16px;
  }

  .guest-free-faq-question{
    padding:15px 14px;
    gap:10px;
    font-size:15px;
    line-height:1.55;
  }

  .guest-free-faq-question-text{
    gap:10px;
    align-items:flex-start;
  }

  .guest-free-faq-question-icon{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    font-size:17px;
    border-radius:13px;
  }

  .guest-free-faq-question-label{
    padding-top:2px;
    font-size:15px;
    line-height:1.5;
    letter-spacing:.01em;
  }

  .guest-free-faq-chevron{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    font-size:18px;
    border-radius:12px;
  }

  .guest-free-faq-answer{
    padding:0 14px 14px 14px;
  }

  .guest-free-faq-answer-inner{
    margin-left:0;
    padding:15px 15px;
    font-size:15px;
    line-height:1.82;
    letter-spacing:.005em;
  }

  .guest-free-faq-answer-inner p + p{
    margin-top:12px;
  }

  .guest-free-faq-answer-inner a{
    font-size:15px;
  }

  .guest-free-cta-inner{
    padding:18px;
    gap:14px;
  }

  .guest-free-cta-content .guest-free-info-title{
    font-size:21px;
  }

  .guest-free-cta-content .guest-free-info-subtitle{
    font-size:15px;
    line-height:1.72;
  }
}

/* ---------- Accessibility / reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .guest-free-faq-item:first-child,
  .guest-free-faq-item:first-child[open]{
    animation:none !important;
  }

  .guest-free-faq-question-label,
  .guest-free-faq-question-icon,
  .guest-free-faq-chevron,
  .guest-free-faq-answer-inner,
  .guest-free-faq-item{
    transition:none !important;
  }
}

/* =========================
   Replace decor icons with QR image
   ========================= */

.guest-free-info-decor-left,
.guest-free-info-decor-right{
  font-size:0 !important;
  color:transparent !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  pointer-events:none;
}

/* Main QR sticker - DESKTOP */
.guest-free-info-decor-left{
  top:10px;
  right:18px;
  width:96px;
  height:96px;
  border-radius:20px;
  background-image:url("/assets/image/qr-decor.png") !important;
  background-size:contain !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:0 16px 34px rgba(15,23,42,.14);
  z-index:2 !important;
}

/* Hide duplicate small decor */
.guest-free-info-decor-right{
  display:none !important;
}

/* Desktop / large screens */
@media (min-width: 980px){
  .guest-free-faq-card{
    padding-top:28px;
  }

  .guest-free-info-head{
    padding-right:120px;
  }

  .guest-free-info-decor-left{
    top:8px;
    right:18px;
    width:126px;
    height:126px;
  }
}

/* Tablet */
@media (max-width: 979px){
  .guest-free-faq-card{
    padding-top:24px;
  }

  .guest-free-info-head{
    padding-right:88px;
  }

  .guest-free-info-decor-left{
    top:10px;
    right:14px;
    width:72px;
    height:72px;
    border-radius:16px;
  }
}

/* Mobile */
@media (max-width:680px){
  .guest-free-faq-card{
    padding-top:20px;
  }

  .guest-free-info-head{
    padding-right:82px;
  }

  .guest-free-info-decor-left{
    top:12px;
    right:12px;
    width:64px;
    height:64px;
    border-radius:15px;
  }

  .guest-free-info-title{
    padding-right:8px;
  }

  .guest-free-info-subtitle{
    max-width:calc(100% - 4px);
  }
}

/* =========================
   Guest / Free Ideas Carousel
   ========================= */

.guest-free-ideas-section{
  width:100%;
  max-width:1120px;
  margin:18px auto 18px;
}

.guest-free-ideas-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,247,241,.95));
  box-shadow:
    0 18px 44px rgba(15,23,42,.08),
    0 8px 22px rgba(236,113,39,.08);
  isolation:isolate;
  padding:22px;
}

.guest-free-ideas-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right, rgba(236,113,39,.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(242,140,56,.08), transparent 28%);
  pointer-events:none;
  z-index:0;
}

.guest-free-ideas-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(236,113,39,.28),
    rgba(255,255,255,.55),
    rgba(236,113,39,.14)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}

.guest-free-ideas-head,
.guest-free-ideas-carousel-wrap,
.guest-free-ideas-dots{
  position:relative;
  z-index:1;
}

.guest-free-ideas-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#fff3e9;
  border:1px solid rgba(236,113,39,.18);
  color:#c85d18;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:12px;
}

.guest-free-ideas-title{
  margin:0;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.16;
  font-weight:1000;
  color:#111827;
  position:relative;
  padding-left:16px;
}

.guest-free-ideas-title::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#ec7127,#f49a48);
  box-shadow:0 10px 22px rgba(236,113,39,.22);
}

.guest-free-ideas-subtitle{
  margin:12px 0 0;
  color:#5b6472;
  font-size:15px;
  line-height:1.75;
  max-width:820px;
}

.guest-free-ideas-carousel-wrap{
  margin-top:18px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

.guest-free-ideas-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc(33.333% - 10px);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:4px 2px 10px;
  scrollbar-width:none;
}

.guest-free-ideas-track::-webkit-scrollbar{
  display:none;
}

.guest-free-idea-item{
  scroll-snap-align:start;
  min-width:0;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#ffffff,#fffaf6);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  overflow:hidden;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.guest-free-idea-item:hover{
  transform:translateY(-3px);
  border-color:rgba(236,113,39,.18);
  box-shadow:
    0 16px 34px rgba(236,113,39,.12),
    0 10px 24px rgba(15,23,42,.06);
}

.guest-free-idea-media{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#eef2f7;
}

.guest-free-idea-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.guest-free-idea-body{
  padding:14px 14px 16px;
}

.guest-free-idea-title{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  font-weight:1000;
  color:#111827;
}

.guest-free-idea-text{
  margin:0;
  font-size:14px;
  line-height:1.68;
  color:#5b6472;
}

.guest-free-ideas-nav{
  width:48px;
  height:48px;
  min-width:48px;
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(236,113,39,.18);
  background:linear-gradient(135deg,#fff7f1,#fff1e7);
  color:#c85d18;
  font-size:28px;
  line-height:1;
  font-weight:900;
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(236,113,39,.10);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}

.guest-free-ideas-nav:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#ec7127,#f28c38);
  color:#fff;
  box-shadow:0 16px 32px rgba(236,113,39,.22);
}

.guest-free-ideas-nav:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.guest-free-ideas-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}

.guest-free-ideas-dot{
  appearance:none;
  -webkit-appearance:none;
  padding:0 !important;
  margin:0;
  border:none;
  outline:none;
  min-width:0;
  min-height:0;
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(15,23,42,.10);
  box-shadow:none;
  cursor:pointer;
  flex:0 0 auto;
  transition:
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.guest-free-ideas-dot.is-active{
  background:#ec7127;
  transform:scale(1.08);
  box-shadow:0 4px 10px rgba(236,113,39,.16);
}

@media (max-width: 979px){
  .guest-free-ideas-section{
    margin:16px auto 16px;
  }

  .guest-free-ideas-track{
    grid-auto-columns:calc(50% - 8px);
  }
}

@media (max-width: 680px){
  .guest-free-ideas-section{
    margin:16px auto 16px;
  }

  .guest-free-ideas-card{
    padding:18px;
    border-radius:20px;
  }

  .guest-free-ideas-title{
    font-size:22px;
    line-height:1.22;
    padding-left:14px;
  }

  .guest-free-ideas-title::before{
    width:4px;
  }

  .guest-free-ideas-subtitle{
    font-size:15px;
    line-height:1.7;
    margin-top:10px;
  }

  .guest-free-ideas-carousel-wrap{
    grid-template-columns:1fr;
    gap:10px;
  }

  .guest-free-ideas-track{
    grid-auto-columns:88%;
    gap:12px;
    padding-bottom:8px;
  }

  .guest-free-ideas-nav{
    display:none;
  }

  .guest-free-idea-body{
    padding:12px 12px 14px;
  }

  .guest-free-idea-title{
    font-size:17px;
  }

  .guest-free-idea-text{
    font-size:14px;
    line-height:1.7;
  }
}

@media (prefers-reduced-motion: reduce){
  .guest-free-idea-item,
  .guest-free-ideas-nav,
  .guest-free-ideas-dot,
  .guest-free-ideas-track{
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* =========================
   Replace CTA star icon with QR icon
   ========================= */

.guest-free-cta-icon{
  font-size:0 !important;
  color:transparent !important;
  background:
    url("/assets/image/qr-cta-icon_a.png") center/100% no-repeat !important;
  background-color:transparent !important;
  border:none !important;
}

/* keep same sizing behavior on mobile */
@media (max-width:680px){
  .guest-free-cta-icon{
    background:
      url("/assets/image/qr-decor.png") center/contain no-repeat !important;
    background-color:transparent !important;
  }
}

/* =========================
   Guest / Free 3-Step Card
   ========================= */

.guest-free-steps-card{
  background:
    linear-gradient(180deg, rgba(246,247,249,.98), rgba(255,250,246,.96));
  border-color:rgba(15,23,42,.08);
  box-shadow:
    0 18px 40px rgba(15,23,42,.06),
    0 10px 26px rgba(15,23,42,.04);
}

.guest-free-steps-inner{
  position:relative;
  z-index:1;
  padding:26px 24px 24px;
}

.guest-free-steps-head{
  text-align:center;
  margin-bottom:22px;
}

.guest-free-steps-title{
  margin:0;
  font-size:clamp(24px, 3.2vw, 34px);
  line-height:1.16;
  font-weight:1000;
  color:#1c2f63;
  letter-spacing:-.02em;
}

.guest-free-steps-subtitle{
  margin:10px 0 0;
  font-size:15px;
  line-height:1.65;
  color:#50638f;
  font-weight:500;
}

.guest-free-steps-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}

.guest-free-step-item{
  position:relative;
  min-width:0;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  box-shadow:
    0 12px 28px rgba(15,23,42,.06),
    0 4px 12px rgba(15,23,42,.03);
  padding:18px 20px 22px;
  overflow:hidden;
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    border-color .20s ease;
}

.guest-free-step-item:hover{
  transform:translateY(-3px);
  border-color:rgba(236,113,39,.16);
  box-shadow:
    0 16px 34px rgba(15,23,42,.07),
    0 8px 18px rgba(236,113,39,.08);
}

.guest-free-step-media{
  width:100%;
  margin-bottom:18px;
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg,#f4f7fb,#eef2f7);
  border:1px solid rgba(15,23,42,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.guest-free-step-media img{
  width:100%;
  display:block;
  aspect-ratio:4 / 3;
  object-fit:contain;
  object-position:center;
  border-radius:22px;
  background:#eef2f7;
  padding:10px;
  filter:saturate(.92) contrast(.97) brightness(.985);
}

.guest-free-step-media img{
  transition:transform .25s ease;
}

.guest-free-step-item:hover .guest-free-step-media img{
  transform:scale(1.04);
}

.guest-free-step-badge{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ec7127,#f28c38);
  color:#ffffff;
  font-size:16px;
  font-weight:1000;
  box-shadow:
    0 10px 22px rgba(236,113,39,.22),
    0 4px 10px rgba(15,23,42,.05);
  margin-bottom:16px;
}

.guest-free-step-title{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.22;
  font-weight:1000;
  color:#1c2f63;
  letter-spacing:-.02em;
}

.guest-free-step-text{
  margin:0;
  font-size:15px;
  line-height:1.78;
  color:#44506a;
}

.guest-free-step-text .step-lock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:4px;
  border-radius:999px;
  background:#fff3e9;
  color:#c85d18;
  border:1px solid rgba(236,113,39,.16);
  font-size:11px;
  vertical-align:middle;
}

@media (max-width: 979px){
  .guest-free-steps-inner{
    padding:22px 20px 20px;
  }

  .guest-free-steps-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .guest-free-step-item{
    padding:16px 16px 18px;
  }

  .guest-free-step-media{
    margin-bottom:16px;
  }
}

@media (max-width: 680px){
  .guest-free-steps-inner{
    padding:18px;
  }

  .guest-free-steps-head{
    margin-bottom:18px;
  }

  .guest-free-steps-title{
    font-size:22px;
    line-height:1.22;
  }

  .guest-free-steps-subtitle{
    font-size:14px;
    line-height:1.65;
  }

  .guest-free-step-item{
    border-radius:20px;
    padding:14px 14px 16px;
  }

  .guest-free-step-media{
    border-radius:18px;
  }

  .guest-free-step-media img{
    border-radius:18px;
  }

  .guest-free-step-badge{
    width:38px;
    height:38px;
    border-radius:13px;
    font-size:15px;
    margin-bottom:14px;
  }

  .guest-free-step-title{
    font-size:18px;
    margin-bottom:10px;
  }

  .guest-free-step-text{
    font-size:14px;
    line-height:1.72;
  }
}

@media (prefers-reduced-motion: reduce){
  .guest-free-step-item{
    transition:none !important;
  }
}

/* =========================
   Guest / Free About Platform Card
   ========================= */

.guest-free-about-card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,244,236,.97) 54%, rgba(255,226,205,.96) 100%);
  border-color:rgba(236,113,39,.20);
  box-shadow:
    0 22px 52px rgba(236,113,39,.12),
    0 10px 26px rgba(15,23,42,.06);
}

.guest-free-about-card::before{
  background:
    radial-gradient(circle at top right, rgba(236,113,39,.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(242,140,56,.12), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}

.guest-free-about-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(320px, .95fr);
  gap:28px;
  align-items:center;
  padding:28px 26px;
}

.guest-free-about-content{
  position:relative;
  z-index:2;
  min-width:0;
}

.guest-free-about-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#fff3e9;
  border:1px solid rgba(236,113,39,.18);
  color:#c85d18;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:12px;
}

.guest-free-about-title{
  margin:0;
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.14;
  font-weight:1000;
  color:#111827;
  position:relative;
  padding-left:16px;
  max-width:720px;
}

.guest-free-about-title::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#ec7127,#f49a48);
  box-shadow:0 10px 22px rgba(236,113,39,.22);
}

.guest-free-about-text{
  margin:14px 0 0;
  color:#4f5f79;
  font-size:16px;
  line-height:1.85;
  max-width:720px;
}

.guest-free-about-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 3px;
  font-size:15px;
  vertical-align:baseline;
  filter:saturate(1.02);
}

.guest-free-about-actions{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.guest-free-about-button{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 20px;
  border-radius:16px;
  text-decoration:none;
  font-size:14px;
  font-weight:1000;
  color:#fff;
  background:linear-gradient(135deg,#ec7127,#f28c38);
  border:1px solid rgba(236,113,39,.22);
  box-shadow:0 14px 30px rgba(236,113,39,.22);
  transition:
    transform .20s ease,
    box-shadow .20s ease,
    filter .20s ease;
  white-space:nowrap;
}

.guest-free-about-button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(236,113,39,.28);
  filter:saturate(1.04);
}

.guest-free-about-button::before{
  content:"";
  position:absolute;
  top:0;
  left:-140%;
  width:70%;
  height:100%;
  background:linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.18) 65%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-22deg);
  animation:guestFreeAboutGloss 3.1s linear infinite;
  pointer-events:none;
}

.guest-free-about-button span{
  position:relative;
  z-index:1;
}

@keyframes guestFreeAboutGloss{
  0%{ left:-140%; }
  100%{ left:170%; }
}

.guest-free-about-visual{
  position:relative;
  min-width:0;
  min-height:380px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.guest-free-about-desktop-shot,
.guest-free-about-mobile-shot{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#fff6ef);
  border:1px solid rgba(236,113,39,.18);
  box-shadow:
    0 16px 34px rgba(15,23,42,.10),
    0 10px 24px rgba(236,113,39,.10);
}

.guest-free-about-desktop-shot{
  width:min(100%, 620px);
  z-index:1;
}

.guest-free-about-desktop-shot img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.guest-free-about-mobile-shot{
  position:absolute;
  right:-8px;
  bottom:-10px;
  width:32%;
  min-width:160px;
  max-width:220px;
  border-radius:26px;
  z-index:2;
  box-shadow:
    0 18px 38px rgba(15,23,42,.16),
    0 10px 24px rgba(236,113,39,.14);
}

.guest-free-about-mobile-shot img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.guest-free-about-shape{
  position:absolute;
  z-index:3;
  pointer-events:none;
  user-select:none;
  line-height:1;

  display:grid;
  place-items:center;

  width:56px;
  height:56px;
  border-radius:999px;

  background:rgba(255,243,233,.92);
  border:1px solid rgba(236,113,39,.20);

  box-shadow:
    0 10px 24px rgba(236,113,39,.12),
    inset 0 1px 0 rgba(255,255,255,.70);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.guest-free-about-shape-star{
  top:8px;
  right:8px;
  font-size:52px;
  color:#ffc107;
  opacity:1;
  z-index:5;
  text-shadow:
    0 12px 26px rgba(255,193,7,.45),
    0 0 0 10px rgba(255,193,7,.12);
}

.guest-free-about-shape-rainbow{
  font-size:0 !important;
  color:transparent !important;
  background: rgba(236,113,39,0.18);
}

.guest-free-about-shape-rainbow{
  position:absolute;
  right:550px;
  top:60px;
  left:auto;
}

.guest-free-about-shape-gear{
  left:450px;
  bottom:160px;
  font-size:46px;
  color:#ec7127;
  opacity:.95;
  transform:rotate(-12deg);
  z-index:4;
  text-shadow:
    0 10px 24px rgba(236,113,39,.30);
}

@media (max-width: 1100px){
  .guest-free-about-inner{
    grid-template-columns:1fr;
    gap:20px;
  }

  .guest-free-about-visual{
    min-height:320px;
  }

  .guest-free-about-desktop-shot{
    width:min(100%, 760px);
  }

  .guest-free-about-mobile-shot{
    right:6px;
    bottom:-6px;
    width:28%;
    min-width:150px;
  }
}

@media (max-width: 680px){
  .guest-free-about-inner{
    padding:18px;
    gap:18px;
  }

  .guest-free-about-eyebrow{
    margin-bottom:10px;
  }

  .guest-free-about-title{
    font-size:22px;
    line-height:1.22;
    padding-left:14px;
  }

  .guest-free-about-title::before{
    width:4px;
  }

  .guest-free-about-text{
    font-size:15px;
    line-height:1.8;
    margin-top:12px;
  }

  .guest-free-about-actions{
    margin-top:16px;
  }

  .guest-free-about-button{
    width:100%;
    min-height:50px;
  }

  .guest-free-about-visual{
  position:relative;
  min-height:260px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-top:8px;
}

.guest-free-about-desktop-shot{
  display:block;
  position:relative;
  width:min(92%, 330px);
  max-width:330px;
  margin:0 auto;
  border-radius:20px;
  z-index:1;
}

.guest-free-about-desktop-shot img{
  display:block;
  width:100%;
  height:auto;
}

.guest-free-about-mobile-shot{
  position:absolute;
  right:6px;
  bottom:-6px;
  width:34%;
  min-width:92px;
  max-width:118px;
  border-radius:18px;
  z-index:2;
  margin:0;
}

.guest-free-about-mobile-shot img{
  display:block;
  width:100%;
  height:auto;
}

  .guest-free-about-shape-star{
  top:10px;
  right:10px;
  font-size:28px;
  color:#ffbf00;
  opacity:1;
  text-shadow:0 8px 18px rgba(255,191,0,.24);
}


 .guest-free-about-shape-gear{
  left:10px;
  bottom:10px;
  font-size:24px;
  color:#ec7127;
  opacity:.62;
  transform:rotate(-10deg);
 }
}

@media (prefers-reduced-motion: reduce){
  .guest-free-about-button,
  .guest-free-about-button::before{
    transition:none !important;
    animation:none !important;
  }
}

/* ===============================
   QR GALLERY ZONE (Guest / Free)
   One-row horizontal scroll zone
   =============================== */

.guest-free-qrzone-card{
  position:relative;
  overflow:hidden;
}

.guest-free-qrzone-inner{
  position:relative;
  z-index:1;
  padding:18px 18px 14px;
}

.guest-free-qrzone-grid{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 2px 10px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

.guest-free-qrzone-grid::-webkit-scrollbar{
  display:none;
}

.guest-free-qrzone-item{
  margin:0;
  flex:0 0 148px;
  width:148px;
  height:148px;

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

  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#fff8f2);
  border:1px solid rgba(236,113,39,.12);
  box-shadow:0 10px 24px rgba(236,113,39,.08);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.guest-free-qrzone-item:hover{
  transform:translateY(-2px);
  border-color:rgba(236,113,39,.18);
  box-shadow:0 16px 30px rgba(236,113,39,.14);
}

.guest-free-qrzone-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.guest-free-qrzone-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 24%, rgba(236,113,39,.05), transparent 28%),
    radial-gradient(circle at 82% 74%, rgba(236,113,39,.07), transparent 30%);
  pointer-events:none;
  z-index:0;
}

/* Tablet */
@media (max-width: 979px){
  .guest-free-qrzone-inner{
    padding:16px 14px 12px;
  }

  .guest-free-qrzone-grid{
    gap:14px;
  }

  .guest-free-qrzone-item{
    flex:0 0 134px;
    width:134px;
    height:134px;
    padding:12px;
  }
}

/* Mobile */
@media (max-width: 680px){
  .guest-free-qrzone-inner{
    padding:14px 12px 10px;
  }

  .guest-free-qrzone-grid{
    gap:12px;
    padding:4px 2px 8px;
  }

  .guest-free-qrzone-item{
    flex:0 0 112px;
    width:112px;
    height:112px;
    padding:10px;
    border-radius:16px;
  }
}

/* =========================
   Logo Presets UI
   ========================= */

.logo-presets{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}

.logo-preset-btn{
  width:56px;
  height:56px;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#f8fafc;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
  overflow:hidden;
}

.logo-preset-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(236,113,39,.28);
  background:#fff7f1;
  box-shadow:0 8px 18px rgba(236,113,39,.10);
}

.logo-preset-btn[aria-pressed="true"]{
  border-color:#ec7127;
  background:#fff3e9;
  box-shadow:0 10px 22px rgba(236,113,39,.14);
}

.logo-preset-btn img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.logo-preset-thumb{
  width:100%;
  height:100%;
  display:block;
  position:relative;
}

.logo-preset-thumb-none{
  border-radius:10px;
  background:#f3f4f6;
  border:1px solid rgba(15,23,42,.08);
}

.logo-preset-thumb-none::before,
.logo-preset-thumb-none::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:26px;
  height:2px;
  background:#64748b;
  border-radius:999px;
  transform-origin:center;
}

.logo-preset-thumb-none::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.logo-preset-thumb-none::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

@media (max-width:560px){
  .logo-presets{
    gap:10px;
  }

  .logo-preset-btn{
    width:52px;
    height:52px;
    padding:5px;
    border-radius:11px;
  }
}

/* Login users: floating Go button to Account QR links */
.grqr-account-scroll-btn{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  z-index: 70;
  cursor: pointer;

  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;

  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.92);

  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.30) 20%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #ffbe63 0%, #f7a12d 26%, #ec7127 62%, #d85f16 100%);

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.38),
    inset 0 -5px 8px rgba(0,0,0,.14),
    0 8px 18px rgba(236,113,39,.28);

  transition:
    opacity .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.grqr-account-scroll-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background: linear-gradient(180deg, #ffd69f 0%, #f7aa47 36%, #ec7127 100%);
  z-index:-1;
  box-shadow:
    0 2px 8px rgba(236,113,39,.14),
    0 8px 18px rgba(236,113,39,.20);
}

.grqr-account-scroll-btn::after{
  content:"";
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:20px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.10));
  pointer-events:none;
  opacity:.95;
}

.grqr-account-scroll-btn span{
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.14);
}

.grqr-account-scroll-btn.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.grqr-account-scroll-btn.is-visible:hover{
  transform: translateY(-2px) scale(1.04);
  filter: saturate(1.05) brightness(1.03);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.40),
    inset 0 -5px 8px rgba(0,0,0,.14),
    0 12px 22px rgba(236,113,39,.34);
}

.grqr-account-scroll-btn:focus-visible{
  outline: 3px solid rgba(236,113,39,.22);
  outline-offset: 4px;
}

@media (max-width: 680px){
  .grqr-account-scroll-btn{
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .grqr-account-scroll-btn::before{
    inset:-2px;
  }

  .grqr-account-scroll-btn::after{
    top:5px;
    width:16px;
    height:7px;
  }
}

@media (prefers-reduced-motion: reduce){
  .grqr-account-scroll-btn{
    transition:none;
  }
}

/* =========================
   Frame thumbs default black
   ========================= */

.frame-thumb-sticker::after,
.frame-thumb-badge::after,
.frame-thumb-ribbon::after,
.frame-thumb-ticket::after{
  border-color:rgba(0,0,0,0.22) !important;
}

.frame-thumb-sticker::before,
.frame-thumb-badge::before,
.frame-thumb-ribbon::before{
  background:rgba(0,0,0,0.22) !important;
}

/* Frame drill-down: inline continuation, not separate section */
.frame-more{
  margin-top:10px;
  border:0;
  background:transparent;
  overflow:visible;
}

.frame-more-summary{
  min-height:46px;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  color:#7a2b00;
}


.frame-more-summary::-webkit-details-marker{
  display:none;
}

.frame-more-title{
  font-size:16px;
  font-weight:900;
}

.frame-more-count{
  display:none;
}

.frame-more-chevron{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff3e9;
  border:1px solid rgba(236,113,39,0.22);
  color:#c85d18;
  font-size:18px;
  line-height:1;
  font-weight:900;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}

.frame-more[open] .frame-more-chevron{
  transform:rotate(180deg);
  background:var(--brand);
  color:#fff;
}

.frame-more .frame-grid-more{
  margin-top:10px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width:560px){
  .frame-more-summary{
    min-height:40px;
  }

  .frame-more .frame-grid-more{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .frame-more-summary{
    min-height:46px;
    padding:10px;
  }

  .frame-more .frame-grid-more{
    padding:0 10px 10px;
  }
}

/* Mobile only: frame preset buttons in 2 columns */
@media (max-width:560px){
  .frame-grid,
  .frame-more .frame-grid-more{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .frame-preset{
    min-width:0;
    min-height:74px;
    padding:10px 8px;
    gap:8px;
    align-items:center;
  }

  .frame-thumb{
    width:42px;
    height:42px;
    flex:0 0 42px;
  }

  .frame-name{
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.2;
    font-size:13px;
  }

  .frame-more .frame-grid-more{
    padding:0;
  }
}

.status.status-account-attention{
  position: relative;
  animation: statusAccountPulse 3s ease-in-out infinite;
}

@keyframes statusAccountPulse{
  0%, 100%{
    border-color: rgba(236,113,39,0.24);
    box-shadow:
      0 10px 28px rgba(236,113,39,0.10),
      0 0 0 0 rgba(236,113,39,0.16);
  }

  50%{
    border-color: rgba(236,113,39,0.42);
    box-shadow:
      0 14px 34px rgba(236,113,39,0.18),
      0 0 0 5px rgba(236,113,39,0.10);
  }
}

@media (prefers-reduced-motion: reduce){
  .status.status-account-attention{
    animation: none;
  }
}