/* ========================================================================== Filago — express order form (Utopia Fast Checkout) + /track-order/. Replaces the plugin's own stylesheet (dequeued in inc/fast-checkout.php), which targets other themes. The form adapts to its own width (container queries): phone, tablet, or the ~380–430px buy panel on desktop. ========================================================================== */ /* ---------- Product page: add to cart becomes the quieter choice ---------- */ .pdp__buy:has(#utopia-fast-checkout) button.single_add_to_cart_button { background: var(--white); color: var(--ink); border-color: var(--ink); } .pdp__buy:has(#utopia-fast-checkout) button.single_add_to_cart_button:hover { background: var(--soft); } /* The form has its own WhatsApp button: the panel's one would repeat it. */ .pdp__sticky:has(#ufc-whatsapp-btn) .btn--wa[data-wa-order] { display: none; } .fc-wrap { margin-top: 22px; } .fc-or { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: 13px; color: var(--muted); } .fc-or::before, .fc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ---------- Card ---------- */ #utopia-fast-checkout { container-type: inline-size; width: 100%; margin: 0; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); font-family: var(--font); color: var(--ink); } html body div#utopia-fast-checkout > h3 { display: block; margin: 0; padding: 0; background: none !important; color: var(--ink); font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; } html body div#utopia-fast-checkout > h3::after { content: "Sans compte · paiement en espèces à la réception"; display: block; margin-top: 8px; font-family: var(--font); font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--muted); } #fast-checkout-form { margin-top: 18px; } #ufc-qp-notice, .ps-v2-express-sub { display: none !important; } /* Spam traps: the plugin parks them at left:-9999px, which reads as page overflow; clip them in place instead. */ #utopia-fast-checkout :is(input[name="website"], input[name="ufc_website"]) { left: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%) !important; } /* ---------- Fields ---------- */ #utopia-fast-checkout .form-input-box { display: grid; grid-template-columns: 1fr; gap: 10px; } #utopia-fast-checkout .form-input-box p { margin: 0; } /* Two columns from 440px (below, "Téléphone (8 chiffres)" fills its half): Nom | Téléphone, Adresse in full, Gouvernorat | Ville side by side (the city list follows the governorate). Matched by field, not by position: wheel.js inserts its note (p.fc-wheel-note) after the phone. */ @container (min-width: 440px) { #utopia-fast-checkout .form-input-box { grid-template-columns: 1fr 1fr; } #utopia-fast-checkout .form-input-box :is(p:has([name="address"]), .fc-wheel-note) { grid-column: 1 / -1; } } #utopia-fast-checkout .form-input-box input, #utopia-fast-checkout .form-input-box select { width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); font: 400 16px/1.2 var(--font); color: var(--ink); -webkit-appearance: none; appearance: none; box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s; } #utopia-fast-checkout .form-input-box select { padding-right: 38px; cursor: pointer; text-overflow: ellipsis; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23140f0f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; } #utopia-fast-checkout .form-input-box select:invalid, #utopia-fast-checkout .form-input-box select:has(option:checked[value=""]) { color: var(--muted); } #utopia-fast-checkout .form-input-box select:disabled { background-color: var(--soft); color: var(--muted); cursor: not-allowed; opacity: 1; } #utopia-fast-checkout .form-input-box input::placeholder { color: var(--muted); } #utopia-fast-checkout .form-input-box input:focus, #utopia-fast-checkout .form-input-box select:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } #utopia-fast-checkout .form-input-box input:user-invalid { border-color: var(--sale); } /* ---------- Summary ---------- */ #utopia-fast-checkout .order-summary { margin: 14px 0 0; padding: 14px 16px 12px; border: 0; border-radius: 4px; background: var(--soft); } #utopia-fast-checkout .order-summary h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } #utopia-fast-checkout .order-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border: 0; font-size: 14px; color: var(--ink-2); } #utopia-fast-checkout .order-line .label { flex: 1; min-width: 0; } #utopia-fast-checkout .order-line .label strong { font-weight: 500; color: var(--ink); } #utopia-fast-checkout .order-line .variation { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); } #utopia-fast-checkout .order-line .variation:empty { display: none; } #utopia-fast-checkout .order-line .value { font-weight: 500; color: var(--ink); white-space: nowrap; } #utopia-fast-checkout .fc-discount-line .value { color: var(--sale); } #utopia-fast-checkout .fc-discount-code { color: var(--muted); } #utopia-fast-checkout .order-line.total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; color: var(--ink); } #utopia-fast-checkout .order-line.total .value { font-size: 19px; letter-spacing: -0.01em; } .fc-pack-pieces { display: grid; gap: 2px; padding: 0 0 6px; font-size: 12.5px; color: var(--muted); } /* Promo code row */ .fc-promo { margin-top: 4px; padding: 10px 0; border-top: 1px dashed var(--line-strong); } .fc-promo__toggle { font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } .fc-promo__toggle:hover { color: var(--ink); } .fc-promo__row { display: flex; gap: 8px; } #utopia-fast-checkout .fc-promo__row input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--white); font: 400 15px var(--font); color: var(--ink); text-transform: uppercase; letter-spacing: .04em; outline: none; } #utopia-fast-checkout .fc-promo__row input::placeholder { text-transform: none; letter-spacing: 0; color: var(--muted); } #utopia-fast-checkout .fc-promo__row input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .fc-promo__apply { flex: none; height: 42px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 500; color: var(--ink); transition: background-color .15s; } .fc-promo__apply:hover { background: var(--soft); } .fc-promo__apply:disabled { opacity: .5; cursor: wait; } .fc-promo__applied { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; background: var(--white); font-size: 13px; color: var(--ink-2); } .fc-promo__applied strong { font-weight: 600; letter-spacing: .04em; color: var(--ink); } .fc-promo__remove { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .fc-promo__remove:hover { color: var(--ink); } .fc-promo__msg { margin-top: 8px; font-size: 13px; color: var(--ink-2); } .fc-promo__msg.is-error { color: var(--sale); } .fc-promo .coupon-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--ink-2); } /* The percent sits inside the chip, so "-10 %" never drops to a line of its own. */ .fc-promo .code-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px dashed var(--ink); border-radius: 4px; background: var(--white); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ink); white-space: nowrap; transition: background-color .15s, color .15s; } .fc-promo .code-chip__off { font-weight: 500; letter-spacing: 0; color: var(--ink-2); } .fc-promo .code-chip:hover { background: var(--ink); color: var(--white); border-style: solid; } .fc-promo .code-chip:hover .code-chip__off { color: inherit; } /* Text buttons: a 40px tap area without moving the layout. */ .fc-promo__toggle { padding-block: 10px; margin-block: -10px; } .utopia-turnstile-wrap { display: flex; justify-content: center; margin: 14px 0 0; } /* ---------- Quantity + confirm ---------- */ #utopia-fast-checkout .utopia-fast-bottom-set { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; } #utopia-fast-checkout .quantity-box { display: flex; align-items: stretch; flex: none; width: 120px; height: 52px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); overflow: hidden; } #utopia-fast-checkout .quantity-box span { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; font-size: 20px; font-weight: 300; color: var(--ink); cursor: pointer; user-select: none; transition: background-color .15s; } #utopia-fast-checkout .quantity-box span:hover { background: var(--soft); } #utopia-fast-checkout .quantity-box input[type="number"] { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none; outline: none; text-align: center; font: 500 16px var(--font); color: var(--ink); -moz-appearance: textfield; appearance: textfield; } #utopia-fast-checkout .quantity-box input::-webkit-inner-spin-button, #utopia-fast-checkout .quantity-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; height: auto; width: auto; margin: 0; padding: 0 20px; border: 0; border-radius: 999px; color: var(--white); font: 500 15px/1.15 var(--font); letter-spacing: 0; white-space: nowrap; box-shadow: none; cursor: pointer; } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt .dashicons { display: none; } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15.5M13.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--ease); } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt:hover::after { transform: translateX(3px); } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt[disabled], #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt[aria-busy="true"] { opacity: .65; cursor: wait; } @container (max-width: 359px) { #utopia-fast-checkout .quantity-box { width: 104px; } #utopia-fast-checkout .quantity-box span { width: 32px; } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { padding: 0 14px; font-size: 14px; gap: 8px; } } /* The button never pushes past the card (it did at 360px and in the 1024px panel): it may shrink and, as a last resort, wrap; narrow cards drop the arrow and take a slimmer stepper. */ #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { min-width: 0; white-space: normal; text-align: center; } @container (max-width: 400px) { #utopia-fast-checkout .utopia-fast-bottom-set { gap: 8px; } #utopia-fast-checkout .quantity-box { width: 100px; } #utopia-fast-checkout .quantity-box span { width: 32px; } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt { padding: 0 12px; } #utopia-fast-checkout .utopia-fast-bottom-set button.button.alt::after { display: none; } } #utopia-fast-checkout .terms { margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--muted); text-wrap: balance; } html body div#utopia-fast-checkout > h3::after { text-wrap: balance; } /* Under the header when the buy bar's "Commander" scrolls the form up: html's scroll-padding (header + 16px, theme.css) already clears the header, so only 8px more for the 24px gap (adding the header again left 84px). */ #utopia-fast-checkout { scroll-margin-top: 8px; } #utopia-fast-checkout .terms a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* WhatsApp (shown once the number is set in the Customizer): secondary, with the green mark. */ #utopia-fast-checkout #ufc-whatsapp-btn { min-height: 48px; margin-top: 12px !important; padding: 0 18px !important; border: 1px solid var(--line-strong) !important; border-radius: 999px !important; background: var(--white) !important; color: var(--ink) !important; box-shadow: none !important; font: 500 14px var(--font) !important; } #utopia-fast-checkout #ufc-whatsapp-btn svg { color: #25d366; } #utopia-fast-checkout #ufc-whatsapp-btn:hover { border-color: #25d366 !important; } /* Messages (inline-styled by the plugin script): the theme's quiet notice. */ #utopia-fast-checkout .fast-checkout-message:empty { display: none; } #utopia-fast-checkout .fast-checkout-message > div { margin-top: 12px !important; padding: 10px 12px !important; border: 0 !important; border-radius: 4px !important; background: #fbeeee !important; font: 500 13px/1.45 var(--font) !important; color: #8a1020 !important; } #utopia-fast-checkout .fast-checkout-message > div > span:first-child { background: var(--sale) !important; } #utopia-fast-checkout .fast-checkout-message > div[style*="f0fff4"] { background: var(--soft) !important; color: var(--ink) !important; } #utopia-fast-checkout .fast-checkout-message > div[style*="f0fff4"] > span:first-child { background: var(--ink) !important; } /* Submit popup (unused by the current plugin flow, kept hidden like its own stylesheet did). */ .check_ui_popop_after_submit { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(20, 15, 15, .4); } .check_ui_popop_after_submit .popup-content { width: min(400px, calc(100% - 32px)); padding: 28px 24px; border-radius: var(--radius); background: var(--white); text-align: center; } /* ========================================================================== /track-order/ — confirmation + lookup (the plugin template prints its own