/* Checkout: radio и checkbox чуть крупнее с тёмным ободком */
#checkout-form .form-check-input {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid #888;
    margin-top: 0.1em;
}
#checkout-form .form-check-input:checked {
    border-color: var(--bs-primary);
}


/* Bootstrap btn-primary всегда белый текст с лёгкой тенью для читаемости */
.btn-primary { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* Bootstrap form-floating label fix: без width label не обрезается ellipsis */
.form-floating > label { width: 100%; }

#cart-box-wrapper {
    position: sticky;
    top: var(--sticky-top-height, 0);
}

.menu-search {
    position: sticky;
    top: var(--sticky-top-height, 0);
    z-index: 100;
    padding-bottom: 0 !important;
    margin-bottom: 13px;
}

/* Fixed slider height — consistent across slides, responsive per device */
#slider-home-slider .carousel-item {
    height: max(30vh, 220px) !important;
    max-height: none !important;
}
@media (min-width: 768px) {
    #slider-home-slider .carousel-item { height: max(50vh, 300px) !important; }
}
@media (min-width: 1200px) {
    #slider-home-slider .carousel-item { height: max(60vh, 400px) !important; }
}
#slider-home-slider .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Fluid typography for hero slider overlay */
.hero-overlay h1 { font-size: clamp(1rem,   4vw, 2.8rem); font-weight: 700; margin-bottom: .5rem; }
.hero-overlay h2 { font-size: clamp(.9rem,  3vw, 2rem);   font-weight: 600; margin-bottom: .5rem; }
.hero-overlay h3 { font-size: clamp(.85rem, 2.5vw, 1.6rem); font-weight: 600; margin-bottom: .5rem; }
.hero-overlay h4 { font-size: clamp(.8rem,  2vw, 1.2rem); font-weight: 500; margin-bottom: .5rem; }
.hero-overlay p  { font-size: clamp(.75rem, 1.5vw, 1rem); }

/* Ensure all text inside overlay is white, ignoring inline styles */
.hero-overlay * { color: #fff !important; }

/* Distribute text blocks evenly vertically */
.hero-overlay {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}
.hero-overlay > * {
    margin: 0;
    text-shadow: -2px 0 6px rgba(0,0,0,0.8), 2px 0 6px rgba(0,0,0,0.8), 0 2px 6px rgba(0,0,0,0.8), 0 -2px 6px rgba(0,0,0,0.8);
}

/* Small-height screens (netbook/landscape) — reduce font sizes */
@media (max-height: 650px) and (min-width: 768px) {
    .hero-overlay h1 { font-size: clamp(.8rem, 2.5vw, 1.4rem) !important; }
    .hero-overlay h2 { font-size: clamp(.75rem, 2vw, 1.2rem) !important; }
    .hero-overlay h3 { font-size: clamp(.7rem, 1.8vw, 1.1rem) !important; }
    .hero-overlay h4 { font-size: clamp(.7rem, 1.5vw, 1rem) !important; }
    .hero-overlay p  { font-size: clamp(.65rem, 1.2vw, .9rem) !important; }
}

/* Fulfillment modal: address-1 input-group has no border on the inner input
   itself (border lives on the group), so it needs its own focus ring to match
   the default Bootstrap focus style used by other form-control fields.
   Address 1 is required — its focus ring uses the theme's primary color
   (same red as validation errors) to signal that. */
.input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(231, 76, 60, .25);
}
.input-group.border-danger:focus-within {
    border-color: #dc3545;
    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
}

/* Address 2 is optional — keep its focus ring the neutral Bootstrap blue
   instead of the theme's red primary color, so it doesn't look mandatory. */
#modal-address2:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}