/* ==========================================================================
   Studio Clean: mobile-first shell for /studio
   Every rule is scoped under body.studio-body so it outranks the older
   portal sheets (portal-premium-redesign.css, base.css, linkbar.css ...)
   that load after this file, without needing !important.
   ========================================================================== */

.studio-body {
    --studio-accent: #8b4557;
    --studio-accent-hover: #74384a;
    --studio-accent-soft: #f6eaee;
    --studio-bg: #f6f7f9;
    --studio-surface: #ffffff;
    --studio-border: #e5e7eb;
    --studio-text: #111827;
    --studio-muted: #6b7280;
    --studio-radius: 14px;
    --studio-radius-sm: 10px;
    --studio-footer-h: 72px;

    /* Point the shared tokens at the single accent */
    --color-primary: var(--studio-accent);
    --color-primary-hover: var(--studio-accent-hover);
    --color-primary-dark: var(--studio-accent-hover);
    --color-primary-light: var(--studio-accent-soft);
    --focus-ring: 0 0 0 3px rgba(139, 69, 87, 0.18);

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 16px;
    color: var(--studio-text);
    background: var(--studio-bg);
    margin: 0;
    padding: 0 0 calc(var(--studio-footer-h) + env(safe-area-inset-bottom) + 16px);
    overflow-x: hidden;
}

/* signup.js reads this flag; it is not meant to be seen */
.studio-body #login-status { display: none; }

.studio-body img,
.studio-body iframe,
.studio-body video {
    max-width: 100%;
}

/* ---------- Mode strip (agent / admin) ---------- */
.studio-body .studio-modebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
}
.studio-body .studio-modebar i { margin-right: 6px; }
.studio-body .studio-modebar a {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    text-decoration: none;
}
.studio-body .studio-modebar--agent { background: #fef3c7; color: #78350f; }
.studio-body .studio-modebar--agent a { background: #78350f; color: #fff; }
.studio-body .studio-modebar--admin { background: #ccfbf1; color: #134e4a; }
.studio-body .studio-modebar--admin a { background: #134e4a; color: #fff; }

/* ---------- App bar ---------- */
.studio-body .studio-appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 16px;
}
.studio-body .studio-appbar__brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.studio-body .studio-appbar__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.studio-body .studio-appbar__tag {
    font-size: 14px;
    font-weight: 500;
    color: var(--studio-muted);
}
.studio-body .studio-appbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-body .studio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.studio-body .studio-btn--ghost {
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    color: var(--studio-text);
}
.studio-body .studio-btn--ghost:hover { border-color: var(--studio-accent); color: var(--studio-accent); }

/* Account menu (native <details>, no JS) */
.studio-body .studio-menu { position: relative; }
.studio-body .studio-menu > summary { list-style: none; }
.studio-body .studio-menu > summary::-webkit-details-marker { display: none; }
.studio-body .studio-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--studio-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.studio-body .studio-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 450;
    width: 248px;
    padding: 6px;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius);
    box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
}
.studio-body .studio-menu__user {
    display: flex;
    flex-direction: column;
    padding: 10px 12px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--studio-border);
}
.studio-body .studio-menu__user span { font-size: 14px; color: var(--studio-muted); }
.studio-body .studio-menu__panel a,
.studio-body .studio-menu__panel button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--studio-radius-sm);
    background: none;
    color: var(--studio-text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.studio-body .studio-menu__panel a:hover,
.studio-body .studio-menu__panel button:hover { background: var(--studio-bg); }
.studio-body .studio-menu__panel i { width: 18px; text-align: center; color: var(--studio-muted); }
.studio-body .studio-menu__panel form { margin: 0; }

.studio-body .studio-flash {
    max-width: 688px;
    margin: 0 auto 12px;
    border-radius: var(--studio-radius-sm);
    font-size: 15px;
}

/* ---------- Main column ---------- */
.studio-body .parent-container {
    display: block;
    max-width: 720px;
    margin: 0 auto;
}
.studio-body .card-tabs {
    /* overflow:hidden on .card broke position:sticky on the step header */
    overflow: visible;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}
.studio-body .stepper-content {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.studio-body .stepper-content > .tab-pane {
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* !important: portal-premium-redesign.css zeroes .stepper-active .tab-pane with !important */
    padding: 16px !important;
    box-sizing: border-box;
}

/* ---------- Step chips (sticky) ---------- */
.studio-body .stepper-header {
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0;
    background: rgba(246, 247, 249, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--studio-border);
    box-shadow: none;
}
.studio-body .studio-steps {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.studio-body .studio-steps::-webkit-scrollbar { display: none; }

.studio-body .studio-step {
    /* reset the old dot look from portal-premium-redesign.css */
    position: static;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    background: var(--studio-surface);
    color: var(--studio-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    scroll-snap-align: center;
    cursor: pointer;
    transform: none;
    box-shadow: none;
    outline: none;
    animation: none;
}
.studio-body .studio-step:hover:not(.active) {
    transform: none;
    background: var(--studio-surface);
    border-color: var(--studio-accent);
}
.studio-body .studio-step:focus-visible {
    outline: 2px solid var(--studio-accent);
    outline-offset: 2px;
}
.studio-body .studio-step::after { display: none; }
.studio-body .studio-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--studio-bg);
    color: var(--studio-muted);
    font-size: 13px;
}
.studio-body .studio-step.completed .studio-step__num {
    background: var(--studio-accent-soft);
    color: var(--studio-accent);
}
.studio-body .studio-step.active {
    background: var(--studio-accent);
    border-color: var(--studio-accent);
    color: #fff;
}
.studio-body .studio-step.active .studio-step__num {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.studio-body .stepper-progress-bar {
    height: 2px;
    margin: 0;
    border-radius: 0;
    background: transparent;
}
.studio-body .stepper-progress-fill { background: var(--studio-accent); }

/* ---------- Fixed bottom bar: back · Simpan · next ---------- */
.studio-body .stepper-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--studio-border);
    box-shadow: none;
}
.studio-body .stepper-footer-inner {
    display: flex;
    gap: 8px;
    max-width: 688px;
}
.studio-body .stepper-btn {
    min-width: 0;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
    transform: none !important;
}
.studio-body .stepper-btn[hidden] { display: none; }
.studio-body .stepper-btn-prev {
    flex: 0 0 48px;
    padding: 0;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    color: var(--studio-text);
}
.studio-body .studio-save {
    flex: 1 1 auto;
    background: var(--studio-accent);
    border: 0;
    color: #fff;
}
.studio-body .studio-save:hover { background: var(--studio-accent-hover); }
.studio-body .stepper-btn-next {
    flex: 1 1 auto;
    max-width: none;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    color: var(--studio-text);
}
.studio-body .stepper-btn-next:hover:not(:disabled) {
    background: var(--studio-bg);
    color: var(--studio-text);
    box-shadow: none;
}

/* ---------- Forms: readable on a phone, no iOS zoom-on-focus ---------- */
.studio-body .stepper-content label {
    font-size: 15px;
    font-weight: 600;
    color: var(--studio-text);
}
.studio-body .stepper-content small,
.studio-body .stepper-content .form-text,
.studio-body .stepper-content .text-muted {
    font-size: 14px;
    line-height: 1.5;
    color: var(--studio-muted);
}
.studio-body .stepper-content .form-control,
.studio-body .stepper-content select,
.studio-body .stepper-content textarea,
.studio-body .stepper-content input[type="text"],
.studio-body .stepper-content input[type="email"],
.studio-body .stepper-content input[type="tel"],
.studio-body .stepper-content input[type="url"],
.studio-body .stepper-content input[type="number"],
.studio-body .stepper-content input[type="date"],
.studio-body .stepper-content input[type="time"] {
    font-size: 16px;
    min-height: 48px;
    border-radius: var(--studio-radius-sm);
    border-color: var(--studio-border);
}
.studio-body .stepper-content .form-control:focus,
.studio-body .stepper-content select:focus,
.studio-body .stepper-content input:focus,
.studio-body .stepper-content textarea:focus {
    border-color: var(--studio-accent);
    box-shadow: var(--focus-ring);
    outline: none;
}
.studio-body .stepper-content .btn {
    min-height: 44px;
    border-radius: var(--studio-radius-sm);
    font-weight: 600;
}
.studio-body .stepper-content .btn-primary {
    background: var(--studio-accent);
    border-color: var(--studio-accent);
}
.studio-body .stepper-content .card,
.studio-body .stepper-content fieldset {
    border: 1px solid var(--studio-border) !important;
    border-radius: var(--studio-radius) !important;
    box-shadow: none;
}
.studio-body .stepper-content fieldset {
    padding: 16px !important;
    background: var(--studio-surface);
}
.studio-body .stepper-content legend {
    font-size: 15px;
}
.studio-body .stepper-content .alert {
    border-radius: var(--studio-radius-sm);
    font-size: 14px;
}
.studio-body .ql-container {
    font-size: 16px;
    border-radius: 0 0 var(--studio-radius-sm) var(--studio-radius-sm);
}
.studio-body .ql-toolbar {
    border-radius: var(--studio-radius-sm) var(--studio-radius-sm) 0 0;
}

/* Tutorial video: fit the screen instead of a fixed 180x315 box */
.studio-body #videoContainer1 iframe {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 9 / 16;
}

/* Desktop: give the column a little more air */
@media (min-width: 768px) {
    .studio-body .stepper-content { padding: 0; }
.studio-body .stepper-content > .tab-pane { padding: 24px 16px !important; }
    .studio-body .studio-appbar { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-body .studio-steps { scroll-behavior: auto; }
}

/* ==========================================================================
   Components used by the rewritten step partials
   ========================================================================== */

/* Step intro: one title + one line */
.studio-body .s-intro { margin: 4px 0 16px; }
.studio-body .s-intro h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--studio-text);
}
.studio-body .s-intro p { margin: 0; font-size: 15px; color: var(--studio-muted); }

/* A pane that follows another pane in the same step gets a divider instead of a new page */
.studio-body .tab-pane.studio-pane-follow { padding-top: 0 !important; }

/* Card: one topic */
.studio-body .s-card {
    margin: 0 0 12px;
    padding: 16px;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius);
}
.studio-body .s-card__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--studio-text);
}
.studio-body .s-card__title + .s-hint { margin-top: -8px; }
.studio-body .s-hint {
    display: block;
    margin: 4px 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--studio-muted);
}
.studio-body .s-field { margin: 0 0 14px; }
.studio-body .s-field:last-child { margin-bottom: 0; }
.studio-body .s-field > label,
.studio-body .s-label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--studio-text);
}
.studio-body .s-field .s-hint { margin: 6px 0 0; }
.studio-body .s-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.studio-body .s-grid-2 > .s-field { margin: 0; }
.studio-body .s-grid-2 + .s-field,
.studio-body .s-grid-2 + .s-grid-2 { margin-top: 14px; }
.studio-body .stepper-content .s-card input[type="text"],
.studio-body .stepper-content .s-card input[type="tel"],
.studio-body .stepper-content .s-card input[type="number"],
.studio-body .stepper-content .s-card input[type="date"],
.studio-body .stepper-content .s-card input:not([type]),
.studio-body .stepper-content .s-card select,
.studio-body .stepper-content .s-card textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    color: var(--studio-text);
    box-shadow: none;
}
.studio-body .stepper-content .s-card textarea { min-height: 96px; }

/* Repeating rows (contacts, aturcara) */
.studio-body .s-rows { display: grid; gap: 8px; }
.studio-body .s-rows .s-grid-2 { gap: 8px; }
.studio-body .s-row-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.studio-body .s-row-actions .s-btn { flex: 1; }

.studio-body .s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    background: var(--studio-surface);
    color: var(--studio-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.studio-body .s-btn:hover { border-color: var(--studio-accent); color: var(--studio-accent); text-decoration: none; }
.studio-body .s-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--studio-border); color: var(--studio-text); }
.studio-body .s-btn--primary { background: var(--studio-accent); border-color: var(--studio-accent); color: #fff; }
.studio-body .s-btn--primary:hover { background: var(--studio-accent-hover); color: #fff; }
.studio-body .s-btn--block { width: 100%; }
.studio-body .s-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--studio-accent);
    text-decoration: none;
}
.studio-body .s-link:hover { text-decoration: underline; color: var(--studio-accent-hover); }

/* On/off row: text left, switch right. The real <select> stays in the form, hidden. */
.studio-body .s-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}
.studio-body .s-switch-row + .s-switch-row { border-top: 1px solid var(--studio-border); }
.studio-body .s-card > .s-switch-row:first-child { padding-top: 0; }
.studio-body .s-card > .s-switch-row:last-child { padding-bottom: 0; }
.studio-body .s-switch-row__text { min-width: 0; }
.studio-body .s-switch-row__text label,
.studio-body .s-switch-row__text .s-label {
    display: block;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--studio-text);
    cursor: pointer;
}
.studio-body .s-switch-row__text .s-hint { margin: 2px 0 0; }
.studio-body select[data-switch] { display: none !important; }

.studio-body .s-switch {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 32px;
    margin: 0;
    border-radius: 999px;
    background: #d1d5db;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.studio-body .s-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
.studio-body .s-switch:checked { background: var(--studio-accent); }
.studio-body .s-switch:checked::after { transform: translateX(20px); }
.studio-body .s-switch:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }

/* Collapsible "more settings" */
.studio-body .s-more {
    margin: 0 0 12px;
    background: var(--studio-surface);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius);
}
.studio-body .s-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 12px 16px;
    list-style: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.studio-body .s-more > summary::-webkit-details-marker { display: none; }
.studio-body .s-more > summary small {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 400;
    color: var(--studio-muted);
}
.studio-body .s-more > summary::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 2px solid var(--studio-muted);
    border-bottom: 2px solid var(--studio-muted);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s ease;
}
.studio-body .s-more[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.studio-body .s-more__body { padding: 0 16px 16px; }
.studio-body .s-more__body > .card,
.studio-body .s-more__body .entrance-design-card {
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: none;
}
.studio-body .s-group-label {
    margin: 24px 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--studio-muted);
}

/* Colour input as a tidy swatch row */
.studio-body .s-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}
.studio-body .s-color + .s-color { border-top: 1px solid var(--studio-border); }
.studio-body .s-color label { margin: 0; font-size: 15px; font-weight: 600; }
.studio-body .stepper-content .s-color input[type="color"] {
    flex: 0 0 auto;
    width: 52px;
    height: 36px;
    min-height: 0;
    padding: 2px;
    border: 1px solid var(--studio-border);
    border-radius: 10px;
    background: var(--studio-surface);
    cursor: pointer;
}

/* Quill editors: calm toolbar, auto height */
.studio-body .s-card .ql-toolbar.ql-snow {
    padding: 6px 8px;
    border-color: var(--studio-border);
    background: var(--studio-bg);
}
.studio-body .s-card .ql-container.ql-snow { border-color: var(--studio-border); }
.studio-body .s-card .ql-editor { min-height: 72px; }

/* Uploaders: compact tap target instead of a big drag-and-drop panel */
.studio-body .modern-uploader { margin: 0 0 10px; }
.studio-body .modern-uploader .upload-section {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.studio-body .modern-uploader .upload-section > h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--studio-text);
}
.studio-body .modern-uploader .upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    border: 1.5px dashed var(--studio-border);
    border-radius: var(--studio-radius-sm);
    background: var(--studio-bg);
}
.studio-body .modern-uploader .upload-icon,
.studio-body .modern-uploader .upload-text { display: none; }
.studio-body .modern-uploader .upload-hint { font-size: 13px; color: var(--studio-muted); text-align: center; }
.studio-body .modern-uploader .upload-button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    background: var(--studio-surface);
    color: var(--studio-text);
    font-size: 14px;
    font-weight: 600;
}

/* App bar payment pill */
.studio-body .studio-pay {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.studio-body .studio-pay:empty { display: none; }
.studio-body .studio-pay .badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.studio-body .studio-pay .btn {
    min-height: 32px;
    padding: 0 12px;
    margin: 0 !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.studio-body .studio-pay .studio-pay__note { display: none; }

/* Link kad, now the first card of step 1 */
.studio-body .s-linkfield {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.studio-body .s-linkfield .url-constructor {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-sm);
    overflow: hidden;
    background: var(--studio-surface);
}
.studio-body .s-linkfield .url-prefix {
    display: flex;
    align-items: center;
    max-width: 55%;
    padding: 0 4px 0 12px;
    overflow: hidden;
    font-size: 14px;
    color: var(--studio-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--studio-bg);
}
.studio-body .stepper-content .s-linkfield input#hashtag {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    box-shadow: none;
}
.studio-body .s-linkfield .btn-copy {
    position: relative;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-sm);
    background: var(--studio-surface);
    color: var(--studio-text);
    cursor: pointer;
}
.studio-body .s-linkfield .btn-copy .copied-icon { display: none; color: #059669; }
.studio-body .s-linkfield .btn-copy.copied .copy-icon { display: none; }
.studio-body .s-linkfield .btn-copy.copied .copied-icon { display: inline; }

/* Save state next to the bottom bar */
.studio-body .studio-savestate {
    position: fixed;
    left: 50%;
    bottom: calc(var(--studio-footer-h) + env(safe-area-inset-bottom) + 8px);
    z-index: 301;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.86);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.studio-body .studio-savestate.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Preview sheet */
.studio-body .studio-preview {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    background: rgba(17, 24, 39, 0.55);
}
.studio-body .studio-preview[hidden] { display: none; }
.studio-body .studio-preview__sheet {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 12px auto 0;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: var(--studio-surface);
}
.studio-body .studio-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--studio-border);
}
.studio-body .studio-preview__bar strong { font-size: 15px; }
.studio-body .studio-preview__actions { display: flex; gap: 4px; }
.studio-body .studio-preview__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--studio-text);
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
}
.studio-body .studio-preview__icon:hover { background: var(--studio-bg); color: var(--studio-text); }
.studio-body .studio-preview iframe {
    flex: 1;
    width: 100%;
    max-width: none;
    border: 0;
    background: var(--studio-bg);
}
.studio-body.studio-preview-open { overflow: hidden; }

@media (min-width: 768px) {
    .studio-body .studio-preview__sheet { margin: 24px auto; border-radius: 18px; }
}

/* ---------- Step-specific bits ---------- */
.studio-body .s-grid-2--time { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.studio-body .s-rows input { min-height: 48px; }

.studio-body .s-more--inline {
    margin: 4px 0 0;
    border: 0;
    border-top: 1px solid var(--studio-border);
    border-radius: 0;
}
.studio-body .s-more--inline > summary {
    min-height: 48px;
    padding: 12px 0 0;
    font-size: 15px;
    font-weight: 600;
}
.studio-body .s-more--inline .s-more__body { padding: 12px 0 0; }

.studio-body .waze-link-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.studio-body .waze-link-helper { font-size: 13px; color: var(--studio-muted); }
.studio-body #waze_link_status { display: block; margin-top: 6px; }
.studio-body .stepper-content .s-card input[readonly] { background: var(--studio-bg); color: var(--studio-muted); }

.studio-body .s-steps {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.6;
}

.studio-body .s-player {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    min-height: 0;
    font-size: 14px;
    color: var(--studio-muted);
}
.studio-body .s-player iframe { width: 100%; max-width: 360px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--studio-radius-sm); }

.studio-body .s-gift-form { display: grid; gap: 8px; }
.studio-body .s-gift-form .s-label { margin: 0; }
.studio-body #gift-list:empty { display: none; }

.studio-body .s-qr {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-sm);
    text-align: center;
}
.studio-body .s-qr img {
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto 12px;
}
.studio-body .s-qr__actions { display: flex; justify-content: center; gap: 8px; }
.studio-body .s-linkfield > input[readonly] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-sm);
    background: var(--studio-bg);
    font-size: 14px;
}

/* Design step: tidy legacy blocks inside the collapsibles */
.studio-body .s-design { padding: 16px; }
.studio-body .s-more__body .card-title,
.studio-body .s-more__body .entrance-design-card > .card-text { display: none; }
.studio-body .s-more__body .alert { font-size: 14px; }
.studio-body #defaultPageVisibilityCard .row { display: block; margin: 0; }
.studio-body #defaultPageVisibilityCard .row > [class*="col-"] { padding: 0; max-width: none; }
.studio-body #defaultPageVisibilityCard .form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--studio-border);
}
.studio-body #defaultPageVisibilityCard .form-group label { margin: 0; font-size: 15px; font-weight: 600; }
.studio-body #defaultPageVisibilityCard > .form-text { display: none; }

/* Account menu note (agent-managed payment) */
.studio-body .studio-menu__note {
    margin: 4px 12px 8px;
    font-size: 13px;
    color: var(--studio-muted);
}

/* Narrow phones: keep the app bar on one line */
@media (max-width: 420px) {
    .studio-body .studio-appbar__tag { display: none; }
    .studio-body .studio-btn__text { display: none; }
    .studio-body #viewDigitalCard { width: 44px; padding: 0; }
}

/* ---------- Spacing fixes ---------- */
.studio-body .stepper-content > .tab-pane { padding-bottom: 0 !important; }
.studio-body .s-card > .s-switch-row:first-child { padding: 0; }

/* Design grid: two columns on phones instead of one design per screen */
.studio-body .s-design .design-container { max-height: 60vh; }
.studio-body .s-design .design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 768px) {
    .studio-body .s-design .design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Legacy component resets (portal-premium-redesign.css, modern_uploader.css, hadiah.css) ---------- */
.studio-body .modern-uploader,
.studio-body .modern-uploader:hover {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
.studio-body .modern-uploader .upload-section > h3::before { display: none; }
.studio-body .modern-uploader .upload-zone { min-height: 0; }

.studio-body .gift-management-container {
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}
.studio-body #add-gift-container {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.studio-body #add-gift-button {
    padding: 0 16px;
    border: 1px solid var(--studio-border);
    border-radius: 999px;
    background: var(--studio-surface);
    color: var(--studio-text);
    font-size: 15px;
    box-shadow: none;
    transform: none;
}
.studio-body #add-gift-button:hover { border-color: var(--studio-accent); color: var(--studio-accent); }
.studio-body .gift-empty {
    padding: 8px 0 0;
    background: none;
    border: 0;
    font-size: 14px;
    font-style: normal;
    text-align: center;
    color: var(--studio-muted);
}
.studio-body .gift-empty p { margin: 0; }

/* Untyped inputs (time fields) get the same rounded look */
.studio-body .stepper-content input:not([type]) {
    font-size: 16px;
    min-height: 48px;
    border-radius: var(--studio-radius-sm);
}

/* hadiah.css mobile rules pull the gift block outside the card */
.studio-body .gift-management-container,
.studio-body #add-gift-container {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Payment modal: visual only, same fields and buttons */
.studio-body #paymentGatewayModal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
}
.studio-body #paymentGatewayModal .modal-header,
.studio-body #paymentGatewayModal .modal-footer {
    background: var(--studio-surface);
    border-color: var(--studio-border);
}
.studio-body #paymentGatewayModal .modal-title { font-size: 18px; font-weight: 700; }
.studio-body #paymentGatewayModal .form-control {
    min-height: 48px;
    font-size: 16px;
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-sm);
    background: var(--studio-surface);
}
.studio-body #paymentGatewayModal .modal-footer .btn-primary {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--studio-accent);
    font-weight: 700;
}
.studio-body #paymentGatewayModal .coupon-style {
    border-radius: 999px;
    box-shadow: none;
}

.studio-body .studio-preview__icon:focus { outline: none; }
.studio-body .studio-preview__icon:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 2px; }