/* CoolChimp Designer — designer.css
   All rules are scoped to .ccd-* to avoid any theme conflicts. */

/* ── Variables ─────────────────────────────────────────────────── */
.ccd-wrapper {
    --ccd-orange:   #E85D04;
    --ccd-dark:     #0D0D0D;
    --ccd-cream:    #FAF7F2;
    --ccd-warm:     #F5EFE6;
    --ccd-border:   #E2D9CC;
    --ccd-muted:    #6B6458;
    --ccd-radius:   12px;
    --ccd-font:     'DM Sans', system-ui, sans-serif;
    --ccd-font-hd:  'Syne', 'DM Sans', system-ui, sans-serif;

    font-family:    var(--ccd-font);
    color:          var(--ccd-dark);
    max-width:      960px;
    margin:         0 auto;
    padding:        2.5rem 1rem;
}

/* ── Title ──────────────────────────────────────────────────────── */
.ccd-title {
    font-family: var(--ccd-font-hd);
    font-size:   clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.6px;
    margin-bottom: 2rem;
    color: var(--ccd-dark);
}

/* ── Two-column layout ──────────────────────────────────────────── */
.ccd-layout {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2.5rem;
    align-items:           start;
}

@media (max-width: 700px) {
    .ccd-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Upload zone ────────────────────────────────────────────────── */
.ccd-upload-zone {
    border:           2px dashed var(--ccd-border);
    border-radius:    var(--ccd-radius);
    background:       var(--ccd-cream);
    min-height:       300px;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    text-align:       center;
    padding:          2rem 1.5rem;
    cursor:           pointer;
    transition:       border-color .25s, background .25s;
    position:         relative;
}
.ccd-upload-zone:hover,
.ccd-upload-zone.ccd-drag-over {
    border-color: var(--ccd-orange);
    background:   #fff7f2;
}
.ccd-upload-zone:focus {
    outline: 3px solid var(--ccd-orange);
    outline-offset: 2px;
}
.ccd-up-icon  { font-size: 2.5rem; margin-bottom: .75rem; display: block; }
.ccd-up-title { font-family: var(--ccd-font-hd); font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem; }
.ccd-up-sub   { font-size: .83rem; color: var(--ccd-muted); line-height: 1.6; margin-bottom: 1.25rem; }

.ccd-upload-btn,
.ccd-change-btn {
    background:    var(--ccd-orange);
    color:         #fff;
    border:        none;
    padding:       9px 22px;
    border-radius: 8px;
    font-family:   var(--ccd-font);
    font-size:     .875rem;
    font-weight:   600;
    cursor:        pointer;
    display:       inline-block;
    transition:    background .2s, transform .15s;
    user-select:   none;
    -webkit-user-select: none;
    text-align:    center;
}
.ccd-upload-btn:hover,
.ccd-change-btn:hover { background: #c94e00; transform: translateY(-1px); }

.ccd-change-btn { background: transparent; color: var(--ccd-orange); border: 1.5px solid var(--ccd-orange); margin-top: .75rem; }
.ccd-change-btn:hover { background: #fff7f2; transform: none; }

#ccd-thumb {
    max-width:     180px;
    max-height:    180px;
    border-radius: 10px;
    object-fit:    cover;
    border:        2px solid var(--ccd-border);
    display:       block;
    margin:        0 auto .75rem;
}
.ccd-up-filename { font-size: .8rem; color: var(--ccd-muted); word-break: break-all; }

.ccd-upload-spinner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .75rem;
    color:          var(--ccd-muted);
    font-size:      .875rem;
}
.ccd-upload-error {
    color:       #c00;
    font-size:   .85rem;
    margin-top:  .5rem;
    padding:     8px 12px;
    background:  #fff0f0;
    border-radius: 8px;
    border-left: 3px solid #c00;
}

/* ── SVG T-shirt Preview ────────────────────────────────────────── */
.ccd-preview-wrap {
    background:    var(--ccd-warm);
    border-radius: var(--ccd-radius);
    padding:       1.5rem 1rem;
    text-align:    center;
    margin-bottom: 1.25rem;
}
#ccd-shirt-svg { width: 160px; height: auto; display: block; margin: 0 auto; }
#ccd-svg-body,
#ccd-svg-sleeve-l,
#ccd-svg-sleeve-r { transition: fill .3s; }
#ccd-svg-collar   { fill: rgba(0,0,0,.15); }
.ccd-preview-label { font-size: .8rem; color: var(--ccd-muted); margin-top: .5rem; }

/* ── Form fields ────────────────────────────────────────────────── */
.ccd-field-group  { margin-bottom: 1.25rem; }
.ccd-label {
    display:       block;
    font-size:     .8rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color:         var(--ccd-muted);
    margin-bottom: .5rem;
}
.ccd-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }

.ccd-select {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid var(--ccd-border);
    border-radius: 10px;
    font-family:   var(--ccd-font);
    font-size:     .95rem;
    background:    #fff;
    color:         var(--ccd-dark);
    outline:       none;
    transition:    border-color .2s;
    appearance:    auto;
}
.ccd-select:focus { border-color: var(--ccd-orange); }

.ccd-textarea {
    width:         100%;
    padding:       11px 14px;
    border:        1.5px solid var(--ccd-border);
    border-radius: 10px;
    font-family:   var(--ccd-font);
    font-size:     .9rem;
    resize:        vertical;
    outline:       none;
    transition:    border-color .2s;
    color:         var(--ccd-dark);
}
.ccd-textarea:focus { border-color: var(--ccd-orange); }

/* ── Colour swatches ────────────────────────────────────────────── */
.ccd-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.ccd-swatch {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    border:        2.5px solid transparent;
    cursor:        pointer;
    transition:    transform .2s, border-color .2s, box-shadow .2s;
    padding:       0;
}
.ccd-swatch--light { border-color: #ccc !important; }
.ccd-swatch:hover  { transform: scale(1.18); }
.ccd-swatch.ccd-selected,
.ccd-swatch[aria-checked="true"] {
    border-color: var(--ccd-dark) !important;
    box-shadow:   0 0 0 2px #fff, 0 0 0 4px var(--ccd-dark);
}
.ccd-colour-name {
    display:    inline-block;
    font-size:  .8rem;
    font-weight: 600;
    color:      var(--ccd-dark);
    margin-top: .4rem;
    min-height: 1.2em;
}

/* ── Size buttons ───────────────────────────────────────────────── */
.ccd-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.ccd-size-btn {
    padding:       8px 16px;
    border-radius: 8px;
    border:        1.5px solid var(--ccd-border);
    background:    #fff;
    color:         var(--ccd-muted);
    font-family:   var(--ccd-font);
    font-size:     .875rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    all .2s;
}
.ccd-size-btn:hover,
.ccd-size-btn.ccd-selected,
.ccd-size-btn[aria-checked="true"] {
    background:    var(--ccd-dark);
    color:         #fff;
    border-color:  var(--ccd-dark);
}

/* ── Price row ──────────────────────────────────────────────────── */
.ccd-price-row {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    padding:       12px 16px;
    background:    var(--ccd-warm);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.ccd-price-label { font-size: .875rem; color: var(--ccd-muted); }
.ccd-price-value { font-family: var(--ccd-font-hd); font-size: 1.3rem; font-weight: 800; color: var(--ccd-dark); }

/* ── Add to Cart button ─────────────────────────────────────────── */
.ccd-atc-btn {
    width:         100%;
    padding:       15px;
    border:        none;
    border-radius: 12px;
    background:    var(--ccd-dark);
    color:         #fff;
    font-family:   var(--ccd-font-hd);
    font-size:     1rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    background .2s, transform .15s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           .5rem;
    letter-spacing: .3px;
}
.ccd-atc-btn:hover  { background: var(--ccd-orange); transform: translateY(-1px); }
.ccd-atc-btn:active { transform: scale(.98); }
.ccd-atc-btn:disabled { background: #bbb; cursor: not-allowed; transform: none; }

/* ── Success / Error ────────────────────────────────────────────── */
.ccd-success {
    margin-top:    1rem;
    padding:       14px 18px;
    background:    #f0fdf4;
    border-radius: 10px;
    border-left:   4px solid #22c55e;
}
.ccd-success p  { margin-bottom: .4rem; font-weight: 500; }
.ccd-view-cart  {
    font-size:     .875rem;
    color:         var(--ccd-orange);
    font-weight:   600;
    text-decoration: none;
}
.ccd-view-cart:hover { text-decoration: underline; }
.ccd-form-error {
    color:        #c00;
    font-size:    .875rem;
    padding:      10px 14px;
    background:   #fff0f0;
    border-radius: 8px;
    border-left:  3px solid #c00;
    margin-bottom: .75rem;
}

/* ── Spinner ────────────────────────────────────────────────────── */
.ccd-spinner {
    display:       inline-block;
    width:         18px;
    height:        18px;
    border:        2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     ccd-spin .7s linear infinite;
    flex-shrink:   0;
}
@keyframes ccd-spin { to { transform: rotate(360deg); } }