:root {
    --brand: #0d6efd;
    --brand-dark: #0a58ca;
}

body {
    background: #f4f6f9;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* Cards */
.card {
    border: none;
    border-radius: .75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* Product grid */
.product-card .card-img-top {
    height: 180px;
    object-fit: contain;
    padding: .75rem;
    background: #fff;
    border-radius: .75rem .75rem 0 0;
}

.product-placeholder {
    height: 180px;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem .75rem 0 0;
    font-size: 3rem;
    color: #adb5bd;
}

/* Layout selection cards */
.layout-card {
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color .15s, transform .15s;
}
.layout-card:hover { transform: translateY(-2px); }
.layout-card.selected { border-color: var(--brand); }

/* Full portrait thumbnail — shows the complete 9:16 image */
.layout-thumb-full {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    background: #e9ecef;
    border-radius: .6rem .6rem 0 0;
    display: block;
}

/* Product selection cards in ad form */
.product-select-card {
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color .15s;
}
.product-select-card.selected { border-color: var(--brand); background: #e7f0ff; }
.product-select-card .card-img-top {
    height: 130px;
    object-fit: contain;
    padding: .5rem;
}

/* Stat cards */
.stat-card .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

/* Preview image */
.ad-preview img {
    max-width: 100%;
    border-radius: .75rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

/* Price badge */
.price-badge {
    background: #dc3545;
    color: #fff;
    padding: .2rem .6rem;
    border-radius: .4rem;
    font-weight: 700;
}

/* Nav tweaks */
.navbar-brand { font-size: 1.15rem; letter-spacing: .02em; }

/* Table */
.table-hover tbody tr:hover { background: rgba(13,110,253,.04); }

/* Aspect-ratio lock button */
.ratio-lock-btn { padding: .25rem .45rem; line-height: 1; }
.ratio-lock-btn.locked { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.ratio-lock-btn.locked:hover { background: #0b5ed7; border-color: #0b5ed7; }

/* Compact template configuration panels */
.tpl-panels .card { margin-bottom: .5rem !important; }
.tpl-panels .card-header { padding: .35rem .65rem; font-size: .78rem; }
.tpl-panels .card-body { padding: .5rem .65rem; }
.tpl-panels .form-label.small { font-size: .72rem; margin-bottom: .1rem; }
.tpl-panels .row.g-3 { --bs-gutter-x: .4rem; --bs-gutter-y: .4rem; }
.tpl-panels .form-control, .tpl-panels .form-select { font-size: .78rem; }
.tpl-panels .btn-group-sm .btn { padding: .15rem .3rem; }

/* Hide number spinner arrows */
.tpl-panels input[type=number] { -moz-appearance: textfield; }
.tpl-panels input[type=number]::-webkit-outer-spin-button,
.tpl-panels input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Compact color swatch */
.tpl-swatch {
    width: 34px; height: 31px;
    padding: 2px;
    border-radius: .375rem;
    cursor: pointer;
}
.tpl-swatch::-webkit-color-swatch { border-radius: .25rem; border: none; }
.tpl-swatch::-moz-color-swatch { border-radius: .25rem; border: none; }

/* Template editor preview overlays */
.tpl-overlay {
    position: absolute;
    pointer-events: none;
}
.tpl-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: sans-serif;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
    pointer-events: all;
    cursor: move;
    border-radius: 2px;
    transition: outline .1s;
}
.tpl-text:hover  { outline: 1px dashed rgba(255,255,255,.75); background: rgba(0,0,0,.06); }
.tpl-text.active { outline: 1px solid  rgba(255,255,255,.9);  background: rgba(0,0,0,.1);  }

/* Interactive overlay background */
.tpl-ov-interactive {
    pointer-events: all;
    cursor: move;
    outline: 2px dashed rgba(255,255,255,.45);
    transition: outline-color .15s;
}
.tpl-ov-interactive:hover {
    outline-color: rgba(255,255,255,.8);
}

/* Text width handles (left / right edges) */
.tpl-wh {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 24px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.3);
    border-radius: 3px;
    cursor: ew-resize;
    pointer-events: all;
    display: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    z-index: 10;
}
.tpl-wh-l { left: -3px; }
.tpl-wh-r { right: -3px; }
.tpl-text:hover .tpl-wh,
.tpl-text.active .tpl-wh { display: block; }

/* Text size handle */
.tpl-sh {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 8px; height: 8px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 2px;
    cursor: se-resize;
    pointer-events: all;
    display: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    z-index: 10;
}
.tpl-text:hover .tpl-sh,
.tpl-text.active .tpl-sh { display: block; }

/* Interactive photo zone */
.tpl-photo-interactive {
    pointer-events: all;
    cursor: move;
    border: 2px dashed rgba(13,110,253,.85);
    border-radius: 3px;
    box-sizing: border-box;
    user-select: none;
}
.tpl-photo-interactive:hover {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13,110,253,.2);
}
.tpl-photo-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: rgba(0,0,0,.04);
}

/* Resize handles */
.rh {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0d6efd;
    border: 2px solid #fff;
    border-radius: 2px;
    z-index: 20;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.rh-nw { top: -5px;    left: -5px;   cursor: nw-resize; }
.rh-ne { top: -5px;    right: -5px;  cursor: ne-resize; }
.rh-sw { bottom: -5px; left: -5px;   cursor: sw-resize; }
.rh-se { bottom: -5px; right: -5px;  cursor: se-resize; }