/* =========================
   CVDN Designer — Deep Purple Theme (no white panels)
   Drop-in replacement for your current frontend.css
   ========================= */

/* --- Theme tokens --- */
:root{
  --cvdn-bg:        #120a22; /* page background */
  --cvdn-surface:   #1a0f33; /* panels */
  --cvdn-surface-2: #231247; /* inputs / toolbar blocks */
  --cvdn-border:    #3a1f6a;
  --cvdn-border-2:  #4b2a87;

  --cvdn-text:      #f4efff;
  --cvdn-muted:     rgba(244,239,255,.75);

  --cvdn-accent:    #8b5cf6; /* violet */
  --cvdn-accent-2:  #a78bfa;
  --cvdn-accent-3:  #6d28d9;

  --cvdn-btn:       #2a1655;
  --cvdn-btn-hover: #351a6a;

  --cvdn-danger:    #ff5b7a;

  --cvdn-shadow:    0 10px 30px rgba(0,0,0,.35);
  --cvdn-radius:    12px;
}

/* page wrapper */
.cvdn-wrap{
  width: 100%;
  box-sizing: border-box;
  color: var(--cvdn-text);
}

/* If your designer page has a parent container you can target, add it here.
   This helps guarantee "not white" even if theme styles bleed in. */
.cvdn-wrap,
.cvdn-wrap *{
  box-sizing: border-box;
}

/* Header */
.cvdn-header{ margin-bottom: 12px; }
.cvdn-title{ margin: 0; font-size: 22px; color: var(--cvdn-text); }
.cvdn-sub{ font-size: 14px; margin-left: 8px; color: var(--cvdn-muted); }

/* Help text (no white) */
.cvdn-helptext{
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cvdn-border);
  border-radius: var(--cvdn-radius);
  background: linear-gradient(180deg, rgba(167,139,250,.10), rgba(139,92,246,.06));
  color: var(--cvdn-text);
  font-size: 14px;
  box-shadow: var(--cvdn-shadow);
}

/* Layout */
.cvdn-body{ display: flex; gap: 16px; }
.cvdn-left{ flex: 1 1 auto; min-width: 0; }
.cvdn-right{ width: 360px; max-width: 42vw; }

/* Panels */
.cvdn-panel{
  border: 1px solid var(--cvdn-border);
  border-radius: var(--cvdn-radius);
  padding: 12px;
  background: radial-gradient(1200px 600px at 0% 0%, rgba(139,92,246,.14), transparent 40%),
              radial-gradient(900px 500px at 100% 0%, rgba(167,139,250,.10), transparent 45%),
              var(--cvdn-surface);
  box-shadow: var(--cvdn-shadow);
}

/* muted text */
.cvdn-muted{ color: var(--cvdn-muted); font-size: 13px; }

/* Product picker */
.cvdn-product-picker{
  width: 100%;
  padding: 10px;
  border-radius: var(--cvdn-radius);
  border: 1px solid var(--cvdn-border);
  background: var(--cvdn-surface-2);
  color: var(--cvdn-text);
  outline: none;
}
.cvdn-product-picker:focus{
  border-color: var(--cvdn-accent-2);
  box-shadow: 0 0 0 3px rgba(139,92,246,.22);
}

/* Canvas wrapper */
.cvdn-canvas-wrap{
  border: 1px solid var(--cvdn-border);
  border-radius: var(--cvdn-radius);
  background: var(--cvdn-surface);
  padding: 10px;
  box-shadow: var(--cvdn-shadow);
}

/* Toolbar */
.cvdn-canvas-toolbar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

/* Mini buttons */
.cvdn-canvas-toolbar .cvdn-btn-mini{
  padding: 8px 10px;
  border-radius: var(--cvdn-radius);
  border: 1px solid var(--cvdn-border);
  background: linear-gradient(180deg, rgba(167,139,250,.10), rgba(139,92,246,.06)),
              var(--cvdn-btn);
  color: var(--cvdn-text);
  cursor: pointer;
  transition: transform .06s ease, border-color .15s ease, background .15s ease;
}
.cvdn-canvas-toolbar .cvdn-btn-mini:hover{
  background: linear-gradient(180deg, rgba(167,139,250,.16), rgba(139,92,246,.10)),
              var(--cvdn-btn-hover);
  border-color: var(--cvdn-border-2);
}
.cvdn-canvas-toolbar .cvdn-btn-mini:active{
  transform: translateY(1px);
}

/* Inputs inside toolbar */
.cvdn-canvas-toolbar input[type="color"],
.cvdn-canvas-toolbar input[type="number"],
.cvdn-canvas-toolbar input[type="text"]{
  padding: 7px 10px;
  border-radius: var(--cvdn-radius);
  border: 1px solid var(--cvdn-border);
  background: var(--cvdn-surface-2);
  color: var(--cvdn-text);
  outline: none;
}
.cvdn-canvas-toolbar input[type="color"]{
  padding: 4px 6px;
  height: 36px;
  width: 54px;
}
.cvdn-canvas-toolbar input[type="number"]{ width: 88px; }
.cvdn-canvas-toolbar label{ font-size: 13px; color: var(--cvdn-muted); }

/* Canvas area */
.cvdn-canvas{
  width: 100%;
  height: 520px;
  border-radius: var(--cvdn-radius);
  border: 1px dashed rgba(167,139,250,.35);
  background: rgba(10, 6, 20, .35); /* not white */
}

/* Attribute rows */
.cvdn-attr-row{ margin-top: 10px; }
.cvdn-attr-row label{
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--cvdn-muted);
}
.cvdn-attr-row select{
  width: 100%;
  padding: 10px;
  border-radius: var(--cvdn-radius);
  border: 1px solid var(--cvdn-border);
  background: var(--cvdn-surface-2);
  color: var(--cvdn-text);
  outline: none;
}
.cvdn-attr-row select:focus{
  border-color: var(--cvdn-accent-2);
  box-shadow: 0 0 0 3px rgba(139,92,246,.22);
}

/* Main button (Add to cart) */
.cvdn-btn{
  width: 100%;
  padding: 12px;
  border-radius: var(--cvdn-radius);
  border: 1px solid var(--cvdn-border-2);
  cursor: pointer;
  color: var(--cvdn-text);
  background: linear-gradient(180deg, rgba(139,92,246,.20), rgba(109,40,217,.18)),
              #2a1655;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: transform .06s ease, filter .15s ease, border-color .15s ease;
}
.cvdn-btn:hover{
  filter: brightness(1.06);
  border-color: rgba(167,139,250,.70);
}
.cvdn-btn:active{ transform: translateY(1px); }

/* Status text */
.cvdn-status{ font-size: 13px; color: var(--cvdn-muted); }

/* Optional: make links match theme */
.cvdn-wrap a{
  color: var(--cvdn-accent-2);
  text-decoration: none;
}
.cvdn-wrap a:hover{ text-decoration: underline; }

/* Responsive */
@media (max-width: 900px){
  .cvdn-body{ flex-direction: column; }
  .cvdn-right{ width: 100%; max-width: 100%; }
  .cvdn-canvas{ height: 420px; }
}

/* ===== FORCE Mobile Bottom Nav Visible + Purple Buttons ===== */

/* Default off (desktop) */
.cvdn-bottom-nav { display: none !important; }

@media (max-width: 1024px) {

  /* If any desktop styles are hiding stuff, this overrides */
  .cvdn-bottom-nav{
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;

    gap: 10px !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;

    background: rgba(18,10,34,.96) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 -12px 30px rgba(0,0,0,.45) !important;
  }

  /* give room so nav doesn't cover content */
  .cvdn-wrap{
    padding-bottom: 92px !important;
  }

  .cvdn-bottom-tab{
    appearance: none !important;
    -webkit-appearance: none !important;

    flex: 1 1 0 !important;
    min-height: 52px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(167,139,250,.55) !important;

    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    color: #fff !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .3px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
    touch-action: manipulation !important;

    box-shadow:
      0 8px 18px rgba(124,58,237,.38) !important,
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }

  .cvdn-bottom-tab:active{
    transform: translateY(1px) scale(.985) !important;
  }
}