/* ── TradeForge AI Design Engine Styles ──
   Extends the main TradeForge design system for the
   AI renovation visualization funnel.
   ────────────────────────────────────────────────── */

/* Breadcrumb navigation */
.de-breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex-wrap:wrap;margin-bottom:0}
.de-breadcrumb a{color:var(--muted);text-decoration:none}
.de-breadcrumb a:hover{color:var(--bronze);text-decoration:underline}
.de-breadcrumb .de-active{color:#fff;font-weight:700}
.de-breadcrumb .de-sep{color:rgba(181,183,185,.35)}

/* Steps (mini version for hero card) */
.de-steps-mini{display:grid;gap:12px;margin-top:10px}
.de-step-mini{display:flex;gap:10px;align-items:flex-start}
.de-step-num{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bronze);color:var(--ink);font-weight:800;font-size:13px}

/* Package grid (landing page) */
.de-packages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.de-package-card{display:flex;flex-direction:column;position:relative}
.de-package-featured{border-color:var(--bronze);box-shadow:0 0 0 1px rgba(140,106,62,.3)}
.de-featured-label{position:absolute;top:-10px;left:18px;background:var(--bronze);color:var(--ink);font-size:11px;font-weight:750;padding:2px 10px;border-radius:999px;letter-spacing:.04em}
.de-price{font-size:32px;font-weight:800;color:#fff;margin:4px 0}
.de-price-note{font-size:14px;font-weight:400;color:var(--muted)}

/* Landing page conversion sections */
.de-output-preview{background:linear-gradient(180deg,rgba(46,49,54,.98),rgba(36,39,43,.92))}
.de-proof-stack{display:grid;gap:10px}
.de-proof-item{display:grid;grid-template-columns:88px 1fr;gap:10px;align-items:flex-start;padding:10px;border:1px solid rgba(181,183,185,.12);border-radius:10px;background:rgba(181,183,185,.04)}
.de-proof-label{font-size:11px;letter-spacing:.06em;font-weight:700;text-transform:uppercase;color:var(--bronze);padding-top:2px}
.de-style-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.de-style-chips span{font-size:11px;font-weight:650;letter-spacing:.02em;color:#e4d8c6;background:rgba(140,106,62,.18);border:1px solid rgba(140,106,62,.32);border-radius:999px;padding:5px 10px}
.de-mid-cta{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.de-system-strip{display:flex;align-items:center;gap:12px;overflow-x:auto;padding:8px 2px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.de-system-strip::-webkit-scrollbar{display:none}
.de-system-step{display:flex;align-items:center;gap:8px;flex-shrink:0;background:rgba(181,183,185,.05);border:1px solid rgba(181,183,185,.13);border-radius:12px;padding:10px 12px;min-width:176px}
.de-system-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(140,106,62,.22);border:1px solid rgba(140,106,62,.38);font-size:12px;font-weight:800;color:#f3e8d9}
.de-system-arrow{color:rgba(181,183,185,.55);font-weight:700;flex-shrink:0}
.de-audience-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.de-project-path{margin:0;padding-left:20px;display:grid;gap:8px}
.de-project-path li{color:var(--muted);font-size:14px;line-height:1.55}

@media (max-width:900px){
  .de-packages-grid{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding-bottom:4px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .de-package-card{
    min-width:min(84vw,330px);
    scroll-snap-align:start;
  }
  .de-audience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .de-mid-cta{align-items:flex-start}
}
@media (max-width:520px){
  .de-proof-item{grid-template-columns:1fr}
  .de-package-card{min-width:88vw}
  .de-audience-grid{grid-template-columns:1fr}
}

/* Package selector (inline on upload form) */
.de-package-selector{margin-top:4px}
.de-package-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.de-package-option{cursor:pointer;position:relative}
.de-package-option input{position:absolute;opacity:0;width:0;height:0}
.de-package-option-inner{padding:12px;border-radius:12px;border:1px solid rgba(181,183,185,.14);background:rgba(181,183,185,.04);transition:border-color .15s,background .15s}
.de-package-option input:checked ~ .de-package-option-inner{border-color:var(--bronze);background:rgba(140,106,62,.10)}
.de-package-option:hover .de-package-option-inner{border-color:rgba(140,106,62,.4)}
.de-option-price{font-size:20px;font-weight:800;color:#fff;margin-top:4px}
.de-option-popular{position:relative}
.de-pop-badge{font-size:10px;background:var(--bronze);color:var(--ink);padding:1px 6px;border-radius:999px;vertical-align:middle;margin-left:4px}

@media (max-width:900px){
  .de-package-options{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .de-package-options{grid-template-columns:1fr}
}

/* Dropzone / photo upload */
.de-upload-zone{margin-top:4px}
.de-dropzone{border:2px dashed rgba(181,183,185,.20);border-radius:12px;padding:28px 18px;text-align:center;transition:border-color .2s,background .2s;cursor:pointer}
.de-dropzone.dragover{border-color:var(--bronze);background:rgba(140,106,62,.06)}
.de-dropzone-content{pointer-events:none}
.de-photo-previews{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.de-photo-preview{width:72px;height:72px;border-radius:8px;background-size:cover;background-position:center;border:1px solid rgba(181,183,185,.15);position:relative;flex-shrink:0}
.de-photo-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:rgba(200,50,50,.9);color:#fff;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}

/* Consent checkbox area */
.de-consent{padding:12px 14px;border-radius:12px;background:rgba(140,106,62,.06);border:1px solid rgba(140,106,62,.15)}

/* Form status messages */
.de-form-status{padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5}
.de-form-status.success{background:rgba(50,180,80,.10);border:1px solid rgba(50,180,80,.25);color:#6fd88a}
.de-form-status.error{background:rgba(200,50,50,.10);border:1px solid rgba(200,50,50,.25);color:#e87777}
.de-form-status.info{background:rgba(140,106,62,.10);border:1px solid rgba(140,106,62,.20);color:var(--muted)}

/* Loading / progress */
.de-loader{display:inline-block;position:relative;width:56px;height:56px}
.de-loader-ring{width:56px;height:56px;border-radius:50%;border:3px solid rgba(140,106,62,.15);border-top-color:var(--bronze);animation:de-spin .8s linear infinite}
@keyframes de-spin{to{transform:rotate(360deg)}}
.de-progress{height:6px;background:rgba(181,183,185,.10);border-radius:999px;overflow:hidden;max-width:400px;margin:0 auto}
.de-progress-bar{height:100%;background:var(--bronze);border-radius:999px;transition:width .3s}

/* Concepts grid (results page) */
.de-concepts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:520px){
  .de-concepts-grid{grid-template-columns:1fr}
}

.de-concept-card{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:var(--r);overflow:hidden}
.de-concept-image{width:100%;aspect-ratio:16/9;background:rgba(181,183,185,.06);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.de-concept-image img{width:100%;height:100%;object-fit:cover}
.de-concept-placeholder{color:rgba(181,183,185,.3);font-size:14px;text-align:center;padding:18px}
.de-concept-body{padding:14px 18px}
.de-concept-style{font-weight:700;color:#fff;font-size:15px;margin-bottom:4px}
.de-concept-desc{color:var(--muted);font-size:13px;line-height:1.5}
.de-concept-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* Watermark overlay for free tier */
.de-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);pointer-events:none}
.de-watermark span{color:rgba(255,255,255,.35);font-size:16px;font-weight:700;letter-spacing:.08em;transform:rotate(-25deg);text-transform:uppercase}

/* Submit area */
.de-submit-area{margin-top:4px}

/* Lightbox overlay */
.de-lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:22px;cursor:zoom-out}
.de-lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 4px 32px rgba(0,0,0,.5)}
.de-lightbox-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Payment cancelled notice */
.de-cancelled-notice{padding:12px 16px;border-radius:12px;background:rgba(200,160,50,.10);border:1px solid rgba(200,160,50,.20);font-size:13px;color:#ddc473;margin-bottom:14px}