/* Bookasion Card Studio UX refresh — isolated public studio overrides. */
.card-studio-body{
  --studio-card:#fff;
  --studio-bg:#f6f3f1;
  --studio-line:#e8dfdc;
  --studio-muted:#7f7478;
  --studio-ink:#2e2226;
  --studio-maroon:#78172a;
  --studio-gold:#c79a39;
  background:var(--studio-bg);
  font-size:16px;
}

.card-studio-body .studio-header{height:78px;min-height:78px;padding:12px clamp(18px,3vw,42px);border-color:var(--studio-line);background:rgba(255,255,255,.97);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%)}
.card-studio-body .studio-brand strong{font-size:19px}
.card-studio-body .studio-header-nav a,.card-studio-body .studio-current{font-size:12px;padding:9px 15px}
.card-studio-body .studio-free-badge,.card-studio-body .studio-page-language,.card-studio-body .studio-page-install{min-height:40px;padding:8px 13px;font-size:11px}
.card-studio-body .studio-page{height:calc(100vh - 78px);padding-bottom:78px}
.card-studio-body .studio-workspace{grid-template-columns:minmax(0,1fr) minmax(440px,490px);background:var(--studio-bg)}

.card-studio-body .studio-preview-column{display:flex;flex-direction:column;background:#f5f2f0}
.card-studio-body .studio-preview-head{z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 22px;border-bottom:1px solid var(--studio-line);background:rgba(255,255,255,.92);backdrop-filter:blur(12px)}
.card-studio-body .studio-preview-head>div{display:grid;gap:1px}
.card-studio-body .studio-preview-head span{color:var(--studio-maroon);font-size:11px;font-weight:900}
.card-studio-body .studio-preview-head strong{color:var(--studio-ink);font-size:16px;line-height:1.35}
.card-studio-body .studio-preview-head em{padding:6px 10px;border-radius:999px;background:#f7ecef;color:var(--studio-maroon);font-size:10px;font-style:normal;font-weight:850}
.card-studio-body .studio-canvas-stage{flex:1 1 auto;height:auto;min-height:0;padding:26px clamp(26px,4vw,58px);background-color:#f5f2f0;background-image:radial-gradient(circle,#ded5d2 1px,transparent 1px);background-size:18px 18px}
.card-studio-body .studio-canvas-surface{height:min(100%,780px);max-height:calc(100vh - 236px);border-radius:8px;box-shadow:0 30px 70px -36px rgba(48,24,31,.42),0 0 0 1px rgba(68,37,45,.07)}
.card-studio-body .studio-canvas-loading{background:rgba(245,242,240,.78)}
.card-studio-body .studio-zoom-controls{bottom:18px;border-color:#dfd5d2;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 14px 34px -22px rgba(44,23,29,.4)}
.card-studio-body .studio-zoom-controls button{min-width:42px;height:40px;font-size:17px}

.card-studio-body .studio-editor-column{padding:18px 18px 30px;border-inline-start-color:var(--studio-line);background:#f8f6f5}
.card-studio-body .studio-setup-panel,.card-studio-body .studio-editor-heading,.card-studio-body .studio-editor-section,.card-studio-body .studio-qr-panel{border-color:var(--studio-line);border-radius:18px;background:var(--studio-card);box-shadow:0 12px 30px -28px rgba(58,26,35,.38)}
.card-studio-body .studio-setup-panel{padding:18px;margin-bottom:14px}
.card-studio-body .studio-setup-icon,.card-studio-body .studio-editor-heading-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:17px}
.card-studio-body .studio-setup-heading h1,.card-studio-body .studio-editor-heading h2{font-size:20px;line-height:1.4}
.card-studio-body .studio-setup-heading p,.card-studio-body .studio-editor-heading p{font-size:13px;line-height:1.7;color:var(--studio-muted)}
.card-studio-body .studio-setup-control{margin-top:16px;padding-top:15px}
.card-studio-body .studio-setup-label strong{font-size:14px}
.card-studio-body .studio-language-toggle{border-radius:12px}
.card-studio-body .studio-language-toggle button{min-width:88px;padding:10px 13px;font-size:13px;border-radius:9px}
.card-studio-body .studio-editor-heading{padding:17px 18px;margin-bottom:14px}
.card-studio-body #studioEditor{gap:12px}
.card-studio-body .studio-editor-section>button{padding:17px 18px;font-size:15px}
.card-studio-body .studio-editor-section>button em{min-width:31px;height:24px;font-size:10px}
.card-studio-body .studio-editor-fields{gap:14px;padding:16px 18px 18px}
.card-studio-body .studio-field{gap:8px}
.card-studio-body .studio-field>span:first-child{font-size:13px;font-weight:850;color:#5e5055}
.card-studio-body .studio-field input:not([type="color"]),.card-studio-body .studio-field textarea,.card-studio-body .studio-field select{min-height:54px;border-color:#ddd3d0;border-radius:12px;padding:12px 14px;background:#fff;color:var(--studio-ink);font-size:16px;line-height:1.55}
.card-studio-body .studio-field textarea{min-height:116px}
.card-studio-body .studio-field input:focus,.card-studio-body .studio-field textarea:focus,.card-studio-body .studio-field select:focus{border-color:rgba(120,23,42,.48);box-shadow:0 0 0 4px rgba(120,23,42,.07)}
.card-studio-body .studio-font-field select{font-size:16px}

.card-studio-body .studio-typography-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.72fr);gap:10px;padding:12px;border:1px solid #eee6e3;border-radius:14px;background:#fbf9f8}
.card-studio-body .studio-color-control{min-height:54px;display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #ddd3d0;border-radius:12px;background:#fff}
.card-studio-body .studio-color-control input[type="color"]{width:38px;height:38px;flex:0 0 38px;padding:2px;border:0;border-radius:10px;background:transparent;cursor:pointer}
.card-studio-body .studio-color-control input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.card-studio-body .studio-color-control input[type="color"]::-webkit-color-swatch{border:0;border-radius:8px}
.card-studio-body .studio-color-control output{min-width:0;color:#6f6267;font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;direction:ltr}

.card-studio-body .studio-opening-chooser{gap:13px;padding:3px 0 5px}
.card-studio-body .studio-opening-chooser-head strong{font-size:14px;color:#4f4045}
.card-studio-body .studio-opening-chooser-head small{font-size:12px;line-height:1.6}
.card-studio-body .studio-opening-select{min-height:54px;border-color:#ddd3d0;border-radius:12px;padding:0 14px;font-size:15px}
.card-studio-body .studio-opening-select-preview{min-height:88px;border-color:#e5dcda;border-radius:13px;background:#fcfaf9}
.card-studio-body .studio-opening-select-preview img{height:62px}
.card-studio-body .studio-opening-color[hidden]{display:none!important}
.card-studio-body .studio-couple-grid{gap:12px}
.card-studio-body .studio-connector-control{padding:12px;border-color:#e6ddda;border-radius:12px;background:#fbf9f8}
.card-studio-body .studio-connector-control>span{font-size:13px}
.card-studio-body .studio-connector-buttons button{min-width:50px;height:38px;font-size:17px}

.card-studio-body .studio-qr-toggle{padding:18px 19px}
.card-studio-body .studio-qr-toggle strong{font-size:14px}
.card-studio-body .studio-qr-toggle small{font-size:12px}
.card-studio-body .studio-qr-visibility-note{font-size:11.5px}
.card-studio-body .studio-qr-upload label,.card-studio-body .studio-qr-upload button{padding:11px 13px;font-size:12px}
.card-studio-body .studio-qr-range span,.card-studio-body .studio-qr-range output{font-size:11px}

.card-studio-body .studio-fixed-actions{height:78px;padding:11px clamp(14px,3vw,32px);border-top-color:var(--studio-line);background:rgba(255,255,255,.9);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
.card-studio-body .studio-fixed-actions button{min-height:50px;border-radius:13px;padding:11px 20px;font-size:12px}
.card-studio-body .studio-primary-button{background:linear-gradient(135deg,#78172a,#a82543)}
.card-studio-body .studio-template-drawer{bottom:86px;border-color:var(--studio-line);border-radius:20px;background:rgba(255,255,255,.95)}
.card-studio-body .studio-template-drawer-heading strong{font-size:14px}
.card-studio-body .studio-template-drawer-heading small{font-size:10px}
.card-studio-body .studio-template-card-name{font-size:10px}
.card-studio-body .studio-status{font-size:10px}

@media(max-width:1100px){
  .card-studio-body .studio-workspace{grid-template-columns:minmax(0,1fr) 410px}
}

@media(max-width:820px){
  .card-studio-body{overflow:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
  .card-studio-body .studio-header{height:68px;min-height:68px;padding:10px 12px}
  .card-studio-body .studio-page{height:auto;min-height:calc(100vh - 68px);padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .card-studio-body .studio-workspace{display:flex;flex-direction:column}
  .card-studio-body .studio-preview-column{order:1;height:min(62vh,690px);min-height:520px;border-bottom:1px solid var(--studio-line)}
  .card-studio-body .studio-preview-head{min-height:58px;padding:10px 14px}
  .card-studio-body .studio-preview-head strong{font-size:15px}
  .card-studio-body .studio-preview-head em{font-size:9px}
  .card-studio-body .studio-canvas-stage{min-height:0;padding:16px 14px 70px}
  .card-studio-body .studio-canvas-surface{width:min(100%,360px);height:auto;max-height:calc(62vh - 118px)}
  .card-studio-body .studio-zoom-controls{bottom:12px}
  .card-studio-body .studio-editor-column{order:2;height:auto;overflow:visible;padding:14px 12px 24px;border-top:0}
  .card-studio-body .studio-typography-controls{grid-template-columns:1fr 150px}
  .card-studio-body .studio-fixed-actions{height:auto;min-height:72px;padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))}
  .card-studio-body .studio-fixed-actions button{min-height:50px;font-size:12px}
  .card-studio-body .studio-template-drawer{bottom:calc(82px + env(safe-area-inset-bottom,0px));inset-inline:8px}
}

@media(max-width:520px){
  .card-studio-body .studio-preview-column{height:560px;min-height:560px}
  .card-studio-body .studio-canvas-surface{width:min(100%,320px);max-height:430px}
  .card-studio-body .studio-preview-head em{display:none}
  .card-studio-body .studio-editor-column{padding:12px 9px 22px}
  .card-studio-body .studio-setup-panel{padding:15px}
  .card-studio-body .studio-setup-heading h1,.card-studio-body .studio-editor-heading h2{font-size:18px}
  .card-studio-body .studio-field input:not([type="color"]),.card-studio-body .studio-field textarea,.card-studio-body .studio-field select{font-size:16px}
  .card-studio-body .studio-typography-controls{grid-template-columns:1fr}
  .card-studio-body .studio-color-control{width:100%}
  .card-studio-body .studio-couple-grid{grid-template-columns:1fr}
  .card-studio-body .studio-fixed-actions{gap:7px}
  .card-studio-body .studio-fixed-actions button{font-size:11px;padding-inline:10px}
}
.card-studio-body .studio-opening-adjust{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border:1px solid #eee6e3;border-radius:14px;background:#fbf9f8}
.card-studio-body .studio-opening-adjust[hidden]{display:none!important}
.card-studio-body .studio-opening-adjust label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
.card-studio-body .studio-opening-adjust label>span{grid-column:1;color:#5e5055;font-size:12px;font-weight:850}
.card-studio-body .studio-opening-adjust input[type="range"]{grid-column:1;width:100%;accent-color:var(--studio-maroon)}
.card-studio-body .studio-opening-adjust output{grid-column:2;grid-row:1 / span 2;min-width:42px;text-align:end;color:#8b7e82;font-size:11px;font-weight:850}
@media(max-width:520px){.card-studio-body .studio-opening-adjust{grid-template-columns:1fr}}


/* --------------------------------------------------------------------------
   Mobile preview toolbar positioning fix — v2
   Use physical left centering so RTL cannot push the zoom controls off-screen.
   -------------------------------------------------------------------------- */
.card-studio-body .studio-zoom-controls{
  left:50% !important;
  right:auto !important;
  inset-inline-start:auto !important;
  inset-inline-end:auto !important;
  transform:translateX(-50%) !important;
  max-width:calc(100% - 24px);
}

@media(max-width:820px){
  .card-studio-body .studio-canvas-stage{
    position:relative;
    overflow:hidden;
    padding-bottom:76px;
  }
  .card-studio-body .studio-zoom-controls{
    bottom:12px !important;
    width:max-content;
    max-width:calc(100% - 28px);
    padding:4px;
    gap:2px;
    border-radius:15px;
    white-space:nowrap;
  }
  .card-studio-body .studio-zoom-controls button{
    min-width:38px;
    width:auto;
    height:38px;
    padding:0 9px;
    flex:0 0 auto;
    font-size:15px;
  }
  .card-studio-body .studio-zoom-controls .studio-zoom-fit{
    min-width:72px;
    padding-inline:8px;
  }
  .card-studio-body .studio-zoom-controls .studio-zoom-fit span{
    font-size:10px;
  }
  .card-studio-body .studio-zoom-controls .studio-zoom-fit strong{
    font-size:10px;
  }
}

@media(max-width:390px){
  .card-studio-body .studio-zoom-controls button{
    min-width:34px;
    height:36px;
    padding-inline:7px;
  }
  .card-studio-body .studio-zoom-controls .studio-zoom-fit{
    min-width:64px;
  }
}


/* Card Studio mobile direct-manipulation gestures */
@media(max-width:820px){
  .card-studio-body .studio-canvas-stage{
    touch-action:none;
    overscroll-behavior:contain;
    user-select:none;
    -webkit-user-select:none;
  }
  .card-studio-body .studio-canvas-surface{
    will-change:transform;
    transform-origin:center center;
  }
  .card-studio-body .studio-canvas-surface.is-gesturing{
    transition:none !important;
  }
  .card-studio-body .studio-canvas-stage canvas{
    -webkit-user-drag:none;
    user-select:none;
    -webkit-user-select:none;
  }
}

/* Card Studio home action + global-opening update — 2026-09-13 */
.card-studio-body .studio-preview-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.card-studio-body .studio-back-home{min-height:38px;padding:7px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #e2d8d5;border-radius:12px;background:#fff;color:var(--studio-maroon);text-decoration:none;font-size:11px;font-weight:900;line-height:1;box-shadow:0 8px 20px -18px rgba(72,28,39,.45);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.card-studio-body .studio-back-home svg{width:16px;height:16px;flex:0 0 16px}
.card-studio-body .studio-back-home:hover{transform:translateY(-1px);border-color:rgba(120,23,42,.28);background:#fffafa}
.card-studio-body .studio-back-home:focus-visible{outline:3px solid rgba(120,23,42,.14);outline-offset:2px}
@media(max-width:820px){
  .card-studio-body .studio-preview-head{align-items:center}
  .card-studio-body .studio-preview-head-actions{gap:6px}
  .card-studio-body .studio-back-home{min-height:36px;padding:6px 10px;font-size:10px;border-radius:11px}
  .card-studio-body .studio-back-home svg{width:15px;height:15px;flex-basis:15px}
}
@media(max-width:520px){
  .card-studio-body .studio-preview-head{gap:8px}
  .card-studio-body .studio-preview-head>div:first-child{min-width:0}
  .card-studio-body .studio-preview-head-actions{flex:0 0 auto}
  .card-studio-body .studio-back-home{padding-inline:9px}
}
@media(max-width:370px){
  .card-studio-body .studio-back-home span{display:none}
  .card-studio-body .studio-back-home{width:36px;padding:0}
}


/* --------------------------------------------------------------------------
   Card Studio accordion headers — Bookasion burgundy treatment
   Only the clickable section headline is colored; section content stays white.
   -------------------------------------------------------------------------- */
.card-studio-body .studio-editor-section{
  overflow:hidden;
  background:#fff;
}

.card-studio-body .studio-editor-section>button{
  width:100%;
  border:0;
  background:linear-gradient(135deg,#651020 0%,#86192f 52%,#a12643 100%);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px -20px rgba(91,14,31,.7);
  transition:background .2s ease,box-shadow .2s ease,transform .15s ease;
}

.card-studio-body .studio-editor-section>button:hover{
  background:linear-gradient(135deg,#711225 0%,#921c34 52%,#ad2a49 100%);
}

.card-studio-body .studio-editor-section>button:active{
  transform:translateY(1px);
}

.card-studio-body .studio-editor-section>button,
.card-studio-body .studio-editor-section>button strong,
.card-studio-body .studio-editor-section>button span{
  color:#fff;
}

.card-studio-body .studio-editor-section>button em{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.card-studio-body .studio-editor-section>button .ui-icon,
.card-studio-body .studio-editor-section>button svg,
.card-studio-body .studio-editor-section>button i{
  color:#fff;
  fill:currentColor;
}

.card-studio-body .studio-editor-section>button[aria-expanded="true"]{
  background:linear-gradient(135deg,#59101f 0%,#79172b 50%,#981f3b 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 14px 28px -22px rgba(91,14,31,.8);
}

/* Keep expanded form content visually separate and white. */
.card-studio-body .studio-editor-fields{
  background:#fff;
}

/* Make the header/content connection feel intentional when opened. */
.card-studio-body .studio-editor-section>button[aria-expanded="true"]{
  border-radius:17px 17px 0 0;
}
.card-studio-body .studio-editor-section>button[aria-expanded="false"]{
  border-radius:17px;
}