:root{
    --accent:#c24b22;
    --brown:#4b2b16;
    --card:#fbf3eb;
    --line:#ead7c8;
}

.hero {
    width: 100%;
    min-height: 80vh;
    background-image: url('../assets/images/build-own/hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero::before {
    /* overlay for text readability */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.hero .container-lg {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: PlayfairDisplay, serif;
    font-size: 55px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0;
}

.hero-subtitle{
    font-family: PlusJakartaSans, serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
}

/* Soft card */
.card-soft{ background:var(--card); border:1px solid var(--line); border-radius:12px; }

/* Section heading */
.section-title{
    color:var(--accent); font-weight:900; text-transform:uppercase; margin-bottom:.6rem;
}

/* Size pills */
.builder-pills .btn{
    --bs-btn-border-color:#e8dacd;
    --bs-btn-hover-border-color:#e0cbb7;
    --bs-btn-color:#7a5b42;
    --bs-btn-bg:#fff;
    --bs-btn-hover-bg:#fbf3eb;
    border-radius:12px; padding:.5rem .75rem;
}
.builder-pills .btn-check:checked + .btn{
    background:#fff1e8; border-color:#d89d7d; color:var(--accent);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.icon-slice{ font-size:1.1rem; line-height:1; }
.tiny{ font-size:.78rem; }

/* Qty pill */
.qty-pill{ display:inline-flex; align-items:center; gap:12px; background:#f3e4d5; border-radius:999px; padding:6px 10px; }
.qty-btn{ width:28px; height:28px; border:0; border-radius:50%; background:#efd8c2; font-weight:900; line-height:1; }
.qty-val{ min-width:14px; text-align:center; font-weight:700; }

/* Orange button */
.btn-orange{ background:var(--accent); color:#fff; }
.btn-orange:hover{ background:#a6421d; color:#fff; }

/* Sticky summary card */
.summary-card{
    background:var(--card);
    border:1px solid var(--line); border-radius:12px;
    box-shadow:0 8px 26px rgba(0,0,0,.06);
}

/* Tabs */
.builder-tabs .nav-link{
    border-color:var(--line)!important; color:#7a5b42; font-weight:800; text-transform:uppercase;
}
.builder-tabs .nav-link.active{
    background:var(--accent); color:#fff;
}

/* Small notes */
.note{ color:#7f6a5a; }

/* Form accent */
.form-check-input{ accent-color:var(--accent); }


/* === Toppings selection === */
.topping-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; padding:.35rem .5rem;
}

/* Topping checkbox */
.topping-check{
    width:1.05rem; height:1.05rem; border-radius:8px;
    border:2px solid #c24b22; margin-right:.5rem;
}
.topping-check:focus{ box-shadow:0 0 0 .2rem rgba(194,75,34,.15); }
.topping-check:checked{
    background-color:#c24b22; border-color:#c24b22;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.5 8.5l3 3 6-7'/%3e%3c/svg%3e");
    background-size: 80% 80%; background-position:center; background-repeat:no-repeat;
}

/* Portion group: শুরুতে লুকানো */
.portion-select{ display:none; align-items:center; gap:.6rem; }
.portion-select.show{ display:flex; }

.portion-input{ position:absolute; opacity:0; pointer-events:none; }
.portion-label{
    width:26px; height:26px; border-radius:50%;
    border:2px solid #c6cbd0; background:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .05s;
    opacity:.65;
}
.portion-label img{ width:16px; height:16px; filter:grayscale(60%); opacity:.9; pointer-events:none; }

/* portion selected */
.portion-input:checked + .portion-label{
    border-color:#c24b22; box-shadow:0 0 0 3px rgba(194,75,34,.18); opacity:1;
}
.portion-input:checked + .portion-label img{ filter:none; opacity:1; }
.portion-label:active{ transform:scale(.97); }

/* small screen */
@media (max-width: 480px){
    .topping-row{ flex-wrap:wrap; }
    .portion-select{ margin-left:2rem; }
}

/* === Pizza preview stage === */
.pizza-stage{
    position:relative; width:260px; height:260px; /* প্রয়োজন হলে বাড়ান */
    border-radius:50%; background:#f8f3ee;
}
.pizza-stage .pizza-base{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
}
.pizza-layers{
    position:absolute; inset:0; border-radius:50%; pointer-events:none;
}
.pizza-layers img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%;
}

.text-brown{ color:#4b2b16; }