/* Printabotic - Modern Minimalist Styles */
/* Clean white theme with teal accents */

/* ========== Font Face Declarations ==========
   CRITICAL: These fonts MUST match the TTF files used by opentype.js in export.
   This ensures canvas preview renders identical glyphs/metrics as SVG export.
   See FONT_URLS in app.js — same files are loaded there for path conversion.
*/
@font-face {
    font-family: 'Impact';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Impact';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Impact Custom';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Impact Custom';
    src: url('/fonts/Anton-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Black Custom';
    src: url('/fonts/Oswald-Bold.ttf?v=2') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Black Custom';
    src: url('/fonts/Oswald-Bold.ttf?v=2') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Georgia';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Georgia';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Georgia Custom';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Georgia Custom';
    src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Custom';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Helvetica Custom';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Custom';
    src: url('/fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Arial Custom';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========== CSS Variables ========== */
:root {
    --primary: #01b497;
    --primary-hover: #019a82;
    --primary-light: rgba(1, 180, 151, 0.1);
    --secondary: #334fb4;
    --accent: #3b7dd8;
    --accent-hover: #2e6abf;
    --accent-light: rgba(59, 125, 216, 0.08);
    --text-dark: #333333;
    --text-medium: #666666;
    --text-light: #999999;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-gray: #f5f5f5;
    --border: #e5e5e5;
    --border-dark: #d0d0d0;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: all 0.25s ease;
}

/* ========== Reset & Base ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-dark);
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ========== Typography ========== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }

p {
    color: var(--text-medium);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-hover);
}

/* ========== Container ========== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========== Announcement Banner ========== */
.announcement-banner {
    background: var(--primary);
    color: white;
    text-align: center;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.announcement-banner svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.announcement-banner span {
    opacity: 0.85;
    font-weight: 400;
}

.announcement-banner strong {
    font-weight: 600;
}

/* Clickable variant — opens print waitlist modal */
.announcement-banner-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    outline: none;
}
.announcement-banner-clickable:hover,
.announcement-banner-clickable:focus-visible {
    background: color-mix(in srgb, var(--primary) 88%, black);
}
.announcement-banner-clickable:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
}
.announcement-banner-clickable:active {
    transform: scale(0.998);
}
/* Banner is an <a> link — override global a / a:hover color so text stays visible
   (custom text_color via inline style still wins over this). */
a.announcement-banner-clickable,
a.announcement-banner-clickable:hover,
a.announcement-banner-clickable:focus,
a.announcement-banner-clickable:visited {
    color: #fff;
    text-decoration: none;
}
.announcement-banner .announcement-cta {
    opacity: 1;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 2px;
}

/* Mobile: stack content vertically so CTA doesn't get pushed off */
@media (max-width: 640px) {
    .announcement-banner {
        flex-wrap: wrap;
        gap: 4px 8px;
        padding: 10px 16px;
        font-size: 0.78rem;
    }
    .announcement-banner .announcement-cta {
        width: 100%;
        margin: 2px 0 0;
    }
}

/* ========== Print Waitlist Modal (shared modal pattern, reusable) ========== */
.pb-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pb-modal[hidden] {
    display: none;
}
.pb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: pb-fade-in 0.2s ease;
}
.pb-modal-card {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 40px 32px 28px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    text-align: center;
    animation: pb-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
@keyframes pb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pb-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pb-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #777;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.pb-modal-close:hover {
    background: #f3f4f6;
    color: #111;
}
.pb-modal-icon {
    font-size: 44px;
    margin-bottom: 10px;
    line-height: 1;
}
.pb-modal-card h3 {
    font-size: 1.35rem;
    margin: 0 0 8px;
    font-weight: 700;
    color: #111;
}
.pb-modal-card > p {
    color: #555;
    margin: 0 0 22px;
    font-size: 0.95rem;
    line-height: 1.55;
}
.pb-modal-card #printWaitlistForm,
.pb-modal-card #fdPopupForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pb-modal-card #printWaitlistForm input[type="email"],
.pb-modal-card #fdPopupForm input[type="email"] {
    padding: 13px 16px;
    border: 2px solid #e2e5ea;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    width: 100%;
}
.pb-modal-card #printWaitlistForm input[type="email"]:focus,
.pb-modal-card #fdPopupForm input[type="email"]:focus {
    border-color: var(--accent, #01b497);
}
.pb-modal-card #printWaitlistForm button[type="submit"],
.pb-modal-card #fdPopupForm button[type="submit"] {
    width: 100%;
}
.pb-modal-error {
    color: #b91c1c;
    font-size: 0.85rem;
    margin: 4px 0 0;
    text-align: left;
}
.pb-modal-fineprint {
    margin: 14px 0 0;
    font-size: 0.78rem;
    color: #888;
    line-height: 1.45;
}
.pb-modal-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(1, 180, 151, 0.12);
    color: var(--accent, #01b497);
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.pb-modal-success .btn {
    margin-top: 18px;
}
@media (max-width: 480px) {
    .pb-modal-card {
        padding: 32px 22px 22px;
    }
    .pb-modal-card h3 {
        font-size: 1.2rem;
    }
}

/* ========== Guest Warning Banner ========== */
.guest-warning-banner {
    background: #fef3cd;
    border-bottom: 1px solid #ffc107;
    padding: 8px 0;
    font-size: 0.82rem;
    color: #664d03;
    position: relative;
    z-index: 999;
}
.guest-warning-banner.hidden { display: none; }
.guest-warning-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.guest-warning-inner svg { flex-shrink: 0; opacity: 0.7; }
.guest-warning-inner a {
    color: #00897b;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.guest-warning-inner a:hover { color: #00695c; }
.guest-warning-dismiss {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #664d03;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    opacity: 0.6;
    line-height: 1;
}
.guest-warning-dismiss:hover { opacity: 1; }

/* Low-resolution photo warning — informational, sits under the upload preview */
.photo-res-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.35;
}
.photo-res-warning.hidden { display: none; }
.photo-res-warning svg { flex-shrink: 0; margin-top: 1px; }
.photo-res-warning.ok {
    background: #fef3cd;
    border: 1px solid #ffc107;
    color: #664d03;
}
.photo-res-warning.low {
    background: #fde8e8;
    border: 1px solid #f4725e;
    color: #8a2c1d;
}
.photo-res-warning.good {
    background: #e6f7ee;
    border: 1px solid #34c759;
    color: #1a7a43;
}

/* Guest disabled state for buttons */
.btn-guest-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    position: relative;
}
.btn-guest-disabled::after {
    content: 'Sign in to use this feature';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
}
.btn-guest-disabled:hover::after { opacity: 1; }

/* ========== Header ========== */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 28px;
    width: auto;
}

.logo-text {
    color: var(--text-dark);
}

.logo-accent {
    color: var(--primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-link {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 0;
    position: relative;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-btn-outline {
    border: 1px solid var(--accent);
    border-radius: 10px;
    font-weight: 400;
    padding: 7px 16px;
    transition: background 0.2s, color 0.2s;
}
.nav-btn-outline:hover {
    background: var(--accent);
    color: #fff;
}

.cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.cart-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.cart-count {
    background: var(--primary);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.cart-count-bump {
    animation: cartBump 0.3s ease;
}

@keyframes cartBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.cart-btn:hover .cart-count {
    background: white;
    color: var(--primary);
}

/* ========== Mobile Hamburger Menu ========== */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10001;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-backdrop.active {
    display: block;
    opacity: 1;
}

body.mobile-menu-active {
    overflow: hidden;
}

/* ========== Nav Actions (Account + Cart) ========== */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Account Button */
.account-wrapper {
    position: relative;
}

.account-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
}

.account-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.account-btn.logged-in {
    border-color: var(--primary);
    color: var(--primary);
}

.account-btn.logged-in:hover {
    background: var(--primary);
    color: white;
}

/* Account notification badge */
.account-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    animation: notifPop 0.3s ease-out;
}
@keyframes notifPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Account Dropdown */
.account-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    z-index: 1000;
    overflow: hidden;
}

.account-dropdown.open {
    display: block;
}

.account-dropdown-header {
    padding: 14px 16px;
    background: var(--bg-light);
}

.account-user-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.account-user-email {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 2px;
}

.account-dropdown-divider {
    height: 1px;
    background: var(--border);
}

.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 0.85rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.15s;
}

.account-dropdown-item:hover {
    background: var(--bg-light);
}

.account-dropdown-item svg {
    opacity: 0.5;
}

.dropdown-notif-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: notifPop 0.3s ease-out;
}

.account-dropdown-logout {
    color: #d9534f;
}

.account-dropdown-logout:hover {
    background: #fef2f2;
}

/* ========== Auth Modal ========== */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-modal.hidden {
    display: none;
}

.auth-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
}

.auth-modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg, 16px);
    width: 100%;
    max-width: 420px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    z-index: 1;
    animation: authModalIn 0.2s ease-out;
}

@keyframes authModalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: var(--transition);
}

.auth-modal-close:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
}

.auth-tab-btn {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
}

.auth-tab-btn:hover {
    color: var(--text-dark);
}

.auth-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Auth Tab Content */
.auth-tab-content {
    display: none;
}

.auth-tab-content.active {
    display: block;
}

/* Auth Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.auth-field input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 180, 151, 0.1);
}

.auth-error {
    background: #fef2f2;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.85rem;
    border: 1px solid #fecaca;
}

.auth-submit-btn {
    margin-top: 4px;
    padding: 12px 24px;
    font-size: 0.95rem;
}

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Auth Verification / Reset Panels */
.auth-verify-header {
    text-align: center;
    margin-bottom: 20px;
}
.auth-verify-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    margin: 0 0 8px;
}
.auth-verify-header p {
    color: var(--text-light, #6b7280);
    font-size: 0.9rem;
    margin: 0;
}
.auth-code-input {
    text-align: center !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.5rem !important;
    font-family: 'Courier New', monospace !important;
    padding: 14px 12px !important;
}
.auth-resend {
    text-align: center;
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--text-light, #6b7280);
}
.auth-link-btn {
    background: none;
    border: none;
    color: var(--primary, #00bfa5);
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    font-weight: 500;
    padding: 0;
    text-decoration: underline;
}
.auth-link-btn:hover {
    color: var(--primary-dark, #019a81);
}
.auth-link-btn:disabled {
    color: var(--text-light, #6b7280);
    cursor: not-allowed;
    text-decoration: none;
}
.auth-forgot-link {
    text-align: right;
    margin: -4px 0 4px;
    font-size: 0.85rem;
}
.auth-back-link {
    text-align: center;
    margin-top: 16px;
    font-size: 0.85rem;
}
.auth-success {
    background: #f0fdf4;
    color: #166534;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    border: 1px solid #bbf7d0;
    margin-bottom: 12px;
}
.auth-hint {
    color: var(--text-light, #6b7280);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Mobile: Auth Modal responsive */
@media (max-width: 480px) {
    .auth-modal-content {
        max-width: 100%;
        margin: 16px;
        padding: 24px;
    }
    .auth-code-input {
        font-size: 1.3rem !important;
        letter-spacing: 0.3rem !important;
    }
}

/* ========== Hero Section ========== */
.hero {
    background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%);
    padding: 100px 0 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Hero — Background Video (sits behind overlay; CMS bg_image acts as poster) */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Admin Page Builder layout guides — toggled by 'Guides' button in toolbar.
   When body has .pb-show-guides, dashed colored outlines reveal the
   text and video boundaries inside the hero so admin can fine-tune positioning. */
.pb-show-guides .hero-content {
    outline: 2px dashed #01b497;
    outline-offset: 0;
    position: relative;
}
.pb-show-guides .hero-content::before {
    content: 'TEXT';
    position: absolute;
    top: -22px;
    left: 0;
    background: #01b497;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px 4px 0 0;
    z-index: 100;
    pointer-events: none;
}
.pb-show-guides .hero-side-video {
    outline: 2px dashed #334fb4;
    outline-offset: 0;
    position: relative;
}
.pb-show-guides .hero-side-video::after {
    content: 'VIDEO';
    position: absolute;
    top: -22px;
    right: 0;
    background: #334fb4;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px 4px 0 0;
    z-index: 100;
    pointer-events: none;
}
/* In background mode, mark the full-bleed video element */
.pb-show-guides .hero-video-bg {
    outline: 2px dashed #334fb4;
    outline-offset: -2px;
}
/* Mark the hero-grid container (overall layout area) — light dotted */
.pb-show-guides .hero-grid {
    outline: 1px dotted rgba(0,0,0,0.2);
    outline-offset: 0;
}

/* Hero — Side video layouts: video lives INSIDE .container as a grid sibling
   of .hero-content (HTML rendered with .hero-grid class on container).

   Layout strategy:
   - .hero-grid is always centered (margin: 0 auto)
   - Internal padding (var --hero-edge-pad) keeps video off the viewport edge
   - minmax(0, 1fr) on the text column lets text shrink/wrap rather than overflow
   - All dimensions are %, vw, or rem — fully responsive */
.hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--hero-video-w, 50%);
    /* Gap between text and video columns — admin-adjustable via --hero-grid-gap (default 3rem) */
    gap: var(--hero-grid-gap, 3rem);
    align-items: center;
    width: 100%;
    /* Match the global .container so hero edges align with the nav (logo on left, cart on right) */
    max-width: 1200px;
    margin: 0 auto;
    /* Base 24px = .container's padding, var(--hero-edge-pad) adds optional extra inset */
    padding: 0 calc(24px + var(--hero-edge-pad, 0%));
    box-sizing: border-box;
}
.hero-layout-left .hero-grid {
    grid-template-columns: var(--hero-video-w, 50%) minmax(0, 1fr);
}
/* Right Side: text col 1, video col 2 (default order via DOM) */
/* Left Side: video col 1, text col 2 — flip via order */
.hero-layout-left .hero-grid .hero-content { order: 2; }
.hero-layout-left .hero-grid .hero-side-video { order: 1; }

.hero-side-video {
    position: relative;
    /* Width: column width minus margin (var --hero-video-margin = visible left/right padding around video) */
    width: calc(100% - 2 * var(--hero-video-margin, 0%));
    margin-left: var(--hero-video-margin, 0%);
    margin-right: var(--hero-video-margin, 0%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    line-height: 0;
    /* No aspect-ratio / min-height / max-height — wrapper height comes from video's
       natural aspect ratio so the Guides outline matches what the user actually sees. */
    /* align-self is set as inline style by the renderer (start/center/end). */
}
.hero-side-video > video {
    width: 100%;
    height: auto;          /* derive height from video natural aspect ratio → no letterboxing */
    display: block;
    border-radius: inherit;
}

/* In side layout the text content takes its full grid cell — strip the default
   66% max-width and center alignment so it reads naturally on one side. */
.hero-layout-right .hero-content,
.hero-layout-left .hero-content {
    /* Admin-adjustable via --hero-content-w (default 100% = full grid cell). Lower it to
       narrow the text so it wraps earlier and clears the side image. Desktop only —
       the mobile media query forces 100% below. */
    max-width: var(--hero-content-w, 100%) !important;
    margin: 0 !important;
    text-align: left;
}
.hero-layout-right .hero-buttons,
.hero-layout-left .hero-buttons,
.hero-layout-right .trust-badges,
.hero-layout-left .trust-badges {
    justify-content: flex-start;
    margin-left: 0;
}
.hero-layout-right .hero-subtitle,
.hero-layout-left .hero-subtitle {
    margin: 0 0 40px;
    max-width: 100%;
    text-align: left;
}
/* hero-title at 3.5rem is fine at 50% width on desktop, but scale gracefully */
.hero-layout-right .hero-title,
.hero-layout-left .hero-title {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
}

/* Hero — Background Image Overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* Hero — Content Alignment */
.hero-align-left { text-align: left; }
.hero-align-left .hero-content { margin-left: 0; margin-right: auto; }
.hero-align-left .hero-subtitle { margin-left: 0; margin-right: auto; }
.hero-align-left .hero-buttons { justify-content: flex-start; }
.hero-align-left .trust-badges { justify-content: flex-start; }

.hero-align-right { text-align: right; }
.hero-align-right .hero-content { margin-left: auto; margin-right: 0; }
.hero-align-right .hero-subtitle { margin-left: auto; margin-right: 0; }
.hero-align-right .hero-buttons { justify-content: flex-end; }
.hero-align-right .trust-badges { justify-content: flex-end; }

/* ─── Hero Hotspots ─── */
.hotspots-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    z-index: 3;
}

/* Pulsing dot */
.hotspot-dot {
    position: relative;
    width: 16px;
    height: 16px;
}

.hotspot-dot-inner {
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    z-index: 2;
}

.hotspot-ping {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    animation: hotspot-pulse 2s ease-out infinite;
}
.hotspot-ping:nth-child(2) {
    animation-delay: 1s;
}

@keyframes hotspot-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Ring — hidden default, shown on hover */
.hotspot-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.25s ease;
    pointer-events: none;
}
.hotspot-ring svg {
    width: 100%;
    height: 100%;
    display: block;
}
.hotspot-ring circle {
    fill: none;
    stroke: rgba(255,255,255,0.7);
    stroke-width: 2;
}
.hotspot:hover .hotspot-ring,
.hotspot.touch-active .hotspot-ring {
    transform: translate(-50%, -50%) scale(1);
}

/* Pill label */
.hotspot-pill {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.hotspot:hover .hotspot-pill,
.hotspot.touch-active .hotspot-pill {
    opacity: 1;
    pointer-events: auto;
}

.hotspot-pill-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Pill direction: left */
.hotspot.pill-left .hotspot-pill {
    left: auto;
    right: calc(100% + 12px);
}

.hero-content {
    max-width: var(--hero-content-w, 66%);
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 24px;
    line-height: 1.15;
    white-space: normal;
}

.hero-small {
    font-size: 0.85em;
    font-weight: 600;
}

.hero-accent {
    color: var(--primary);
}

.hero-subtitle {
    font-size: 1.1rem;
    max-width: 100%;
    margin: 0 auto 40px;
    color: var(--text-medium);
}

.hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-btn-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero-align-left .hero-btn-wrap,
.hero-align-right .hero-btn-wrap {
    align-items: center;
}

/* Equal-width hero CTA pair — the primary (blue) button matches the wider
   secondary so both buttons are the same width. */
.hero-buttons .btn {
    min-width: 208px;
}

.hero-btn-hint {
    display: block;
    color: #888;
    font-size: 0.8rem;
    font-weight: 400;
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-top: 60px;
    flex-wrap: nowrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-medium);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.trust-badge svg {
    color: var(--primary);
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: white;
}

.btn-primary:disabled {
    background: var(--border);
    border-color: var(--border);
    color: var(--text-light);
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--text-dark);
    border-color: var(--border-dark);
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-ai {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    width: 100%;
}

.btn-ai:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-full {
    width: 100%;
}

.btn-large {
    padding: 18px 36px;
    font-size: 1.1rem;
}

/* ========== Section Styles ========== */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ========== Products Section ========== */
.products-section {
    padding: 100px 0;
}

.category-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.category-tab {
    padding: 12px 28px;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-medium);
    cursor: pointer;
    transition: var(--transition);
}

.category-tab:hover,
.category-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
}

.product-card {
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.product-icon-wrapper {
    height: 180px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.product-icon {
    width: 80px;
    height: 80px;
    color: var(--primary);
}

.product-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 6px 14px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
}

.product-badge.bestseller {
    background: var(--secondary);
}

.product-info {
    padding: 24px;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.product-desc {
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 16px;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

/* ========== Product Groups Grid ========== */
.product-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}
/* Admin-controlled column overrides (Page Editor → Products → Grid Columns).
   Mobile media query below collapses to 1 column regardless. */
.product-groups-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-groups-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-groups-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) {
    .product-groups-grid--cols-2,
    .product-groups-grid--cols-3,
    .product-groups-grid--cols-4 {
        grid-template-columns: 1fr;
    }
}

.product-group-card {
    position: relative;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Site-wide sale ribbon on the home "Our Products" category cards (over the left icon, top-left). */
.pb-sale-ribbon-home {
    position: absolute;
    top: 24px;
    right: -56px;
    width: 210px;
    text-align: center;
    transform: rotate(45deg);
    background: #3b7dd8;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    padding: 9px 0;
    z-index: 4;
    pointer-events: none;
}

.product-group-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(1, 180, 151, 0.22);
    border-color: var(--accent);
}

.group-card-icon {
    width: 240px;
    min-height: 220px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.group-card-icon svg {
    width: 56px;
    height: 56px;
    color: var(--primary);
}

.group-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
}

.group-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.group-card-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.group-card-desc {
    font-size: 0.88rem;
    color: var(--text-medium);
    margin-bottom: 12px;
    line-height: 1.5;
}

.group-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.group-card-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    padding: 4px 12px;
    border-radius: 20px;
}

.group-card-arrow {
    color: var(--text-light);
    transition: var(--transition);
}

.product-group-card:hover .group-card-arrow {
    color: var(--accent);
    transform: translateX(4px);
}

/* ========== Product List View ========== */
.product-list-view {
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.back-to-groups-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    font-weight: 500;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 24px;
}

.back-to-groups-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.group-title {
    font-size: 2rem;
    margin-bottom: 8px;
}

.group-description {
    font-size: 1.05rem;
    color: var(--text-medium);
    margin-bottom: 36px;
}

/* ========== Products Gallery (within group) ========== */
.products-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 1024px) { .products-gallery { grid-template-columns: 1fr 1fr; } }

.product-gallery-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
}
.gallery-card-meta {
    margin: 0;
    line-height: 1.5;
}

.product-gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(1, 180, 151, 0.22);
    border-color: var(--accent);
}

.gallery-card-image {
    aspect-ratio: 1 / 1;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-gallery-card:hover .gallery-card-image img {
    transform: scale(1.05);
}

.gallery-card-image .product-icon {
    width: 72px;
    height: 72px;
    color: var(--primary);
    opacity: 0.6;
}

.gallery-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    background: var(--secondary);
    color: white;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.gallery-card-body {
    padding: 20px;
}

.gallery-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.gallery-card-desc {
    font-size: 0.85rem;
    color: var(--text-medium);
    margin-bottom: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-card-sizes {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.gallery-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gallery-card-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}

.gallery-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-card-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ========== How It Works ========== */
.how-it-works {
    padding: 100px 0;
    background: var(--bg-light);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.step {
    text-align: center;
    position: relative;
}

.step-number {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.step-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.step-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.step-desc {
    font-size: 0.9rem;
    color: var(--text-medium);
}

/* ========== Features Section ========== */
.features-section {
    padding: 100px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.feature-card {
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: var(--transition);
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.feature-title {
    margin-bottom: 12px;
}

.feature-desc {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ========== Design Studio ========== */
.design-studio {
    padding: 0 0 100px;
    background: var(--bg-light);
    min-height: 100vh;
}

.studio-header {
    display: none; /* replaced by wizard-nav */
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.back-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.studio-title {
    font-size: 1.5rem;
}

/* Wizard Sticky Nav */
.wizard-nav {
    position: sticky;
    top: 69px; /* fallback, JS will set exact value from header.offsetHeight */
    z-index: 999;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border);
    /* break out of container to full viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0;
}

/* Ensure wizard content doesn't hide under sticky header + wizard nav */
.wizard-content.active {
    scroll-margin-top: 130px; /* header (~69px) + wizard-nav (~55px) + padding */
}

.wizard-nav-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.wizard-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 12px 12px 12px 0;
    white-space: nowrap;
    transition: color 0.2s;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    padding-right: 16px;
}

.wizard-back-btn:hover {
    color: var(--primary);
}

/* Wizard Steps */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: center;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.82rem;
    transition: color 0.2s;
}

.wizard-step.active {
    color: var(--primary);
}

.wizard-step.completed {
    color: var(--primary);
}

.wizard-step-number {
    width: 26px;
    height: 26px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.2s;
}

.wizard-step.active .wizard-step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.wizard-step.completed .wizard-step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.wizard-step.clickable {
    cursor: pointer;
}

.wizard-step.clickable:hover {
    opacity: 0.75;
}

.wizard-step.clickable:hover .wizard-step-number {
    transform: scale(1.1);
}

.wizard-step-label {
    white-space: nowrap;
}

.wizard-connector {
    width: 32px;
    height: 2px;
    background: var(--border);
    flex-shrink: 0;
}

/* Wizard Content */
.wizard-content {
    display: none;
}

.wizard-content.active {
    display: block;
    padding-top: 40px;
}

/* Step 1: Two-column layout (gallery + options) */
.step1-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Product Image Gallery */
.product-gallery {
    position: sticky;
    top: 120px;
    align-self: start;
}

.gallery-main-image {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 12px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.gallery-thumbnails {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gallery-thumb {
    width: 56px;
    height: 56px;
    border: 2px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    padding: 2px;
    transition: border-color 0.2s;
    background: #fff;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--primary);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.step-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px;
}

.panel-title {
    font-size: 1.1rem;
    margin-bottom: 24px;
    color: var(--text-dark);
}

/* Size Selection */
.size-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}

.size-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.size-option input {
    display: none;
}

.size-option:hover {
    border-color: var(--primary);
}

.size-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.size-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 8px;
}

.size-price {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Additional Options */
.additional-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.option-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.option-checkbox input {
    display: none;
}

.option-checkbox:hover {
    border-color: var(--primary);
}

.option-checkbox.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.option-label {
    font-weight: 500;
}

.option-price {
    color: var(--primary);
    font-weight: 600;
}

.no-options {
    color: var(--text-light);
    text-align: center;
    padding: 20px;
}

/* Solid Color Selector for Table Cloths */
.solid-color-selector {
    margin-bottom: 24px;
}

.options-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.color-swatch {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.color-swatch:hover {
    transform: scale(1.1);
}

.color-swatch.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.color-swatch.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.color-swatch[data-color="#ffffff"].selected::after,
.color-swatch[data-color="#FFFFFF"].selected::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301b497' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Price Summary */
.price-summary {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 32px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.95rem;
}

.price-row.total {
    border-top: 2px solid var(--border);
    margin-top: 12px;
    padding-top: 16px;
    font-size: 1.25rem;
    font-weight: 700;
}

.price-row.total span:last-child {
    color: var(--primary);
}

/* Design Types */
.design-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.design-type-card {
    padding: 40px 24px;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.design-type-card:hover:not(.disabled) {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.design-type-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.design-type-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.design-type-icon {
    margin-bottom: 20px;
    color: var(--primary);
}

.design-type-title {
    margin-bottom: 12px;
}

.design-type-desc {
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 16px;
}

.design-type-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
}

.design-type-tag.coming-soon {
    background: var(--text-light);
}

/* Pro Designer CTA */
.pro-designer-cta {
    margin-top: 24px;
}

.pro-designer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 28px;
    background: var(--accent-light);
    border: 1px solid rgba(59, 125, 216, 0.15);
    border-radius: 12px;
}

.pro-designer-cta-icon {
    display: none;
}

.pro-designer-cta-text {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.pro-designer-cta-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.pro-designer-cta-desc {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
}

.pro-designer-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--accent);
    color: white;
    border: 2px solid var(--accent);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
}

.pro-designer-cta-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: white;
}

@media (max-width: 768px) {
    .pro-designer-cta-inner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 10px;
    }
}

/* Step Navigation */
.step-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

/* Step 3 nav - position within workspace flow */
#step3 .step-nav {
    margin-top: 16px;
    align-items: center;
}
.btn-step3-review {
    padding: 8px 20px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Design Workspace */
.design-workspace {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
}

.design-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.control-panel {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.control-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

/* Locked state — disabled until logo is uploaded */
.control-section.section-locked {
    opacity: 0.4;
    pointer-events: none;
}

.control-section:last-child {
    border-bottom: none;
}

.control-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    margin-bottom: 12px;
    cursor: pointer;
    user-select: none;
    padding-right: 28px;
    position: relative;
}
.control-title::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #999;
    transition: transform 0.2s ease;
}
.control-section.collapsed .control-title {
    margin-bottom: 0;
}
.control-section.collapsed .control-title::after {
    transform: translateY(-50%) rotate(-90deg);
}
.control-section.collapsed > *:not(.control-title) {
    display: none !important;
}

/* Layer Panel */
.layer-panel-toggle {
    cursor: pointer;
    user-select: none;
}
.layer-panel-toggle svg {
    margin-right: 6px;
    vertical-align: middle;
}
.layer-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 300px;
    overflow-y: auto;
    padding: 2px 0;
}
.layer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    background: #fff;
    position: relative;
}
.layer-row:hover {
    background: var(--bg-light);
}
.layer-row.layer-selected {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.05);
}
/* Drop indicator: a clear gap opens + a bold insertion bar shows exactly where
   the layer will land (the old 2px line was too easy to miss). */
/* Insertion indicator: an ABSOLUTE bar at the row edge. Must NOT use margin —
   margin reflows the list mid-drag (pushes rows under the cursor away), which
   made `drop` land on a gap or the wrong row → "roulette". Bar straddles the
   boundary without moving any row, so drops always hit the intended target. */
.layer-row.drag-over-top::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 2px;
    right: 2px;
    height: 5px;
    background: var(--primary, #01b497);
    border-radius: 3px;
    box-shadow: 0 0 0 3px rgba(1, 180, 151, 0.22);
    z-index: 3;
}
.layer-row.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
    height: 5px;
    background: var(--primary, #01b497);
    border-radius: 3px;
    box-shadow: 0 0 0 3px rgba(1, 180, 151, 0.22);
    z-index: 3;
}
.layer-row.layer-dragging {
    opacity: 0.4;
}
.layer-row-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #666;
}
.layer-row-icon svg {
    width: 16px;
    height: 16px;
}
.layer-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}
.layer-row.layer-row-background {
    background: var(--bg-light, #f8f9fa);
    cursor: default;
}
.layer-row.layer-row-background:hover {
    background: var(--bg-light, #f8f9fa);
}
.layer-row.layer-row-background .layer-row-icon {
    color: #94a3b8;
}
.layer-row.layer-row-background .layer-row-name {
    color: #64748b;
    font-style: italic;
}
.layer-row-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #e2e8f0;
    color: #64748b;
}
.layer-row-drag {
    flex-shrink: 0;
    cursor: grab;
    color: #bbb;
    display: flex;
    align-items: center;
    padding: 2px;
    transition: color 0.15s;
    /* Pointer-Events reorder: stop the touch-drag from scrolling the layers panel. */
    touch-action: none;
}
.layer-row-drag:hover {
    color: #666;
}
.layer-row-drag svg {
    width: 14px;
    height: 14px;
}

/* Layer visibility toggle */
.layer-row-visibility {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #888;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    margin: 0 2px;
}
.layer-row-visibility:hover {
    color: #333;
    background: rgba(0,0,0,0.06);
}
.layer-row-visibility svg {
    width: 14px;
    height: 14px;
}

/* Layer delete button */
.layer-row-delete {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #bbb;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    margin: 0 2px;
}
.layer-row-delete:hover {
    color: #e53e3e;
    background: rgba(229, 62, 62, 0.08);
}
.layer-row-delete svg {
    width: 12px;
    height: 12px;
}

/* Hidden layer row */
.layer-row.layer-hidden {
    opacity: 0.45;
}
.layer-row.layer-hidden .layer-row-name {
    text-decoration: line-through;
    color: #999;
}

/* Opacity controls wrapper */
.layer-row-opacity-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Opacity slider */
.layer-row-slider {
    width: 50px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
}
.layer-row-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary, #22c55e);
    cursor: pointer;
    border: none;
}
.layer-row-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary, #22c55e);
    cursor: pointer;
    border: none;
}

/* Opacity number input */
.layer-row-opacity {
    width: 34px;
    height: 20px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
    padding: 0 1px;
    background: #fff;
    color: #333;
    flex-shrink: 0;
    -moz-appearance: textfield;
}
.layer-row-opacity::-webkit-inner-spin-button,
.layer-row-opacity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.layer-row-opacity:focus {
    outline: none;
    border-color: var(--primary, #22c55e);
}
.layer-row-opacity-sign {
    font-size: 10px;
    color: #999;
    flex-shrink: 0;
}

/* 3D Preview Button in preview-header — matches .btn .btn-primary sizing */
.btn-step3-3d {
    padding: 8px 20px;
    font-size: 0.85rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--border) !important;
    background: #fff !important;
    color: #555;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    margin-right: 8px;
}
.btn-step3-3d:hover {
    border-color: var(--primary) !important;
    color: var(--primary);
    background: rgba(16, 185, 129, 0.04) !important;
}
.btn-step3-3d.toolbar-btn-active,
.btn-step3-3d.toolbar-btn-active:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.btn-step3-3d.active-3d {
    background: var(--primary) !important;
    color: #fff;
    border-color: var(--primary) !important;
}

/* Step 3 Mockup Preview */
.step3-mockup-preview {
    width: 100%;
    min-height: 400px;
    background: #f8f8f8;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.step3-mockup-preview .threejs-container {
    width: 100%;
    height: 500px;
}
.step3-mockup-preview .mockup-hint {
    text-align: center;
    padding: 8px;
    font-size: 0.75rem;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.control-number {
    width: 22px;
    height: 22px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Upload Zone */
.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-light);
}

.upload-zone svg {
    width: 32px;
    height: 32px;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.upload-zone svg {
    color: var(--text-light);
    margin-bottom: 16px;
}

.upload-zone p {
    font-weight: 500;
    margin-bottom: 4px;
}

.upload-zone span {
    font-size: 0.85rem;
    color: var(--text-light);
}

.uploaded-image {
    display: inline-block;
    position: relative;
}

.uploaded-image img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
}

#uploadedLogo {
    display: block;
    min-height: 80px;
    max-width: 100%;
    text-align: center;
}

/* Inline-block wrapper around an uploaded <img> + its remove (X) button.
   The X is positioned relative to THIS wrapper, so it always lands at the
   top-right corner of the image itself — not of the parent section, which
   for #uploadedLogo is full-width (block-level, needed to constrain SVGs).
   line-height: 0 prevents an inline-baseline descender gap on the photo
   side where the <img> is inline (no per-element `display: block` style). */
.uploaded-image-wrap {
    position: relative !important;
    display: inline-block !important;
    line-height: 0;
    max-width: 100%;
}
.uploaded-image-wrap > img {
    display: block;
}

/* Multi-photo: thumbnails laid out side-by-side. The big single preview
   (#uploadedImage) is hidden — the thumbnail row is the photo UI. */
#uploadedImage { display: none !important; }
#photoLayersContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.photo-thumb {
    position: relative;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    cursor: pointer;
}
.photo-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
    box-sizing: border-box;
    background: #f3f4f6;
    transition: border-color 0.15s;
}
.photo-thumb.active .photo-thumb-img {
    border-color: var(--primary, #01b497);
}
.photo-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-thumb-x {
    /* Force top-right; !important + explicit left/bottom auto so no stray cascade
       rule (the bottom-left placement bug) can flip it. */
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    left: auto !important;
    bottom: auto !important;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.photo-thumb-x:hover { background: #b91c1c; }
.photo-thumb-x svg { width: 10px; height: 10px; }

/* X button in top-right corner — !important on positioning anchors so no
   stray rule elsewhere in the cascade can flip it to the opposite corner
   (the bottom-left placement bug we kept hitting). */
.remove-x-btn {
    position: absolute !important;
    top: -7px !important;
    right: -7px !important;
    bottom: auto !important;
    left: auto !important;
    width: 20px;
    height: 20px;
    padding: 0;
    background: #e74c3c;
    border: 2px solid white;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.remove-x-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.remove-x-btn svg {
    width: 10px;
    height: 10px;
}

/* Button small variant */
.btn-small {
    padding: 8px 14px;
    font-size: 0.8rem;
}

.btn-small svg {
    margin-right: 6px;
}

/* Remove text layer button */
.remove-text-layer-btn,
.remove-logo-text-layer-btn,
.remove-pattern-text-layer-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-light);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-text-layer-btn:hover,
.remove-logo-text-layer-btn:hover,
.remove-pattern-text-layer-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

/* Text layer checkbox with remove button */
.setting.checkbox-setting {
    display: flex;
    align-items: center;
}

/* QR layer row - icon + url + color + remove */
.qr-layer {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.qr-layer:last-child { border-bottom: none; }
.qr-layer.qr-layer-active {
    background: rgba(var(--primary-rgb, 72,187,120), 0.08);
    border-radius: 6px;
    padding: 6px 8px;
    margin: 0 -8px;
}
.qr-layer-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.qr-layer-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #666;
}
.qr-layer-url {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qr-layer-settings {
    padding: 8px 0 4px 24px;
}
.qr-layer-settings .setting-inline {
    margin-bottom: 6px;
}
.qr-layer-settings input[type="url"] {
    width: 100%;
    font-size: 0.8rem;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}
.qr-layer-settings input[type="url"]:focus {
    outline: none;
    border-color: var(--primary);
}

/* Text layer inline row - checkbox + input + color + remove */
.text-layer-row {
    display: flex;
    /* flex-start so the checkbox/color/remove align to the first line when the
       text-layer-content <textarea> grows to multiple lines. */
    align-items: flex-start;
    gap: 8px;
}

.text-layer-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary);
    margin-top: 9px; /* vertically align with the first line of the text field */
}

/* The text field is a <textarea> (so Enter inserts newlines). Replicate the old
   input[type=text] styling (that selector no longer matches a textarea). */
.text-layer-row input[type="text"],
.text-layer-row .text-layer-content {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font-size: 0.8rem;
    font-family: inherit;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
}
.text-layer-row .text-layer-content {
    resize: none;
    overflow: hidden;
    line-height: 1.35;
    min-height: 34px;
    box-sizing: border-box;
    display: block;
}

.text-layer-row input[type="text"]:focus,
.text-layer-row .text-layer-content:focus {
    outline: none;
    border-color: var(--primary);
}

/* Background Type Selector */
.bg-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.bg-type-btn {
    flex: 1;
    padding: 12px 8px;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.bg-type-btn:hover,
.bg-type-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.bg-options {
    margin-top: 16px;
}

.bg-options label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 10px;
}

.color-picker {
    width: 100%;
    height: 60px;
    min-height: 60px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius-md) - 4px);
}

.color-picker::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--radius-md) - 4px);
}

.gradient-colors {
    display: flex;
    gap: 12px;
}

.gradient-colors .color-picker {
    flex: 1;
}

.bg-options textarea {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 12px;
}

.bg-options textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Text Options */
.text-input {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.text-input:focus {
    outline: none;
    border-color: var(--primary);
}

.text-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.text-option {
    display: flex;
    align-items: center;
    gap: 12px;
}

.text-option label {
    font-size: 0.9rem;
    color: var(--text-medium);
    min-width: 80px;
}

.text-option input[type="range"] {
    flex: 1;
}

.color-picker-small {
    width: 50px;
    height: 40px;
    min-width: 50px;
    min-height: 40px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.color-picker-small::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-small::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
}

.color-picker-small::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
}

.font-select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 16px;
    cursor: pointer;
}

.font-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Pattern Options */
.pattern-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .pattern-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pattern-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: var(--bg-light);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.pattern-btn svg {
    width: 20px;
    height: 20px;
}

.pattern-btn:hover,
.pattern-btn.active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.pattern-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting label {
    font-size: 0.8rem;
    color: var(--text-medium);
}

/* All range sliders — custom styled */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    outline: none;
}

/* WebKit track — transparent (input bg shows through) */
input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

/* Firefox track — white with gray outline */
input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #ccc;
}

/* Firefox filled portion — green */
input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px 0 0 3px;
    background: var(--primary);
}

/* Thumb — green circle */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    margin-top: -7px;
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.setting input[type="range"] {
    width: 100%;
}

.setting input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-family: inherit;
}

.setting input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

/* Inline setting - label and control on same row */
.setting-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.setting-inline label {
    font-size: 0.8rem;
    color: var(--text-medium);
    white-space: nowrap;
}

.setting-inline input[type="range"] {
    flex: 1;
    max-width: 120px;
}

/* Inline color pickers - consistent size everywhere */
.setting-inline input[type="color"],
.text-layer-row input[type="color"] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border: 2px solid var(--border);
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex-shrink: 0;
}

.setting-inline input[type="color"]::-webkit-color-swatch-wrapper,
.text-layer-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.setting-inline input[type="color"]::-webkit-color-swatch,
.text-layer-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.setting-inline input[type="color"]::-moz-color-swatch,
.text-layer-row input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.setting-inline span {
    font-size: 0.75rem;
    color: var(--text-light);
    min-width: 40px;
    text-align: right;
}

.checkbox-setting label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.checkbox-setting input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* Sub-settings (nested under checkboxes) */
.sub-settings {
    margin-left: 8px;
    padding-left: 10px;
    border-left: 2px solid var(--border);
    margin-top: 6px;
}

.sub-settings .setting {
    margin-bottom: 8px;
}

.sub-settings .setting:last-child {
    margin-bottom: 0;
}

/* Compact font select */
.font-select {
    padding: 4px 8px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Compact color picker - override */
.setting-inline .color-picker-small {
    width: 40px;
    height: 32px;
    min-width: 40px;
    min-height: 32px;
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 3px;
    flex-shrink: 0;
}

/* Slider row alignment (pattern controls) */
.slider-row label {
    min-width: 60px;
    flex-shrink: 0;
}

.slider-row input[type="range"] {
    flex: 1;
    min-width: 80px;
}

.slider-row span {
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}

/* Slider reset button — icon-only, subtle */
.slider-reset-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    flex-shrink: 0;
    transition: var(--transition);
    opacity: 0.4;
}

.slider-reset-btn:hover {
    color: var(--primary);
    opacity: 1;
    background: var(--primary-light);
}

/* Text layers */
.text-layer,
.logo-text-layer {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.text-layer:last-child,
.logo-text-layer:last-child {
    border-bottom: none;
}

/* Highlight for sidebar text layer that corresponds to canvas selection */
.text-layer.text-layer-selected,
.logo-text-layer.text-layer-selected {
    background: rgba(79, 70, 229, 0.08);
    border-left: 3px solid var(--primary);
    padding-left: 9px;
    border-radius: 6px;
    transition: background 0.15s ease, border-left 0.15s ease;
}

.text-layer .sub-settings,
.logo-text-layer .sub-settings {
    margin-top: 6px;
    margin-left: 0;
    padding-left: 26px;
    border-left: none;
}

/* Setting hint text */
.setting-hint {
    font-size: 0.7rem;
    color: var(--text-light);
    margin: 4px 0 0 0;
    font-style: italic;
}

/* Position Controls */
.position-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.position-grid {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 180px;
}

.position-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.position-btn svg {
    width: 14px;
    height: 14px;
}

.position-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.position-btn.center-btn {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.position-btn.center-btn:hover {
    background: var(--primary-dark);
}

.position-btn[data-direction="up"] {
    grid-column: 2;
    grid-row: 1;
}

.position-btn[data-direction="left"] {
    grid-column: 1;
    grid-row: 2;
}

.position-btn[data-direction="center"] {
    grid-column: 2;
    grid-row: 2;
}

.position-btn[data-direction="right"] {
    grid-column: 3;
    grid-row: 2;
}

.position-btn[data-direction="down"] {
    grid-column: 2;
    grid-row: 3;
}

/* Preview Panel */
.design-preview {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: sticky;
    top: 100px;
    text-align: center;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    text-align: left;
}

.preview-header h4 {
    margin: 0;
    font-size: 1rem;
    flex-shrink: 0;
}

.preview-header #previewSize {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-light, #999);
    font-weight: 400;
}

/* Preview Options */
.preview-options {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.preview-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-medium);
}

.preview-options input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.canvas-wrapper {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
    display: inline-block;
    max-width: 100%;
    /* Disable native touch scroll/zoom inside the canvas so Pointer Events
       fire immediately for drag/resize/rotate on mobile. The page still
       scrolls normally outside the canvas. */
    touch-action: none;
}

.canvas-wrapper canvas {
    display: block;
}

/* Floating tools — Figma-style panel anchored to VIEWPORT bottom (always visible while scrolling).
   Hides automatically when its ancestor (step3 / canvas-wrapper) is display:none — i.e. on other
   wizard steps or when 3D mockup mode is active. */
.floating-tools {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 100;
    /* Restore touch interactions; the canvas-wrapper disables them. */
    touch-action: auto;
    user-select: none;
    max-width: calc(100vw - 32px);
}
/* Background dropdown opens UPWARD (toolbar is at the bottom of the screen) */
.floating-tools .toolbar-dropdown {
    top: auto;
    bottom: calc(100% + 8px);
}
/* Tablet — slightly closer to bottom edge */
@media (max-width: 1024px) {
    .floating-tools {
        bottom: 16px;
    }
}
/* Mobile — single clearly-visible row LIFTED above the two bottom-corner FABs
   (help "?" bottom-left #pbTutHelpBtn, Crisp chat bottom-right) so nothing overlaps.
   Stays centered (base rule: left:50% + translateX(-50%)); JS clears its inline
   left/bottom on mobile so this CSS owns the position. */
@media (max-width: 768px) {
    .floating-tools {
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        padding: 8px 8px;
        gap: 4px;
        max-width: calc(100vw - 16px);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    }
    .floating-tools::-webkit-scrollbar {
        display: none;
    }
    /* Scoped to the floating toolbar only — .toolbar-btn is also used by the top
       toolbar (save/undo/redo/zoom/align); do NOT resize those. flex:0 0 auto keeps
       36px touch targets (never shrink); all 8 fit a 375px phone, scroll only below. */
    .floating-tools .toolbar-btn {
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
    }
    /* Drop the decorative divider on mobile to reclaim width so all 8 tools fit
       without a scroll on a 375px phone. */
    .floating-tools .toolbar-divider {
        display: none;
    }
}

/* Bleed Marks Overlay */
.bleed-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
}

.bleed-overlay.active {
    display: block;
}

.bleed-mark {
    position: absolute;
    background: #ff0000;
}

/* Corner marks */
.bleed-mark.corner-tl-h { top: 10px; left: 0; width: 15px; height: 1px; }
.bleed-mark.corner-tl-v { top: 0; left: 10px; width: 1px; height: 15px; }
.bleed-mark.corner-tr-h { top: 10px; right: 0; width: 15px; height: 1px; }
.bleed-mark.corner-tr-v { top: 0; right: 10px; width: 1px; height: 15px; }
.bleed-mark.corner-bl-h { bottom: 10px; left: 0; width: 15px; height: 1px; }
.bleed-mark.corner-bl-v { bottom: 0; left: 10px; width: 1px; height: 15px; }
.bleed-mark.corner-br-h { bottom: 10px; right: 0; width: 15px; height: 1px; }
.bleed-mark.corner-br-v { bottom: 0; right: 10px; width: 1px; height: 15px; }

/* Bleed area indicator */
.bleed-area {
    position: absolute;
    inset: 8px;
    border: 2px dashed rgba(255, 100, 0, 0.7);
    pointer-events: none;
    background: rgba(255, 100, 0, 0.05);
}

.bleed-area::before {
    content: 'SAFE AREA';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 100, 0, 0.8);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.bleed-area::after {
    content: attr(data-label);
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: rgba(255, 100, 0, 0.8);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}

.loading-indicator {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: var(--radius-lg);
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Review Panel */
.review-panel {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.review-preview {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.review-preview h3 {
    margin-bottom: 24px;
}

.final-preview {
    background: #f0f0f0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.final-preview canvas {
    width: 100%;
    display: block;
}

/* Preview View Toggle */
.preview-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Share button sits on the right of the Flat/3D toggle row (Review step) */
.share-design-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Share modal — "Follow & tag us" row */
.share-follow-row {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.share-follow-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.share-follow-links {
    display: flex;
    gap: 10px;
}
.share-follow-link {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--primary);
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.share-follow-link:hover { transform: translateY(-2px); opacity: 0.9; }

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-white);
    color: var(--text-medium);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.view-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.view-toggle-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.view-toggle-btn.active svg {
    stroke: white;
}

/* 3D Mockup Preview - Three.js */
.mockup-preview {
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 50%, #ddd 100%);
    border-radius: var(--radius-md);
    padding: 0;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}

/* Fullscreen mode */
.mockup-preview.mockup-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    border-radius: 0;
    min-height: unset;
    background: linear-gradient(180deg, #f0f0f0 0%, #e0e0e0 50%, #d5d5d5 100%);
}

.mockup-preview.mockup-fullscreen .threejs-container {
    height: 100% !important;
    flex: 1;
}

/* Fullscreen button */
.mockup-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.mockup-fullscreen-btn:hover {
    background: rgba(255,255,255,1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transform: scale(1.05);
}

.mockup-fullscreen-btn svg {
    stroke: var(--text-dark, #333);
}

.threejs-container {
    width: 100%;
    height: 420px;
    cursor: grab;
}

.threejs-container:active {
    cursor: grabbing;
}

.threejs-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Legacy CSS mockup styles - kept for fallback */
.mockup-scene {
    display: none; /* Hidden when using Three.js */
}

.mockup-pole-legacy {
    width: 7px;
    height: 10px;
    background: linear-gradient(90deg, #a0a0a0 0%, #d8d8d8 30%, #e8e8e8 50%, #d8d8d8 70%, #a0a0a0 100%);
    border-radius: 0 0 1px 1px;
}

/* Base Unit - The cassette housing */
.mockup-base {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
}

/* Top of base - silver lip */
.mockup-base-top {
    width: calc(100% + 16px);
    height: 8px;
    background: linear-gradient(180deg, #e8e8e8 0%, #c8c8c8 30%, #b0b0b0 70%, #a0a0a0 100%);
    border-radius: 2px 2px 0 0;
}

/* Main base body - dark cassette */
.mockup-base-body {
    width: calc(100% + 16px);
    height: 20px;
    background: linear-gradient(180deg, #8a8a8a 0%, #6a6a6a 20%, #5a5a5a 50%, #4a4a4a 80%, #3a3a3a 100%);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    position: relative;
}

/* Slot line on cassette */
.mockup-base-body::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: rgba(0,0,0,0.4);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
}

/* Feet - angled supports */
.mockup-feet {
    display: flex;
    justify-content: space-between;
    width: 170px;
    margin-top: 3px;
    transform-style: preserve-3d;
}

.mockup-foot {
    width: 65px;
    height: 7px;
    background: linear-gradient(180deg, #888 0%, #666 40%, #555 100%);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    position: relative;
}

/* Highlight on feet */
.mockup-foot::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    border-radius: 1px;
}

.mockup-foot.left {
    transform: rotateZ(-18deg);
    transform-origin: right center;
}

.mockup-foot.right {
    transform: rotateZ(18deg);
    transform-origin: left center;
}

/* Drag hint */
.mockup-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--text-medium);
    background: rgba(255,255,255,0.7);
    border-radius: 20px;
    margin: 10px 0;
}

.mockup-hint svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.mockup-note {
    font-size: 0.68rem;
    color: var(--text-light);
    text-align: center;
    opacity: 0.5;
    padding-bottom: 10px;
}

.review-summary {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.review-summary h3 {
    margin-bottom: 24px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 0.95rem;
}

.summary-item span:first-child {
    color: var(--text-medium);
}

.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
}

.summary-item.total {
    font-size: 1.25rem;
    font-weight: 700;
}

.summary-item.total span:last-child {
    color: var(--primary);
}

#addToCart {
    margin-top: 24px;
    margin-bottom: 12px;
}

#downloadPDF {
    margin-bottom: 0;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 1.25rem;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-dark);
}

/* Added to Cart Modal */
.added-to-cart-modal {
    max-width: 400px;
    text-align: center;
    padding: 40px 32px 32px;
}

.added-to-cart-icon {
    margin-bottom: 16px;
}

.added-to-cart-icon svg {
    animation: checkmark-pop 0.4s ease-out;
}

@keyframes checkmark-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.added-to-cart-modal h2 {
    font-size: 1.5rem;
    margin: 0 0 8px;
    color: var(--text-dark);
}

.added-to-cart-product {
    color: var(--text-light);
    margin: 0 0 28px;
    font-size: 0.95rem;
}

.guest-cart-prompt-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef9e7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.4;
}
.guest-cart-prompt-note svg { flex-shrink: 0; margin-top: 1px; }
.btn-text {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 8px;
}
.btn-text:hover { color: var(--text); text-decoration: underline; }

.added-to-cart-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Download Section — Order Confirmation page */
.download-section {
    text-align: center;
    margin: 24px 0;
    padding: 24px;
    background: var(--bg-light, #f8f9fa);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 12px;
}
.download-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.download-section-header h3 {
    margin: 0;
    font-size: 1.3rem;
}
.download-section-header svg {
    color: var(--primary, #00897b);
}
.download-section-subtitle {
    color: var(--text-medium, #666);
    font-size: 0.9rem;
    margin: 0 0 16px;
}
.download-tokens-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.download-token-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
}
.download-token-info {
    text-align: left;
}
.download-token-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 0 0 4px;
}
.download-token-size {
    display: block;
    font-size: 0.82rem;
    color: var(--text-medium, #888);
    margin: 0;
}
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary, #00897b);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-download:hover {
    background: var(--primary-hover, #00796b);
}
.download-section-note {
    font-size: 0.85rem;
    color: var(--text-medium, #666);
    margin: 0;
}
.download-section-note a {
    color: var(--primary, #00897b);
    font-weight: 500;
}

/* SVG Download Section — Step 4 sidebar */
.svg-download-section {
    margin-top: 8px;
}
.svg-download-offer {
    background: var(--bg-light, #f8f9fa);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 10px;
    padding: 16px;
}
.svg-offer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.svg-offer-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.svg-offer-desc {
    font-size: 0.85rem;
    color: var(--text-medium, #666);
    margin: 0 0 8px;
}
.svg-offer-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.svg-offer-price span:first-child {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary, #00897b);
}
.svg-tier-label {
    font-size: 0.8rem;
    color: var(--text-medium, #888);
}

/* SVG Upsell — inside Add to Cart modals (logged-in + guest) */
.svg-upsell {
    margin-top: 12px;
}
.svg-upsell-content {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f0faf7;
    border-radius: 8px;
    padding: 10px 12px;
}
.svg-upsell-icon {
    flex-shrink: 0;
    opacity: 0.7;
}
.svg-upsell-text {
    flex: 1;
    min-width: 0;
}
.svg-upsell-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
    color: #555;
}
.svg-upsell-line2 {
    display: block;
}
.svg-upsell-sublabel {
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
}
.svg-upsell-price {
    font-size: 0.75rem;
    color: var(--primary, #00897b);
    font-weight: 600;
    margin-left: 4px;
}
.svg-upsell-btn {
    flex-shrink: 0;
    padding: 5px 14px !important;
    font-size: 0.8rem !important;
}

.cart-items {
    padding: 24px 28px;
    max-height: 400px;
    overflow-y: auto;
}

.cart-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-medium);
}

.cart-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-image {
    width: 100px;
    height: 80px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-light);
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    flex: 1;
}

.cart-item-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.cart-item-size,
.cart-item-options {
    font-size: 0.85rem;
    color: var(--text-medium);
}

.cart-item-price {
    font-weight: 700;
    color: var(--primary);
    margin-top: 8px;
}

.cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
    transition: var(--transition);
}

.cart-item-remove:hover {
    color: #e74c3c;
}

.cart-footer {
    padding: 24px 28px;
    border-top: 1px solid var(--border);
    background: var(--bg-light);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.cart-total span:last-child {
    color: var(--primary);
}

.cart-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-medium);
    margin-top: 12px;
}

/* Notification */
.notification {
    position: fixed;
    bottom: 96px; /* clear the Crisp chat launcher (~60px, bottom-right) */
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 3000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.notification:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
}

.notification-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.notification-error {
    background: #dc2626;
}

.notification-warning {
    background: #d97706;
}

.notification-info {
    background: #2563eb;
}

/* Danger Zone */
.danger-zone {
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 20px;
    margin-top: 32px;
    background: #fef2f2;
}

.danger-zone h3 {
    color: #dc2626;
    margin: 0 0 8px;
    font-size: 1rem;
}

.danger-zone p {
    color: #6b7280;
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.btn-danger {
    background: #dc2626;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Footer */
.footer {
    background: var(--footer-bg, var(--text-dark));
    color: white;
    padding: 80px 0 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin-top: 20px;
    line-height: 1.7;
}

.footer-links h4,
.footer-contact h4 {
    color: white;
    margin-bottom: 24px;
    font-size: 1rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 14px;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-contact p {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.footer-email {
    color: var(--primary) !important;
    font-weight: 500;
}

.footer-phone {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin-top: 8px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-phone:hover {
    color: var(--primary);
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    transition: all 0.25s ease;
}

.footer-social-link:hover {
    background: var(--primary);
    color: white;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
}

.footer-powered {
    color: var(--primary);
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .features-grid,
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .design-workspace {
        grid-template-columns: 1fr;
    }

    .design-preview {
        position: static;
        overflow: visible;
        min-width: 0;
    }

    .canvas-wrapper {
        overflow: hidden;
        max-width: 100%;
    }

    .review-panel {
        grid-template-columns: 1fr;
    }

    .design-types {
        grid-template-columns: 1fr;
    }

    .step1-layout {
        grid-template-columns: 1fr;
    }

    .product-gallery {
        position: static;
        max-width: 500px;
        margin: 0 auto;
    }

    .design-workspace {
        gap: 20px;
    }

    /* Canvas wrapper: full width block */
    .canvas-wrapper {
        display: block;
        width: 100%;
    }

    /* Preview GORE na tabletu/mobilnom, kontrole ISPOD */
    .design-preview {
        order: -1;
    }

    /* Preview header — flex-wrap da dugmad ne ispadaju */
    .preview-header {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }
    /* Forsira previewSize da zauzme ostatak prvog reda → Guide/3D/Review u drugom */
    .preview-header #previewSize {
        min-width: calc(100% - 150px);
        text-align: right;
    }
    /* Sidebar — spreči overflow */
    .design-controls {
        max-width: 100%;
        overflow: hidden;
    }

    /* Toolbar — wrap i manja dugmad za tablet/mobile */
    .preview-toolbar {
        flex-wrap: wrap;
        gap: 3px;
    }
    .toolbar-btn {
        width: 28px;
        height: 28px;
    }
    .toolbar-btn svg {
        width: 14px;
        height: 14px;
    }
    .toolbar-zoom-label {
        width: 28px;
        min-width: 28px;
        font-size: 0.7rem;
        line-height: 28px;
    }
    .preview-toolbar-stack {
        min-height: auto;
    }
    /* Align toolbar wrap za tablet/mobile */
    .align-toolbar {
        flex-wrap: wrap;
    }

    /* Resize handles: bigger for touch */
    .resize-handle {
        width: 16px;
        height: 16px;
    }
    .resize-handle.nw { top: -9px; left: -9px; }
    .resize-handle.ne { top: -9px; right: -9px; }
    .resize-handle.se { bottom: -9px; right: -9px; }
    .resize-handle.sw { bottom: -9px; left: -9px; }

    /* Rotate handle: bigger on touch */
    .rotate-handle {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    .hero {
        padding: 60px 0 80px;
    }

    .hero-content {
        max-width: 100%;
    }

    /* Text-width slider is desktop-only: on mobile the text always spans full width. */
    .hero-layout-left .hero-content,
    .hero-layout-right .hero-content {
        max-width: 100% !important;
    }

    /* "Hide on mobile" toggle also hides the side image (not just background media),
       so the home hero shows text only on small screens. */
    .hero-no-mobile-bg .hero-side-video {
        display: none !important;
    }

    .hero-title {
        font-size: 2rem;
        white-space: normal;
    }

    .hero-small {
        font-size: 1.3rem;
    }

    .hero-accent {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    /* Hero: hide background image/video on mobile (CMS toggle).
       Use the SAME subtle background as desktop .hero (vs. an unrelated blue gradient). */
    .hero-no-mobile-bg {
        background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%) !important;
    }
    .hero-no-mobile-bg .hero-overlay,
    .hero-no-mobile-bg .hero-video-bg {
        display: none;
    }

    /* Side video layouts collapse to single column on mobile (video on top) */
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    .hero-layout-left .hero-grid {
        grid-template-columns: 1fr !important;
    }
    .hero-layout-left .hero-grid .hero-content,
    .hero-layout-left .hero-grid .hero-side-video {
        order: initial;
    }
    .hero-side-video {
        /* Let the video keep its natural aspect ratio on mobile (no top/bottom crop).
           height: auto means height = (mobile width × video natural aspect). */
        height: auto;
        max-height: none;
        min-height: 0;
        order: -1;       /* video shows above text on mobile */
        margin-bottom: 24px;
    }

    .hotspots-layer {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Header iznad backdrop-a (9998) da drawer linkovi budu klikabilni */
    .header {
        z-index: 9999;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        background: var(--bg-white);
        padding: 80px 24px 24px;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 9999;
        gap: 0;
        box-shadow: none;
        overflow-y: auto;
    }

    .nav-links.mobile-open {
        transform: translateX(0);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .nav-links .nav-link {
        padding: 16px 0;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--border);
    }

    .nav-links .nav-link:last-child {
        border-bottom: none;
    }

    .nav-links .nav-btn-outline {
        border: 1px solid var(--accent);
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    .products-section,
    .how-it-works,
    .features-section {
        padding: 60px 0;
    }

    .product-groups-grid {
        grid-template-columns: 1fr;
    }

    .product-group-card {
        flex-direction: column;
    }

    .group-card-icon {
        width: 100%;
        height: 180px; /* was min-height:80px — a hero image crushed to 80px looked bad; img stays object-fit:cover */
    }

    .products-gallery {
        grid-template-columns: 1fr;
    }

    .features-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .wizard-nav {
        padding: 0 12px;
    }

    .wizard-back-btn {
        font-size: 0;
        padding-right: 10px;
        min-width: auto;
    }

    .wizard-back-btn svg {
        width: 18px;
        height: 18px;
    }

    .wizard-steps {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .wizard-step {
        padding: 10px 4px;
        font-size: 0.7rem;
    }

    .wizard-step-label {
        display: none;
    }

    .wizard-connector {
        width: 12px;
    }

    .step-panel {
        padding: 32px 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .trust-badges {
        flex-direction: column;
        gap: 20px;
    }
}

/* ===== Mobile: Design Workspace (768px) ===== */
@media (max-width: 768px) {
    .design-workspace {
        gap: 16px;
    }

    .design-preview {
        padding: 16px;
    }

    /* Sidebar kontrole — spreči overflow na mobilnom */
    .design-controls {
        max-width: 100%;
        overflow: hidden;
    }

    .control-section {
        padding: 12px 14px;
    }

    .control-title {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }

    .upload-zone {
        padding: 16px 12px;
    }

    .pattern-options {
        grid-template-columns: repeat(3, 1fr);
    }

    .bg-type-btn {
        padding: 10px 6px;
        font-size: 0.75rem;
    }

    .view-toggle-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .resize-handle {
        width: 18px;
        height: 18px;
    }

    .selection-action-btn {
        width: 32px;
        height: 32px;
    }

    /* Preview header — kompaktnije */
    .preview-header h4 {
        font-size: 0.9rem;
    }
    .btn-step3-3d,
    .btn-step3-review {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

}

/* ===== Small phones: Design Workspace (480px) ===== */
@media (max-width: 480px) {
    .design-workspace {
        gap: 12px;
    }

    .design-preview {
        padding: 12px;
    }

    .control-section {
        padding: 10px 12px;
    }

    .control-number {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    .pattern-options {
        gap: 4px;
    }

    .pattern-btn {
        padding: 6px 2px;
        font-size: 0.65rem;
    }

    .bg-type-btn {
        padding: 8px 4px;
        font-size: 0.72rem;
    }

    .upload-zone {
        padding: 14px 10px;
    }

    .resize-handle {
        width: 20px;
        height: 20px;
    }
    .resize-handle.nw { top: -11px; left: -11px; }
    .resize-handle.ne { top: -11px; right: -11px; }
    .resize-handle.se { bottom: -11px; right: -11px; }
    .resize-handle.sw { bottom: -11px; left: -11px; }

    .rotate-handle {
        width: 32px;
        height: 32px;
    }

    /* Sakri size label na malim telefonima */
    .preview-header #previewSize {
        display: none;
    }
    /* h4 zauzima ceo prvi red kad previewSize nestane */
    .preview-header h4 {
        width: 100%;
    }
}

/* ========== Utilities ========== */
.hidden { display: none !important; }

/* ========== Login Overlay (Development) ========== */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #01b497 0%, #334fb4 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-overlay.hidden {
    display: none !important;
}

.login-modal {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-header {
    margin-bottom: 32px;
}

.login-header .login-logo {
    height: 36px;
    width: auto;
    margin-bottom: 8px;
}

.login-header .logo-text,
.login-header .logo-accent {
    font-size: 2rem;
    font-weight: 700;
}

.login-header .logo-text {
    color: var(--text-dark);
}

.login-header .logo-accent {
    color: var(--primary);
}

.login-subtitle {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-top: 8px;
}

.login-form {
    text-align: left;
}

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.login-field input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.login-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.login-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-bottom: 16px;
    text-align: center;
}

.login-form .btn {
    margin-top: 8px;
}

/* ========== Shape Draw Preview ========== */
#shapeDrawPreview {
    display: none;
    position: absolute;
    pointer-events: none;
    border: 2px solid var(--primary, #00897b);
    background: rgba(0, 137, 123, 0.12);
    z-index: 5;
    box-sizing: border-box;
}

/* ========== Selection Overlay for Interactive Canvas Editing ========== */
#selectionOverlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.bounding-box {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid var(--primary, #00d4aa);
    background: rgba(0, 212, 170, 0.05);
    display: none;
    pointer-events: auto;
    cursor: move;
    box-sizing: border-box;
    /* GPU acceleration for smooth transforms */
    will-change: transform, width, height;
    transform: translate(0, 0);
    backface-visibility: hidden;
}

.bounding-box.active {
    display: block;
}

.bounding-box.dragging {
    cursor: grabbing;
}

.bounding-box.resizing {
    /* Prevent cursor changes during resize */
}

/* Preview Toolbar (Undo/Redo/Reset) */
.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    color: #555;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.toolbar-btn .toolbar-fill-icon {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    display: block;
}
.toolbar-btn:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}
.toolbar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.toolbar-btn.saving {
    opacity: 0.55;
    animation: toolbarBtnPulse 0.9s ease-in-out infinite;
}
@keyframes toolbarBtnPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}
#designCountBadge {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    cursor: default;
}
#designCountBadge:hover { color: var(--text-light, #666); }
#designCountBadge.at-limit {
    color: #d32f2f;
    font-weight: 700;
}
#designCountBadge.at-limit:hover { color: #d32f2f; }
.toolbar-btn-danger:hover:not(:disabled) {
    background: #fff5f5;
    border-color: #e57373;
    color: #d32f2f;
}
.toolbar-btn-active {
    background: var(--primary, #00897b) !important;
    color: white !important;
    border-color: var(--primary, #00897b) !important;
}
.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border, #e0e0e0);
    margin: 0 4px;
    flex: 0 0 1px;
}
.toolbar-zoom-label {
    font-size: 0.75rem;
    width: 32px;
    min-width: 32px;
    text-align: center;
    color: var(--text-light, #666);
    cursor: pointer;
    user-select: none;
    line-height: 32px;
}
.toolbar-zoom-label:hover {
    color: var(--primary, #00897b);
}

/* Preview toolbar stack — vertical layout for toolbar + align row */
/* Fixed height: always reserves space for 2 rows so Save/Review don't move */
.preview-toolbar-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 70px; /* 32px row + 6px gap + 32px row */
}

/* Align Toolbar (second row below undo/redo/zoom) */
.align-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
}
.align-toolbar.hidden {
    display: none !important;
}
/* Align row dividers — fixed thin line, no flex stretch */
.align-toolbar .toolbar-divider {
    flex: 0 0 1px;
    max-width: 1px;
    margin: 0 3px;
}

/* Toolbar tooltip — appears on hover with 0.5s delay */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease 0.5s;
    z-index: 100;
}
[data-tooltip]:hover::after {
    opacity: 1;
}
[data-tooltip]:active::after,
[data-tooltip]:focus::after,
.toolbar-btn-active[data-tooltip]::after {
    opacity: 0 !important;
    transition-delay: 0s;
}

/* Toolbar button wrapper — relative anchor for dropdowns */
.toolbar-btn-wrapper {
    position: relative;
}

/* Toolbar dropdown panel — anchored below icon */
.toolbar-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 10px;
    z-index: 200;
    min-width: 120px;
}
.toolbar-dropdown.hidden {
    display: none;
}
/* Solid dropdown: wider picker */
#solidBgDropdown .toolbar-color-picker,
#bgTabSolid .toolbar-color-picker {
    width: 100%;
    height: 36px;
}

/* BG dropdown tabs */
.toolbar-bg-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 8px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}
.toolbar-bg-tab,
.sb-bg-tab {
    flex: 1;
    padding: 5px 0;
    font-size: 0.75rem;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    color: #666;
    transition: background 0.15s, color 0.15s;
}
.toolbar-bg-tab.active,
.sb-bg-tab.active {
    background: var(--primary, #22c55e);
    color: #fff;
    font-weight: 600;
}
.toolbar-bg-panel.hidden { display: none; }
.toolbar-dropdown-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.toolbar-dropdown-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.toolbar-dropdown-arrow {
    color: #aaa;
    font-size: 1rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
    font-family: inherit;
}
.toolbar-dropdown-arrow:hover {
    color: var(--primary, #01b497);
    border-color: var(--primary, #01b497);
    background: rgba(1, 180, 151, 0.08);
}
.toolbar-color-picker {
    width: 36px;
    height: 30px;
    border: 2px solid var(--border, #ddd);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
}
.toolbar-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.toolbar-color-picker::-webkit-color-swatch { border: none; border-radius: 3px; }
.toolbar-color-picker::-moz-color-swatch { border: none; border-radius: 3px; }
.toolbar-dropdown-select {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #333;
    background: #fff;
    cursor: pointer;
}

/* Sidebar Background section — reuses .toolbar-bg-* classes; just lay them
   out full-width inside the sidebar so it visually matches the toolbar. */
.sidebar-bg-body { padding-top: 2px; }
#sbBgTabSolid .toolbar-color-picker,
#sbBgTabGradient .toolbar-color-picker {
    width: 100%;
    height: 36px;
}
#sbBgTabGradient .toolbar-dropdown-row .toolbar-color-picker {
    flex: 1;
    min-width: 0;
}

/* QR Code Popup — floating modal centered in viewport.
   Previously was position:absolute inside .canvas-wrapper which got cropped
   when canvas was zoomed out (Bug 1+E from screen recording). */
/* Clean brand-aligned popup — viewport-centered to avoid zoom clipping,
   no dark backdrop (the prior ::before overlay rendered grey ON the popup
   because z-index:-1 stays inside .qr-popup's stacking context). */
.qr-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 14px 16px;
    min-width: 240px;
    max-width: 90vw;
}
.qr-popup.hidden { display: none; }
.qr-popup-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.qr-popup-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.qr-popup-input:focus {
    outline: none;
    border-color: var(--primary, #2ecc71);
}
.qr-popup-actions {
    display: flex;
    gap: 8px;
}
.qr-popup-actions .btn {
    flex: 1;
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* Selection color trigger button (custom color picker) */
.selection-color-trigger {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 2px solid var(--border, #ddd);
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    flex-shrink: 0;
}
.color-trigger-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000000;
    display: block;
}

/* Custom Color Picker Popup */
.custom-color-popup {
    position: fixed;
    z-index: 10001;
    width: 224px;
    background: #fff;
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 34px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.custom-color-popup.hidden { display: none; }
.color-popup-close {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    z-index: 3;
}
.color-popup-close:hover {
    background: #f3f4f6;
    color: #000;
}
#colorSpectrumCanvas {
    width: 200px;
    height: 200px;
    border-radius: 6px;
    cursor: crosshair;
    /* Pointer-Events drag: don't let dragging the picker scroll the page on touch. */
    touch-action: none;
}
#colorHueCanvas {
    width: 200px;
    height: 16px;
    border-radius: 8px;
    cursor: pointer;
    touch-action: none;
}
.color-popup-hex-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
    font-size: 0.8rem;
}
.color-popup-hash { color: #999; font-weight: 600; }
.color-popup-hex-row input {
    flex: 1;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    padding: 4px 6px;
    font-family: monospace;
    font-size: 0.8rem;
    outline: none;
}
.color-popup-hex-row input:focus {
    border-color: var(--primary, #22c55e);
}

/* "From your logo" swatch row inside the color picker popup. Populated by
   color-picker.js from window.PBLastExtractedColors (set by the logo
   extractor). Hidden when no logo has been processed yet. */
.color-popup-swatches {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.color-popup-swatches-label {
    margin: 0 0 6px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.color-popup-swatches-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.color-popup-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.color-popup-swatch:hover {
    transform: scale(1.08);
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Selection opacity wrap (row 2) */
.selection-opacity-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 2px solid var(--border, #ddd);
    border-radius: 6px;
    padding: 2px 6px;
    height: 26px;
    box-sizing: border-box;
}
/* On-canvas text controls (font + align) — sibling of .selection-controls, positioned
   by SelectionManager below the opacity row. Shown only for text selections. */
.selection-text-controls {
    position: absolute;
    display: none;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    padding: 4px 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    z-index: 30;
    white-space: nowrap;
    box-sizing: border-box;
    /* #selectionOverlay is pointer-events:none — opt this row back in (like
       .selection-controls does) so clicks land on the font/align buttons instead of
       passing through to the canvas (which would deselect the text). */
    pointer-events: auto;
}
.sel-font-trigger {
    height: 26px;
    max-width: 130px;
    padding: 0 8px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}
.sel-font-trigger .pb-font-picker-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sel-font-trigger:hover {
    border-color: var(--primary, #01b497);
}
.sel-align-group {
    display: flex;
    gap: 2px;
}
.sel-align-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    padding: 0;
}
.sel-align-btn:hover {
    border-color: var(--primary, #01b497);
    color: var(--primary, #01b497);
}
.sel-align-btn.active {
    background: var(--primary, #01b497);
    border-color: var(--primary, #01b497);
    color: #fff;
}
.selection-opacity-slider {
    width: 50px;
    height: 4px;
    accent-color: var(--primary, #22c55e);
    cursor: pointer;
}
.selection-opacity-value {
    font-size: 0.65rem;
    color: #666;
    min-width: 28px;
    text-align: right;
}

/* Resize Handles */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid var(--primary, #00d4aa);
    border-radius: 2px;
    pointer-events: auto;
    box-sizing: border-box;
    transition: transform 0.1s ease, background-color 0.1s ease;
    /* Prevent native touch gestures so resize responds instantly on mobile. */
    touch-action: none;
}

.resize-handle:hover {
    background: var(--primary, #00d4aa);
    transform: scale(1.2);
}

/* Corner handles */
.resize-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.resize-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }

/* Edge handles */
.resize-handle.n { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.s { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.resize-handle.e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.resize-handle.w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.resize-handle.n:hover,
.resize-handle.s:hover { transform: translateX(-50%) scale(1.2); }
.resize-handle.e:hover,
.resize-handle.w:hover { transform: translateY(-50%) scale(1.2); }

/* Prevent text selection while dragging */
.canvas-wrapper.selecting {
    user-select: none;
    -webkit-user-select: none;
}

/* Selection hint tooltip */
.selection-hint {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bounding-box:hover .selection-hint {
    opacity: 1;
}

/* ========== Rotation Handle ========== */
/* Compact selection fallback — mini bounding box anchored at element center.
   Shown when standard handles would be clipped off-canvas. Brand-consistent
   styling matching .bounding-box and .resize-handle (teal primary, white halo,
   2px borders to match standard selection visuals). */
.bounding-box-compact {
    position: absolute;
    /* width/height set inline by JS (_applyCompactTransform) so the compact box
       grows/shrinks with the element bounds in real time. */
    min-width: 60px;
    min-height: 60px;
    z-index: 100;
    transform-origin: center center;
    display: none;
    /* Body itself is click-through — only handles + rotate circle are interactive.
       User can drag the element by clicking outside the compact UI (on the element)
       which routes through the standard canvas-wrapper mousedown / startDrag flow. */
    pointer-events: none;
    border: 2px solid var(--primary, #01b497);
    background: rgba(1, 180, 151, 0.05);
    border-radius: 2px;
    box-sizing: border-box;
}
.bounding-box-compact.active { display: block; }
.bounding-box-compact.dragging { cursor: grabbing; }

/* 8 resize handles — identical visual to standard .resize-handle */
.compact-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid var(--primary, #01b497);
    border-radius: 2px;
    box-sizing: border-box;
    pointer-events: auto;
    transition: transform 0.1s ease, background-color 0.1s ease;
}
.compact-handle:hover {
    background: var(--primary, #01b497);
    transform: scale(1.2);
}
.compact-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.compact-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.compact-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.compact-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.compact-handle.n  { top: -6px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.compact-handle.s  { bottom: -6px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.compact-handle.e  { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.compact-handle.w  { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.compact-handle.n:hover,
.compact-handle.s:hover { transform: translateX(0) scale(1.2); }
.compact-handle.e:hover,
.compact-handle.w:hover { transform: translateY(0) scale(1.2); }

/* Rotate circle — brand teal outline, white fill with conic-gradient pie chart
   that fills in primary color as the element rotates (0–360°). Visible rotate
   icon sits on top of the gradient. */
.compact-rotate-circle {
    /* Now a flex child of .compact-floating-controls (not inside the rotating compact box),
       so pie + icon stay upright in screen space. Matches standard .rotate-handle size. */
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 2px solid var(--primary, #01b497);
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: conic-gradient(
        from -90deg,
        rgba(1, 180, 151, 0.45) 0deg,
        rgba(1, 180, 151, 0.45) var(--rotation-deg, 0deg),
        rgba(255, 255, 255, 0.92) var(--rotation-deg, 0deg),
        rgba(255, 255, 255, 0.92) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
}
.compact-rotate-circle svg {
    display: block;
    width: 14px;
    height: 14px;
    color: var(--primary, #01b497);
    pointer-events: none;
    position: relative;
    z-index: 1;
}
.compact-rotate-circle:hover {
    box-shadow: 0 2px 10px rgba(1, 180, 151, 0.35);
    border-color: #019a82;
}
.compact-rotate-circle:active { cursor: grabbing; }

/* Optional badge showing current scale percentage — appears below compact box */
.compact-scale-badge {
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    background: var(--primary, #01b497);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.bounding-box-compact.scaling .compact-scale-badge {
    opacity: 1;
}

/* Floating row above compact box — rotate 90° left/right + current rotation label.
   Sibling of .bounding-box-compact, positioned by JS at element center above the box.
   Does NOT rotate with the element (kept horizontal for legibility). */
.compact-floating-controls {
    position: absolute;
    display: none;
    align-items: center;
    gap: 3px;
    z-index: 101;
    pointer-events: none;
    transform-origin: center center;
    white-space: nowrap;
}
/* When compact mode is active, hide the standard rotate trio (compact has its own
   pie circle + chevrons) but keep duplicate/color/delete/opacity visible. */
body.compact-mode-active .selection-controls .rotate-left-btn,
body.compact-mode-active .selection-controls .rotate-handle,
body.compact-mode-active .selection-controls .rotate-right-btn {
    display: none !important;
}
.compact-floating-controls.active {
    display: flex;
}
.compact-action-btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--primary, #01b497);
    background: #fff;
    color: var(--primary, #01b497);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background-color 0.1s ease, color 0.1s ease;
}
.compact-action-btn:hover {
    background: var(--primary, #01b497);
    color: #fff;
}
.compact-action-btn svg {
    display: block;
    pointer-events: none;
}

.rotate-handle {
    width: 24px;
    height: 24px;
    /* Pie indicator fills clockwise from 12 o'clock based on --rotation-deg.
       Same conic-gradient as .compact-rotate-circle so both visuals match. */
    background: conic-gradient(
        from -90deg,
        rgba(1, 180, 151, 0.45) 0deg,
        rgba(1, 180, 151, 0.45) var(--rotation-deg, 0deg),
        #ffffff var(--rotation-deg, 0deg),
        #ffffff 360deg
    );
    border: 2px solid var(--primary, #00d4aa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    z-index: 10;
    /* Prevent native touch gestures so rotate responds instantly on mobile. */
    touch-action: none;
}

.rotate-handle:hover {
    box-shadow: 0 2px 10px rgba(1, 180, 151, 0.35);
    border-color: #019a82;
}

.rotate-handle svg {
    color: var(--primary, #00d4aa);
    pointer-events: none; /* Allow clicks to pass through to parent */
    position: relative;
    z-index: 1;
}

.rotate-handle:active {
    cursor: grabbing;
}

/* Rotate 90° buttons (< >) flanking the rotate handle — 30% smaller than handle */
.rotate-90-btn {
    width: 14px;
    height: 14px;
    background: white;
    border: 1.5px solid var(--primary, #00d4aa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: background-color 0.15s ease;
    padding: 0;
}
.rotate-90-btn:hover {
    background: var(--primary, #00d4aa);
}
.rotate-90-btn:hover svg {
    stroke: white;
}

/* Connecting line from rotate handle to bounding box */
.rotate-line {
    position: absolute;
    top: -25px;
    left: 50%;
    width: 2px;
    height: 20px;
    background: var(--primary, #00d4aa);
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.5;
}

/* Rotation cursor during rotation */
.bounding-box.rotating {
    cursor: grabbing;
}

.bounding-box.rotating .rotate-handle {
    background: var(--primary, #00d4aa);
    cursor: grabbing;
}

.bounding-box.rotating .rotate-handle svg {
    stroke: white;
}

/* ========== Selection Action Buttons (Duplicate / Delete) ========== */
/* Selection controls container (positioned by JS, outside bounding-box) */
.selection-controls {
    position: absolute;
    pointer-events: none;
    z-index: 11;
}
.selection-controls > * {
    pointer-events: auto;
}
.selection-controls .rotate-handle {
    position: absolute;
}
.selection-controls .rotate-90-btn {
    position: absolute;
}
.selection-controls .duplicate-btn,
.selection-controls .delete-btn,
.selection-controls .selection-color-trigger {
    position: absolute;
}

.selection-action-btn {
    width: 26px;
    height: 26px;
    background: white;
    border: 2px solid var(--primary, #00d4aa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    /* Prevent native touch gestures so action buttons fire immediately. */
    touch-action: none;
}
/* Rotate-90 override — must come after .selection-action-btn to win specificity */
.selection-action-btn.rotate-90-btn {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    border-width: 1.5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.selection-action-btn:hover {
    background: var(--primary, #00d4aa);
    transform: scale(1.15);
}

.selection-action-btn:hover svg {
    stroke: white;
}

.selection-action-btn svg {
    color: var(--primary, #00d4aa);
    pointer-events: none;
}

.selection-action-btn.delete-btn:hover {
    background: #e53935;
    border-color: #e53935;
}

.selection-action-btn.hidden {
    display: none;
}

/* ========== Mini Navigator ========== */
.mini-navigator {
    position: fixed;
    right: 10px;
    top: 100px;
    width: 130px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 900;
    overflow: hidden;
    transition: width 0.3s ease, box-shadow 0.3s ease;
    display: none; /* Hidden by default, shown for tall products */
    /* Draggable: user-set position overrides top/right via inline style */
}

.mini-navigator.visible {
    display: block;
}

.mini-navigator.collapsed .mini-nav-content {
    display: none;
}

.mini-navigator.collapsed {
    width: auto;
}

.mini-navigator.dragging {
    opacity: 0.85;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    cursor: grabbing;
    transition: none;
}

.mini-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-medium);
    cursor: grab;
    user-select: none;
    touch-action: none; /* pointer-drag the widget without scrolling the page */
}

.mini-nav-header:active {
    cursor: grabbing;
}

.mini-nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-medium);
    transition: transform 0.2s ease;
}

.mini-navigator.collapsed .mini-nav-toggle {
    transform: rotate(180deg);
}

.mini-navigator.collapsed .mini-nav-header {
    border-bottom: none;
}

.mini-nav-toggle:hover {
    color: var(--primary);
}

.mini-nav-content {
    padding: 10px;
}

.mini-nav-preview {
    position: relative;
    background: var(--bg-gray);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
    touch-action: none; /* drag-to-navigate on touch without scrolling the page */
}

.mini-nav-preview canvas {
    display: block;
    width: 100%;
    height: auto;
}

.mini-nav-viewport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: 2px solid var(--primary);
    background: rgba(1, 180, 151, 0.15);
    pointer-events: none;
    border-radius: 2px;
    /* GPU acceleration for smooth scrolling */
    will-change: transform, height;
    transform: translateY(0);
    backface-visibility: hidden;
}

.mini-nav-controls {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.mini-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-medium);
    transition: all 0.2s ease;
}

.mini-nav-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.mini-nav-btn:active {
    transform: scale(0.95);
}

/* Position indicator text */
.mini-nav-position {
    text-align: center;
    font-size: 10px;
    color: var(--text-light);
    margin-top: 6px;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .mini-navigator {
        width: 120px;
    }
}

@media (max-width: 1024px) {
    .mini-navigator {
        display: none !important;
    }
}

/* ========== Video Section ========== */
.video-section {
    padding: 60px 0;
    background: var(--bg-white);
}
.video-placeholder {
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #f5f5f5;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #999;
    font-size: 1rem;
}
.video-placeholder svg {
    opacity: 0.4;
}

/* ========== Two Paths Section ========== */
.design-paths-section {
    padding: 80px 0;
    background: var(--bg-light);
}

.paths-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 48px;
}

.path-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

/* Price badges — top right corner */
.path-price-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    z-index: 1;
}

.path-price-badge strong {
    font-weight: 800;
}

.path-price-free {
    background: var(--primary-light);
    color: var(--primary);
}

.path-price-pro {
    background: var(--accent-light);
    color: var(--accent);
    font-weight: 500;
}

.path-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.path-card-header {
    margin-bottom: 20px;
}

.path-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
}

.path-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.path-tagline {
    font-size: 1rem;
    color: var(--primary);
    font-weight: 500;
}

.path-description {
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 20px;
}

.path-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    flex: 1;
}

.path-features li {
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
    color: var(--text-medium);
    line-height: 1.5;
}

.path-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 16px;
    height: 16px;
    background: var(--primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
}

/* Pro Designer path card — accent blue */
.path-card-pro .path-icon {
    background: var(--accent-light);
    color: var(--accent);
}

.path-card-pro .path-tagline {
    color: var(--accent);
}

.path-card-pro .path-features li::before {
    background: var(--accent);
}

.path-card-pro .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.path-card-pro .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

@media (max-width: 768px) {
    .paths-grid {
        grid-template-columns: 1fr;
    }
    .path-card {
        padding: 28px;
    }
}

/* ========== AI-Powered Tools Section ========== */
.ai-tools-section {
    padding: 80px 0;
    background: var(--bg-white);
}

.ai-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.ai-tool-card {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: 36px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ai-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.ai-tool-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary);
}

.ai-tool-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.ai-tool-desc {
    color: var(--text-medium);
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .ai-tools-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== Features Grid Update (6 cards) ========== */
.features-grid {
    grid-template-columns: repeat(3, 1fr);
}

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

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

/* ========== FAQ Section ========== */
.faq-section {
    padding: 80px 0;
    background: var(--bg-light);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 48px;
}

.faq-category-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--primary);
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    background: var(--bg-white);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 16px 48px 16px 20px;
    border: none;
    background: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    position: relative;
    font-family: inherit;
    line-height: 1.4;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--primary);
    transition: transform 0.2s;
}

.faq-item.open .faq-question::after {
    content: '−';
}

.faq-question:hover {
    color: var(--primary);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    padding: 0 20px 16px;
    color: var(--text-medium);
    line-height: 1.6;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ========== Legal Modals ========== */
.legal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legal-modal.hidden {
    display: none;
}

.legal-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.legal-modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    max-width: 720px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.legal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.legal-modal-header h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
}

.legal-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 4px;
    transition: color 0.2s;
}

.legal-modal-close:hover {
    color: var(--text-dark);
}

.legal-modal-body {
    padding: 32px;
    overflow-y: auto;
    color: var(--text-medium);
    line-height: 1.7;
    font-size: 0.9rem;
}

.legal-modal-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 24px 0 8px;
}

.legal-modal-body h3:first-child {
    margin-top: 0;
}

.legal-modal-body p {
    margin-bottom: 12px;
}

.legal-modal-body ul {
    margin: 8px 0 16px 20px;
}

.legal-modal-body li {
    margin-bottom: 4px;
}

.legal-modal-body a {
    color: var(--primary);
}

/* ========== Footer Logo (white version) ========== */
.footer-logo img {
    height: 24px;
    width: auto;
}

/* ========== Footer Legal Links ========== */
.footer-links ul li a[onclick] {
    cursor: pointer;
}

/* ========== Design Service Page ========== */
.ds-hero {
    padding: 100px 0 60px;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);
    position: relative;
    overflow: hidden;
}

.ds-price-ribbon {
    position: absolute;
    top: 28px;
    right: -40px;
    background: var(--accent, #ff6b35);
    color: #fff;
    padding: 8px 50px;
    font-size: 0.95rem;
    font-weight: 700;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 3;
    letter-spacing: 0.5px;
}
@media (max-width: 768px) {
    .ds-price-ribbon {
        top: 18px;
        right: -45px;
        font-size: 0.8rem;
        padding: 6px 45px;
    }
}

.ds-hero-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.ds-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.ds-hero-tagline {
    font-size: 1.25rem;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 20px;
}

.ds-hero-desc {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.7;
}

/* ========== DS DIY Cross-sell — alternative CTA below brief form ==========
   Card spans the full container width to match the What's Included grid above,
   but content stays centered for a clean, balanced visual hierarchy. */
.ds-diy-prompt {
    padding: 64px 0 80px;
    background: linear-gradient(180deg, transparent 0%, rgba(1, 180, 151, 0.04) 100%);
}
.ds-diy-card {
    margin: 0 auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 56px 40px 48px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    text-align: center;
}
.ds-diy-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(1, 180, 151, 0.1);
    color: #01b497;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.ds-diy-title {
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: #111;
    line-height: 1.25;
}
.ds-diy-desc {
    color: #555;
    margin: 0 auto 28px;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px; /* readable line length even though the card is wide */
}
.ds-diy-cta {
    min-width: 240px;
}
.ds-diy-fineprint {
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.5;
}

/* Override the design-service "accent blue" rule for the DIY CTA so it pops as the
   primary green/teal brand color — visually distinct from the blue Submit Brief button
   in the form above, signaling this is a DIFFERENT path (DIY editor vs. paid brief). */
.page-design-service .ds-diy-cta.btn-primary {
    background: #01b497;
    border-color: #01b497;
    color: white;
}
.page-design-service .ds-diy-cta.btn-primary:hover {
    background: #019680;
    border-color: #019680;
}

@media (max-width: 640px) {
    .ds-diy-prompt {
        padding: 40px 0 56px;
    }
    .ds-diy-card {
        padding: 36px 24px 32px;
    }
    .ds-diy-title {
        font-size: 1.35rem;
    }
    .ds-diy-desc {
        font-size: 0.95rem;
    }
    .ds-diy-cta {
        width: 100%;
        min-width: 0;
    }
}

.ds-included {
    padding: 80px 0;
}

.ds-included .section-title {
    text-align: center;
    margin-bottom: 48px;
}

.ds-included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.ds-included-item {
    background: var(--bg-light);
    padding: 28px;
    border-radius: var(--radius-md);
    text-align: center;
}

.ds-included-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: var(--accent);
}
/* Constrain the inner SVG regardless of whether the markup has explicit
   width/height attributes. Defense in depth for the CMS-managed icon_svg
   field — if an admin pastes a viewBox-only SVG, browsers fall back to a
   300x150 intrinsic default and the icon spills out of the 56px circle.
   Matches the 32px size set in the CMS seed so the visual result agrees
   with the markup admin sees in Page Editor. */
.ds-included-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.ds-included-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.ds-included-item p {
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ds-process {
    padding: 80px 0;
    background: var(--bg-light);
}

.ds-process .section-title {
    text-align: center;
    margin-bottom: 48px;
}

.ds-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.ds-step {
    text-align: center;
    padding: 24px;
}

.ds-step-num {
    width: 48px;
    height: 48px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 auto 16px;
}

.ds-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.ds-step p {
    color: var(--text-medium);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ds-revisions {
    padding: 80px 0;
}

.ds-revisions .section-title {
    text-align: center;
    margin-bottom: 32px;
}

.ds-revisions-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.ds-revisions-content p {
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 16px;
}

.ds-pricing-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.ds-pricing-tier {
    background: var(--bg-light);
    padding: 24px;
    border-radius: var(--radius-md);
    text-align: center;
}

.ds-pricing-tier h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.ds-pricing-tier p {
    color: var(--text-light);
    font-size: 0.85rem;
    margin: 0;
}

.ds-cta {
    padding: 80px 0;
    background: var(--bg-light);
}

.ds-cta-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.ds-cta-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.ds-cta-content p {
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 28px;
}

.btn-lg {
    padding: 16px 40px;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .ds-hero-title {
        font-size: 1.75rem;
    }
    .ds-included-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ds-process-steps {
        grid-template-columns: 1fr 1fr;
    }
    .ds-pricing-tiers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .ds-included-grid {
        grid-template-columns: 1fr;
    }
    .ds-process-steps {
        grid-template-columns: 1fr;
    }
}

/* ========== Design Brief Form ========== */
.ds-brief {
    padding: 80px 0;
    background: var(--bg-light);
}

/* Compact hero when coming from wizard */
.ds-hero-compact {
    padding: 40px 0 24px;
}

.ds-hero-compact .ds-hero-desc,
.ds-hero-compact .btn {
    display: none;
}

.ds-hero-compact .ds-hero-title {
    font-size: 1.8rem;
    margin-bottom: 4px;
}

.ds-hero-compact .ds-hero-tagline {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Selection banner */
.ds-selection-banner {
    max-width: 800px;
    margin: 0 auto 32px;
}

.ds-selection-banner-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--accent-light);
    border: 1px solid rgba(59, 125, 216, 0.2);
    border-radius: 12px;
}

.ds-selection-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.ds-selection-details {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.88rem;
}

.ds-selection-label {
    color: var(--text-light);
    font-weight: 500;
}

.ds-selection-product {
    font-weight: 700;
    color: var(--text-dark);
}

.ds-selection-sep {
    color: var(--text-light);
}

.ds-selection-size {
    font-weight: 600;
    color: var(--accent);
}

.ds-selection-options {
    color: var(--text-light);
    font-size: 0.82rem;
}

.ds-selection-change {
    flex-shrink: 0;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.ds-selection-change:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .ds-selection-banner-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ds-selection-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .ds-selection-sep {
        display: none;
    }
}

.ds-brief-header {
    text-align: center;
    margin-bottom: 48px;
}

.ds-brief-header .section-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

.ds-form {
    /* Was 800px; widened to full container so the form visually matches the
       What's Included grid + DIY cross-sell card below (all spanning the 1200px container). */
    max-width: 100%;
    margin: 0 auto;
}

.ds-form-section {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 24px;
}

.ds-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.ds-form-section-title svg {
    color: var(--primary);
    flex-shrink: 0;
}

.ds-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ds-form-field {
    margin-bottom: 0;
}

.ds-form-field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.ds-required {
    color: #dc3545;
}

.ds-optional {
    color: var(--text-light);
    font-weight: 400;
    font-size: 0.8rem;
}

.ds-form-field input,
.ds-form-field select,
.ds-form-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--bg-white);
    transition: var(--transition);
}

.ds-form-field input:focus,
.ds-form-field select:focus,
.ds-form-field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.ds-form-field input::placeholder,
.ds-form-field textarea::placeholder {
    color: var(--text-light);
}

.ds-form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.ds-form-field textarea {
    resize: vertical;
    min-height: 80px;
}

.ds-field-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.ds-form-full {
    margin-bottom: 20px;
}

.ds-form-hint {
    color: var(--text-medium);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Style Chips */
.ds-style-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ds-style-chip {
    cursor: pointer;
    display: inline-flex;
}

.ds-style-chip input {
    display: none;
}

.ds-style-chip span {
    padding: 8px 20px;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-medium);
    background: var(--bg-white);
    transition: var(--transition);
    user-select: none;
}

.ds-style-chip span:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ds-style-chip input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Price badge inside an extras chip — fixed price (e.g. +$149) or "custom
   quote" hint. Sits inside the same <span> as the label so the whole pill
   colours uniformly when the chip is checked. */
.ds-style-chip .ds-extra-price {
    margin-left: 4px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--primary, #01b497);
    white-space: nowrap;
}
.ds-style-chip .ds-extra-price-quote {
    color: #9ca3af; /* muted grey — softer than the fixed-price accent */
    font-weight: 500;
    font-style: italic;
}
/* When the chip is checked the whole pill is primary-bg + white text; the
   price loses its accent colour and inherits white from the parent. */
.ds-style-chip input:checked + span .ds-extra-price,
.ds-style-chip input:checked + span .ds-extra-price-quote {
    color: rgba(255, 255, 255, 0.85);
}

/* Disabled / locked chip (e.g. Extra revisions — info-only, unlocks after the
   3 included revisions are used). Visually muted, not-allowed cursor, no
   hover styling. The chip stays in the row so the user sees the price tier;
   it just can't be ticked at checkout. */
.ds-style-chip-locked,
.ds-style-chip input:disabled + span {
    cursor: not-allowed;
}
.ds-style-chip input:disabled + span {
    opacity: 0.65;
    background: #fafafa;
    border-style: dashed;
}
.ds-style-chip input:disabled + span:hover {
    /* Override the standard hover-coloured border on locked chips */
    border-color: var(--border);
    color: var(--text-medium);
    background: #fafafa;
}

/* Upload Zone */
.ds-upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-white);
}

.ds-upload-zone:hover,
.ds-upload-dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.ds-upload-icon {
    color: var(--text-light);
    margin-bottom: 12px;
}

.ds-upload-zone:hover .ds-upload-icon,
.ds-upload-dragover .ds-upload-icon {
    color: var(--primary);
}

.ds-upload-text {
    font-size: 1rem;
    color: var(--text-medium);
    margin-bottom: 4px;
}

.ds-upload-browse {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

.ds-upload-info {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* File List */
.ds-upload-list {
    margin-top: 12px;
}

.ds-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.ds-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ds-file-ext {
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ds-file-name {
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-file-size {
    font-size: 0.8rem;
    color: var(--text-light);
    flex-shrink: 0;
}

.ds-file-remove {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: var(--transition);
    flex-shrink: 0;
}

.ds-file-remove:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* Submit */
.ds-form-submit {
    text-align: center;
    padding-top: 16px;
}

.ds-form-disclaimer {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-top: 12px;
}

/* Success State */
.ds-form-success {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 24px;
}

.ds-success-icon {
    color: var(--accent);
    margin-bottom: 24px;
}

.ds-form-success h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

.ds-form-success p {
    color: var(--text-medium);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Responsive - Brief Form */
@media (max-width: 768px) {
    .ds-form-grid {
        grid-template-columns: 1fr;
    }

    .ds-form-section {
        padding: 24px 20px;
    }

    .ds-upload-zone {
        padding: 32px 16px;
    }
}

/* ========== Design Service Page — Accent Blue Overrides ========== */
.page-design-service .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.page-design-service .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.page-design-service .ds-form-field input:focus,
.page-design-service .ds-form-field select:focus,
.page-design-service .ds-form-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 125, 216, 0.1);
}

.page-design-service .ds-upload-zone:hover,
.page-design-service .ds-upload-dragover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.page-design-service .ds-upload-zone:hover .ds-upload-icon,
.page-design-service .ds-upload-dragover .ds-upload-icon {
    color: var(--accent);
}

.page-design-service .legal-modal-body a {
    color: var(--accent);
}

/* ========== Save Design Button ========== */
.save-design-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-design-btn svg {
    flex-shrink: 0;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dark);
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 10px 20px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ========== My Account Page ========== */
.page-account {
    background: var(--bg-light);
    min-height: 100vh;
}

.account-main {
    padding: 40px 0 80px;
    min-height: 60vh;
}

.account-header {
    margin-bottom: 32px;
}

.account-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
}

.account-header p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0;
}

/* Account Tabs */
.account-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 32px;
}

.account-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
}

.account-tab:hover {
    color: var(--text-dark);
}

.account-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.account-tab svg {
    opacity: 0.5;
}

.account-tab.active svg {
    opacity: 1;
}

/* Account Sections */
.account-section {
    display: none;
}

.account-section.active {
    display: block;
}

/* ── Designs Grid ── */
.designs-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.designs-toolbar h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.8rem;
}

.designs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-light);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.designs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.designs-empty h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin: 16px 0 8px;
}

.designs-empty p {
    color: var(--text-light);
    margin: 0 0 24px;
}

.designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.design-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}

.design-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.design-card-link {
    text-decoration: none;
    display: block;
}

.design-card-preview {
    aspect-ratio: 4/3;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.design-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.design-card-no-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.design-card-info {
    padding: 14px 16px 8px;
}

.design-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.design-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-light);
}

.design-card-type {
    background: var(--bg-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.design-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.design-badge-ordered {
    background: #ecfdf5;
    color: #059669;
}

.design-card-actions {
    padding: 8px 16px 14px;
    display: flex;
    gap: 8px;
}

/* Empty design slot */
.design-card-empty {
    text-decoration: none;
    color: inherit;
    border-style: dashed;
    border-color: #d0d5dd;
    background: #fafbfc;
    opacity: 0.75;
    transition: var(--transition);
}
.design-card-empty:hover {
    opacity: 1;
    border-color: var(--primary);
    background: #f0f7ff;
    transform: translateY(-2px);
}
.design-card-empty-preview {
    background: #f0f2f5 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.design-card-empty-name {
    color: var(--text-light) !important;
    font-weight: 400 !important;
}

/* ═══ Brief Cards ═══ */

.briefs-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-light);
}
.briefs-empty h3 {
    margin: 16px 0 6px;
    color: var(--heading);
    font-size: 1.1rem;
}
.briefs-empty p {
    font-size: 0.9rem;
    max-width: 380px;
    margin: 0 auto;
}

.brief-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.brief-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.brief-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.brief-card-ref {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--heading);
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 6px;
}

.brief-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.brief-status-new       { background: #e0f2fe; color: #0369a1; }
.brief-status-progress  { background: #fef3c7; color: #92400e; }
.brief-status-draft     { background: #ede9fe; color: #5b21b6; }
.brief-status-revision  { background: #fce7f3; color: #9d174d; }
.brief-status-completed { background: #d1fae5; color: #065f46; }
.brief-status-cancelled { background: #fee2e2; color: #991b1b; }

.brief-card-product {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 2px;
}
.brief-card-size {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 8px;
}
.brief-card-desc {
    font-size: 0.85rem;
    color: var(--body);
    line-height: 1.5;
    margin: 0 0 12px;
}

.brief-card-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-light);
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.brief-card-date {
    display: flex;
    align-items: center;
    gap: 4px;
}
.brief-card-deadline {
    color: #92400e;
    font-weight: 500;
}
.brief-card-files {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Toolbar for briefs section */
.designs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.designs-toolbar h2 {
    margin: 0;
}
.designs-count-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: #ecfdf5;
    color: #059669;
}
.designs-count-badge.at-limit {
    background: #fef2f2;
    color: #d32f2f;
}

/* ═══ Brief Detail View (Client Account) ═══ */
.brief-card-clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.brief-card-clickable:hover {
    border-color: var(--primary, #2dd4bf);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.brief-detail-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid var(--border, #e2e8f0);
    margin-bottom: 20px;
}

/* ═══ Brief Details section (collapsible card above messages) ═══ */
.brief-details-section {
    margin: 0 0 18px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}
.brief-details-section > summary.brief-details-toggle {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}
.brief-details-section[open] > summary.brief-details-toggle {
    border-bottom-color: var(--border, #e2e8f0);
}
.brief-details-section > summary.brief-details-toggle::-webkit-details-marker { display: none; }
.brief-details-section > summary.brief-details-toggle::marker { content: ''; }
.brief-details-section > summary.brief-details-toggle:hover { background: #f3f4f6; }
.brief-details-section[open] > summary.brief-details-toggle svg { transform: rotate(180deg); }
.brief-details-section > summary.brief-details-toggle svg { transition: transform 0.2s; }
.brief-details-section > :not(summary) { padding-left: 18px; padding-right: 18px; }
.brief-details-section > :first-of-type:not(summary) { padding-top: 14px; }
.brief-details-section > :last-child { padding-bottom: 16px; }
.brief-details-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 6px;
    margin: 4px 0 14px;
    font-size: 0.88rem;
    color: #374151;
}
.brief-details-grid dt {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}
.brief-details-grid dd {
    margin: 0;
    color: #111827;
    word-break: break-word;
}
.brief-detail-subhead {
    font-size: 0.82rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 6px;
}
.brief-detail-desc,
.brief-detail-notes {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.55;
    margin: 0 0 4px;
    white-space: normal;
    word-break: break-word;
}
.brief-detail-meta,
.brief-detail-files,
.brief-detail-addons {
    list-style: none;
    padding: 0;
    margin: 0 0 6px;
    font-size: 0.88rem;
    color: #374151;
}
.brief-detail-meta li { padding: 3px 0; line-height: 1.5; }
.brief-detail-meta li strong { color: #6b7280; font-weight: 600; }
.brief-detail-files li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed #e5e7eb;
}
.brief-detail-files li:first-child { border-top: 0; }
.brief-detail-files li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary, #00897b);
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}
.brief-detail-files li a:hover { text-decoration: underline; }
.brief-detail-files li small { color: #9ca3af; font-size: 0.78rem; }
.brief-detail-empty {
    margin: 0;
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
}
.brief-detail-addons li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.brief-addon-paid,
.brief-addon-quote {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.brief-addon-paid { background: #dcfce7; color: #166534; }
.brief-addon-quote { background: #fef3c7; color: #92400e; }

/* ═══ Need Extras? section (self-service add-ons) ═══ */
.need-extras-section {
    margin: 0 0 18px;
    padding: 16px 18px;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 12px;
}
.need-extras-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #115e59;
}
.need-extras-hint {
    margin: 0 0 12px;
    font-size: 0.85rem;
    color: #115e59;
    line-height: 1.5;
}
.need-extras-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ne-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #115e59;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
    font-family: inherit;
}
.ne-chip:hover {
    background: #ccfbf1;
    border-color: #5eead4;
}
.ne-chip:active { transform: translateY(1px); }
.ne-chip-label {
    white-space: nowrap;
}
.ne-chip-price {
    font-style: normal;
    font-weight: 700;
    color: #0d9488;
    background: #ccfbf1;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
}
.ne-chip-price-quote {
    color: #92400e;
    background: #fef3c7;
    font-weight: 600;
}
.ne-chip-locked {
    cursor: not-allowed;
    opacity: 0.6;
    border-style: dashed;
}
.ne-chip-locked:hover { background: #fff; border-color: #99f6e4; }

/* Add-on quote modal */
.addon-quote-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10000;
    animation: addon-fadeIn 0.15s ease-out;
}
@keyframes addon-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.addon-quote-modal {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.addon-quote-modal h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: #111827;
}
.addon-quote-modal p {
    margin: 0 0 14px;
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.5;
}
.addon-quote-modal textarea {
    width: 100%;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #111827;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
}
.addon-quote-modal textarea:focus {
    outline: none;
    border-color: var(--primary, #00897b);
    box-shadow: 0 0 0 3px rgba(0,137,123,0.1);
}
.addon-quote-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
/* Confirm modal: summary line under the description (Logo +$149) */
.addon-confirm-summary {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0 6px;
}
.addon-confirm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    color: #115e59;
}
.addon-confirm-row strong { color: #0d9488; }

/* ═══ Client Chat Container ═══ */
.client-chat-container {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-bottom: 24px;
}
.client-msg-thread {
    max-height: 480px;
    min-height: 120px;
    overflow-y: auto;
    padding: 20px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.client-msg-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted, #94a3b8);
}
.client-msg-empty p { margin-top: 12px; font-size: 0.9rem; }
.client-msg {
    padding: 12px 16px;
    border-radius: 18px;
    max-width: 82%;
    font-size: 0.9rem;
    line-height: 1.6;
}
@keyframes clientMsgSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.client-msg-from-admin {
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.client-msg-from-me {
    background: var(--primary, #2dd4bf);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.client-msg-from-me .client-msg-sender { color: rgba(255,255,255,0.85); }
.client-msg-from-me .client-msg-time { color: rgba(255,255,255,0.6); }
.client-msg-from-me .client-msg-file-link { color: #fff; background: rgba(255,255,255,0.15); }
.client-msg-from-me .client-msg-file-link:hover { background: rgba(255,255,255,0.25); }
.client-msg-from-me .client-msg-draft-badge { background: rgba(255,255,255,0.2); color: #fff; }
.client-msg-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; gap: 12px;
}
.client-msg-sender { font-weight: 600; font-size: 0.8rem; color: #334155; }
.client-msg-time { font-size: 0.72rem; color: var(--muted, #94a3b8); white-space: nowrap; }
.client-msg-text { white-space: pre-wrap; word-break: break-word; }
.client-msg-file { margin-top: 8px; }
.client-draft-img {
    display: block; max-width: 100%; max-height: 300px;
    border-radius: 8px; border: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 8px; cursor: pointer; transition: box-shadow 0.2s;
}
.client-draft-img:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.client-msg-file-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; background: rgba(0,0,0,0.04); border-radius: 8px;
    font-size: 0.82rem; color: var(--primary, #2dd4bf); text-decoration: none; font-weight: 500;
}
.client-msg-file-link:hover { background: rgba(0,0,0,0.08); }
.client-msg-draft-badge {
    display: inline-block; margin-top: 6px; padding: 2px 8px;
    background: #ede9fe; color: #5b21b6; font-size: 0.7rem;
    font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ═══ Client Typing Indicator ═══ */
.client-typing-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 20px; background: #f8fafc; border-top: 1px solid var(--border, #e2e8f0);
    font-size: 0.82rem; color: var(--muted, #94a3b8);
}
.client-typing-dots { display: flex; gap: 3px; }
.client-typing-dots span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #94a3b8);
    animation: clientTypingBounce 1.4s infinite;
}
.client-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.client-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes clientTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ═══ Client Chat Input Bar ═══ */
.client-chat-input-bar {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 14px 16px; border-top: 1px solid var(--border, #e2e8f0);
    background: #fff;
}
.client-chat-attach {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    color: var(--muted, #94a3b8); transition: all 0.15s; flex-shrink: 0;
    margin-bottom: 6px;
}
.client-chat-attach:hover { background: #f1f5f9; color: var(--primary, #2dd4bf); }
.client-chat-input-wrapper {
    flex: 1; display: flex; flex-direction: column;
    background: #f1f5f9; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--border, #e2e8f0); transition: border-color 0.15s;
}
.client-chat-input-wrapper:focus-within { border-color: var(--primary, #2dd4bf); }
.client-chat-textarea {
    width: 100%; border: none; outline: none; resize: none;
    padding: 14px 18px; font-size: 0.92rem; line-height: 1.5;
    background: transparent; font-family: inherit;
    min-height: 56px; max-height: 140px; box-sizing: border-box;
}
.client-chat-file-preview {
    padding: 8px 14px 0; display: flex; flex-wrap: wrap; gap: 4px;
}
.client-chat-file-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; background: #e2e8f0; border-radius: 14px;
    font-size: 0.78rem; color: #334155;
}
.client-chat-file-remove {
    background: none; border: none; cursor: pointer; font-size: 1.1rem;
    color: var(--muted, #94a3b8); padding: 0 2px; line-height: 1;
}
.client-chat-file-remove:hover { color: #ef4444; }
.client-chat-send-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: var(--primary, #2dd4bf); color: #fff; cursor: pointer;
    transition: all 0.15s; flex-shrink: 0; margin-bottom: 6px;
}
.client-chat-send-btn:hover { filter: brightness(1.1); transform: scale(1.05); }
.client-chat-send-btn:active { transform: scale(0.95); }

/* Notification badges */
.briefs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 9px;
    margin-left: 4px;
}
.brief-card-unread {
    display: inline-block;
    padding: 2px 8px;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    animation: unreadPulse 2s ease-in-out infinite;
}
@keyframes unreadPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Client file upload row */
.client-file-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.client-file-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f1f5f9;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.client-file-label:hover {
    background: #e2e8f0;
    border-color: var(--primary, #2dd4bf);
}
.client-file-name {
    font-size: 0.8rem;
    color: #64748b;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Revision Tracker (Client) ── */
.brief-card-revisions {
    font-size: 0.75rem;
    color: #64748b;
}
.brief-detail-revisions {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.rev-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 8px;
    font-weight: 600;
}
.rev-visual {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.rev-pip {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 600;
    color: #94a3b8;
    transition: all 0.2s;
}
.rev-pip.rev-pip-used {
    background: var(--primary, #2dd4bf);
    color: #fff;
    border-color: var(--primary, #2dd4bf);
}
.rev-remaining {
    font-size: 0.82rem;
    color: #64748b;
}

/* Guest warning banner in editor */
/* Guest warning — slim full-width bar below wizard nav */
.guest-warning-banner {
    background: linear-gradient(90deg, #fff3e0, #fff8e1);
    border-bottom: 1px solid #ffcc80;
    animation: guestBannerSlide 0.3s ease;
    /* Break out of .container to span full viewport width */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}
.guest-warning-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 24px;
    font-size: 13px;
    color: #5d4037;
    max-width: 1200px;
    margin: 0 auto;
}
.guest-warning-inner svg {
    flex-shrink: 0;
    color: #f57c00;
}
.guest-warning-inner span {
    flex: 1;
}
.guest-warning-inner strong {
    color: #e65100;
}
.guest-warning-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.guest-warning-cta {
    flex-shrink: 0;
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s;
}
.guest-warning-signin {
    background: transparent;
    color: #e65100;
    border: 1px solid #e65100;
}
.guest-warning-signin:hover {
    background: #e65100;
    color: #fff;
}
.guest-warning-signup {
    background: #f57c00;
    color: #fff;
    border: 1px solid #f57c00;
}
.guest-warning-signup:hover {
    background: #e65100;
    border-color: #e65100;
}
.guest-warning-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: #bcaaa4;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.guest-warning-dismiss:hover {
    color: #5d4037;
}
@keyframes guestBannerSlide {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 50px; }
}

/* Draft restore banner — "Continue where you left off?" */
.draft-restore-banner {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border: 1px solid #a5d6a7;
    border-radius: 12px;
    margin: 16px auto;
    max-width: 1200px;
    padding: 0 24px;
    animation: draftBannerSlide 0.4s ease;
}
.draft-restore-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
}
.draft-restore-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #43a047;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.draft-restore-icon.draft-restore-loading svg {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.draft-restore-text {
    flex: 1;
    min-width: 0;
}
.draft-restore-text strong {
    display: block;
    font-size: 15px;
    color: #1b5e20;
    margin-bottom: 2px;
}
.draft-restore-text span {
    font-size: 13px;
    color: #558b2f;
}
.draft-restore-btns {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.draft-restore-continue {
    padding: 8px 20px;
    background: #43a047;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.draft-restore-continue:hover {
    background: #2e7d32;
}
.draft-restore-discard {
    padding: 8px 16px;
    background: transparent;
    color: #666;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.draft-restore-discard:hover {
    background: #f5f5f5;
    border-color: #999;
}
@keyframes draftBannerSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
    .draft-restore-inner {
        flex-wrap: wrap;
    }
    .draft-restore-btns {
        width: 100%;
        justify-content: flex-end;
    }
}

.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-light);
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: var(--transition);
}

.btn-ghost:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

/* ── Orders Placeholder ── */
.orders-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.orders-placeholder h3 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin: 16px 0 8px;
}

.orders-placeholder p {
    color: var(--text-light);
    margin: 0;
}

/* ── Settings Form ── */
.settings-form {
    max-width: 500px;
}

.settings-group {
    margin-bottom: 32px;
}

.settings-group h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.settings-field {
    margin-bottom: 16px;
}

.settings-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.settings-field input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.settings-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 180, 151, 0.1);
}

.settings-field input:disabled {
    background: var(--bg-light);
    color: var(--text-light);
    cursor: not-allowed;
}

.settings-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 4px;
    display: block;
}

.settings-group-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: -8px 0 16px;
}

.optional-label {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 400;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr 120px;
    gap: 12px;
}

.settings-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.settings-field select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(1, 180, 151, 0.1);
}

@media (max-width: 600px) {
    .settings-row {
        grid-template-columns: 1fr;
    }
}

.settings-message {
    padding: 10px 14px;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.settings-message-success, .settings-message.success {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.settings-message-error, .settings-message.error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.settings-message-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ── Universal Toast Notification ── */
.app-toast {
    position: fixed;
    bottom: 96px; /* clear the Crisp chat launcher (~60px, bottom-right) */
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 10001;
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
    pointer-events: none;
    max-width: 420px;
}

.app-toast-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.app-toast-icon { display: flex; flex-shrink: 0; }

.app-toast-success { background: #059669; }
.app-toast-error   { background: #dc2626; }
.app-toast-warning { background: #d97706; }
.app-toast-info    { background: #2563eb; }

/* ── Inline spinner (for button loading states) ── */
.spinner-inline {
    display: inline-block;
    vertical-align: middle;
    animation: appSpin 0.7s linear infinite;
}

/* ── Loading Overlay ── */
.app-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.app-loading-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.app-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border, #e2e8f0);
    border-top-color: var(--primary, #00897b);
    border-radius: 50%;
    animation: appSpin 0.7s linear infinite;
}

@keyframes appSpin {
    to { transform: rotate(360deg); }
}

.app-loading-text {
    font-size: 0.95rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

/* ── Dialog Overlay (confirm / prompt) ── */
.app-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.app-dialog-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-dialog {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    text-align: center;
}

.app-dialog-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: #1a1a2e;
}

.app-dialog-message {
    margin: 0 0 20px;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.app-dialog-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 20px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.app-dialog-input:focus {
    border-color: var(--primary, #00897b);
    box-shadow: 0 0 0 3px rgba(1,180,151,0.1);
}

.app-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.app-dialog-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
}

.app-dialog-btn:active { transform: scale(0.97); }

.app-dialog-cancel {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
}

.app-dialog-cancel:hover { background: #f5f5f5; }

.app-dialog-confirm {
    background: var(--primary, #00897b);
    color: #fff;
}

.app-dialog-confirm:hover { background: #00796b; }

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .account-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .account-tab {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .designs-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .designs-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .app-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}

/* ========== Added to Cart Actions (Review Step 4) ========== */
.added-to-cart-actions {
    margin-top: 16px;
    animation: fadeInUp 0.3s ease;
}

.added-to-cart-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #059669;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.added-to-cart-check svg { flex-shrink: 0; }

.added-to-cart-btns {
    display: flex;
    gap: 10px;
}

.added-to-cart-btns .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.88rem;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== Checkout Page ========== */
.page-checkout { background: #f9fafb; }

.checkout-section {
    padding: 40px 0 80px;
    min-height: 60vh;
}

.checkout-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 24px;
}

.checkout-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    color: #92400e;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.checkout-notice svg { flex-shrink: 0; color: #d97706; }

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
}

.checkout-shipping,
.checkout-summary {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.checkout-shipping h2,
.checkout-summary h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

/* ── Checkout Form ── */
.checkout-form .form-field {
    margin-bottom: 16px;
}

.checkout-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 5px;
}

.checkout-form label .required { color: #ef4444; }

.checkout-form input,
.checkout-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1a1a2e;
    background: #fff;
    transition: border-color 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.checkout-form input:focus,
.checkout-form select:focus {
    outline: none;
    border-color: var(--primary, #00897b);
    box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.1);
}

.checkout-form input[readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

.checkout-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}
.form-row-3 .form-field label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Checkout Summary ── */
.checkout-summary {
    position: sticky;
    top: 100px;
}

.checkout-items {
    margin-bottom: 16px;
}

.checkout-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    align-items: flex-start;
}

.checkout-item:last-child { border-bottom: none; }

.checkout-item-img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.checkout-item-info { flex: 1; min-width: 0; }

.checkout-item-info h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-item-size {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 2px 0 0;
}

.checkout-item-options {
    font-size: 0.78rem;
    color: #9ca3af;
    margin: 2px 0 0;
}

.checkout-item-price {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 0.9rem;
    white-space: nowrap;
}

.checkout-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #9ca3af;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-item-remove:hover {
    color: #ef4444;
    background: #fef2f2;
}

.checkout-totals {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-bottom: 20px;
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.9rem;
    color: #374151;
}

.checkout-free {
    color: #059669;
    font-weight: 600;
}

.checkout-total-final {
    border-top: 2px solid #1a1a2e;
    margin-top: 8px;
    padding-top: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
}

.tax-disclosure {
    font-size: 0.75rem;
    color: #888;
    margin-top: 8px;
    line-height: 1.4;
}

.checkout-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1rem;
    padding: 14px;
}

.checkout-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 12px;
}

.checkout-secure-note svg { color: #9ca3af; }

/* ── Checkout Responsive ── */
@media (max-width: 768px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ========== Order Confirmation Page ========== */
.page-confirmation { background: #f9fafb; }

.confirmation-section {
    padding: 60px 0 80px;
    min-height: 60vh;
}

.confirmation-loading {
    text-align: center;
    padding: 80px 0;
}

.confirmation-loading p {
    color: #6b7280;
    margin-top: 16px;
    font-size: 0.95rem;
}

.spinner-large {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary, #00897b);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.confirmation-card {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 40px 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-align: center;
}

.confirmation-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.confirmation-icon-success {
    background: #f0fdf4;
    color: #059669;
}

.confirmation-icon-error {
    background: #fef2f2;
    color: #ef4444;
}

.confirmation-card h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
}

.confirmation-subtitle {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0 0 28px;
}

.confirmation-details {
    text-align: left;
    margin: 24px 0;
}

.confirmation-ref {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.confirmation-ref-label {
    font-size: 0.82rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.confirmation-ref-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #059669;
    font-family: 'Courier New', monospace;
}

.confirmation-items {
    margin-bottom: 12px;
}

.confirmation-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
}

.confirmation-item-name {
    flex: 1;
    font-weight: 500;
    color: #1a1a2e;
}

.confirmation-item-size {
    color: #6b7280;
    font-size: 0.82rem;
    margin: 0 12px;
}

.confirmation-item-price {
    font-weight: 600;
    color: #1a1a2e;
}

.confirmation-total-row {
    display: flex;
    justify-content: space-between;
    border-top: 2px solid #1a1a2e;
    padding-top: 12px;
    margin-top: 4px;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a2e;
}

.confirmation-total-amount { color: #059669; }

.confirmation-shipping {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.confirmation-shipping h3 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin: 0 0 6px;
    font-weight: 600;
}

.confirmation-shipping p {
    margin: 0;
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
}

.confirmation-email-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    margin: 20px 0;
}

.confirmation-email-note svg { color: #00897b; }
.confirmation-email-note strong { color: #1a1a2e; }

.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.confirmation-actions .btn {
    min-width: 160px;
}

@media (max-width: 600px) {
    .confirmation-card {
        padding: 28px 20px;
    }
    .confirmation-actions {
        flex-direction: column;
    }
    .confirmation-actions .btn {
        width: 100%;
    }
}

/* ========== Order History Cards (Account Page) ========== */
.orders-loading {
    text-align: center;
    padding: 40px 0;
    color: #6b7280;
}

.orders-empty {
    text-align: center;
    padding: 48px 0;
    color: #9ca3af;
}

.orders-empty svg {
    margin-bottom: 12px;
    color: #d1d5db;
}

.orders-empty p { margin: 0; }

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.order-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.2s;
}

.order-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.order-ref {
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--primary, #00897b);
    font-size: 0.95rem;
}

.order-date {
    font-size: 0.82rem;
    color: #9ca3af;
}

.order-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status-paid {
    background: #f0fdf4;
    color: #059669;
}

.order-status-processing {
    background: #eff6ff;
    color: #2563eb;
}

.order-status-shipped {
    background: #fefce8;
    color: #ca8a04;
}

.order-status-delivered {
    background: #f0fdf4;
    color: #059669;
}

.order-status-pending_review {
    background: #fef3c7;
    color: #92400e;
}

.order-status-completed {
    background: #d1fae5;
    color: #065f46;
}

.order-item-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-item-type-download {
    background: #e0f2fe;
    color: #0369a1;
}

/* Download card status */
.download-card-status {
    font-size: 0.78rem;
    color: var(--text-medium, #888);
    margin-top: 4px;
}

.download-status-expired {
    color: #dc2626;
    font-size: 0.78rem;
}

.download-card-expired {
    opacity: 0.6;
}

.order-card-items {
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}

.order-card-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.88rem;
}

.order-card-item-name {
    color: #374151;
}

.order-card-item-size {
    color: #9ca3af;
    font-size: 0.8rem;
    margin-left: 8px;
}

.order-card-item-price {
    font-weight: 600;
    color: #1a1a2e;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
    margin-top: 8px;
}

.order-card-total {
    font-weight: 700;
    color: #1a1a2e;
}

.order-card-shipping {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ========== Print Guide Overlay ========== */
.print-guide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
    display: none;
}
.print-guide-overlay.active { display: block; }

.btn-guide-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-guide-toggle svg {
    flex-shrink: 0;
}
.btn-guide-toggle.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ========== Legal / IP Protection UI ========== */

/* Upload IP Notice — shown below upload zones */
.upload-ip-notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.72rem;
    color: #888;
    margin-top: 8px;
    line-height: 1.4;
}
.upload-ip-notice svg {
    flex-shrink: 0;
    color: #aaa;
    margin-top: 2px;
}
.upload-ip-notice a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.upload-ip-notice a:hover {
    text-decoration: underline;
}

/* Checkout Terms Checkbox */
.checkout-terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #f8f9fb;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #444;
}
.checkout-terms-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.checkout-terms-checkbox a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.checkout-terms-checkbox a:hover {
    text-decoration: underline;
}

/* Signup Terms/Privacy clickwrap (auth modal) */
.auth-terms-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 14px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #555;
}
.auth-terms-checkbox input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.auth-terms-checkbox a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.auth-terms-checkbox a:hover {
    text-decoration: underline;
}

/* Pay button disabled state */
.checkout-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Order Confirmation IP Notice */
.order-ip-notice {
    margin-top: 24px;
    padding: 16px 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #166534;
}
.order-ip-notice p {
    margin: 0;
}
.order-ip-notice p + p {
    margin-top: 8px;
}
.order-ip-notice .order-ip-small {
    font-size: 0.78rem;
    color: #15803d;
}
.order-ip-notice a {
    color: #166534;
    font-weight: 600;
    text-decoration: underline;
}

/* Design Brief — Service Type Cards */
.ds-service-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ds-service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e2e5ea;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.ds-service-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.03);
}
.ds-service-card input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    flex-shrink: 0;
    cursor: pointer;
}
.ds-service-card input[type="radio"]:checked + .ds-card-inner {
    color: var(--primary);
}
.ds-service-card:has(input:checked) {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}
.ds-card-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ds-card-title {
    font-weight: 600;
    font-size: 0.95rem;
}
.ds-card-desc {
    font-size: 0.78rem;
    color: #777;
}
.ds-design-only-options {
    margin-top: 12px;
}

/* ========== Brief Wizard (single-card slide carousel) ==========
   Layout strategy: only the active card is `position: relative` so it
   contributes to viewport height. Inactive cards are absolute-positioned
   off to the side (or fully hidden after the transition), so the viewport
   auto-shrinks to whatever the active card needs — no manual height JS. */
.ds-wizard {
    --ds-wizard-step-count: 3;
}
.ds-wizard-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #ececec;
}
.ds-wizard-track {
    position: relative;
}

.ds-wizard-card {
    width: 100%;
    box-sizing: border-box;
    padding: 32px 32px 24px;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s ease,
                visibility 0s linear 0.35s; /* visibility waits for opacity fade */
}
/* Inactive cards float behind the active one — absolute removes them from
   layout so viewport height matches just the active card (no empty space) */
.ds-wizard-card:not([data-active]) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.ds-wizard-card[data-active] {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s; /* active card becomes visible instantly */
}
.ds-wizard-card[data-side="left"]:not([data-active]) {
    transform: translateX(-30px);
}
.ds-wizard-card[data-side="right"]:not([data-active]) {
    transform: translateX(30px);
}
.ds-wizard-card-header {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
}
.ds-wizard-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #111;
    line-height: 1.2;
}
.ds-wizard-card-subtitle {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Inside wizard cards, the existing .ds-form-section dividers feel doubled — soften them */
.ds-wizard-card .ds-form-section {
    padding: 0;
    margin-bottom: 24px;
    border: none;
    background: transparent;
}
.ds-wizard-card .ds-form-section:last-child {
    margin-bottom: 0;
}
.ds-wizard-card .ds-form-submit {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.ds-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
}
.ds-wizard-nav .btn {
    min-width: 140px;
}
.ds-wizard-back[disabled] {
    visibility: hidden;
    pointer-events: none;
}
/* Hide Continue on last step (Submit button inside Step 3 takes over) */
.ds-wizard[data-step="3"] .ds-wizard-next {
    display: none;
}

.ds-wizard-progress {
    margin: 0 0 16px;
}
.ds-progress-track {
    height: 6px;
    background: #eef0f3;
    border-radius: 999px;
    overflow: hidden;
}
.ds-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent, #01b497), #00d4a8);
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-progress-label {
    text-align: right;
    font-size: 0.82rem;
    color: #888;
    margin-top: 8px;
    font-weight: 500;
}
.ds-progress-label .ds-step-current {
    color: var(--accent, #01b497);
    font-weight: 700;
}

/* Shake animation for invalid field on Continue */
@keyframes ds-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.ds-shake {
    animation: ds-shake 0.4s ease;
    border-color: #dc2626 !important;
}

/* Mobile: tighter padding */
@media (max-width: 640px) {
    .ds-wizard-card {
        padding: 22px 18px 18px;
    }
    .ds-wizard-card-title {
        font-size: 1.2rem;
    }
    .ds-wizard-card-subtitle {
        font-size: 0.88rem;
    }
    .ds-wizard-nav .btn {
        min-width: 0;
        flex: 1;
    }
}

/* ========== Design Service page — section ordering ==========
   Visually moves the brief form right after the hero ("Professional Design Service"),
   pushing "What's Included" and "How It Works" below the form. Achieved via flex
   order on body without touching the HTML source, so both static + CMS-rendered
   versions stay aligned. */
body.page-design-service {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.page-design-service > .announcement-banner { order: 0; }
body.page-design-service > .header { order: 1; }
body.page-design-service > .ds-hero,
body.page-design-service > section.ds-hero { order: 2; }
body.page-design-service > .ds-brief,
body.page-design-service > section.ds-brief { order: 3; }
body.page-design-service > .ds-included,
body.page-design-service > section.ds-included { order: 4; }
body.page-design-service > .ds-process,
body.page-design-service > section.ds-process { order: 5; }
body.page-design-service > .ds-revisions,
body.page-design-service > section.ds-revisions { order: 6; }
body.page-design-service > .ds-diy-prompt,
body.page-design-service > section.ds-diy-prompt { order: 6; }
body.page-design-service > .ds-cta,
body.page-design-service > section.ds-cta { order: 7; }
body.page-design-service > footer { order: 100; }
/* Modals / scripts / hidden helper divs stay out of the visual flow */
body.page-design-service > .pb-modal,
body.page-design-service > .modal,
body.page-design-service > div[hidden],
body.page-design-service > script,
body.page-design-service > noscript { order: 999; }

/* ========== Editor Demo Tutorial (auto-playing coachmark + cursor) ==========
   Dimming comes ENTIRELY from .pb-tut-spot's 9999px box-shadow — the overlay
   stays transparent so the spotlit element shows in full color. The target
   element is also bumped to z-index 9701 via .pb-tut-target-active so it
   visually punches through the dimming with no leftover tint. */
.pb-tut-overlay {
    position: fixed;
    inset: 0;
    z-index: 9700;
    background: transparent;
    display: none;
    animation: pb-tut-fade 0.25s ease;
    pointer-events: auto;
}
.pb-tut-overlay.pb-tut-show {
    display: block;
}
@keyframes pb-tut-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.pb-tut-spot {
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78), 0 0 0 3px rgba(1, 180, 151, 1);
    pointer-events: none;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* Spotlit target — lift it above the dim shadow so it shows 100% bright.
   z-index must exceed the announcement banner (10000) so the target doesn't
   get visually covered by the banner near the top of the viewport. */
.pb-tut-target-active {
    position: relative !important;
    z-index: 10002 !important;
    /* Keep buttons clickable shouldn't be needed (tutorial is auto-demo) but
       this is harmless — pointer-events stays whatever it was */
}

/* Animated cursor that floats around the screen during demos.
   z-index 10001 — above the announcement banner (10000) so the cursor is
   always visible regardless of where it lands. */
.pb-tut-cursor {
    position: fixed;
    width: 28px;
    height: 28px;
    z-index: 10001;
    pointer-events: none;
    transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    transform: translate(-4px, -4px);
}
.pb-tut-cursor[hidden] { display: none; }
.pb-tut-cursor svg {
    display: block;
}
.pb-tut-cursor.pb-tut-cursor-clicking::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: rgba(1, 180, 151, 0.45);
    animation: pb-tut-click-ripple 0.4s ease-out;
}
@keyframes pb-tut-click-ripple {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Brief flash for the Save button on step 8 — cosmetic only, no actual save */
.pb-tut-flash {
    animation: pb-tut-flash-anim 0.6s ease;
}
@keyframes pb-tut-flash-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(1, 180, 151, 0); }
    50% { box-shadow: 0 0 0 8px rgba(1, 180, 151, 0.4); }
}
.pb-tut-card {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 20px 22px 16px;
    width: 340px;
    max-width: calc(100vw - 24px);
    box-shadow: 0 16px 50px rgba(0,0,0,0.35);
    transition: top 0.3s ease, left 0.3s ease;
}
.pb-tut-step-indicator {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.pb-tut-card h4 {
    font-size: 1.1rem;
    margin: 0 0 8px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}
.pb-tut-card p {
    margin: 0 0 16px;
    font-size: 0.92rem;
    color: #4b5563;
    line-height: 1.55;
}
.pb-tut-card p strong {
    color: var(--accent, #01b497);
}
.pb-tut-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.pb-tut-skip {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
}
.pb-tut-skip:hover {
    color: #6b7280;
}
.pb-tut-nav {
    display: flex;
    gap: 8px;
}
.pb-tut-nav .btn-sm {
    padding: 8px 14px;
    font-size: 0.88rem;
}

/* ========== Card tutorial (mobile + "?" help button) ==========
   The card tour reuses .pb-tut-overlay / .pb-tut-spot / .pb-tut-card. The card
   is positioned by JS (_positionCardCard) on the opposite side of the spotlit
   tool so it never covers it — same idea as the desktop tour. */

/* "?" help button — re-opens the tutorial on demand (desktop + mobile).
   Hidden by default; shown via .pb-tut-help-visible only while in the editor. */
#pbTutHelpBtn {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #01b497);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 9000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}
#pbTutHelpBtn.pb-tut-help-visible {
    display: flex;
}
#pbTutHelpBtn:hover {
    transform: scale(1.08);
}
@media (max-width: 600px) {
    #pbTutHelpBtn {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        left: 12px;
        bottom: 12px;
    }
}

/* ========== Tutorial v2 — interactive walkthrough panel ==========
   A small floating panel (bottom-right of viewport) that guides the user
   through the editor while they perform each action themselves. Replaces the
   previous full-screen dim+spotlight overlay. The user has full editor access
   while the panel is up — it never blocks clicks elsewhere. */
.pb-tut-panel {
    position: fixed;
    /* Default: top-right. Bottom-right is occupied by the Crisp chat launcher,
       and a bottom-right panel was also overflowing into the left BG sidebar on
       narrower viewports. Top-right keeps the panel clear of both. Steps whose
       target lives in the top header opt into .pb-tut-pos-bottom-left below. */
    right: 20px;
    top: 80px;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 16px 18px 14px;
    /* Above the mobile sticky header (z-index 9999) so the nav bar never slices
       through the tutorial panel on phones. */
    z-index: 10050;
    color: #1a1a1a;
    font-family: inherit;
    animation: pb-tut-panel-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Steps where the target sits in the top header (Save, Review) — flip the
   panel to bottom-left so it doesn't cover the target. Bottom-left is also
   safe: the help "?" button is hidden while the tour is active, and Crisp's
   launcher sits on the opposite (bottom-right) corner. */
.pb-tut-panel.pb-tut-pos-bottom-left {
    top: auto;
    right: auto;
    left: 20px;
    bottom: 20px;
}
@keyframes pb-tut-panel-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pb-tut-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.pb-tut-panel-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent, #01b497);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pb-tut-panel-close {
    background: none;
    border: 0;
    color: #888;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.pb-tut-panel-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
}
.pb-tut-panel-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}
.pb-tut-panel-body {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #444;
}
.pb-tut-panel-body strong {
    color: #1a1a1a;
}
.pb-tut-panel-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.pb-tut-panel-actions-finish {
    justify-content: flex-end; /* Keep button on the right, Start fresh stays left */
}
.pb-tut-panel-skip {
    background: none;
    border: 0;
    color: #777;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.pb-tut-panel-skip:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}
.pb-tut-panel-next {
    background: var(--accent, #01b497);
    color: #fff;
    border: 0;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.pb-tut-panel-next:hover {
    filter: brightness(1.06);
}
.pb-tut-panel-next:active {
    transform: scale(0.97);
}

@media (max-width: 600px) {
    .pb-tut-panel {
        right: 12px;
        left: 12px;
        /* Clear the sticky nav (~72px) PLUS the announcement/promo bar (~50px) that sits
           above it at scroll-top — 64px sat behind the nav on mobile. */
        top: 130px;
        bottom: auto;
        width: auto;
        padding: 14px 16px 12px;
    }
    /* On mobile the bottom-left variant collapses to the same full-width bar
       near the bottom (Crisp sits on top, but mobile Crisp is small + the
       toolbar already lives there). */
    .pb-tut-panel.pb-tut-pos-bottom-left {
        right: 12px;
        left: 12px;
        top: auto;
        bottom: 12px;
    }
}

/* Pulse ring around the currently-armed tool button. CSS-only keyframe so the
   panel doesn't have to drive any animation per frame. The pulse never blocks
   clicks (pointer-events on a pseudo-element).

   NOTE: we use ::before deliberately — the toolbar tooltips (`[data-tooltip]`)
   already own ::after with a `background: #333` rule that becomes opacity:1 on
   hover. If we used ::after here too, hovering the pulsed button would paint a
   black rectangle over it because the cascade merges both rules onto the same
   pseudo-element. ::before is unused by the tooltip system. */
.pb-tut-tool-pulse {
    position: relative;
    z-index: 1;
}
.pb-tut-tool-pulse::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(1, 180, 151, 0.65);
    animation: pb-tut-pulse-ring 1.6s cubic-bezier(0.66, 0, 0, 1) infinite;
}
@keyframes pb-tut-pulse-ring {
    0%   { box-shadow: 0 0 0 0   rgba(1, 180, 151, 0.65); }
    70%  { box-shadow: 0 0 0 12px rgba(1, 180, 151, 0); }
    100% { box-shadow: 0 0 0 0   rgba(1, 180, 151, 0); }
}

/* ========== Mobile editor guard ==========
   Shown via JS only when (a) viewport ≤ 768px AND (b) user has entered the editor.
   Sits as an overlay sheet — non-modal, dismissible. */
.pb-mobile-guard {
    position: fixed;
    inset: 0;
    /* Above the mobile sticky header (z-index 9999) so the nav bar never shows
       through the middle of the "works best on a larger screen" sheet. */
    z-index: 10050;
    display: none;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow-y: auto;
    padding: 32px 16px;
}
.pb-mobile-guard[hidden] { display: none !important; }
.pb-mobile-guard.pb-mobile-guard-show { display: flex; align-items: flex-start; justify-content: center; }

.pb-mobile-guard-inner {
    background: white;
    border-radius: 16px;
    padding: 28px 22px 24px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    text-align: center;
    animation: pb-mobile-guard-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pb-mobile-guard-in {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.pb-mobile-guard-icon {
    font-size: 48px;
    margin-bottom: 8px;
    line-height: 1;
}
.pb-mobile-guard-inner h3 {
    font-size: 1.2rem;
    margin: 0 0 10px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}
.pb-mobile-guard-inner > p {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 18px;
}
.pb-mobile-guard-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.pb-mobile-guard-actions .btn {
    width: 100%;
}
.pb-mobile-guard-fineprint {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
    line-height: 1.45;
}
.pb-mobile-guard-emailbox {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    text-align: left;
}
.pb-mobile-guard-emailbox label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.pb-mobile-guard-emailbox input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #e2e5ea;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.pb-mobile-guard-emailbox input[type="email"]:focus {
    border-color: var(--accent, #01b497);
}
.pb-mobile-guard-emailbox .btn {
    width: 100%;
}
.pb-mobile-guard-error {
    color: #b91c1c;
    font-size: 0.85rem;
    margin: 6px 0 0;
}
.pb-mobile-guard-success {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(1, 180, 151, 0.08);
    border: 1px solid rgba(1, 180, 151, 0.3);
    border-radius: 10px;
    text-align: left;
}
.pb-mobile-guard-success strong {
    display: block;
    color: #0f7b66;
    margin-bottom: 4px;
    font-size: 0.95rem;
}
.pb-mobile-guard-success p {
    margin: 0;
    font-size: 0.82rem;
    color: #374151;
    line-height: 1.5;
}

/* ========== Custom Font Picker (replaces <select> font dropdowns) ========== */
/* Trigger button — sits inline next to size input. Shows the current font name
   IN its own typeface so the user sees the choice without opening the panel. */
.pb-font-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 30px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pb-font-picker-trigger:hover {
    border-color: #bbb;
}
.pb-font-picker-trigger:focus {
    outline: none;
    border-color: var(--accent, #01b497);
    box-shadow: 0 0 0 2px rgba(1, 180, 151, 0.18);
}
.pb-font-picker-trigger-label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pb-font-picker-trigger-caret {
    color: #aaa;
    font-size: 0.7rem;
    line-height: 1;
}

/* Floating panel — same docked-popup pattern as ColorPickerPopup. */
.pb-font-picker-panel {
    position: fixed;
    width: 280px;
    max-height: 360px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pb-font-picker-in 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.pb-font-picker-panel.hidden { display: none; }
@keyframes pb-font-picker-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pb-font-picker-search {
    padding: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pb-font-picker-search input {
    width: 100%;
    height: 30px;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.85rem;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.pb-font-picker-search input:focus {
    border-color: var(--accent, #01b497);
}
.pb-font-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.pb-font-picker-group {
    padding: 4px 0;
}
.pb-font-picker-group-label {
    margin: 0;
    padding: 6px 12px 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pb-font-picker-item {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.2;
    color: #222;
    border-radius: 0;
    transition: background 0.1s;
}
.pb-font-picker-item:hover {
    background: rgba(1, 180, 151, 0.08);
}
.pb-font-picker-item.selected {
    background: rgba(1, 180, 151, 0.12);
    color: #017564;
    font-weight: 500;
}
.pb-font-picker-item-name {
    /* Set to the font's "X Custom" family by JS as the row scrolls into view.
       Browser fetches the TTF lazily at that point. */
    display: block;
}
.pb-font-picker-empty {
    padding: 16px 12px;
    margin: 0;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

/* Mobile / narrow viewport: panel takes more screen width */
@media (max-width: 600px) {
    .pb-font-picker-panel {
        width: calc(100vw - 24px);
        max-width: 320px;
    }
}

/* ========== Logo color suggest (DIY editor — after logo upload) ========== */
.pb-logo-color-suggest {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.pb-logo-color-label {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #555;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.pb-logo-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pb-logo-color-swatch {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pb-logo-color-swatch:hover {
    transform: translateY(-1px);
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.pb-logo-color-swatch span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 0.48rem;
    font-family: monospace;
    padding: 1px 0;
    text-align: center;
}
/* .pb-logo-color-swatch-active intentionally NOT styled — a swatch click is
   one-shot apply (background / selected element), there is no persistent
   "selected swatch" state to surface visually. Previously this rule painted a
   blue/teal ✓ in the corner which felt like it implied a stuck mode. */

/* ========== Brand colors auto-pick widget ========== */
.ds-color-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.ds-color-input-row > input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
}
.ds-auto-color-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ds-auto-color-result {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.ds-auto-color-label {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: #555;
    font-weight: 500;
}
.ds-auto-color-error {
    margin: 0;
    font-size: 0.85rem;
    color: #b91c1c;
}
.ds-auto-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ds-auto-color-swatch {
    position: relative;
    width: 64px;
    height: 64px;
    border: 2px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ds-auto-color-swatch:hover {
    transform: translateY(-2px);
    border-color: rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ds-auto-color-swatch span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: white;
    font-size: 0.62rem;
    font-family: monospace;
    padding: 2px 0;
    text-align: center;
    letter-spacing: 0.5px;
}
.ds-auto-color-swatch-added {
    border-color: var(--accent, #01b497);
    box-shadow: 0 0 0 2px rgba(1, 180, 151, 0.25);
}
.ds-auto-color-swatch-added::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--accent, #01b497);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== Extras quote note (Step 3) ========== */
.ds-extras-quote-note {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(1, 180, 151, 0.06);
    border: 1px solid rgba(1, 180, 151, 0.3);
    border-radius: 10px;
    font-size: 0.88rem;
    color: #374151;
    line-height: 1.55;
}
.ds-extras-quote-note strong {
    color: #0f7b66;
}

/* Service Type — confirmed (single locked option, replaces radio cards) */
.ds-service-confirmed {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(1, 180, 151, 0.06);
    border: 1.5px solid rgba(1, 180, 151, 0.4);
    border-radius: 12px;
}
.ds-service-confirmed-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent, #01b497);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-service-confirmed-icon svg {
    width: 20px;
    height: 20px;
}
.ds-service-confirmed-text strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f7b66;
    margin-bottom: 4px;
}
.ds-service-confirmed-text p {
    margin: 0;
    font-size: 0.85rem;
    color: #374151;
    line-height: 1.55;
}

/* Design Brief — IP Checkbox */
.ds-ip-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #713f12;
}
.ds-ip-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.ds-ip-checkbox a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.ds-ip-checkbox a:hover {
    text-decoration: underline;
}

/* Mobile responsive for service type cards */
@media (max-width: 480px) {
    .ds-service-type-cards {
        grid-template-columns: 1fr;
    }
}

/* ========== Cookie Consent Banner ========== */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: var(--bg-white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cookie-consent-banner.visible {
    transform: translateY(0);
}

.cookie-consent-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.cookie-consent-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
}

.cookie-consent-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.cookie-consent-btn {
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    white-space: nowrap;
}

.cookie-consent-accept {
    background: var(--primary);
    color: #fff;
}

.cookie-consent-accept:hover {
    background: var(--primary-hover);
}

.cookie-consent-decline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.cookie-consent-decline:hover {
    background: var(--bg-light);
    color: var(--text-dark);
}

@media (max-width: 768px) {
    .cookie-consent-inner {
        flex-direction: column;
        padding: 16px 20px;
        gap: 14px;
        text-align: center;
    }

    .cookie-consent-actions {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Print Quality Check (PrintQC) widget — Step 4 review screen
   Shows warnings about elements outside template safe/trim zones.
   See: hosting-build/app/js/print-qc.js
   ========================================================================== */

.pq-widget {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.pq-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-dark, #1f2937);
}

.pq-icon {
    font-size: 16px;
    color: #f59e0b;
}

.pq-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pq-count {
    color: #6b7280;
    font-weight: 500;
    font-size: 13px;
}

.pq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.pq-row {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    cursor: pointer;
    transition: background 120ms, transform 120ms;
}
.pq-row:hover {
    background: #fef3c7;
}
.pq-row.pq-sev-critical {
    border-left-color: #dc2626;
    background: #fef2f2;
}
.pq-row.pq-sev-critical:hover {
    background: #fee2e2;
}

.pq-row-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.pq-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.4;
    flex-shrink: 0;
}
.pq-badge-critical { background: #dc2626; color: #fff; }
.pq-badge-warning  { background: #f59e0b; color: #fff; }
.pq-badge-info     { background: #6b7280; color: #fff; }

.pq-row-title {
    font-size: 13px;
    color: var(--text-dark, #1f2937);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.pq-row-hint {
    font-size: 11px;
    font-style: italic;
    color: #6b7280;
    margin: 4px 0 8px 0;
}

/* Click-to-locate: highlight box drawn over the live preview (DOM overlay,
   never touches canvas pixels → cannot leak into PREVIEW.png/export). */
.pq-preview-highlight {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border: 3px solid #f59e0b;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.75), 0 0 16px rgba(0,0,0,0.35);
    animation: pqHlPulse 0.9s ease-in-out infinite;
}
.pq-preview-highlight.pq-sev-critical { border-color: #dc2626; }
.pq-preview-highlight.pq-sev-warning  { border-color: #f59e0b; }
.pq-preview-highlight.pq-sev-info     { border-color: #6b7280; }
.pq-preview-highlight-label {
    position: absolute;
    left: -3px;
    top: -24px;
    max-width: 260px;
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes pqHlPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.pq-row { cursor: pointer; }

.pq-row-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.pq-row-actions .btn-sm {
    padding: 4px 12px;
    font-size: 12px;
    line-height: 1.5;
    min-height: auto;
}

.pq-fixall {
    margin-top: 4px;
}

.pq-empty {
    padding: 12px;
    text-align: center;
    color: #059669;
    font-size: 13px;
    font-weight: 500;
    background: #ecfdf5;
    border-radius: 8px;
}
.pq-check {
    font-size: 16px;
    font-weight: 700;
    margin-right: 4px;
}

/* Iteration 6: Canvas-empty CTA block (concise message + Back to Editor) */
.pq-empty-canvas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px;
    text-align: left;
}
.pq-empty-canvas p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark, #1f2937);
}
.pq-empty-canvas .btn {
    margin-top: 2px;
}

/* Secondary "Back to Editor" button rendered after Auto-Fix All */
.pq-back-to-editor {
    margin-top: 8px;
}

/* "Revert fixes" — persistent undo for Auto-Fix actions. Subtle by default
   (it's an escape hatch, not the primary CTA) but clearly tappable. */
.pq-revert-fixes {
    margin-top: 8px;
    color: #b45309;
    border-color: #fcd34d;
}
.pq-revert-fixes:hover {
    background: #fffbeb;
    border-color: #f59e0b;
    color: #92400e;
}

/* Mobile: tighter padding, stacked action buttons */
@media (max-width: 768px) {
    .pq-widget {
        padding: 12px;
        margin: 12px 0;
    }
    .pq-row {
        padding: 8px 10px;
    }
    .pq-row-actions {
        flex-direction: column;
    }
    .pq-row-actions .btn-sm {
        width: 100%;
    }
}

/* ==========================================================================
   Sales Mode — Digital Downloads Only
   ===========================================================================
   Activated by `html.pb-digital-only` class injected by index.php when the
   `sales_mode` site setting is set to 'digital-only'. Hides all print-specific
   pricing/options/buttons so customers can only purchase the $4.99 design file
   package. Reversible — admin toggles via Admin → Settings → Commerce.
*/

/* Step 1 — Size & Options panel */
html.pb-digital-only .size-price,
html.pb-digital-only #additionalOptions,
html.pb-digital-only .price-summary {
    display: none !important;
}
/* Hide the "Additional Options" h3 that sits right before #additionalOptions */
html.pb-digital-only .panel-title:has(+ #additionalOptions) {
    display: none !important;
}

/* Step 4 — Order Summary: hide the per-options line (label/value stay
   driven by JS; Total row stays but app.js swaps the label to "Digital Files"
   and the value to $4.99 in updateReviewPanel()) */
html.pb-digital-only #summaryOptions,
html.pb-digital-only .summary-item:has(#summaryOptions) {
    display: none !important;
}

/* Step 4 — primary Add to Cart (print path) is hidden; SVG/Design File
   download section is force-shown so it's always available. */
html.pb-digital-only #addToCart {
    display: none !important;
}
html.pb-digital-only #svgDownloadSection {
    display: block !important;
}

/* Product gallery (group → product list) — hide "From $X.XX" pill so only
   the Design Now button remains in the card footer. */
html.pb-digital-only .gallery-card-price {
    display: none !important;
}
/* Footer is space-between; with price hidden, push Design Now button to the right. */
html.pb-digital-only .gallery-card-footer {
    justify-content: flex-end;
}

/* "Maximum N photos reached" — render as INFO text, not an interactive button
   (drops the outline button look + green hover overlay at the photo cap). */
.photo-add-maxed,
.photo-add-maxed:hover,
.photo-add-maxed:focus,
.photo-add-maxed:active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-muted, #6b7280) !important;
    cursor: default !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
    font-weight: 500;
}

/* AI quota counter under the Remove Background (AI) button */
.ai-quota-info {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    text-align: center;
}
.ai-quota-info.ai-quota-empty { color: #d97706; font-weight: 600; }