/* ------------------------------------------------------------------------- * * Quick Order (Бърза поръчка) — product-page inline order form. * Markup: View/Elements/quick-order-form.ctp · Behaviour: js/product-page.js * Only the wrapper / trigger / distinct box are styled here; the fields reuse * the existing .shipping-details / .form-control / speedy (.checkedCombo) rules. * (SiSi variant — gradient CTA to match the brand's buttons.) * ------------------------------------------------------------------------- */ .quick-order { margin: 15px 0 5px; } /* Trigger: charcoal button so it stands apart from the brand-coloured buy button */ .quick-order-toggle { display: block; width: 100%; background-color: #2b2b2b; color: #ffffff; border: none; padding: 13px 15px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease; } .quick-order-toggle:hover, .quick-order-toggle[aria-expanded="true"] { background-color: #000000; } .quick-order-toggle .qo-flash { color: #ffd23f; margin-right: 4px; } /* Distinct boxed form (R3): light border + subtle tint */ .quick-order-body { border: 1px solid #cfcfcf; background-color: #f7f7f7; border-radius: 4px; padding: 15px; margin-top: 8px; } .quick-order-body[hidden] { display: none; } .qo-field { margin-bottom: 12px; } /* keep the reused .shipping-details inputs full-width and tidy inside the box */ .quick-order-form.shipping-details input.form-control, .quick-order-form.shipping-details select.form-control { width: 100%; } .quick-order-form .form-group { margin-bottom: 14px; } .quick-order-form #speedy_address .form-group{ margin-top: 0px !important; } .quick-order-form label.uncheckedCombo, .quick-order-form label.checkedCombo{ font-size: 14px; } .qo-hint { display: block; color: #8a8a8a; font-size: 12px; margin-top: 4px; } .qo-section-title { font-weight: 700; font-size: 15px; margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid #e2e2e2; } /* Single fixed COD option: reuses the .checkedCombo sprite (like the Speedy options) purely as a "selected" indicator — not interactive, so no pointer. */ .qo-payment.checkedCombo { display: block; margin: 6px 0; cursor: default; } .qo-delivery-note { font-size: 13px; color: #333333; margin: 12px 0; line-height: 20px; } #quickOrderCaptcha:empty { margin: 0; } .qo-actions { margin-top: 10px; } /* Primary CTA — SiSi brand gradient (matches the checkout complete-order button) */ .shipping-details input.quick-order-submit { display: block; width: 100%; background: #cb1544; background: linear-gradient(90deg, #d93636 0%, #cb1544 100%); color: #ffffff; border: none; padding: 13px; font-size: 16px; font-weight: 700; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: opacity 0.2s ease; line-height: 13px; } .quick-order-submit:hover { opacity: 0.9; } .qo-loader { display: block; margin: 8px auto 0; } .qo-terms { font-size: 12px; color: #555555; text-align: center; margin: 10px 0 0; line-height: 18px; } .qo-terms a { color: #0173bb; text-decoration: underline; } .qo-error { color: #e30000; font-size: 13px; margin-top: 10px; text-align: center; } /* Success replaces the form after a successful submit (R11) */ .quick-order-success { text-align: center; padding: 22px 15px; font-size: 16px; font-weight: 700; color: #2e7d32; line-height: 24px; } .quick-order-success .qo-success-ico { display: block; margin: 0 auto 10px; } /* --- Speedy autocomplete dropdown containment (product page only) ---------- * * The reused jQuery-UI autocomplete menus (city/street/office) render at a fixed * wide width — the office list is ~780px — and default to here because * checkout's ".no-reg" appendTo container is absent on the product page, so they * spill past the page edge. product-page.js tags each menu with .qo-speedy-menu * on first focus; these rules only touch tagged menus, leaving the header * product-search dropdown and the checkout Speedy menus untouched. */ /* positioning context so the re-homed (appendTo) menu sizes to the form */ #quickOrderForm { position: relative; } /* Contained case: the ID selector outranks the site's ".ui-autocomplete{ max-width:500px}", so the menu tracks the form width and can't overflow. */ #quickOrderForm .ui-autocomplete { max-width: 100%; box-sizing: border-box; overflow-x: hidden; } /* Fallback if the menu still lands on : two classes beat ".ui-autocomplete" so this fixed cap actually wins the cascade. */ .ui-autocomplete.qo-speedy-menu { max-width: 360px; max-width: min(360px, 92vw); box-sizing: border-box; overflow-x: hidden; } #quickOrderForm .ui-autocomplete li a, #quickOrderForm .ui-autocomplete .ui-widget-header > div, .ui-autocomplete.qo-speedy-menu li a, .ui-autocomplete.qo-speedy-menu .ui-widget-header > div { white-space: normal; } /* flatten the fixed-width float columns to fluid inline text so nothing spills */ #quickOrderForm .ui-autocomplete li a span, #quickOrderForm .ui-autocomplete .ui-widget-header span, .ui-autocomplete.qo-speedy-menu li a span, .ui-autocomplete.qo-speedy-menu .ui-widget-header span { float: none !important; width: auto !important; display: inline; margin-right: 6px; } /* ------------------------------------------------------------------------- * * Product advantages & contact strip — shown under the Quick Order module. * Markup: View/Elements/product-advantages.ctp · No JS. * Mobile: vertical list (icon left of text). Desktop (>=768px): 2x2 grid. * Every selector is namespaced (.product-advantages / .pa-*) to avoid * collisions with existing storefront styles. * ------------------------------------------------------------------------- */ .product-advantages { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid #e2e2e2; } .pa-item { display: flex; align-items: center; margin-bottom: 14px; font-size: 14px; color: #333333; } .pa-item:last-child { margin-bottom: 0; } /* fixed icon column so every label starts at the same x-offset; the inline SVG inherits this colour via stroke="currentColor" and is sized by this box. */ .pa-ico { flex: 0 0 auto; width: 22px; height: 22px; margin-right: 12px; color: #2b2b2b; } .pa-phone { color: #333333; font-weight: 700; text-decoration: none; } .pa-phone:hover { text-decoration: underline; } /* Desktop — Variant A: 2x2 grid so the strip stays compact in the buy box */ @media (min-width: 768px) { .product-advantages { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 14px; } .pa-item { margin-bottom: 0; } } /* ------------------------------------------------------------------------- * * Product info accordion — single-open collapsible panels shown under the * product-advantages strip (same stacked column on mobile and desktop). * Markup: View/Elements/product-accordion.ctp · behaviour: js/product-page.js. * Namespaced (.product-accordion / .pacc-*) to avoid clashes with Bootstrap * (.panel/.collapse) in minified.css and with existing storefront styles. * ------------------------------------------------------------------------- */ .product-accordion { margin: 24px 0 0; border-top: 1px solid #e2e2e2; } .pacc-item { border-bottom: 1px solid #e2e2e2; } /* Header: full-width