/* ===== Convert2Print — MODEL A Layout Restore ===== */
/* Premium Dark Glow Theme — Stable Version */

/* --- Base Theme --- */
:root{
  --bg-0:#0f1420;
  --bg-1:#131a26;
  --bg-2:#172034;
  --txt-0:#dfe7ff;
  --txt-1:#aab6d3;
  --muted:#8aa0c2;
  --brand:#4c7dff;
  --brand-2:#7c5cff;
  --ok:#19c37d;
  --err:#ff5d73;
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.10);
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:14px;
}

/* Background + base font */
html,body{
  margin:0; padding:0;
  color:var(--txt-0);
  background: radial-gradient(1200px 600px at 10% -10%, #1c2450 0%, transparent 60%),
              radial-gradient(1200px 800px at 110% 20%, #0f3d57 0%, transparent 55%),
              linear-gradient(180deg, #0e1320 0%, #0b101a 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter;
  line-height:1.45;
}

/* --- Page Layout --- */
.wrap{
  display:grid;
  grid-template-columns: 240px 340px 1fr;
  max-width:1360px;
  gap:28px;
  margin:28px auto 90px;
  padding:0 20px;
}
.side{ position:sticky; top:18px; align-self:start; z-index:10; }

@media(max-width:1100px){
  .wrap{ grid-template-columns:1fr; }
  .side{ position:static; }
}

/* --- Panel --- */
.panel{
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  margin:14px 0;
}
.panel-title{ font-weight:700; margin-bottom:10px; }

/* --- Tiles (1–3 columns) --- */
.tiles{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(var(--cols,2), minmax(340px, 1fr));
}

/* --- Model A: Big-mode when cols = 1 --- */
.tiles.big .file{
  display:grid;
  grid-template-columns: minmax(520px, 60vw) minmax(340px,1fr);
  gap:22px;
  max-width:1100px;
  margin:0 auto;
  align-items:flex-start;
}

.tiles.big .file-box{
  position:sticky;
  top:16px;
  max-height:none;
  overflow:visible;
  padding-right:4px;
}

/* --- FILE CARD --- */
.file{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:var(--shadow);
}

/* --- Thumbnails --- */
.file-thumb{
  width:100%;
  border-radius:12px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain !important;
  background-color:rgba(12,18,28,.45);
  margin-bottom:12px;
  overflow:hidden;
}

/* ===============================
   PDF PREVIEW – SAME AS IMAGES
   =============================== */

/* Standard PDF preview (2–3 kolonner) */
.file-thumb iframe.pdf-preview{
  width:100%;
  height:380px;                 /* matcher image thumbnails */
  border:0;
  display:block;
  background:rgba(12,18,28,.65);
}

/* Big layout (1 kolonne / Model A) */
.tiles.big .file-thumb iframe.pdf-preview{
  height:88vh;                  /* samme som store billeder */
  max-height:88vh;
}

/* === FIX FOR COLUMNS 2–3 (IMG-version) === */
.tiles:not(.big) .file-thumb:not(.c2p-crop-preview) img {
    width: 100% !important;
    height: 380px !important;
    object-fit: contain !important;
}


/* --- Inputs --- */
.input, select{
  background:var(--bg-0);
  color:var(--txt-0);
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:9px 12px;
  min-width:120px;
}
.input:focus, select:focus{
  border-color:rgba(120,150,255,.55);
  box-shadow:0 0 0 3px rgba(120,150,255,.12);
}

/* --- Buttons --- */
.btn{
  background:var(--glass-2);
  border:1px solid var(--stroke);
  border-radius:10px;
  padding:9px 14px;
  cursor:pointer;
}
.btn-ghost{
  background:transparent;
  border:1px dashed var(--stroke);
  color:var(--txt-1);
}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:none;
  color:white;
}
.btn-danger{
  background:#e65858 !important;
  border-color:#f29e9e !important;
}

/* --- Hide old preview blocks (legacy) --- */
#illuPreviewBox,#illuOverlayTop,#illuOverlayBottom,#illuOverlayLeft,#illuOverlayRight,
#previewPos,#illuCropLines,#illuNearestHint,#previewInfo,#illuBox{
  display:none !important;
}

/* --- Multi-column adjustments (columns = 2–3) --- */
/* Better layout for 2–3 column illustration previews */
.tiles:not(.big) .file-card {
    max-width: 100% !important;
}
/* Hide old blue Choose button */
.hero2 #btnChoose {
    display:none !important;
}
/* === FINAL FIX – Full illustration visible + scaled correctly === */
.tiles.big .file-thumb img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 88vh !important;
    display: block !important;
}
/* === HIDE entire height-row in PHOTO mode === */
body.photo-mode .c2p-height-row {
    display: none !important;
}

/* === HIDE custom pixel field when JS applies c2p-hidden === */
input.c2p-height-px.c2p-hidden {
    display: none !important;
}

/* === SHOW custom pixel field when not hidden === */
input.c2p-height-px:not(.c2p-hidden) {
    display: inline-flex !important;  /* eller block — begge virker */
}
/* ===============================
   Preflight traffic lights
   =============================== */

.preflight-msg{
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

/* 🟢 OK */
.preflight-green{
  background:rgba(25,195,125,.15);
  color:#19c37d;
  border:1px solid rgba(25,195,125,.4);
}

/* 🟡 Warning */
.preflight-yellow{
  background:rgba(255,193,7,.15);
  color:#ffc107;
  border:1px solid rgba(255,193,7,.45);
}

/* 🔴 Error */
.preflight-red{
  background:rgba(255,93,115,.15);
  color:#ff5d73;
  border:1px solid rgba(255,93,115,.45);
}

/* ⛔ Blocked */
.preflight-blocked{
  background:rgba(120,120,120,.12);
  color:#9aa3b2;
  border:1px solid rgba(120,120,120,.3);
}

/* ⏳ Pending */
.preflight-pending{
  background:rgba(124,92,255,.12);
  color:#aab6ff;
  border:1px solid rgba(124,92,255,.35);
}

/* === PDF preview (matches image thumbnails) === */
.file-thumb iframe.pdf-preview {
  width: 100%;
  height: 380px;          /* samme højde som image thumbs */
  border: none;
  border-radius: 12px;
  background: #0c121c;
}

/* Hide original convert button before JS moves it */
#btnConvert {
    visibility: hidden;
}

/* Show it again once app.js has moved it into the output panel */
.c2p-cta #btnConvert {
    visibility: visible;
}
/* Reserve space for Convert button before JS moves it */
.c2p-cta{
  min-height:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}

/* Hide app until JS is ready (prevents UI flashes) */
html:not(.app-ready) body {
    opacity: 0;
}

html.app-ready body {
    opacity: 1;
    transition: opacity 0.15s ease;
}
/* ================================
   Convert2Print UI Polish
================================ */

.panel-help{
font-size:12px;
color:var(--muted);
margin-bottom:10px;
opacity:.85;
}

/* HERO STEPS */
.hero-steps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 24px;
  width:100%;
}

.hero-steps .step{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid rgba(150,170,255,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border-radius:999px;
  color:rgba(245,247,255,.92);
  font-size:13px;
  font-weight:700;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}

.hero-steps span{
background:linear-gradient(135deg,#4c7dff,#7c5cff);
color:white;
font-weight:700;
font-size:12px;
padding:2px 6px;
border-radius:6px;
}

/* DROP ZONE */
.drop-zone{
  min-height:180px;
  border:1px dashed rgba(130,150,255,.32);

  background:
    radial-gradient(circle at top left,
    rgba(90,110,255,.10),
    transparent 45%),
    rgba(255,255,255,.02);

  transition:.2s ease;
}
.drop-zone:hover{
  border-color:rgba(130,150,255,.55);

  background:
    radial-gradient(circle at top left,
    rgba(90,110,255,.16),
    transparent 45%),
    rgba(255,255,255,.03);
}
/* nicer status */

.status{
font-size:13px;
color:var(--muted);
}

/* footer spacing */

.foot-wrap{
display:flex;
gap:20px;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}

/* ================================
   Convert2Print Layout Upgrade
================================ */

/* Hero */
.hero2{
  position: relative;
  padding: 42px 0 18px;
  overflow: hidden;
}

.hero2-wrap{
  max-width:1360px;
  margin:0 auto;
  padding:0 20px;
  position:relative;
  z-index:2;
}

.hero-content{
  max-width:1300px;
}

/* styr kun headline bredde */
.hero2 h1{
  max-width:1280px;
  margin:0 0 8px 0;
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.04;
  letter-spacing:-0.02em;
}

.hero2 .lead,
.hero-speed{
  max-width:760px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  color:var(--txt-1);
  margin-bottom:12px;
}

.hero2 .punch{
  background: linear-gradient(135deg, #ffffff, #8fb3ff 55%, #7c5cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero2 .lead{
  margin:0;
  max-width:780px;
  font-size:16px;
  color:var(--txt-1);
}

.cta-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  flex-wrap:wrap;
}

.link{
  color:var(--txt-1);
  text-decoration:none;
  font-size:14px;
}
.link:hover{
  color:#fff;
}

.hero2-glow{
  position:absolute;
  inset:auto -10% -80px auto;
  width:540px;
  height:540px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(76,125,255,.18) 0%, rgba(124,92,255,.10) 35%, transparent 72%);
  filter: blur(30px);
  pointer-events:none;
}

/* Branding left */
.brand{
  font-size:20px;
  font-weight:800;
  margin-bottom:2px;
  letter-spacing:-0.02em;
}

.sub{
  color:var(--txt-1);
  font-size:14px;
  margin-bottom:14px;
}

/* Main content */
.content,
.content-split,
.content-main{
  min-width:0;
}

.content-main{
  width:100%;
}

/* Better spacing in sidebar */
.side .panel:first-of-type{
  margin-top:10px;
}

/* Panel helper */
.panel-help{
  font-size:12px;
  color:var(--muted);
  margin:-4px 0 12px;
  opacity:.9;
}

/* Buttons inside panel rows */
.panel .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.panel .btn{
  min-width:auto;
}

/* File list area */
#fileList{
  min-height: 120px;
}

/* Drop zone */
.drop-zone{
  max-width: 880px;
  min-height: 124px;
  margin: 12px auto 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1.5px dashed rgba(124,146,255,.35);
  border-radius:18px;
  padding:24px 28px;
  color:#aebbf0;
  font-size:16px;
  line-height:1.5;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  cursor:pointer;
  transition: all .18s ease;
}

.drop-zone b{
  color:#fff;
}

.drop-zone:hover{
  border-color:#6e8dff;
  background: linear-gradient(180deg, rgba(76,125,255,.09), rgba(124,92,255,.05));
  color:#dbe4ff;
}

.drop-zone.is-dragover{
  border-color:#8fb3ff;
  background: linear-gradient(180deg, rgba(76,125,255,.15), rgba(124,92,255,.09));
  transform: translateY(-1px);
}

/* Foot */
.foot{
  padding: 10px 0 28px;
}

.foot-wrap{
  max-width:1360px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.copy{
  opacity:.8;
}

/* Better empty state balance */
@media (min-width: 1101px){
  .content-main{
    padding-top: 18px;
  }
}

/* Responsive */
@media (max-width: 1100px){
  .hero2{
    padding-top: 28px;
  }

  .hero2 h1{
    font-size: clamp(28px, 8vw, 42px);
  }

  .drop-zone{
    max-width:none;
    min-height:110px;
    margin: 10px 0 20px;
  }
}
/* === C2P right panel width fix === */

/* mere stabil big-layout */
.tiles.big .file{
  grid-template-columns: minmax(560px, 1fr) 360px;
  gap: 24px;
}

/* højre settings-panel */
.tiles.big .file-box{
  width: 360px;
  min-width: 360px;
  max-width: 360px;
}

/* rows i højre panel */
.file-box .row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: nowrap;
}

/* labels fast bredde */
.file-box .row .label{
  width: 92px;
  min-width: 92px;
  flex: 0 0 92px;
  padding-top: 8px;
  color: var(--txt-1);
  opacity: .9;
}

/* inputs må fylde resten */
.file-box .row .input,
.file-box .row input,
.file-box .row select{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* metrics og custom target lidt mere luft */
.file-box .metrics{
  margin-top: 16px;
}

.file-box .c2pRatioPanel{
  margin: 10px 0 14px 0 !important;
}
.c2p-height-row .c2p-minihelp{
  display: none !important;
}
/* === C2P filename row — stable grid fix === */
.c2p-row-fname{
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
}

.c2p-row-fname .label{
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-width: 0;
  padding-top: 8px;
}

.c2p-row-fname .c2p-fname{
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.c2p-row-fname .c2p-fname-restore{
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin: 0 !important;
  white-space: normal;
}
/* ==================================
   C2P Space Readability Mode
================================== */

/* mere luft mellem rows */
.file-box .row{
  margin: 16px 0;
}

/* labels mere rolige */
.file-box .label{
  letter-spacing: .02em;
  font-size: 13px;
  opacity: .85;
}

/* inputs mere tydelige */
.file-box input,
.file-box select{
  height: 42px;
  font-size: 14px;
}

/* ratio panel mere luft */
.c2pRatioPanel{
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}

/* metrics panel mere afstand */
.file-box .metrics{
  margin-top: 20px;
  padding-top: 6px;
}

/* preflight badge mere synlig */
.preflight-msg{
  font-size: 12px;
  padding: 5px 12px;
  letter-spacing: .02em;
}

/* restore filename button lidt mindre */
.c2p-fname-restore{
  font-size: 12px;
  padding: 6px 10px;
  opacity: .85;
}
/* ==================================
   C2P Hyperdrive / Cockpit Mode v1
================================== */

/* stærkere energi i toppen */
.hero2{
  position: relative;
}

.hero2::before{
  content:"";
  position:absolute;
  inset:-40px 0 auto 0;
  height:220px;
  pointer-events:none;
  background:
    radial-gradient(600px 180px at 18% 40%, rgba(90,120,255,.20), transparent 68%),
    radial-gradient(700px 220px at 58% 0%, rgba(0,210,255,.08), transparent 70%),
    linear-gradient(90deg, rgba(124,92,255,.10), rgba(76,125,255,.05), transparent 70%);
  filter: blur(8px);
}

/* title får mere punch */
.hero2 h1{
  text-shadow:
    0 0 18px rgba(124,92,255,.18),
    0 0 34px rgba(76,125,255,.12);
}

.hero2 .punch{
  filter: drop-shadow(0 0 10px rgba(124,92,255,.22));
}

/* step chips som systems online */
.hero-steps .step{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(124,146,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.015);
}

.hero-steps .step span{
  box-shadow:
    0 0 8px rgba(124,92,255,.35),
    0 0 18px rgba(76,125,255,.20);
}

/* preview-kortet som power core */
.tiles.big .file{
  position: relative;
  overflow: visible;
}

.tiles.big .file::before{
  content:"";
  position:absolute;
  left: 120px;
  top: 80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(0,212,255,.16) 0%,
      rgba(76,125,255,.12) 28%,
      rgba(124,92,255,.08) 48%,
      transparent 72%);
  filter: blur(28px);
  z-index: 0;
}

.tiles.big .file > *{
  position: relative;
  z-index: 1;
}

/* preview-billede mere hero / energized */
.tiles.big .file-thumb{
  position: relative;
  box-shadow:
    0 20px 40px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 26px rgba(76,125,255,.08);
}

.tiles.big .file-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:12px;
  box-shadow:
    inset 0 0 0 1px rgba(160,190,255,.06),
    inset 0 0 30px rgba(0,140,255,.04);
}

/* højre panel som cockpit console */
.tiles.big .file-box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-left: 1px solid rgba(124,146,255,.08);
}

/* labels lidt mere tekniske */
.file-box .label{
  color: #9fb3d8;
  text-transform: lowercase;
  letter-spacing: .02em;
}

/* inputs føles mere elektroniske */
.file-box input,
.file-box select,
.file-box .input{
  background:
    linear-gradient(180deg, rgba(8,12,20,.92), rgba(12,18,30,.98));
  border-color: rgba(124,146,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 0 1px rgba(255,255,255,.01);
}

.file-box input:focus,
.file-box select:focus,
.file-box .input:focus{
  border-color: rgba(116,170,255,.55);
  box-shadow:
    0 0 0 3px rgba(76,125,255,.12),
    0 0 18px rgba(76,125,255,.10);
}

/* ratio-panel mere cockpit */
.c2pRatioPanel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border: 1px solid rgba(124,146,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 22px rgba(76,125,255,.04);
}

/* ratio knapper mere “armed” */
.c2pRatioPanel button{
  transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
}

.c2pRatioPanel button:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(76,125,255,.14);
}

/* preflight badge som system status */
.preflight-msg,
.preflight-green{
  box-shadow:
    0 0 14px rgba(25,195,125,.12),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* convert-knappen som launch button */
.c2p-cta #btnConvert,
#btnConvert{
  background:
    linear-gradient(135deg, #4c7dff 0%, #6e6bff 45%, #8d4dff 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 12px 24px rgba(53,76,180,.28),
    0 0 24px rgba(92,102,255,.18);
  transition: transform .14s ease, box-shadow .16s ease, filter .16s ease;
}

.c2p-cta #btnConvert:hover,
#btnConvert:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 16px 30px rgba(53,76,180,.34),
    0 0 34px rgba(92,102,255,.24);
  filter: saturate(1.08);
}

/* footer lidt mere diskret command-center */
.foot{
  position: relative;
}

.foot::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  width: 420px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,146,255,.28), transparent);
}
/* === C2P restore filename button === */

.c2p-fname-restore{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;

  padding:6px 12px;
  border-radius:8px;

  background:linear-gradient(180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
  );

  border:1px solid rgba(124,146,255,.18);

  color:#b9c8ff;

  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.01);

  transition:
    transform .12s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

/* hover = system highlight */
.c2p-fname-restore:hover{
  border-color:rgba(124,146,255,.35);

  box-shadow:
    0 0 12px rgba(76,125,255,.20),
    inset 0 1px 0 rgba(255,255,255,.08);

  transform:translateY(-1px);
}
/* === Fix white dropdown problem (dark UI) === */

select{
  background-color: #0f1726;
  color: #e8efff;
}

/* dropdown options */
select option{
  background-color: #0f1726;
  color: #e8efff;
}

/* markeret valg */
select option:checked{
  background-color: #2f6fed;
  color: #ffffff;
}

/* hover i nogle browsere */
select option:hover{
  background-color: #2f6fed;
  color: #ffffff;
}
/* === C2P dropdown readability / cockpit select === */

/* selve feltet */
select,
.file-box select,
.panel select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #0f1726 !important;
  color: #eef3ff !important;
  border: 1px solid rgba(124,146,255,.22);
  color-scheme: dark;
  font-size: 14px;
}

/* når listen åbner */
select option,
.file-box select option,
.panel select option{
  background: #0f1726 !important;
  color: #eef3ff !important;
}

/* valgt linje */
select option:checked,
.file-box select option:checked,
.panel select option:checked{
  background: #2f6fed !important;
  color: #ffffff !important;
}

/* disabled option hvis der findes nogen */
select option:disabled,
.file-box select option:disabled,
.panel select option:disabled{
  background: #0f1726 !important;
  color: #7f8cab !important;
}

/* fokus på feltet */
select:focus,
.file-box select:focus,
.panel select:focus{
  outline: none;
  border-color: rgba(116,170,255,.55);
  box-shadow:
    0 0 0 3px rgba(76,125,255,.12),
    0 0 18px rgba(76,125,255,.10);
}
/* === C2P left panel readability boost === */

/* venstre panel titler og hjælpetekst */
.side .panel-title{
  color:#eef3ff;
  letter-spacing:.01em;
}

.side .panel .panel-help,
.side .panel .muted,
.side .panel .small{
  color:#a9bbdf !important;
  opacity:1 !important;
}

/* upload-knapper mere læsbare */
.side .panel .btn{
  color:#eef3ff;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-color:rgba(124,146,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.side .panel .btn:hover{
  background:linear-gradient(180deg, rgba(76,125,255,.18), rgba(124,92,255,.10));
  border-color:rgba(124,146,255,.34);
  color:#ffffff;
}

/* secondary buttons i upload */
#btnChooseLeft,
#btnSelectAll,
#btnUnselectAll{
  font-weight:600;
  color:#eef3ff !important;
}

/* delete må gerne være tydelig */
#btnDelete{
  color:#fff !important;
  font-weight:700;
  box-shadow: 0 0 14px rgba(230,88,88,.18);
}

/* file ready / status i venstre panel */
#fileHint,
#status,
.side .panel #fileHint{
  color:#c7d6f7 !important;
  font-size:13px;
  font-weight:500;
  opacity:1 !important;
}

/* preview layout hjælpetekst */
.side .panel .row .muted.small,
.side .panel .muted.small{
  color:#b5c4e6 !important;
  opacity:1 !important;
  line-height:1.45;
}

/* columns 1 2 3 lidt tydeligere */
.side .panel button,
.side .panel .seg{
  text-shadow:none;
}

/* output naming hjælpetekst også tydeligere */
#namePreview{
  color:#eef3ff;
  opacity:.92;
}
#fileHint{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#fileHint::before{
  content:"●";
  color:#19c37d;
  text-shadow:0 0 10px rgba(25,195,125,.35);
  font-size:11px;
}
/* ==================================
   C2P UI polish — left + launch
================================== */

/* 1) Upload-knapper mere energi */
.side .panel .btn{
  font-weight: 600;
  letter-spacing: .01em;
  transition:
    transform .12s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.side .panel .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(76,125,255,.22);
  border-color: rgba(124,146,255,.34);
}

#btnChooseLeft{
  background: linear-gradient(135deg, rgba(76,125,255,.22), rgba(124,92,255,.14));
  border-color: rgba(124,146,255,.30);
}

#btnChooseLeft:hover{
  box-shadow:
    0 0 14px rgba(76,125,255,.26),
    0 0 28px rgba(124,92,255,.12);
}

/* 2) File ready = system status */
#fileHint{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d7e4ff !important;
  font-size: 13px;
  font-weight: 600;
  opacity: 1 !important;
}

#fileHint::before{
  content: "●";
  color: #19c37d;
  font-size: 11px;
  text-shadow:
    0 0 10px rgba(25,195,125,.34),
    0 0 18px rgba(25,195,125,.18);
}

/* 3) Convert = launch button */
.c2p-cta #btnConvert,
#btnConvert{
  position: relative;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 11px;
  background: linear-gradient(135deg, #4c7dff 0%, #6f6cff 42%, #8d4dff 100%) !important;
  box-shadow:
    0 10px 24px rgba(54,74,180,.28),
    0 0 22px rgba(92,102,255,.18),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:
    transform .14s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.c2p-cta #btnConvert:hover,
#btnConvert:hover{
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 14px 30px rgba(54,74,180,.34),
    0 0 30px rgba(92,102,255,.24),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.c2p-cta #btnConvert::after,
#btnConvert::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.12) 48%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}

.c2p-cta #btnConvert:hover::after,
#btnConvert:hover::after{
  transform: translateX(120%);
}

/* === Per-file action row under preview — grid fix === */
.tiles.big .file{
  grid-template-columns: minmax(560px, 1fr) 360px;
  grid-template-rows: min-content auto;
  grid-template-areas:
    "thumb box"
    "actions box";
  align-items: start;
}

.tiles.big .file > .file-thumb{
  grid-area: thumb;
  align-self: start !important;
  height: fit-content !important;
  min-height: 0 !important;
}

.tiles.big .file > .file-box{
  grid-area: box;
  align-self: start !important;
}

.tiles.big .file > .row-select{
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 6px;
  align-self: start !important;
}

.tiles.big .file > .row-select .label{
  width: auto;
  min-width: 0;
  padding-top: 0;
  margin-right: 2px;
}

.tiles.big .file > .row-select .c2p-nav{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* === C2P crop preview v2 (true ratio frame) ==================== */
.tiles.big .file > .file-thumb{
  grid-area: thumb;
  align-self: start;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.tiles.big .file-thumb.c2p-crop-preview{
  position: relative;
  overflow: hidden;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.tiles.big .file-thumb.c2p-crop-preview img{
  width: 100% !important;
  height: auto !important;
  max-height: 88vh !important;
  display: block !important;
  transition: none;
}

.convert-status{
  margin-top:14px;
  min-height:22px;
  font-size:13px;
  color:#b8c7e6;
  line-height:1.5;
  opacity:.9;
}
.convert-status.loading::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:8px;
  border-radius:50%;
  border:2px solid rgba(180,200,255,.30);
  border-top-color:#7ca6ff;
  animation:c2pSpin .8s linear infinite;
  vertical-align:-2px;
}
.c2p-cta{
  min-height:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:16px;
}

.convert-status{
  min-height:22px;
  font-size:12.5px;
  color:#9fb3e6;
  line-height:1.5;
  opacity:.9;
  text-align:center;
}

.convert-status.loading::before{
  content:"";
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:8px;
  border-radius:50%;
  border:2px solid rgba(180,200,255,.30);
  border-top-color:#7ca6ff;
  animation:c2pSpin .8s linear infinite;
  vertical-align:-2px;
}

.convert-status-sub{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  color:#8fa6d8;
  opacity:.9;
}

@keyframes c2pSpin{
  to{ transform:rotate(360deg); }
}
/* === C2P 3-column batch mode === */
[data-c2p-cols="3"] .file-box .row {
  margin: 10px 0;
}

/* metrics kompakt men læsbar */
[data-c2p-cols="3"] .c2p-metrics-panel .metrics {
  font-size: 12px;
  line-height: 1.35;
}

/* skjul lange sektioner i batch-mode */
[data-c2p-cols="3"] .c2p-metrics-panel details {
  display: none;
}

/* kun lille summary */
[data-c2p-cols="3"] .c2p-metrics-panel .metrics br:nth-of-type(n+6) {
  display: none;
}
/* === 3-column review mode: read-only look === */
[data-c2p-cols="3"] .file-box select,
[data-c2p-cols="3"] .file-box input {
  pointer-events: none;
  opacity: .78;
}

[data-c2p-cols="3"] .c2p-metrics-panel,
[data-c2p-cols="3"] .row.c2p-height-row,
[data-c2p-cols="3"] .row.c2p-custom-row,
[data-c2p-cols="3"] .c2pRatioPanel {
  display: none !important;
}

[data-c2p-cols="3"] .file-box .row {
  margin: 8px 0;
}

[data-c2p-cols="3"] .file-box .label {
  font-size: 12px;
}

[data-c2p-cols="3"] .file-box .input,
[data-c2p-cols="3"] .file-box select,
[data-c2p-cols="3"] .file-box input {
  min-height: 34px;
  height: auto;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide crop label in 3-column review */
[data-c2p-cols="3"] .c2p-crop-hint {
  display: none !important;
}
/* === C2P metrics compact row === */
.file-box .row.c2p-metrics-panel{
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

.file-box .row.c2p-metrics-panel .label{
  padding-top: 4px !important;
}

.file-box .row.c2p-metrics-panel .input{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
}

.file-box .row.c2p-metrics-panel details{
  margin: 0 !important;
}

.file-box .row.c2p-metrics-panel summary{
  margin: 0 !important;
  padding: 0 !important;
}
.row.c2p-custom-row[hidden] {
  display: none !important;
}
/* Crop preview must work in both column 1 and column 2 */
.tiles .file-thumb.c2p-crop-preview {
  position: relative;
  overflow: hidden;
}

.tiles .file-thumb .c2p-crop-shade {
  position: absolute;
  background: rgba(5, 8, 16, .50);
  pointer-events: none;
  z-index: 3;
  display: none;
}

.tiles .file-thumb.c2p-crop-preview .c2p-crop-shade {
  display: block;
}

.tiles .file-thumb .c2p-crop-frame {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  border: 1px solid rgba(180, 210, 255, .42);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(76,125,255,.10),
    0 0 18px rgba(76,125,255,.08);
  border-radius: 12px;
  display: none;
}

.tiles .file-thumb.c2p-crop-preview .c2p-crop-frame {
  display: block;
}

.tiles .file-thumb .c2p-crop-hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  pointer-events: none;
  font-size: 11px;
  line-height: 1.2;
  color: #eef3ff;
  background: rgba(8,12,20,.72);
  border: 1px solid rgba(124,146,255,.18);
  border-radius: 8px;
  padding: 6px 8px;
  display: none;
}

.tiles .file-thumb.c2p-crop-preview .c2p-crop-hint {
  display: inline-block;
}

.tiles .file-thumb.c2p-crop-preview img {
  transform: translate(var(--c2p-offset-x, 0px), var(--c2p-offset-y, 0px));
  transition: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

/* C2 crop preview should use same image sizing logic as C1 */
[data-c2p-cols="2"] .file-thumb.c2p-crop-preview {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden;
  position: relative;
}

[data-c2p-cols="2"] .file-thumb.c2p-crop-preview img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

[data-c2p-cols="3"] .file-thumb.c2p-final-crop {
  overflow: hidden;
  position: relative;
}

/* === C3 final preview: use C2 pan, hide editor UI === */
[data-c2p-cols="3"] .file-thumb.c2p-final-crop.c2p-crop-preview {
  width: 100% !important;
  aspect-ratio: var(--c2p-c3-ratio, 1 / 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

[data-c2p-cols="3"] .file-thumb.c2p-final-crop.c2p-crop-preview img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--c2p-c3-x, 50%) var(--c2p-c3-y, 50%) !important;
  transform: none !important;
  display: block !important;
}

[data-c2p-cols="3"] .file-thumb .c2p-crop-frame,
[data-c2p-cols="3"] .file-thumb .c2p-crop-shade,
[data-c2p-cols="3"] .file-thumb .c2p-crop-hint {
  display: none !important;
}

.dev-head{
  padding:24px 0 14px;
}

.dev-head-wrap{
  max-width:1480px;
  margin:0 auto;
  padding:0 22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}

.dev-head h1{
  margin:10px 0 5px;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.035em;
}

.dev-head p{
  margin:0;
  max-width:620px;
  font-size:13px;
  color:rgba(235,240,255,.72);
}

.dev-head-links{
  display:flex;
  gap:14px;
}

/* === C2P safe row info tips — icon hover only ================== */

.file-box .row.c2p-has-tip{
  position: relative;
}

.file-box .row .c2p-info-hit{
  position: absolute;
  left: 72px;
  top: 8px;

  width: 15px;
  height: 15px;
  border-radius: 50%;

  border: 1px solid rgba(160,180,255,.32);
  color: #9fb3ff;

  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;

  cursor: help;
  z-index: 20;
}

.file-box .row .c2p-info-hit:hover{
  border-color: rgba(120,150,255,.75);
  color: #fff;
  box-shadow: 0 0 12px rgba(90,120,255,.35);
}

.file-box .row .c2p-info-hit:hover::before{
  content: attr(data-empty);
}

.file-box .row .c2p-info-hit:hover::after{
  content: attr(data-tip);
}

.file-box .row .c2p-info-hit::after{
  content: attr(data-tip);
  display: none;
}

.file-box .row .c2p-info-hit:hover::after{
  display: block;
  position: absolute;

  right: calc(100% + 14px);
  top: -90px;

  width: 320px;
  padding: 12px 14px;

  border-radius: 14px;
  background: rgba(10,14,28,.97);
  border: 1px solid rgba(160,180,255,.22);

  color: #eef2ff;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 500;
  text-align: left;
  white-space: pre-line;

  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  z-index: 9999;
}
[data-c2p-cols="2"] .file-box .row .c2p-info-hit:hover::after{
  right: auto;
  left: calc(100% + 14px);
  top: -20px;
}

/* hide tips in C3 review mode */
[data-c2p-cols="3"] .file-box .row .c2p-info-hit{
  display: none !important;
}

/* =========================================================
   C2P HELP CENTER
========================================================= */

.help-viewer{
  width:220px;
  align-self:start;
  position:sticky;
  top:18px;
  z-index:8;

  padding:18px 16px;
  border-radius:20px;
  border:1px solid rgba(90,130,255,.38);

  background:
    radial-gradient(circle at top left, rgba(115,70,255,.18), transparent 36%),
    linear-gradient(180deg, rgba(18,24,48,.97), rgba(8,14,28,.97));

  box-shadow:
    0 22px 55px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.help-viewer-title{
  color:#fff;
  font-size:19px;
  font-weight:850;
  line-height:1.15;
  margin-bottom:12px;
}

.help-viewer-title::after{
  content:"";
  display:block;
  width:92px;
  height:3px;
  margin-top:12px;
  border-radius:99px;
  background:linear-gradient(90deg,#6aa7ff,#9b5cff);
}

.help-intro{
  color:rgba(230,238,255,.78);
  font-size:12px;
  line-height:1.45;
  margin-bottom:14px;
}

.help-menu{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.help-group-title{
  margin-top:12px;
  margin-bottom:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:4px;
}

.help-menu a{
  display:flex;
  align-items:center;
  gap:8px;

  min-height:28px;
  padding:4px 8px;

  color:#f5f7ff;
  text-decoration:none;

  font-size:13px;
  font-weight:700;

  border-radius:10px;
  border:1px solid transparent;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.help-menu a span{
  width:18px;
  min-width:18px;
  height:18px;

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

  color:#8fb0ff;
  font-size:15px;
  font-weight:900;
}

.help-menu a:hover{
  background:rgba(110,135,255,.13);
  border-color:rgba(140,165,255,.20);
  transform:translateX(3px);
}

.help-menu a.active{
  background:rgba(110,135,255,.18);
  border-color:rgba(140,165,255,.30);
}

.help-note{
  display:flex;
  gap:10px;
  align-items:flex-start;

  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(160,180,255,.16);
}

.help-note span{
  width:24px;
  min-width:24px;
  height:24px;

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

  border-radius:50%;
  background:rgba(70,120,255,.20);
  color:#9fc0ff;

  font-size:13px;
  font-weight:900;
}

.help-note p{
  margin:0;
  color:rgba(230,238,255,.78);
  font-size:12px;
  line-height:1.35;
}

.foot-workplace{
  margin-top:40px;
  padding:34px 0 22px;
  background:rgba(15,18,32,0.95);
  border-top:1px solid #2a2f45;
}

.foot-wrap-grid{
  max-width:980px;
  margin:0 auto;
  padding:0 20px;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}

.foot-group h4{
  margin:0 0 12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
}

.foot-group a{
  display:block;
  margin:0 0 8px;
  color:#7ab6ff;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
}

.foot-group a:hover{
  text-decoration:underline;
}

.foot-workplace .copy{
  margin-top:26px;
  padding-top:16px;
  text-align:center;
  color:#9199b0;
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width:900px){
  .foot-wrap-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

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

.foot {
  background: #0f0f1f;
  color: #ccc;
  text-align: center;
  padding: 20px 0;
  font-size: 0.9rem;
  border-top: 1px solid #333;
}

.foot .foot-links {
  margin-bottom: 10px;
}

.foot .foot-links a {
  color: #ccc;
  margin: 0 10px;
  text-decoration: none;
}

.foot .foot-links a:hover {
  text-decoration: underline;
}

.foot .copy {
  font-size: 0.8rem;
}
/* DEV footer aligned with public landing footer */
.foot-workplace{
  max-width:1100px !important;
  margin:90px auto 40px !important;
  padding:45px 0 20px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  background:transparent !important;
}

.foot-wrap-grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:55px !important;
  max-width:100% !important;
  margin:0 auto !important;
}

.foot-group h4{
  color:#6f8dff !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
  margin-bottom:16px !important;
}

.foot-group a{
  display:block !important;
  margin:8px 0 !important;
  color:#9fb0d2 !important;
  text-decoration:none !important;
}

.foot-group a:hover{
  color:#fff !important;
}

.foot-workplace .copy{
  margin-top:45px !important;
  text-align:center !important;
  color:#7f8ba8 !important;
  font-size:13px !important;
}

@media(max-width:900px){
  .foot-wrap-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:560px){
  .foot-wrap-grid{
    grid-template-columns:1fr !important;
  }
}
/* Metrics hover zoom */
.file-box .row.c2p-metrics-panel{
  position:relative;
  z-index:1;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
  transform-origin:top right;
}

.file-box .row.c2p-metrics-panel:hover{
  z-index:9999;
  transform:scale(1.35);
  background:#10182c;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  border-radius:14px;
}

.file-box .row.c2p-metrics-panel:hover .input{
  max-height:none !important;
  overflow:visible !important;
}
.c2p-billing-backdrop{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(2,6,18,.72);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.c2p-billing-modal{
  width:min(820px, 96vw);
  background:linear-gradient(180deg, rgba(21,31,55,.96), rgba(10,15,29,.98));
  border:1px solid rgba(139,160,255,.22);
  border-radius:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  color:#fff;
  padding:22px;
}

.c2p-billing-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.c2p-billing-kicker{
  color:#9fb0ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.c2p-billing-head h2{
  margin:0;
  font-size:26px;
}

.c2p-billing-x{
  border:0;
  background:rgba(255,255,255,.08);
  color:#fff;
  width:36px;
  height:36px;
  border-radius:12px;
  font-size:24px;
  cursor:pointer;
}

.c2p-billing-plan{
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(111,93,255,.16);
  border:1px solid rgba(139,160,255,.18);
  font-weight:800;
}

.c2p-billing-body{
  display:grid;
  grid-template-columns:minmax(420px,1fr) 360px;
  gap:22px;
  margin-top:18px;
  align-items:start;
}

@media (max-width:900px){
  .c2p-billing-body{
    grid-template-columns:1fr;
  }
}

.c2p-billing-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.c2p-billing-grid div{
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:12px;
}

.c2p-billing-grid span{
  display:block;
  color:#aeb8d6;
  font-size:12px;
  margin-bottom:5px;
}

.c2p-billing-grid strong{
  font-size:16px;
}

.c2p-billing-note{
  color:#cbd3ec;
  line-height:1.45;
  margin:16px 0 0;
}

.c2p-billing-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

.c2p-billing-continue{
  background:linear-gradient(135deg,#6c63ff,#9b5cff);
  color:white;
  border:0;
}

.c2p-billing-receipt{
  margin-top:16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.20);
}

.c2p-billing-receipt-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  background:rgba(111,93,255,.16);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.c2p-billing-receipt-head span{
  color:#aeb8d6;
  font-size:12px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.c2p-billing-receipt-head strong{
  font-size:20px;
}

.c2p-billing-line{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.c2p-billing-line:last-child{
  border-bottom:0;
}

.c2p-billing-line strong{
  display:block;
  font-size:15px;
}

.c2p-billing-line span{
  display:block;
  color:#aeb8d6;
  font-size:12px;
  margin-top:3px;
}

.c2p-billing-line > div:last-child{
  color:#d9e0ff;
  font-size:13px;
  text-align:right;
  align-self:center;
}
.c2p-billing-terms{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(0,0,0,.18);
  color:#cbd3ec;
  font-size:13px;
  line-height:1.45;
}

.c2p-billing-terms input{
  margin-top:3px;
}

.c2p-billing-terms a{
  color:#9fb0ff;
  text-decoration:underline;
}

.c2p-billing-continue:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.35);
}
.c2p-legal-box{
  margin:16px 0;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}

.c2p-legal-title{
  font-size:13px;
  font-weight:800;
  margin-bottom:10px;
  color:#fff;
  opacity:.9;
}

.c2p-legal-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:8px;
  font-size:13px;
  line-height:1.45;
  color:#cbd3ec;
}

.c2p-legal-row:last-child{
  margin-bottom:0;
}

.c2p-legal-row input{
  margin-top:3px;
}

.c2p-legal-row a{
  color:#9fb0ff;
  text-decoration:underline;
}

.c2p-billing-continue:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.35);
}
.c2p-legal-info{
  margin-bottom:12px;
  font-size:13px;
  line-height:1.6;
  color:#cbd3ec;
}

.c2p-legal-info div{
  margin-bottom:4px;
}

/* ==================================
   C2P Mobile Layout
================================== */

@media (max-width: 1100px){

  html, body{
    overflow-x:hidden !important;
  }

  .wrap{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:16px !important;
    gap:18px !important;
    box-sizing:border-box !important;
  }

  .side,
  .content,
  .content-split,
  .content-main,
  .panel,
  #fileList{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .side{
    position:relative !important;
    top:auto !important;
  }

  .tiles,
  .tiles.big{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  .tiles.big .file{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .tiles.big .file-box,
  .tiles.big .file-thumb{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .file-box .row{
    flex-wrap:wrap !important;
  }

  .file-box .row .label{
    width:100% !important;
    min-width:0 !important;
    flex:none !important;
    padding-top:0 !important;
    margin-bottom:4px;
  }

  .c2p-row-fname{
    grid-template-columns:1fr !important;
  }

  .c2p-row-fname .label,
  .c2p-row-fname .c2p-fname,
  .c2p-row-fname .c2p-fname-restore{
    grid-column:1 !important;
  }

  .c2p-billing-modal{
    width:92vw !important;
    max-width:92vw !important;
  }

  .c2p-billing-actions{
    flex-direction:column !important;
  }

  .c2p-billing-actions button{
    width:100%;
  }
}

#c2pStripeWait{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(3,8,20,.62);
  backdrop-filter:blur(6px);
}
.c2p-stripe-wait-box{
  max-width:420px;
  padding:22px 26px;
  border-radius:18px;
  background:#111a33;
  border:1px solid rgba(255,255,255,.14);
  color:#eef3ff;
  font-size:14px;
  line-height:1.55;
  text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

/* ============================================================
   C2P MOBILE WORKSPACE v1
   ============================================================ */

.c2p-mobile-section-button,
.c2p-mobile-advanced{
  display:none;
}

@media (max-width:1100px){

  body.c2p-mobile-workspace{
    padding-bottom:104px;
  }

  body.c2p-mobile-workspace .dev-head{
    padding:16px 14px;
  }

  body.c2p-mobile-workspace .dev-head h1{
    font-size:23px;
    line-height:1.15;
    margin-bottom:6px;
  }

  body.c2p-mobile-workspace .dev-head p{
    font-size:13px;
    line-height:1.4;
    margin:0;
  }

  body.c2p-mobile-workspace .wrap{
    padding:10px !important;
    gap:10px !important;
  }

  body.c2p-mobile-workspace .brand,
  body.c2p-mobile-workspace .sub{
    text-align:center;
  }

  body.c2p-mobile-workspace .side{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  body.c2p-mobile-workspace .panel{
    margin:0 !important;
    padding:14px !important;
    border-radius:13px;
  }

  /* Upload is the first clear action */
  body.c2p-mobile-workspace .c2p-upload-panel{
    order:1;
  }

  body.c2p-mobile-workspace .c2p-upload-panel .row{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px !important;
  }

  body.c2p-mobile-workspace .c2p-upload-panel #btnChooseLeft{
    grid-column:1 / -1;
    min-height:48px;
    font-size:16px;
    font-weight:800;
  }

  body.c2p-mobile-workspace .c2p-upload-panel .btn{
    width:100%;
    min-height:42px;
    margin:0 !important;
  }

  /* Workspace follows immediately after upload */
  body.c2p-mobile-workspace .content{
    order:2;
    margin:0 !important;
  }

  body.c2p-mobile-workspace #dropZone{
    min-height:92px;
    padding:18px 14px !important;
    margin:0 0 10px !important;
    font-size:14px;
  }

  body.c2p-mobile-workspace #fileList{
    display:block !important;
  }

  body.c2p-mobile-workspace #fileList .file{
    margin:0 0 12px !important;
    padding:12px !important;
  }

  body.c2p-mobile-workspace .file-thumb,
  body.c2p-mobile-workspace
    .tiles:not(.big)
    .file-thumb:not(.c2p-crop-preview) img{
    height:auto !important;
    max-height:48vh !important;
  }

  /* Advanced options */
  body.c2p-mobile-workspace .c2p-mobile-section-button{
    display:flex;
    order:3;
    width:100%;
    min-height:48px;
    align-items:center;
    justify-content:space-between;
    margin:0 !important;
    padding:0 15px;
    font-weight:800;
  }

  body.c2p-mobile-workspace .c2p-mobile-advanced{
    display:block;
    order:4;
    width:100%;
  }

  body.c2p-mobile-workspace .c2p-mobile-advanced[hidden]{
    display:none !important;
  }

  body.c2p-mobile-workspace .c2p-mobile-chevron{
    font-size:21px;
    transition:transform .2s ease;
  }

  body.c2p-mobile-advanced-open .c2p-mobile-chevron{
    transform:rotate(180deg);
  }

  body.c2p-mobile-workspace
    .c2p-mobile-advanced
    .c2p-preview-layout-panel{
    display:block;
  }

  /* Output panel contains primarily the CTA on mobile */
  body.c2p-mobile-workspace .c2p-output-panel{
    order:5;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
  }

  body.c2p-mobile-workspace .c2p-output-panel > .panel-title{
    display:none;
  }

  /* Fixed conversion dock */
  body.c2p-mobile-workspace .c2p-output-panel .convert-panel,
  body.c2p-mobile-workspace .c2p-output-panel .c2p-cta{
    position:fixed !important;
    left:0;
    right:0;
    bottom:0;
    z-index:9990;
    margin:0 !important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(10,15,25,.96);
    border-top:1px solid rgba(255,255,255,.14);
    box-shadow:0 -12px 30px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);
  }

  body.c2p-mobile-workspace #btnConvert{
    width:100% !important;
    min-height:52px;
    margin:0 !important;
    font-size:16px;
    font-weight:800;
    border-radius:12px;
  }

  body.c2p-mobile-workspace #status,
  body.c2p-mobile-workspace #convertStatus{
    margin-top:5px;
    font-size:11px;
    line-height:1.25;
    text-align:center;
  }

  /* Help is useful, but should not block the working area */
  body.c2p-mobile-workspace #helpViewer{
    order:20;
    margin-top:14px;
    max-height:none;
  }

  body.c2p-mobile-workspace .help-viewer-content{
    display:none;
  }

  body.c2p-mobile-workspace #helpViewer.c2p-help-open
    .help-viewer-content{
    display:block;
  }

  body.c2p-mobile-workspace .help-viewer-title{
    cursor:pointer;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  body.c2p-mobile-workspace .help-viewer-title::after{
    content:"Open";
    position:static;
    transform:none;
    font-size:12px;
    color:#9fb0ff;
  }

  body.c2p-mobile-workspace #helpViewer.c2p-help-open
    .help-viewer-title::after{
    content:"Close";
  }

  /* Footer should not interrupt conversion workflow */
  body.c2p-mobile-workspace .foot-workplace{
    margin-top:20px;
  }
}

@media (max-width:560px){

  body.c2p-mobile-workspace .c2p-upload-panel .row{
    grid-template-columns:1fr 1fr;
  }

  body.c2p-mobile-workspace .file-box .row{
    gap:6px !important;
  }

  body.c2p-mobile-workspace select,
  body.c2p-mobile-workspace input,
  body.c2p-mobile-workspace .input{
    width:100% !important;
    max-width:100% !important;
    min-height:44px;
    box-sizing:border-box;
  }
}

/* ============================================================
   C2P MOBILE CROP TOUCH FIX
   ============================================================ */
@media (max-width:1100px){

  .c2p-crop-preview,
  .c2p-crop-preview img{
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
  }

  .c2p-crop-preview .c2p-crop-frame{
    touch-action:none !important;
    cursor:grab;
  }

  .c2p-crop-preview .c2p-crop-frame:active{
    cursor:grabbing;
  }
}

/* C2P mobile keyboard and crop safety */
@media (max-width:1100px){

  body.c2p-mobile-keyboard-open
    .c2p-output-panel .convert-panel,
  body.c2p-mobile-keyboard-open
    .c2p-output-panel .c2p-cta{
    display:none !important;
  }

  input,
  textarea,
  select{
    font-size:16px !important;
  }

  .c2p-crop-preview .c2p-crop-frame{
    pointer-events:none !important;
    touch-action:auto !important;
  }

  .c2p-crop-preview img{
    pointer-events:none !important;
  }

  .c2p-crop-preview::after{
    content:"Centered crop on mobile";
    position:absolute;
    left:12px;
    bottom:12px;
    z-index:20;
    padding:7px 10px;
    border-radius:8px;
    background:rgba(8,13,23,.86);
    color:#dfe7ff;
    font-size:12px;
    line-height:1;
    pointer-events:none;
  }
}

/* Mobil: ratio og manuel beskæring er kun til desktop */
@media (max-width:1100px){
  .c2pRatioPanel{
    display:none !important;
  }
}

/* ============================================================
   C2P MOBILE EMPTY UPLOAD VIEW
   ============================================================ */
@media (max-width:1100px){

  /* Ingen filer:
     Behold .side, fordi mobilkoden har flyttet .content/dropZone ind i den.
     Skjul alle andre elementer i sidebaren. */
  body.c2p-mobile-empty .side{
    display:flex !important;
  }

  body.c2p-mobile-empty .side > :not(.content){
    display:none !important;
  }

  body.c2p-mobile-empty .side > .content{
    display:block !important;
    order:1 !important;
  }

  body.c2p-mobile-empty #helpViewer{
    display:none !important;
  }

  body.c2p-mobile-empty{
    padding-bottom:20px !important;
  }

  body.c2p-mobile-empty .wrap{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:12px !important;
  }

  body.c2p-mobile-empty .content,
  body.c2p-mobile-empty .content-split,
  body.c2p-mobile-empty .content-main{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  /* Uploadområdet bliver den eneste handling */
  body.c2p-mobile-empty #dropZone{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:240px !important;
    width:100% !important;
    margin:0 !important;
    padding:28px 18px !important;
    box-sizing:border-box !important;
    text-align:center !important;
    font-size:18px !important;
    line-height:1.5 !important;
  }

  /* Skjul den faste Convert-knap, indtil en fil findes */
  body.c2p-mobile-empty
    .c2p-output-panel .convert-panel,
  body.c2p-mobile-empty
    .c2p-output-panel .c2p-cta{
    display:none !important;
  }
}

/* ============================================================
   C2P MOBILE COMPACT UPLOAD PANEL
   Active only after one or more files have been uploaded
   ============================================================ */
@media (max-width:1100px){

  /* Behold den store dropzone ved 0 filer.
     Disse regler gælder kun, når empty-klassen IKKE findes. */
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel{
    padding:12px !important;
    margin:0 0 10px !important;
  }

  /* Upload er allerede gennemført — overskrift og forklaring fylder unødigt */
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel > .panel-title,
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel > .panel-help{
    display:none !important;
  }

  /* Knapperne i et kompakt 2-kolonne layout */
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel .row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin:0 !important;
  }

  /* Add files fylder hele første række */
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel #btnChooseLeft{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:44px !important;
    margin:0 !important;
    font-size:15px !important;
    font-weight:800 !important;
  }

  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel #btnSelectAll,
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel #btnUnselectAll{
    width:100% !important;
    min-height:40px !important;
    margin:0 !important;
  }

  /* Delete selected på venstre side i sidste række */
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel #btnDelete{
    width:100% !important;
    min-height:40px !important;
    margin:0 !important;
  }

  /* Status ved siden af Delete selected */
  body.c2p-mobile-workspace:not(.c2p-mobile-empty)
  .c2p-upload-panel #fileHint{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    margin:0 !important;
    padding:4px 6px !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1.3 !important;
  }
}

/* ============================================================
   C2P MOBILE SINGLE FILE NAVIGATION v2
   ============================================================ */
@media (max-width:1100px){

  /* Vis kun det aktive filkort */
  body.c2p-mobile-single-card #fileList > .file{
    display:none !important;
  }

  body.c2p-mobile-single-card
  #fileList > .file.c2p-mobile-card-active{
    display:block !important;
  }

  /* Stabil opdeling af Select, Edit, Delete og navigation */
  body.c2p-mobile-single-card .c2p-mobile-action-row{
    display:grid !important;
    grid-template-columns:auto 70px 1fr !important;
    grid-template-areas:
      "label check check"
      "edit delete delete"
      "nav nav nav" !important;
    gap:10px !important;
    align-items:center !important;
    width:100% !important;
  }

  .c2p-mobile-select-label{
    grid-area:label;
  }

  .c2p-mobile-select-check{
    grid-area:check;
    justify-self:start;
  }

  .c2p-mobile-edit{
    grid-area:edit;
    width:100% !important;
    margin:0 !important;
  }

  .c2p-mobile-delete{
    grid-area:delete;
    width:100% !important;
    max-width:190px;
    margin:0 !important;
  }

  body.c2p-mobile-single-card .c2p-nav{
    grid-area:nav;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px;
    width:100%;
    margin-top:4px;
    align-items:center;
  }

  body.c2p-mobile-single-card .c2p-nav button{
    width:100% !important;
    min-height:44px;
    margin:0 !important;
  }

  .c2p-mobile-file-counter{
    min-width:52px;
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:#aebcff;
    white-space:nowrap;
  }
}

/* ============================================================
   C2P MOBILE POLISH
   - stable card width
   - no metrics hover zoom
   - info tips stay inside viewport
   Desktop is unchanged
   ============================================================ */
@media (max-width:1100px){

  /* Prevent file controls from exceeding the mobile card */
  body.c2p-mobile-workspace #fileList .file,
  body.c2p-mobile-workspace #fileList .file-box,
  body.c2p-mobile-workspace #fileList .file-box .row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.c2p-mobile-workspace .file-box input,
  body.c2p-mobile-workspace .file-box select,
  body.c2p-mobile-workspace .file-box .input{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Filename must remain inside the card */
  body.c2p-mobile-workspace .c2p-row-fname{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.c2p-mobile-workspace .c2p-row-fname .label,
  body.c2p-mobile-workspace .c2p-row-fname .c2p-fname,
  body.c2p-mobile-workspace .c2p-row-fname .c2p-fname-restore{
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  body.c2p-mobile-workspace .c2p-row-fname .c2p-fname{
    overflow:hidden !important;
    text-overflow:ellipsis;
  }

  body.c2p-mobile-workspace .c2p-row-fname .c2p-fname-restore{
    width:auto !important;
    justify-self:start;
  }

  /* Touch devices must not activate the desktop hover zoom */
  body.c2p-mobile-workspace
  .file-box .row.c2p-metrics-panel:hover{
    transform:none !important;
    transform-origin:initial !important;
    box-shadow:none !important;
    background:transparent !important;
    border-radius:0 !important;
    z-index:1 !important;
  }

  body.c2p-mobile-workspace
  .file-box .row.c2p-metrics-panel:hover .input{
    max-width:100% !important;
    overflow:hidden !important;
  }

  /*
   * Mobile information popup.
   * A tap may activate :hover on Android, but the popup is now
   * fixed inside the viewport instead of extending to the left.
   */
  body.c2p-mobile-workspace
  .file-box .row .c2p-info-hit:hover::after{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    top:50% !important;

    width:auto !important;
    max-width:none !important;
    max-height:70vh !important;

    margin:0 !important;
    padding:16px !important;
    box-sizing:border-box !important;

    transform:translateY(-50%) !important;
    overflow-y:auto !important;

    font-size:14px !important;
    line-height:1.5 !important;

    border-radius:14px !important;
    z-index:100000 !important;
  }

  /*
   * Override the desktop rule used in column 2.
   * Otherwise it tries to place the tip beside the icon.
   */
  body.c2p-mobile-workspace[data-c2p-cols="2"]
  .file-box .row .c2p-info-hit:hover::after,
  body.c2p-mobile-workspace
  [data-c2p-cols="2"] .file-box .row
  .c2p-info-hit:hover::after{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    top:50% !important;
    width:auto !important;
    transform:translateY(-50%) !important;
  }
}

/* ============================================================
   C2P MOBILE FINAL POLISH
   ============================================================ */
@media (max-width:1100px){

  /* Samme rolige afstand mellem Mode og Filename som øvrige rækker */
  body.c2p-mobile-workspace .c2p-row-fname{
    margin-top:24px !important;
    margin-bottom:20px !important;
  }

  /*
   * På touch bruges en rigtig åben/lukket tilstand.
   * Androids fastlåste :hover deaktiveres.
   */
  body.c2p-mobile-workspace
  .file-box .row .c2p-info-hit:hover::after{
    display:none !important;
  }

  body.c2p-mobile-workspace
  .file-box .row .c2p-info-hit.is-open::after{
    content:attr(data-tip) "\A\A Tryk uden for boksen for at lukke.";
    display:block !important;
    position:fixed !important;

    left:16px !important;
    right:16px !important;
    top:50% !important;

    width:auto !important;
    max-width:none !important;
    max-height:70vh !important;

    margin:0 !important;
    padding:16px !important;
    box-sizing:border-box !important;

    transform:translateY(-50%) !important;
    overflow-y:auto !important;

    border-radius:14px !important;
    background:rgba(10,14,28,.98) !important;
    border:1px solid rgba(160,180,255,.28) !important;

    color:#eef2ff !important;
    font-size:14px !important;
    line-height:1.5 !important;
    font-weight:500 !important;
    text-align:left !important;
    white-space:pre-line !important;

    box-shadow:0 18px 44px rgba(0,0,0,.55) !important;
    z-index:100000 !important;
  }

  body.c2p-mobile-workspace
  .file-box .row .c2p-info-hit.is-open{
    color:#fff !important;
    border-color:rgba(120,150,255,.85) !important;
    box-shadow:0 0 12px rgba(90,120,255,.38);
  }
}

/* C2P mobile filename row — stable without overriding JS visibility */
@media (max-width:1100px){

  body.c2p-mobile-workspace .c2p-row-fname{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin-top:24px !important;
    margin-bottom:20px !important;
    box-sizing:border-box !important;
  }

  body.c2p-mobile-workspace .c2p-row-fname .label{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.c2p-mobile-workspace .c2p-row-fname .c2p-fname{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  body.c2p-mobile-workspace .c2p-row-fname .c2p-fname-restore{
    position:static !important;
    align-self:flex-start !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
    white-space:normal !important;
  }
}

/* ============================================================
   C2P MOBILE — hide Advanced options and Preview layout
   Mobile uses Prev / Next navigation instead.
   ============================================================ */
@media (max-width:1100px){

  body.c2p-mobile-workspace #c2pMobileAdvancedButton,
  body.c2p-mobile-workspace #c2pMobileAdvanced{
    display:none !important;
  }

}

/* ============================================================
   C2P MOBILE BILLING MODAL
   Keep Continue / Cancel accessible on small screens
   ============================================================ */
@media (max-width:900px){

  .c2p-billing-backdrop{
    align-items:flex-start !important;
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
  }

  .c2p-billing-modal{
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 20px) !important;

    margin:auto 0 !important;
    padding:16px !important;
    box-sizing:border-box !important;

    border-radius:16px !important;
    overflow:hidden !important;
  }

  .c2p-billing-head{
    flex:0 0 auto;
  }

  .c2p-billing-head h2{
    font-size:22px !important;
  }

  .c2p-billing-plan{
    flex:0 0 auto;
    margin-top:12px !important;
  }

  .c2p-billing-body{
    display:block !important;
    flex:1 1 auto !important;

    min-height:0 !important;
    margin-top:12px !important;
    padding-right:2px;

    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .c2p-billing-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:20;

    flex:0 0 auto !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;

    margin:12px -16px -16px !important;
    padding:
      12px 16px
      calc(12px + env(safe-area-inset-bottom)) !important;

    background:rgba(10,15,29,.98) !important;
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 -12px 24px rgba(0,0,0,.28);
  }

  .c2p-billing-actions .btn{
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
  }

  .c2p-billing-grid{
    grid-template-columns:1fr !important;
  }

  .c2p-billing-receipt{
    margin-bottom:8px !important;
  }
}

/* ============================================================
   C2P MOBILE STRIPE WAIT
   Center box and keep all text inside viewport
   ============================================================ */
@media (max-width:900px){

  #c2pStripeWait{
    position:fixed !important;
    inset:0 !important;
    padding:12px !important;
    background:rgba(3,8,20,.62) !important;
    backdrop-filter:blur(6px) !important;
  }

  #c2pStripeWait .c2p-stripe-wait-box{
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;

    width:calc(100dvw - 24px) !important;
    max-width:420px !important;
    min-width:0 !important;

    padding:20px 16px !important;
    margin:0 !important;
    box-sizing:border-box !important;

    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:16px !important;
    line-height:1.45 !important;
  }

  #c2pStripeWait .c2p-stripe-wait-box strong{
    display:block !important;
    margin-bottom:8px !important;
    font-size:18px !important;
    line-height:1.3 !important;
  }

}

/* ============================================================
   C2P LIVE ESTIMATED PRICE
   ============================================================ */
.c2p-live-price{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 12px;
  align-items:center;

  width:100%;
  margin:0 0 12px;
  padding:12px 14px;
  box-sizing:border-box;

  border:1px solid rgba(135,155,255,.18);
  border-radius:12px;
  background:rgba(76,92,180,.09);
}

.c2p-live-price-label{
  color:#b9c4e5;
  font-size:12px;
  font-weight:700;
}

.c2p-live-price-value{
  color:#fff;
  font-size:18px;
  line-height:1.1;
  text-align:right;
}

.c2p-live-price-meta{
  grid-column:1 / -1;
  color:#8fa0c6;
  font-size:11px;
  line-height:1.35;
}

.c2p-live-price.is-free{
  border-color:rgba(25,195,125,.34);
  background:rgba(25,195,125,.09);
}

.c2p-live-price.is-free .c2p-live-price-value{
  color:#39e49c;
}

.c2p-live-price.is-paid{
  border-color:rgba(139,112,255,.38);
  background:rgba(110,80,255,.11);
}

.c2p-live-price.is-paid .c2p-live-price-value{
  color:#c6b7ff;
}

.c2p-live-price.is-loading{
  opacity:.78;
}

.c2p-live-price.is-error .c2p-live-price-value{
  color:#ffb8c2;
}

@media (max-width:1100px){
  body.c2p-mobile-workspace .c2p-live-price{
    margin:0 0 9px !important;
    padding:9px 12px !important;
    border-radius:10px;
  }

  body.c2p-mobile-workspace .c2p-live-price-value{
    font-size:16px;
  }
}

/* ============================================================
   C2P FREE EXPORT NOTICE
   ============================================================ */
.c2p-free-export-notice{
  width:100%;
  margin:0 0 14px;
  padding:15px 16px;
  box-sizing:border-box;

  border:1px solid rgba(25,195,125,.28);
  border-radius:14px;
  background:
    linear-gradient(135deg,
      rgba(25,195,125,.11),
      rgba(76,125,255,.07)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 26px rgba(0,0,0,.18);
}

.c2p-free-export-title{
  display:flex;
  align-items:center;
  gap:8px;

  margin-bottom:11px;
  color:#70edb4;
  font-size:15px;
  font-weight:800;
}

.c2p-free-export-title span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(25,195,125,.16);
  border:1px solid rgba(25,195,125,.32);
}

.c2p-free-export-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}

.c2p-free-export-item{
  min-width:0;
  padding:11px 12px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(5,10,20,.25);
}

.c2p-free-export-item strong,
.c2p-free-export-item span,
.c2p-free-export-item small{
  display:block;
}

.c2p-free-export-item strong{
  margin-bottom:4px;
  color:#fff;
  font-size:13px;
}

.c2p-free-export-item span{
  color:#d6dff6;
  font-size:12px;
  line-height:1.4;
}

.c2p-free-export-item small{
  margin-top:3px;
  color:#91a4c8;
  font-size:11px;
  line-height:1.35;
}

@media (max-width:700px){

  .c2p-free-export-notice{
    margin-bottom:10px;
    padding:13px;
  }

  .c2p-free-export-grid{
    grid-template-columns:1fr;
    gap:7px;
  }

  .c2p-free-export-item{
    padding:9px 11px;
  }

  .c2p-free-export-item strong{
    display:inline;
    margin-right:5px;
  }

  .c2p-free-export-item span{
    display:inline;
  }
}