/* Beelivery storefront homepage + chrome. Ported from the legacy Blazor homepage
   scoped SCSS (Constants breakpoints: desktop 1200, tablet 992, mobile 800,
   small-mobile 500) and the legacy template, flattened to plain CSS. */

:root { --bee-orange: #f60; }

/* Storefront base font matches the legacy site (Open Sans). Loaded only on
   storefront pages (homepage.css is referenced by the page, not globally). */
body { background-color: hsl(0, 0%, 97%); font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
.bee-site, .bee-nav-links, .place-order-container, .section { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

/* Content links are orange (matches the legacy site-wide `a { color:#f60 }`),
   e.g. the "Beer Delivery"/"Wine Delivery" category links + FAQ links. The slider
   buttons and footer/nav keep their own colours (more specific selectors win). */
.page-content a { color: var(--bee-orange); text-decoration: none; }
.page-content a:hover { color: #000; }

/* ---------- Site chrome (header / footer) ---------- */
.bee-site { display: flex; flex-direction: column; min-height: 100vh; }
.bee-main { flex: 1 0 auto; }

/* Header — mirrors the legacy beelivery.Master responsive navbar exactly: a Bootstrap
   navbar-expand-md that collapses behind a white hamburger on mobile. On <=799px the nav
   drops as an absolute white panel below the bar (orange links); on >=801px it sits inline. */
.bee-header { position: sticky; top: 0; z-index: 1020; background: var(--bee-orange); }
.bee-header .navbar { max-width: 1200px; margin: 0 auto; padding: 0; }
.bee-header .navbar-brand { margin-left: auto; margin-right: auto; }
@media (min-width: 801px) and (max-width: 1200px) { .bee-header .navbar-brand { margin-left: 10px; } }
.bee-header .logo { height: 44px; width: auto; }
@media (max-width: 800px) { .bee-header .logo { max-width: none; height: 40px; width: auto; } }
.bee-header .helphoney { height: 34px; margin-right: 10px; }
.bee-header .navbar-toggler { outline: none !important; border: 0; padding: 4px 8px; }
.bee-header .navbar-toggler-icon { width: 2em; height: 2em; background-image: url("/homepage/images/burgermenuwhite.svg"); }
.bee-header .navbar-nav { margin-left: auto; }
.bee-header .navbar-nav .nav-link { color: #000; text-align: center; }
.bee-header .navbar-nav .nav-link:hover { color: #000; }
@media (min-width: 801px) {
    .bee-header .navbar-nav { padding-top: 21px; }
    .bee-header #navbarHeader { margin-top: -25px; }
}
@media (max-width: 799px) {
    .bee-header .navbar-nav .nav-link img { display: none; }
    .bee-header #navbarHeader { position: absolute; top: 50px; left: 0; width: 100%; }
    .bee-header #navbarHeader a { color: var(--bee-orange) !important; }
    .bee-header .navbar-nav { background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0,0,0,.2); border-radius: 0 0 5px 5px; padding: 8px 0; }
    .bee-header .navbar-nav .nav-link:hover { color: var(--bee-orange); }
}

/* Footer matches the legacy: orange background, white centered text columns,
   right-aligned copyright (mirrors Footer.ascx + .footer/.footertext/.footerlink). */
.bee-footer { padding-top: 40px; background: var(--bee-orange); color: #fff; margin-top: auto; }
.bee-footer-inner { max-width: 1200px; margin: auto; padding: 0 10px; }
.bee-footer-row { display: flex; flex-wrap: wrap; }
.bee-footer-col { flex: 1 1 33%; padding: 1rem; text-align: center; }
.bee-footer-col h4 { padding-bottom: 15px; text-align: center; margin: 0; }
.bee-footer-col p { text-align: center; line-height: 1.9; }
.bee-footer a { color: #fff; text-decoration: none; }
.bee-footer a:hover { color: #000; }
.bee-footer-app img { padding: 3px; width: 150px; }
.bee-footer-social { flex: 1 1 50%; padding: 1rem; text-align: left; }
.bee-footer-social img { width: 50px; }
.bee-footer-copyright { flex: 1 1 50%; padding: 1rem; text-align: right; line-height: 50px; }
@media (max-width: 800px) {
    .bee-footer-col { flex: 1 1 100%; }
    .bee-footer-social, .bee-footer-copyright { flex: 1 1 100%; text-align: center; }
}

/* ---------- Page + sections ---------- */
.page-content { max-width: 1200px; margin: auto; }

.section { background: #fff; padding: 2rem; margin: 1rem 0; }
@media (min-width: 1200px) { .section { border-radius: 30px; } }
@media (max-width: 800px) { .section { padding: 2rem 1rem; } }
.section-header { color: var(--bee-orange); font-size: 2.75rem; margin: 0 0 4rem 0; text-align: center; font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
@media (max-width: 800px) { .section-header { font-size: 2.5rem; } }
@media (max-width: 500px) { .section-header { font-size: 2rem; } }

/* ---------- Postcode hero ---------- */
.place-order-container { display: flex; flex-direction: column; position: absolute; z-index: 1; top: 300px; left: 50%; width: 450px; transform: translateX(calc(300px - 50%)); }
@media (max-width: 1200px) { .place-order-container { left: unset; right: 4rem; width: calc(50% - 8rem); transform: none; } }
@media (max-width: 992px) { .place-order-container { right: 2rem; width: calc(50% - 4rem); } }
@media (max-width: 800px) { .place-order-container { top: calc(50px + 2rem); width: calc(100% - 2rem); right: 1rem; transform: none; } }

.place-order-container input, .place-order-container button { height: 60px; border: 3px solid var(--bee-orange); border-radius: 30px; font-size: 1rem; padding: 0 30px; }
@media (max-width: 800px) { .place-order-container input, .place-order-container button { height: 50px; padding: 0 25px; } }

.postcode-search-container { position: relative; overflow: hidden; }
.postcode-search-container input { border-color: #ccc; outline: none !important; width: 100%; padding-left: 55px; text-transform: uppercase; padding-right: 90px; box-sizing: border-box; }
/* Keep the watermark sentence-case while typed input is uppercased (matches live). */
.postcode-search-container input::placeholder { text-transform: none; }
.postcode-search-container input:focus { border-color: var(--bee-orange); }
@media (max-width: 800px) { .postcode-search-container input { padding-left: 50px; } }
.postcode-search-container img { width: 28px; position: absolute; }
@media (max-width: 800px) { .postcode-search-container img { top: 13px !important; width: 24px; } }
.postcode-search-container img.search { left: 16px; top: 16px; }
.postcode-search-container img.geolocate { right: 16px; top: 16px; cursor: pointer; }

.search-error { display: none; background: #fff; color: red; font-weight: 600; padding: .5rem 1rem; margin-top: .5rem; border-radius: 30px; border: 3px solid red; }
.search-error.show { display: block; }

.place-order-container button { display: flex; justify-content: center; align-items: center; background-color: var(--bee-orange); color: #fff; font-weight: 600; font-size: 1.3rem; margin-top: .5rem; transition: transform ease-in-out .15s; cursor: pointer; }
.place-order-container button:hover:not([disabled]) { transform: scale(1.03) translateY(-1px); }
.processing-search { width: 40px; height: 40px; border-radius: 50%; display: none; border-top: 3px solid #FFF; border-right: 3px solid transparent; box-sizing: border-box; animation: bee-rotation 1s linear infinite; }
.processing-search.show { display: inline-block; }
@keyframes bee-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---------- Country selector ---------- */
.selected-country { position: absolute; top: 13px; right: 48px; z-index: 2; width: 32px !important; height: 24px !important; }
@media (max-width: 800px) { .selected-country { top: 8px; } }
.flag-icon { width: 40px; height: 30px; border-radius: 5px; margin: 5px; transition: transform ease-in-out .15s; cursor: pointer; }
.country-selector-container { position: absolute; z-index: 2; top: 10px; right: 10px; width: calc(100% - 20px); overflow: hidden; display: flex; flex-direction: row-reverse; padding: 0 10px; background: #fff; border-radius: 30px; transition: transform ease-in-out .25s, opacity ease-in-out .25s; transform: translateY(50px) scale(.8); opacity: 0; }
@media (max-width: 800px) { .country-selector-container { top: 5px; } }
.country-selector-container.show { transform: translateY(0); opacity: 1; }
.country-selector-container .flag-icon:hover { transform: translateY(-3px); }

/* ---------- Slider ---------- */
.slider-container { position: relative; }
@media (min-width: 1200px) { .slider-container { border-radius: 0 0 30px 30px; overflow: hidden; } }
.slider-items-track { overflow-x: auto; display: flex; width: 100%; scrollbar-width: none; pointer-events: none; }
.slider-items-track::-webkit-scrollbar { width: 0; }
.slider-item { position: relative; flex: 0 0 100%; box-sizing: border-box; height: 700px; }
.slider-desktop-image, .slider-mobile-image { display: none; width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1; }
@media (min-width: 800px) { .slider-desktop-image { display: block; } }
@media (max-width: 800px) { .slider-mobile-image { display: block; } }
.slider-item-content { margin-left: 4rem; margin-right: 50%; }
@media (min-width: 800px) { .slider-item-content { margin-top: 215px; } }
@media (max-width: 992px) { .slider-item-content { margin-top: 210px; margin-left: 2rem; } }
@media (max-width: 800px) { .slider-item-content { margin: 185px 1rem 0 1rem; } }
.slider-item-content .item-header { font-weight: 700; font-size: 3rem; line-height: 3.5rem; margin-bottom: 1rem; cursor: default; user-select: none; }
.slider-item-content .item-subheader { font-size: 1rem; cursor: default; user-select: none; }
.slider-item-content a { margin-top: 1rem; display: inline-block; padding: 5px 20px; border-radius: 20px; background-color: hsl(0deg 0% 20% / 40%); backdrop-filter: blur(5px); color: #fff; border: 2px solid #fff; font-weight: 600; transition: background-color ease-in-out .2s; pointer-events: all; }
.slider-item-content a:hover { background-color: hsl(0deg 0% 20% / 75%); }

/* ---------- Products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); grid-gap: 1rem; }
.product-grid .product-container { display: flex; flex-direction: column; margin: 0 auto auto auto; max-width: 165px; text-decoration: none; color: inherit; }
.product-grid .product-container img { margin: 0 0 1rem 0; max-width: 100%; }

/* ---------- Points / app / delivery list / faq ---------- */
.points-container { display: flex; }
@media (max-width: 500px) { .points-container { flex-direction: column; } }
.user-journey-point { display: flex; flex-direction: column; margin-right: 1rem; }
.user-journey-point:last-of-type { margin: 0; }
@media (max-width: 500px) { .user-journey-point { margin-right: 0; margin-bottom: 2rem; } }
.user-journey-point img { max-height: 200px; width: 100%; margin-bottom: 2rem; flex-grow: 1; }
@media (max-width: 800px) { .user-journey-point img { max-height: 100px; } }
.user-journey-point h3, .user-journey-point div { text-align: center; }

.get-the-app-container { display: flex; }
@media (max-width: 800px) { .get-the-app-container { flex-direction: column; } }
.get-the-app-marketing-text { flex-basis: 50%; text-align: center; }
.get-the-app-container .app-store-icons { margin-top: 1rem; margin-bottom: 2rem; }
.get-the-app-container .app-store-icons a img { width: 200px; margin: .5rem; }
.get-the-app-container p { margin-bottom: 1.5rem; }
.get-the-app-pic { display: flex; flex-basis: 50%; }
.get-the-app-pic img { display: block; height: 400px; margin: auto; max-width: 100%; }

.delivery-list-section p { text-align: center; }
.delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; column-gap: 2rem; margin-top: 2rem; }
@media (max-width: 800px) { .delivery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .delivery-grid { grid-template-columns: repeat(1, 1fr); } }
.delivery-grid a { display: inline-block; width: fit-content; }
@media (max-width: 800px) { .delivery-grid a { width: 100%; text-align: center; } }
.faq-container { max-width: 800px; display: block; margin: auto; padding-left: 1rem; }

/* ---------- Auth modal ---------- */
.bee-auth-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.bee-auth-modal[hidden] { display: none; }
.bee-auth-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.bee-auth-dialog { position: relative; background: #fff; border-radius: 16px; width: 420px; max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); overflow: auto; padding: 1.5rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.bee-auth-x { position: absolute; top: 8px; right: 12px; border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #999; }
.bee-auth-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.bee-auth-tab { flex: 1; padding: .6rem; border: none; background: #f1f1f1; border-radius: 30px; font-weight: 600; cursor: pointer; }
.bee-auth-tab.is-active { background: var(--bee-orange); color: #fff; }
.bee-auth-frame-wrap { position: relative; min-height: 360px; }
.bee-auth-frame { width: 100%; height: 360px; border: 0; }
.bee-auth-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; z-index: 1; }
.bee-auth-spinner.is-hidden { display: none; }
.bee-auth-spinner::after { content: ""; width: 38px; height: 38px; border: 3px solid #eee; border-top-color: var(--bee-orange); border-radius: 50%; animation: bee-auth-spin .7s linear infinite; }
@keyframes bee-auth-spin { to { transform: rotate(360deg); } }
.bee-auth-or { text-align: center; margin: 1rem 0; border-top: 1px solid #eee; }
.bee-auth-or span { position: relative; top: -.7rem; background: #fff; padding: 0 .75rem; color: #999; }
.bee-auth-oauth { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.bee-oauth-btn { cursor: pointer; max-width: 240px; width: 100%; }