/* ==========================================================================
   3D Print Service — Public / Shortcode Styles
   Desktop-first, responsive breakpoints at 1023px and 767px.
   ========================================================================== */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --tdp-primary:        #ff6b00;   /* amber/orange accent */
    --tdp-primary-hover:  #e05a00;
    --tdp-surface:        #ffffff;
    --tdp-surface-alt:    #f8f8f8;
    --tdp-border:         #e0e0e0;
    --tdp-text:           #1a1a1a;
    --tdp-text-secondary: #666;
    --tdp-radius:         8px;
    --tdp-shadow:         0 2px 8px rgba(0,0,0,0.08);
    --tdp-col-gap:        24px;
}

/* ── Outer grid ───────────────────────────────────────────────────────────── */
.tdp-service {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--tdp-col-gap);
    align-items: start;
    font-family: inherit;
    color: var(--tdp-text);
    box-sizing: border-box;
}

.tdp-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.tdp-card {
    background: var(--tdp-surface);
    border: 1px solid var(--tdp-border);
    border-radius: var(--tdp-radius);
    padding: 20px;
    box-shadow: var(--tdp-shadow);
}

.tdp-card-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tdp-border);
}

/* ── Upload Zone ──────────────────────────────────────────────────────────── */
.tdp-upload-zone {
    cursor: pointer;
    position: relative;
}

.tdp-upload-inner {
    border: 2px dashed var(--tdp-border);
    border-radius: var(--tdp-radius);
    padding: 40px 20px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.tdp-upload-inner:hover,
.tdp-upload-inner:focus,
.tdp-upload-zone.tdp-drag-over .tdp-upload-inner {
    border-color: var(--tdp-primary);
    background: #fff8f2;
    outline: none;
}

/* File loaded state — solid border, check-icon tint */
.tdp-upload-prompt--file {
    color: #1a7e2e;
    font-weight: 700;
}

.tdp-upload-zone:has(.tdp-upload-prompt--file) .tdp-upload-inner {
    border-style: solid;
    border-color: #1a7e2e;
    background: #f0faf2;
}

/* Drag-over overlay */
.tdp-upload-zone.tdp-drag-over .tdp-upload-inner {
    border-color: var(--tdp-primary);
    background: #fff8f2;
}

.tdp-upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--tdp-text-secondary);
}

.tdp-upload-icon svg {
    width: 100%;
    height: 100%;
}

.tdp-upload-prompt {
    font-weight: 600;
    margin: 0 0 6px;
}

.tdp-upload-hint {
    font-size: 0.85rem;
    color: var(--tdp-text-secondary);
    margin: 0;
}

.tdp-upload-error {
    margin-top: 12px;
    padding: 10px 14px;
    background: #fce8e8;
    border: 1px solid #f5a0a0;
    border-radius: 4px;
    color: #b32d2e;
    font-size: 0.9rem;
}

/* ── Printer Toggle ───────────────────────────────────────────────────────── */
.tdp-printer-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tdp-printer-option {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--tdp-border);
    border-radius: var(--tdp-radius);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.tdp-printer-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tdp-printer-option:has(input:checked) {
    border-color: var(--tdp-primary);
    background: #fff8f2;
}

.tdp-printer-name {
    font-weight: 700;
    margin-bottom: 4px;
}

.tdp-printer-volume {
    font-size: 0.8rem;
    color: var(--tdp-text-secondary);
}

/* ── Quality Presets ──────────────────────────────────────────────────────── */
.tdp-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.tdp-preset-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--tdp-border);
    border-radius: var(--tdp-radius);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s;
    text-align: center;
}

.tdp-preset-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tdp-preset-card:has(input:checked),
.tdp-preset-card--active {
    border-color: var(--tdp-primary);
    background: #fff8f2;
}

.tdp-preset-name {
    font-weight: 700;
    margin-bottom: 4px;
}

.tdp-preset-desc {
    font-size: 0.8rem;
    color: var(--tdp-text-secondary);
    margin-bottom: 6px;
}

.tdp-preset-detail {
    font-size: 0.75rem;
    color: var(--tdp-text-secondary);
    font-family: monospace;
}

/* ── 3D Viewer ────────────────────────────────────────────────────────────── */
.tdp-viewer-card {
    padding-bottom: 0;
}

.tdp-viewer-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #1a1a2e;
    border-radius: 0 0 var(--tdp-radius) var(--tdp-radius);
    overflow: hidden;
}

#tdp-viewer-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.tdp-viewer-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
    pointer-events: none;  /* Never block canvas mouse/touch events */
}

.tdp-viewer-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tdp-viewer-btn {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s;
    backdrop-filter: blur(4px);
    line-height: 1;
}

.tdp-viewer-btn:hover {
    background: rgba(255,255,255,0.3);
}

.tdp-oob-warning {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(200, 40, 40, 0.85);
    color: #fff;
    font-size: 0.85rem;
    padding: 10px 14px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

/* ── Phase 5: Guest-limit inline message ─────────────────────────────────── */

/* Injected below the action bar by syncButtons() when the guest regen limit  *
 * is reached.                                                                  */
.tdp-guest-limit-msg {
    font-size: 0.82rem;
    color: var(--tdp-text-secondary);
    text-align: center;
    margin: 6px 0 0;
    line-height: 1.5;
}

.tdp-guest-limit-msg a {
    color: var(--tdp-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Phase 4: Viewer loading overlay ─────────────────────────────────────── */

/* Full-cover translucent overlay while G-code is being fetched / parsed */
.tdp-viewer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(26, 26, 46, 0.78);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    backdrop-filter: blur(3px);
    z-index: 10;
    pointer-events: none;  /* Never block canvas mouse/touch interaction */
    transition: opacity 0.25s ease;
}

.tdp-viewer-loading[hidden] {
    display: none;
}

/* Spinning ring indicator */
.tdp-viewer-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    flex-shrink: 0;
    animation: tdp-spin 0.75s linear infinite;
}

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

/* ── Phase 4: Simplified-preview notice ──────────────────────────────────── */

/* Badge shown when the G-code was too large (> 50 MB) to download in full */
.tdp-viewer-simplified-note {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    z-index: 5;
}

/* ── Phase 4: OOB face-plane highlight (rendered by Three.js; CSS for badge) */

/* The OOB warning banner (already present above) fades in */
.tdp-oob-warning {
    transition: opacity 0.2s ease;
}

/* ── Advanced Settings ────────────────────────────────────────────────────── */
.tdp-advanced-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tdp-text);
    padding: 0;
}

.tdp-advanced-toggle-icon {
    transition: transform 0.2s;
}

.tdp-advanced-toggle[aria-expanded="true"] .tdp-advanced-toggle-icon {
    transform: rotate(180deg);
}

.tdp-advanced-body {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Fields */
.tdp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tdp-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tdp-text-secondary);
}

.tdp-field select,
.tdp-number-input {
    padding: 8px 10px;
    border: 1px solid var(--tdp-border);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--tdp-surface);
    color: var(--tdp-text);
    max-width: 200px;
}

/* Sliders */
.tdp-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tdp-slider-wrap input[type="range"] {
    flex: 1;
    accent-color: var(--tdp-primary);
}

.tdp-slider-output {
    min-width: 48px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: monospace;
}

/* Toggle switches */
.tdp-toggles-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.tdp-toggle-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tdp-toggle-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tdp-text-secondary);
}

.tdp-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.tdp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.tdp-switch-track {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 22px;
    transition: background 0.2s;
}

.tdp-switch-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
}

.tdp-switch input:checked + .tdp-switch-track {
    background: var(--tdp-primary);
}

.tdp-switch input:checked + .tdp-switch-track::after {
    transform: translateX(18px);
}

.tdp-switch input:disabled + .tdp-switch-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.tdp-abs-brim-tip {
    font-size: 0.9rem;
    color: var(--tdp-primary);
    cursor: help;
}

/* ── Right column ─────────────────────────────────────────────────────────── */

/* Progress card */
.tdp-progress-card {
    background: var(--tdp-surface);
    border: 1px solid var(--tdp-border);
    border-radius: var(--tdp-radius);
    padding: 20px;
    box-shadow: var(--tdp-shadow);
}

.tdp-progress-stages {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tdp-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.tdp-stage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tdp-border);
    border: 2px solid var(--tdp-border);
    transition: background 0.3s, border-color 0.3s;
}

.tdp-stage.tdp-stage--active .tdp-stage-dot {
    background: var(--tdp-primary);
    border-color: var(--tdp-primary);
}

.tdp-stage.tdp-stage--done .tdp-stage-dot {
    background: #1a7e2e;
    border-color: #1a7e2e;
}

.tdp-stage-label {
    font-size: 0.7rem;
    color: var(--tdp-text-secondary);
    text-align: center;
}

.tdp-progress-bar-outer {
    background: #eee;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}

.tdp-progress-bar-fill {
    height: 100%;
    background: var(--tdp-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.tdp-progress-pct {
    text-align: right;
    font-size: 0.8rem;
    color: var(--tdp-text-secondary);
    margin-top: 4px;
}

/* Cost summary */
.tdp-cost-placeholder {
    color: var(--tdp-text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 16px 0;
}

.tdp-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--tdp-border);
    font-size: 0.9rem;
}

.tdp-cost-row:last-child {
    border-bottom: none;
}

.tdp-cost-row--total {
    font-size: 1.1rem;
    padding-top: 12px;
    margin-top: 4px;
}

.tdp-cost-row--total strong {
    color: var(--tdp-primary);
    font-size: 1.3rem;
}

/* Plate tabs */
.tdp-plates-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding: 4px 0;
}

.tdp-plate-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--tdp-border);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.85rem;
    background: var(--tdp-surface);
    transition: border-color 0.2s;
}

.tdp-plate-tab--active {
    border-color: var(--tdp-primary);
    background: #fff8f2;
}

.tdp-add-plate-btn {
    padding: 8px 14px;
    border: 1px dashed var(--tdp-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--tdp-text-secondary);
    white-space: nowrap;
}

.tdp-add-plate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Action buttons */
.tdp-action-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tdp-btn {
    padding: 14px 20px;
    border: none;
    border-radius: var(--tdp-radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
    text-align: center;
}

.tdp-btn--regenerate {
    background: var(--tdp-surface-alt);
    color: var(--tdp-text);
    border: 2px solid var(--tdp-border);
}

.tdp-btn--regenerate.tdp-btn--active {
    background: var(--tdp-primary);
    color: #fff;
    border-color: var(--tdp-primary);
}

.tdp-btn--regenerate.tdp-btn--active:hover {
    background: var(--tdp-primary-hover);
    border-color: var(--tdp-primary-hover);
}

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

/* Loading state — spinner pulse */
.tdp-btn--regenerate.tdp-btn--loading {
    background: #cc5500;
    color: #fff;
    border-color: #cc5500;
    cursor: wait;
    position: relative;
    overflow: hidden;
}

.tdp-btn--regenerate.tdp-btn--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%
    );
    animation: tdp-shimmer 1.4s infinite;
}

@keyframes tdp-shimmer {
    0%   { transform: translateX( -100% ); }
    100% { transform: translateX(  100% ); }
}

/* Idle state — file loaded but no changes needed */
.tdp-btn--regenerate.tdp-btn--idle {
    background: var(--tdp-surface-alt);
    color: var(--tdp-text-secondary);
    border-color: var(--tdp-border);
}

.tdp-btn--cart {
    background: #1a7e2e;
    color: #fff;
}

.tdp-btn--cart:hover:not(:disabled) {
    background: #145f23;
}

.tdp-btn--cart:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Privacy notice */
.tdp-privacy-notice {
    font-size: 0.78rem;
    color: var(--tdp-text-secondary);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* ── Phase 2: Progress stage enhancements ────────────────────────────────── */

/* Active stage label becomes orange + bolder */
.tdp-stage.tdp-stage--active .tdp-stage-label {
    color: var(--tdp-primary);
    font-weight: 700;
}

/* Done stage label turns green */
.tdp-stage.tdp-stage--done .tdp-stage-label {
    color: #1a7e2e;
}

/* Error stage dot + label */
.tdp-stage.tdp-stage--error .tdp-stage-dot {
    background: #d63638;
    border-color: #d63638;
}

.tdp-stage.tdp-stage--error .tdp-stage-label {
    color: #d63638;
}

/* Pulsing dot on the currently active stage */
.tdp-stage.tdp-stage--active .tdp-stage-dot {
    animation: tdp-pulse 1.4s ease-in-out infinite;
}

@keyframes tdp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(255,107,0,0); }
}

/* Connector line between stage dots */
.tdp-progress-stages {
    position: relative;
}

.tdp-progress-stages::before {
    content: '';
    position: absolute;
    top: 7px;     /* centre of the 14px dot */
    left: calc( 12.5% );
    right: calc( 12.5% );
    height: 2px;
    background: var(--tdp-border);
    z-index: 0;
}

.tdp-stage {
    position: relative;
    z-index: 1;
}

/* Upload error — guest limit prompt has inline links */
.tdp-upload-error a {
    color: var(--tdp-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* Progress bar fill: smooth transition removed during rAF animation */
.tdp-progress-bar-fill.tdp-animating {
    transition: none;
}

/* Cost details slide-in */
.tdp-cost-details {
    animation: tdp-fade-in 0.3s ease-out;
}

@keyframes tdp-fade-in {
    from { opacity: 0; transform: translateY( 6px ); }
    to   { opacity: 1; transform: translateY( 0 ); }
}

/* ── Responsive: Tablet ───────────────────────────────────────────────────── */
@media ( max-width: 1023px ) {
    .tdp-service {
        grid-template-columns: 1fr;
    }

    .tdp-col--right {
        order: -1; /* Cost + buttons at top on tablet */
    }

    .tdp-viewer-wrap {
        aspect-ratio: 16 / 9;
    }
}

/* ── Responsive: Mobile ───────────────────────────────────────────────────── */
@media ( max-width: 767px ) {

    /* Upload zone: full width, larger tap target */
    .tdp-upload-inner {
        min-height: 120px;
        padding: 32px 16px;
    }

    .tdp-upload-zone {
        width: 100%;
    }

    /* Preset cards: horizontal scroll row with scroll-snap */
    .tdp-presets {
        grid-template-columns: none;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding-bottom: 4px;
    }

    .tdp-preset-card {
        min-width: 160px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* Three.js viewer: full width, min-height 260px */
    .tdp-viewer-wrap {
        width: 100%;
        aspect-ratio: auto;
        min-height: 260px;
    }

    .tdp-viewer-card {
        width: 100%;
    }

    /* Cost summary: full width card below the viewer */
    .tdp-cost-card,
    .tdp-progress-card {
        width: 100%;
    }

    /* Right column: normal flow on mobile (cost below viewer) */
    .tdp-col--right {
        order: 0;
    }

    /* Plate tabs: horizontal scroll, no wrap */
    .tdp-plates-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .tdp-plate-tab {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* Action buttons: fixed to bottom of viewport */
    .tdp-action-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        background: var(--tdp-surface);
        border-top: 1px solid var(--tdp-border);
        z-index: 100;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.1);
        flex-direction: row;
    }

    .tdp-btn {
        flex: 1;
    }

    /* Padding so content isn't hidden behind fixed action bar */
    .tdp-service {
        padding-bottom: 80px;
    }
}

/* ── Bottom drawer for advanced settings (mobile) ────────────────────────── */
.tdp-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--tdp-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding: 20px 16px;
}

.tdp-drawer--open {
    transform: translateY(0);
}

/* Drawer grab handle */
.tdp-drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--tdp-border);
    border-radius: 2px;
    margin: 0 auto 16px;
}

/* Backdrop overlay behind the drawer */
.tdp-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 199;
}

.tdp-drawer-backdrop--visible {
    display: block;
}

/* ── GPU compositing hint for viewer canvas ───────────────────────────────── */
.tdp-viewer-wrap {
    will-change: transform;
}