/* CACHEBUST: 1777994000 */ /* ============================================================ * desktop_v2.css — Desktop V2 chrome stylesheet * Loaded ONLY when dv2=1 cookie set (via desktop.php addStyleSheet) * * Sections: * §0 — sanity test marker (V2 stripe at top) * §1 — chrome shadow / wrapper polish (sitewide) * §2 — V2 footer card (sitewide) * §3 — Registration / checkout entry (eggrafi + tameio) * ============================================================ */ /* ── CSS Variables (ported from mobile_v2.css :root) ───── */ :root { --primary: #2588a6; --primary-dk: #1a6a84; --primary-lt: #3cb4d9; --accent: #c2e1f5; --accent-bg: #eaf6fd; --white: #ffffff; --bg: #f2f5f8; --text: #2e2e2e; --text-lt: #666666; --border: #dde3e8; --shadow-sm: 0 1px 4px rgba(0,0,0,.08); --shadow: 0 2px 10px rgba(0,0,0,.12); --shadow-lg: 0 4px 20px rgba(0,0,0,.16); --radius: 9px; --radius-lg: 14px; } /* ── §3.5 Typography — match legacy exactly + modern fallbacks ──────── * Verified legacy default in templates/shopper_frenzy/css/template_css.css: * body { font-family: Arial, Helvetica, sans-serif; } * a, label { font-family: Arial; } * * Strategy: Arial + Helvetica FIRST (identical to legacy on every OS * that has them — Windows, Mac, iOS, Android all do). System stack * inserted BEFORE generic `sans-serif` so it only kicks in on rare * setups missing both Arial and Helvetica (some Linux distros). Result: * legacy look preserved, modern fallback only where genuinely needed. * * NO font-size, NO line-height — legacy CSS sets these per-element. * ────────────────────────────────────────────────────────────────────── */ body.desktop_v2_content { font-family: Arial, Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif, 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } /* ───────────────────────────────────────────────────────────── * §4 — Shopping cart — CARD-STACK layout (no table; mobile-style) * Each cart item = horizontal card: [thumb] [name+sku+qty] [subtotal] * Header row hidden, summary rows = flat 2-col bottom panel. * ───────────────────────────────────────────────────────────── */ /* Kill table chrome — turn into block stack */ body.desktop_v2_content #vmMainPage table.v2-cart-table, body.desktop_v2_content #vmMainPage table.v2-cart-table thead, body.desktop_v2_content #vmMainPage table.v2-cart-table tbody, body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot, body.desktop_v2_content #vmMainPage table.v2-cart-table tr, body.desktop_v2_content #vmMainPage table.v2-cart-table td, body.desktop_v2_content #vmMainPage table.v2-cart-table th { display: block !important; width: 100% !important; max-width: 100% !important; border: none !important; border-collapse: separate !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table { margin: 8px 0 16px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table thead { display: none !important; } /* Each item row = card with grid layout. Title (name) stretches across cols 2+3 so it reaches up to the price column, not constrained by qty width. Subtotal (price) sits alone top-right; qty spans cols 3+4 below to keep its controls aligned. */ body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) auto auto !important; grid-template-areas: "thumb name name subtotal" "thumb sku qty qty" !important; column-gap: 16px !important; row-gap: 6px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 10px 14px !important; margin: 0 0 6px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important; align-items: start !important; } /* Cell areas */ body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-thumb { grid-area: thumb; width: 96px !important; height: 96px !important; align-self: start !important; } body.desktop_v2_content #vmMainPage img.v2-cart-thumb { width: 96px !important; height: 96px !important; object-fit: contain !important; border-radius: 8px !important; border: 1px solid #eef0f3 !important; background: #fff !important; padding: 4px !important; box-sizing: border-box !important; transition: transform .15s ease, box-shadow .15s ease; } body.desktop_v2_content #vmMainPage a:hover img.v2-cart-thumb { transform: scale(1.04); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10); } body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-name { grid-area: name; align-self: end; font-weight: 700 !important; color: #111827 !important; line-height: 1.35 !important; font-size: 14px !important; word-wrap: break-word; overflow-wrap: break-word; } body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-name a { color: #111827 !important; text-decoration: none !important; font-weight: 700 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-name a:hover { color: var(--primary) !important; } body.desktop_v2_content #vmMainPage .v2-cart-attr { display: block; font-size: 12px; color: #6b7280; font-weight: 500; margin-top: 4px; } body.desktop_v2_content #vmMainPage .v2-cart-pid { display: inline; font-size: 12px; color: #6b7280; font-weight: 500; margin-left: 4px; white-space: nowrap; } body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-sku { grid-area: sku; align-self: start; font-family: ui-monospace, "SF Mono", Consolas, monospace !important; font-size: 12px !important; color: #6b7280 !important; } /* Add a "ΚΩΔ:" prefix label to the SKU cell */ body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-sku::before { content: 'ΚΩΔ: '; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #9ca3af; font-weight: 500; margin-right: 2px; } /* Hide the price cell (we show price as part of subtotal area) */ body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-price { display: none !important; } /* Qty controls — bottom right (below subtotal price), with Ποσότητα label */ body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-qty { grid-area: qty !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; padding: 0 !important; border: none !important; margin: 0 !important; white-space: nowrap !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-qty::before { content: 'Ποσότητα:'; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; } body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-qty form { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="text"], body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="number"] { width: 56px !important; height: 36px !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; color: #111827 !important; background: #fff !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="text"]:focus, body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="number"]:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-qty img { cursor: pointer; width: 22px !important; height: 22px !important; vertical-align: middle; transition: transform .1s; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-qty img:hover { transform: scale(1.1); } /* Subtotal — vertical stack of "Μερικό:" label + bold price */ body.desktop_v2_content #vmMainPage table.v2-cart-table tr.v2-cart-row .v2-cart-td-subtotal { grid-area: subtotal; align-self: start; text-align: right !important; font-size: 18px !important; font-weight: 800 !important; color: var(--primary) !important; white-space: nowrap; padding-left: 12px !important; } /* "Μερικό:" label removed by user request */ /* Summary rows (Μερικό Σύνολο / Σύνολο / Φόρος) — flat 2-col flex, aligned with cart-row card (same horizontal margins) */ body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-summary-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 4px 14px !important; border-bottom: 1px solid #f1f5f9 !important; background: #fafbfc !important; border-radius: 0 !important; margin: 0 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-summary-row:first-of-type { border-radius: 10px 10px 0 0 !important; margin-top: 4px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-summary-row td { display: inline !important; width: auto !important; flex: 0 0 auto !important; font-size: 13px !important; color: #4b5563 !important; text-align: left !important; padding: 0 !important; background: transparent !important; border: none !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-summary-row td:last-child { color: #1f2937 !important; font-weight: 700 !important; font-size: 14px !important; text-align: right !important; } /* TOTAL row — emphasis */ body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-total-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 14px !important; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important; border: 1px solid #e2e8f0 !important; border-top: 2px solid var(--primary) !important; border-radius: 0 0 10px 10px !important; font-size: 16px !important; color: #111827 !important; margin: 0 0 8px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-total-row td { display: inline !important; width: auto !important; padding: 0 !important; background: transparent !important; border: none !important; font-size: 16px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-total-row td:last-child { text-align: right !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-total-row .v2-cart-total-val { color: var(--primary) !important; font-weight: 900 !important; font-size: 22px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table thead tr { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table thead th { color: #fff !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .5px !important; padding: 12px 14px !important; text-align: left !important; border: none !important; background: transparent !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-thumb { width: 100px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-sku, body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-price, body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-qty, body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-subtotal { white-space: nowrap; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-price, body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-subtotal { text-align: right !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-th-qty { text-align: center !important; } /* Body rows */ body.desktop_v2_content #vmMainPage table.v2-cart-table tbody tr.v2-cart-row { transition: background .12s ease; } body.desktop_v2_content #vmMainPage table.v2-cart-table tbody tr.v2-cart-row:hover { background: #f9fafb !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tbody td { padding: 14px !important; border-bottom: 1px solid #f1f5f9 !important; background: transparent !important; vertical-align: middle !important; font-size: 14px !important; color: #1f2937 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tbody tr:last-child td { border-bottom: none !important; } /* Thumbnail cell */ body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-thumb { width: 100px !important; text-align: center !important; padding: 10px !important; } body.desktop_v2_content #vmMainPage img.v2-cart-thumb { width: 80px !important; height: 80px !important; object-fit: contain !important; border-radius: 8px !important; border: 1px solid #eef0f3 !important; background: #fff !important; padding: 4px !important; box-sizing: border-box !important; transition: transform .15s ease, box-shadow .15s ease; } body.desktop_v2_content #vmMainPage a:hover img.v2-cart-thumb { transform: scale(1.04); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10); } /* Product name cell */ body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-name { font-weight: 600 !important; color: #111827 !important; line-height: 1.4 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-name a { color: #111827 !important; text-decoration: none !important; font-weight: 600 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-name a:hover { color: var(--primary) !important; } body.desktop_v2_content #vmMainPage .v2-cart-attr { display: block; font-size: 12px; color: #6b7280; font-weight: 500; margin-top: 4px; } /* SKU cell */ body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-sku { font-family: ui-monospace, "SF Mono", Consolas, monospace !important; font-size: 12px !important; color: #6b7280 !important; white-space: nowrap; } /* Price + subtotal */ body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-price { text-align: right !important; font-size: 14px !important; color: #4b5563 !important; white-space: nowrap; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-subtotal { text-align: right !important; font-size: 16px !important; font-weight: 800 !important; color: var(--primary) !important; white-space: nowrap; } /* Qty controls */ body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-qty { text-align: center !important; white-space: nowrap; } body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="text"], body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="number"] { width: 56px !important; height: 36px !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; padding: 0 !important; margin: 0 4px !important; box-sizing: border-box !important; color: #111827 !important; background: #fff !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="text"]:focus, body.desktop_v2_content #vmMainPage table.v2-cart-table input[type="number"]:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important; } /* Qty +/- icons (NOT the thumbnail) — limit to images inside the qty cell only */ body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-qty img, body.desktop_v2_content #vmMainPage table.v2-cart-table td.ps-cart-qty img { cursor: pointer; width: 22px !important; height: 22px !important; vertical-align: middle; transition: transform .1s; } body.desktop_v2_content #vmMainPage table.v2-cart-table .v2-cart-td-qty img:hover, body.desktop_v2_content #vmMainPage table.v2-cart-table td.ps-cart-qty img:hover { transform: scale(1.1); } /* Thumbnail explicit size — beat the qty rule with extra specificity */ body.desktop_v2_content #vmMainPage table.v2-cart-table img.v2-cart-thumb { width: 80px !important; height: 80px !important; } /* Footer rows (subtotal/tax/shipping/total) */ body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-summary-row td { padding: 8px 14px !important; background: #f8fafc !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 13px !important; color: #4b5563 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-summary-row td:last-child { color: #1f2937 !important; font-weight: 600 !important; font-size: 14px !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-total-row td { padding: 14px !important; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important; border-top: 2px solid #e2e8f0 !important; border-bottom: none !important; font-size: 16px !important; color: #111827 !important; } body.desktop_v2_content #vmMainPage table.v2-cart-table tfoot tr.v2-cart-total-row .v2-cart-total-val { color: var(--primary) !important; font-weight: 900 !important; font-size: 20px !important; } /* CTAs (Συνέχεια Αγορών + Ταμείο) — centered side by side */ body.desktop_v2_content.is-cart #vmMainPage div:has(> a.continue_link + a.checkout_link), body.desktop_v2_content.is-cart #vmMainPage div:has(> a.checkout_link + a.continue_link), body.desktop_v2_content #vmMainPage div:has(> a.continue_link + a.checkout_link), body.desktop_v2_content #vmMainPage div:has(> a.checkout_link + a.continue_link) { display: flex !important; flex-direction: row !important; gap: 12px !important; align-items: center !important; justify-content: center !important; margin: 18px 0 !important; padding: 0 !important; background: transparent !important; } body.desktop_v2_content #vmMainPage a.continue_link, body.desktop_v2_content #vmMainPage a.checkout_link { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 220px !important; height: 50px !important; padding: 0 24px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important; text-align: center !important; margin: 0 !important; background-image: none !important; box-sizing: border-box !important; text-transform: uppercase !important; letter-spacing: .4px !important; cursor: pointer !important; transition: filter .15s, transform .1s, background .15s !important; line-height: 1 !important; } body.desktop_v2_content #vmMainPage a.continue_link { background: #fff !important; color: var(--primary) !important; border: 2px solid var(--primary) !important; } body.desktop_v2_content #vmMainPage a.continue_link:hover { background: var(--primary) !important; color: #fff !important; } body.desktop_v2_content #vmMainPage a.checkout_link { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; border: 2px solid transparent !important; box-shadow: 0 4px 12px rgba(249,115,22,.35) !important; } body.desktop_v2_content #vmMainPage a.checkout_link:hover { filter: brightness(1.05); } body.desktop_v2_content #vmMainPage a.checkout_link:active, body.desktop_v2_content #vmMainPage a.continue_link:active { transform: scale(0.98); } body.desktop_v2_content #vmMainPage a.continue_link img, body.desktop_v2_content #vmMainPage a.checkout_link img { display: none !important; } body.desktop_v2_content #vmMainPage a.continue_link::before, body.desktop_v2_content #vmMainPage a.checkout_link::after { content: ''; display: inline-block; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; flex-shrink: 0; } body.desktop_v2_content #vmMainPage a.continue_link::before { background-image: url('data:image/svg+xml;utf8,'); } body.desktop_v2_content #vmMainPage a.checkout_link::after { background-image: url('data:image/svg+xml;utf8,'); } /* ───────────────────────────────────────────────────────────── * §3 specific notes * ───────────────────────────────────────────────────────────── */ /* "Συμπληρώστε μόνο εφόσον..." note υπό τα ΠΡΟΑΙΡΕΤΙΚΑ ΣΤΟΙΧΕΙΑ */ body.desktop_v2_content #vmMainPage .v2-prairetika-note { display: block !important; background: #fef3c7 !important; border: 1px solid #fbbf24 !important; border-radius: 8px !important; padding: 10px 14px !important; margin: 8px 0 14px !important; font-size: 13px !important; color: #78350f !important; line-height: 1.45 !important; font-weight: 500 !important; } /* ───────────────────────────────────────────────────────────── * §0 — V2 DEV strip (only visible when loaded via desktop_v2.php * — DEV chrome). desktop_v2_stable.php (LIVE) sets a different * body class so the strip stays hidden on production. * ───────────────────────────────────────────────────────────── */ body.desktop_v2_content.desktop_v2_dev::before { content: "v2 desktop chrome — loaded (DEV)"; position: fixed; top: 0; left: 0; right: 0; height: 18px; background: linear-gradient(90deg, #2588a6 0%, #3cb4d9 50%, #2588a6 100%); color: #fff; font: 11px/18px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: center; z-index: 99999; letter-spacing: 0.5px; } body.desktop_v2_content.desktop_v2_dev { padding-top: 18px !important; } /* ───────────────────────────────────────────────────────────── * §1 — Continuous chrome shadow (sitewide) * ───────────────────────────────────────────────────────────── */ body.desktop_v2_content #s5_main_body_shadow, body.desktop_v2_content #s5_main_body, body.desktop_v2_content #s5_main_body2, body.desktop_v2_content #s5_main_body3, body.desktop_v2_content #s5_main_body4 { background-image: none !important; } body.desktop_v2_content #s5_main_body_outer { box-shadow: 0 0 14px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06) !important; border-radius: 4px !important; } body.desktop_v2_content #s5_main_body { box-shadow: 0 0 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important; border-radius: 4px !important; background: #ffffff !important; } /* ───────────────────────────────────────────────────────────── * §2 — V2 FOOTER CARD (sitewide on dv2=1) * JS in desktop_v2.js wraps #s5_right1 + #s5_bottom_wrap * into .v2dfp-footer-card. Styling here applies to ALL pages. * Ported from flypage_v2_desktop.php (was inline product-only). * ───────────────────────────────────────────────────────────── */ /* === LEGACY CHROME FIX: clear floats inside #s5_bottom_rewies === The reviews row (#s5_bottom_rewies) holds a floating child (#s5_bottom_row_1_mod, float:left) that isn't cleared, so the parent collapses to height:0. Then the next sibling (#s5_bottom_row_wrap_outer, the WHITE "Χρήσιμα Links / Η Εταιρεία / ..." bottom row) starts at the SAME top and paints OVER the reviews — hiding them at narrow viewports especially. Containing the float forces the bottom row to sit BELOW. Originally inline in flypage_v2_desktop.php; promoted here so it applies sitewide (any page that renders #s5_bottom_rewies). Shape5 template bug. */ body.desktop_v2_content #s5_bottom_rewies { overflow: hidden !important; } /* Νεκρώνω τα legacy footer PNG decorations */ body.desktop_v2_content #s5_bot_gradient, body.desktop_v2_content #s5_footer_middle, body.desktop_v2_content #s5_bot_shadow { background-image: none !important; background: transparent !important; box-shadow: none !important; } body.desktop_v2_content .v2dfp-footer-card { background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important; margin: 28px auto !important; padding: 26px 28px 18px !important; border-radius: 14px !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 22px 50px rgba(15, 23, 42, 0.14), 0 10px 22px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06) !important; width: 1000px !important; box-sizing: border-box !important; } body.desktop_v2_content .v2dfp-footer-card #s5_right1, body.desktop_v2_content .v2dfp-footer-card #s5_bottom_wrap, body.desktop_v2_content .v2dfp-footer-card #s5_bot_gradient, body.desktop_v2_content .v2dfp-footer-card #s5_footer_middle, body.desktop_v2_content .v2dfp-footer-card #s5_bot_shadow, body.desktop_v2_content .v2dfp-footer-card #s5_bot_l, body.desktop_v2_content .v2dfp-footer-card #s5_bot_r, body.desktop_v2_content .v2dfp-footer-card #s5_bl_corner, body.desktop_v2_content .v2dfp-footer-card #s5_br_corner, body.desktop_v2_content .v2dfp-footer-card #s5_footer_left, body.desktop_v2_content .v2dfp-footer-card #s5_footer_right, body.desktop_v2_content .v2dfp-footer-card #s5_footer_shadow, body.desktop_v2_content .v2dfp-footer-card .module_shadow_wrap, body.desktop_v2_content .v2dfp-footer-card .module_shadow, body.desktop_v2_content .v2dfp-footer-card .module { background: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; } body.desktop_v2_content .v2dfp-footer-card #s5_right1 { padding: 6px 12px !important; } body.desktop_v2_content .v2dfp-footer-card #s5_bottom_wrap { padding: 6px 12px !important; font-size: 11px !important; color: #6b7280 !important; } body.desktop_v2_content .v2dfp-footer-sep { border: none !important; margin: 8px 0 !important; background: linear-gradient(90deg, transparent 0%, #cbd5e1 50%, transparent 100%) !important; height: 1px !important; } /* Logo: λίγο μικρότερο και με δεξί gap από το text */ body.desktop_v2_content .v2dfp-footer-card #s5_right1 img, body.desktop_v2_content .v2dfp-footer-card #s5_right1 a img { margin-right: 24px !important; max-height: 60px !important; width: auto !important; vertical-align: middle !important; } body.desktop_v2_content .v2dfp-footer-card #s5_right1 { padding: 8px 4px !important; } /* Bottom row: flex space-between στο #s5_footer_right */ body.desktop_v2_content .v2dfp-footer-card #s5_bottom_wrap { padding: 6px 4px 0 !important; font-size: 11.5px !important; color: #6b7280 !important; } body.desktop_v2_content .v2dfp-footer-card #s5_footer_right { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; width: 100% !important; padding: 0 !important; } body.desktop_v2_content .v2dfp-footer-card #s5_footer_text, body.desktop_v2_content .v2dfp-footer-card #s5_bottom_pos { white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } body.desktop_v2_content .v2dfp-footer-card #s5_bottom_wrap a, body.desktop_v2_content .v2dfp-footer-card #s5_footer_text a { color: #2588a6 !important; text-decoration: none !important; font-weight: 600 !important; } body.desktop_v2_content .v2dfp-footer-card #s5_bottom_wrap a:hover, body.desktop_v2_content .v2dfp-footer-card #s5_footer_text a:hover { text-decoration: underline !important; } /* Top row: .custom_footer1 flex με gap */ body.desktop_v2_content .v2dfp-footer-card #s5_right1 { padding: 4px !important; } body.desktop_v2_content .v2dfp-footer-card .custom_footer1 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 28px !important; padding: 0 !important; width: 100% !important; height: auto !important; } body.desktop_v2_content .v2dfp-footer-card .custom_footer_logo { flex-shrink: 0 !important; } body.desktop_v2_content .v2dfp-footer-card .custom_footer_logo img, body.desktop_v2_content .v2dfp-footer-card #s5_right1 img { max-height: 64px !important; width: auto !important; display: block !important; } /* Επιλεκτικό 100% width: ΜΟΝΟ στα ΕΞΩΤΕΡΙΚΑ wrappers */ body.desktop_v2_content .v2dfp-footer-card #s5_right1, body.desktop_v2_content .v2dfp-footer-card #s5_middle_wrapper, body.desktop_v2_content .v2dfp-footer-card .module_shadow_wrap, body.desktop_v2_content .v2dfp-footer-card .module_shadow, body.desktop_v2_content .v2dfp-footer-card .custom_footer1, body.desktop_v2_content .v2dfp-footer-card #s5_bottom_wrap, body.desktop_v2_content .v2dfp-footer-card #s5_bot_gradient, body.desktop_v2_content .v2dfp-footer-card #s5_footer_middle, body.desktop_v2_content .v2dfp-footer-card #s5_footer_left, body.desktop_v2_content .v2dfp-footer-card #s5_footer_right { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } body.desktop_v2_content .v2dfp-footer-card .module_shadow > div, body.desktop_v2_content .v2dfp-footer-card .module_shadow > div > div, body.desktop_v2_content .v2dfp-footer-card .module_shadow > div > div > div, body.desktop_v2_content .v2dfp-footer-card #s5_right1 > div { width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Hide παλιό "Mobile" link στο bottom */ body.desktop_v2_content .v2dfp-footer-card #s5_footer_text a[href*="layout=mobile"], body.desktop_v2_content .v2dfp-footer-card #s5_footer_text a[href*="layoutType=mobile"] { display: none !important; } body.desktop_v2_content .v2dfp-footer-card #s5_footer_text br + br { display: none !important; } /* ============================================================= * §3 - Registration form (/eggrafi) + checkout entry (/tameio) * Ported verbatim from mobile_v2.css with selector substitution. * ============================================================= */ /* ════════════════════════════════════════════════════════════ PORT FROM MOBILE - CHECKOUT login + register entry (tameio /eggrafi shared) (mobile_v2.css lines 3767-3987) ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ CHECKOUT (login + register entry, address forms, payment) ════════════════════════════════════════════════════════════ */ body.desktop_v2_content #vmMainPage > h3 { font-size: 22px; font-weight: 800; color: #111827; margin: 4px 0 16px; letter-spacing: -0.3px; } body.desktop_v2_content h4.returning_customer, body.desktop_v2_content h4.new_customer { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; margin: 0 0 8px; font-size: 16px !important; font-weight: 700; color: #111827; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color .15s, background .15s; } body.desktop_v2_content h4.returning_customer:has(input:checked), body.desktop_v2_content h4.new_customer:has(input:checked) { border-color: var(--primary); background: #f0f9ff; } body.desktop_v2_content input.toggler { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--primary); flex-shrink: 0; } body.desktop_v2_content h4.returning_customer label, body.desktop_v2_content h4.new_customer label { flex: 1; cursor: pointer; font-size: 16px; font-weight: 700; color: #111827; margin: 0; display: block; } body.desktop_v2_content h4.new_customer label span, body.desktop_v2_content h4.returning_customer label span { color: var(--primary); text-decoration: underline; font-weight: 600; margin-left: 6px; font-size: 13px; } body.desktop_v2_content .stretcher { background: #fff; border: 1px solid #eef0f3; border-radius: 12px; padding: 16px; margin: 0 0 12px; } body.desktop_v2_content #login_stretcher form, body.desktop_v2_content #register_stretcher form { display: block; margin: 0; } body.desktop_v2_content #vmMainPage form label, body.desktop_v2_content .stretcher label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 0 0 4px; } body.desktop_v2_content #vmMainPage input.inputbox[type="text"], body.desktop_v2_content #vmMainPage input.inputbox[type="email"], body.desktop_v2_content #vmMainPage input.inputbox[type="tel"], body.desktop_v2_content #vmMainPage input.inputbox[type="password"], body.desktop_v2_content #vmMainPage input.inputbox:not([type]) { width: 100% !important; height: 44px !important; padding: 0 12px !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; font-size: 15px !important; color: #111827 !important; background: #fff !important; margin: 0 0 12px !important; box-sizing: border-box !important; } body.desktop_v2_content #vmMainPage input.inputbox:focus { border-color: var(--primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(37,136,166,.12) !important; } body.desktop_v2_content #vmMainPage select { width: 100% !important; height: 44px !important; padding: 0 12px !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; font-size: 15px !important; color: #111827 !important; background: #fff !important; margin: 0 0 12px !important; box-sizing: border-box !important; } body.desktop_v2_content #vmMainPage textarea { width: 100% !important; padding: 10px 12px !important; border: 1.5px solid #d1d5db !important; border-radius: 10px !important; font-size: 15px !important; color: #111827 !important; background: #fff !important; margin: 0 0 12px !important; box-sizing: border-box !important; min-height: 90px !important; resize: vertical; } body.desktop_v2_content #login_stretcher input.button, body.desktop_v2_content #register_stretcher input.button, body.desktop_v2_content #vmMainPage form input[type="submit"]:not(.addtocart_button):not(.notify_button) { width: 100%; height: 46px; padding: 0 18px !important; background: var(--primary) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: .4px; border: none !important; border-radius: 10px !important; cursor: pointer; box-shadow: 0 2px 6px rgba(37,136,166,.25); margin: 6px 0 4px; -webkit-appearance: none; appearance: none; } body.desktop_v2_content #vmMainPage form input[type="submit"]:not(.addtocart_button):not(.notify_button):hover { background: var(--primary-dk) !important; } /* Flypage notify_button (Εκδήλωση Ενδιαφέροντος) — outlined-white style like Γρήγορη Παραγγελία, with bell icon as background-image so it sits next to the text (input elements can't host ::before). */ body.desktop_v2_content:not(.is-browse) #vmMainPage form input.notify_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 280px !important; height: 44px !important; padding: 0 22px 0 44px !important; /* extra left padding for bell */ margin: 6px 0 4px !important; background-color: #ffffff !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: 18px center !important; background-size: 16px 16px !important; border: 1.5px solid #d1d5db !important; border-radius: 8px !important; color: #475569 !important; font-size: 14px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; box-shadow: none !important; text-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; -webkit-appearance: none !important; appearance: none !important; } body.desktop_v2_content:not(.is-browse) #vmMainPage form input.notify_button:hover { background-color: #f8fafc !important; border-color: var(--primary) !important; color: var(--primary) !important; filter: none !important; /* Tint the bell icon to primary blue on hover */ background-image: url("data:image/svg+xml;utf8,") !important; } /* Sidebar banner ("Ταχύτατη Αποστολή...") has an inline margin-top: -15px that pulls it up over the breadcrumbs row. Neutralise it. */ body.desktop_v2_content #s5_left_inner > div[style*="margin-top"], body.desktop_v2_content #s5_left_inner div[style*="margin-top: -15px"], body.desktop_v2_content #s5_left_inner div[style*="margin-top:-15px"] { margin-top: 0 !important; } /* ──────────────────────────────────────────────────────────── §22 FLYPAGE polish ──────────────────────────────────────────────────────────── */ /* (1) Attribute label + select on same row, vertically aligned. VM 1.x renders:

We flex the outer .vmCartAttributes so the two sibling divs align. */ body.desktop_v2_content #vmMainPage .vmCartAttributes { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin: 6px 0 !important; } body.desktop_v2_content #vmMainPage .vmCartAttributes > br { display: none !important; } body.desktop_v2_content #vmMainPage .vmCartAttributes > .vmAttribChildDetail { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; float: none !important; width: auto !important; } body.desktop_v2_content #vmMainPage .vmCartAttributes label { margin: 0 !important; padding: 0 !important; font-weight: 600 !important; color: #334155 !important; line-height: 1 !important; white-space: nowrap !important; } body.desktop_v2_content #vmMainPage .vmCartAttributes label::after { content: ':'; } body.desktop_v2_content #vmMainPage .vmCartAttributes select.inputboxattrib { margin: 0 !important; min-width: 140px !important; height: 36px !important; padding: 0 28px 0 12px !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; background-color: #fff !important; font-size: 14px !important; color: #1f2937 !important; vertical-align: middle !important; } /* (2) Notify modal button — same outlined style as Γρήγορη Παραγγελία */ body.desktop_v2_content #vmMainPage a.v2-notify-modal-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-width: 240px !important; height: 44px !important; padding: 0 22px !important; margin: 6px 0 4px !important; background: #fff !important; border: 1.5px solid #d1d5db !important; border-radius: 8px !important; color: #475569 !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease, color .15s ease !important; box-sizing: border-box !important; } body.desktop_v2_content #vmMainPage a.v2-notify-modal-btn:hover { background: #f8fafc !important; border-color: var(--primary) !important; color: var(--primary) !important; } body.desktop_v2_content #vmMainPage a.v2-notify-modal-btn svg { flex-shrink: 0 !important; color: #f97316 !important; } body.desktop_v2_content #vmMainPage a.v2-notify-modal-btn:hover svg { color: var(--primary) !important; } /* (3) Copy-to-clipboard button next to product code */ body.desktop_v2_content .v2-copy-code { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin-left: 8px !important; padding: 3px 8px !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; color: #475569 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important; vertical-align: middle !important; transition: background .15s ease, border-color .15s ease, color .15s ease !important; box-sizing: border-box !important; } body.desktop_v2_content .v2-copy-code:hover { background: #fff !important; border-color: var(--primary) !important; color: var(--primary) !important; } body.desktop_v2_content .v2-copy-code.v2-copied { background: #d1fae5 !important; border-color: #10b981 !important; color: #065f46 !important; } body.desktop_v2_content .v2-copy-code svg { flex-shrink: 0 !important; } body.desktop_v2_content .stretcher a { color: var(--primary) !important; font-size: 13px; text-decoration: none; display: inline-block; margin: 0 0 8px; } body.desktop_v2_content #vmMainPage > .system-message, body.desktop_v2_content > .mobile_content_top_modules + #vmMainPage > div[style*="color"][style*="background"] { background: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; border-radius: 10px !important; padding: 12px 14px !important; margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.4 !important; text-align: center; } body.desktop_v2_content #vmMainPage fieldset { border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 14px !important; margin: 0 0 14px !important; background: #fafbfc; } body.desktop_v2_content #vmMainPage legend, body.desktop_v2_content #vmMainPage legend.sectiontableheader { background: transparent !important; border: none !important; color: #111827 !important; font-size: 14px !important; font-weight: 800 !important; padding: 0 8px !important; margin: 0 !important; } body.desktop_v2_content #vmMainPage .ak_user_fields > div, body.desktop_v2_content #vmMainPage fieldset > div { margin: 0 0 10px; } body.desktop_v2_content #vmMainPage .ak_user_fields strong, body.desktop_v2_content #vmMainPage fieldset strong { font-size: 13px; font-weight: 600; color: #374151; display: block; margin: 0 0 4px; } body.desktop_v2_content #vmMainPage table.checkoutBar { display: none !important; } body.desktop_v2_content #vmMainPage form .button_holder { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 0; } body.desktop_v2_content #vmMainPage .button_holder input.button { flex: 1; } body.desktop_v2_content #vmMainPage a.button, body.desktop_v2_content #vmMainPage button.button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px !important; background: var(--primary) !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important; border: none !important; border-radius: 10px !important; text-decoration: none !important; box-sizing: border-box; margin: 4px 0; } /* ════════════════════════════════════════════════════════════ PORT FROM MOBILE - Section 15 - Registration / Checkout user-details form (mobile_v2.css lines 6017-6614) ════════════════════════════════════════════════════════════ */ /* ================================================================== Section 15 — Registration / Checkout user-details form Clean up the legacy VM register form: huge info icons, weird layout, excessive spacing. CSS-only override (no PHP/template changes). ================================================================== */ /* Hide the legacy info.png — replaced by JS with a small ⓘ tooltip icon */ body.desktop_v2_content #vmMainPage img[src*="info.png"] { display: none !important; } /* ── Modern help tooltip — brand-blue */ body.desktop_v2_content #vmMainPage .v2-help { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; font-size: 13px !important; font-weight: 900 !important; cursor: help !important; margin-left: 8px !important; position: relative !important; user-select: none !important; vertical-align: middle !important; line-height: 1 !important; text-decoration: none !important; flex-shrink: 0 !important; transition: transform .12s ease, box-shadow .15s ease; box-shadow: 0 2px 4px rgba(37,136,166,.30); font-style: normal !important; } /* NO transform on is-open — would re-anchor the position:fixed popup inside this element instead of the viewport (text would crush). */ body.desktop_v2_content #vmMainPage .v2-help:hover { box-shadow: 0 3px 8px rgba(37,136,166,.50); } body.desktop_v2_content #vmMainPage .v2-help.is-open { box-shadow: 0 3px 10px rgba(37,136,166,.55); background: linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 100%) !important; } body.desktop_v2_content #vmMainPage .v2-help .v2-help-icon { font-style: italic; font-family: Georgia, 'Times New Roman', serif; } body.desktop_v2_content #vmMainPage .v2-help-icon { pointer-events: none; line-height: 1; font-style: normal !important; } /* Popover bubble — fixed centered overlay so it never goes off-screen */ body.desktop_v2_content #vmMainPage .v2-help-pop { display: none !important; position: fixed !important; left: 16px !important; right: 16px !important; bottom: 20px !important; top: auto !important; transform: none !important; background: #111827 !important; color: #fff !important; padding: 14px 18px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; width: auto !important; max-width: calc(100vw - 32px) !important; z-index: 2500 !important; box-shadow: 0 12px 32px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.20) !important; pointer-events: none !important; text-align: left !important; white-space: normal !important; border: 1.5px solid var(--primary) !important; } body.desktop_v2_content #vmMainPage .v2-help.is-open .v2-help-pop { display: block !important; animation: v2-help-pop-in .2s ease; } @keyframes v2-help-pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Hide the old triangle pointer (since popup is now fixed at bottom) */ body.desktop_v2_content #vmMainPage .v2-help.is-open .v2-help-pop::after { display: none !important; } /* Hint above tabs — bigger, more readable */ body.desktop_v2_content #vmMainPage .v2-tab-hint { display: block !important; background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin: 8px 0 12px !important; font-size: 15px !important; color: #374151 !important; line-height: 1.5 !important; text-align: center !important; font-style: normal !important; white-space: normal !important; } body.desktop_v2_content #vmMainPage .v2-tab-hint * { display: inline !important; } body.desktop_v2_content #vmMainPage .v2-tab-hint strong { color: var(--primary) !important; font-weight: 800 !important; font-size: 15px !important; } body.desktop_v2_content #vmMainPage .v2-tab-hint .v2-tab-hint-icon { margin-right: 6px !important; font-size: 18px !important; vertical-align: -2px; } /* ── Tabs for "guest vs new account" choice ───────────────────── */ body.desktop_v2_content #vmMainPage .v2-reg-tabs { display: flex !important; gap: 4px !important; background: #f3f4f6 !important; border-radius: 12px !important; padding: 4px !important; margin: 0 0 14px !important; border: 1px solid #e5e7eb !important; width: 100%; box-sizing: border-box; } body.desktop_v2_content #vmMainPage .v2-reg-tab { flex: 1 !important; padding: 10px 8px !important; border: none !important; background: transparent !important; color: #6b7280 !important; font-size: 13px !important; font-weight: 700 !important; cursor: pointer !important; border-radius: 8px !important; transition: background .2s ease, color .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; text-align: center; line-height: 1.2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-height: 38px; } body.desktop_v2_content #vmMainPage .v2-reg-tab.is-active { background: #fff !important; color: var(--primary) !important; box-shadow: 0 2px 6px rgba(16,24,40,.10) !important; } body.desktop_v2_content #vmMainPage .v2-reg-tab .v2-reg-tab-icon { font-size: 15px !important; flex-shrink: 0; } /* Hide the legacy radio table once we've replaced it with tabs */ body.desktop_v2_content #vmMainPage table.ak_register_select.v2-tabbed-hidden { display: none !important; } /* Hidden register-only fields when tab "Επισκέπτης" active */ body.desktop_v2_content #vmMainPage form.v2-user-form .v2-reg-hidden, body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_div"].v2-reg-hidden, body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"].v2-reg-hidden { display: none !important; } /* Hide legacy h4 headers replaced by checkout tabs */ body.desktop_v2_content #vmMainPage h4.v2-h4-hidden { display: none !important; } /* Legacy .wait div overlays the form with visibility:hidden until 600ms timer removes it. For checkout (different page), that timer doesn't fire — so the form stays invisible. Force visibility visible. */ body.desktop_v2_content #vmMainPage .stretcher form, body.desktop_v2_content #vmMainPage .stretcher > * { visibility: visible !important; } body.desktop_v2_content #vmMainPage .wait { display: none !important; } /* Form container — clean white card with deeper shadow. */ body.desktop_v2_content #vmMainPage > form { background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 16px 18px !important; margin: 0 0 14px !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 6px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04) !important; } body.desktop_v2_content #vmMainPage form.v2-user-form .ak_user_fields { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Tooltip placement: next to the textbox on the RIGHT (was: next to label). The _input div becomes flex row so [input/select/textarea] | [.v2-help icon]. */ body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"] { display: flex !important; align-items: center !important; gap: 10px !important; } body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"] > input, body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"] > select, body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"] > textarea { flex: 1 1 auto !important; min-width: 0 !important; } body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"] > .v2-help { flex: 0 0 auto !important; margin-left: 0 !important; align-self: center !important; } /* Hide any duplicate .v2-help that might still be in the label div */ body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_div"] > .v2-help { display: none !important; } /* Terms-of-service row — checkbox left + label right, ευθυγραμμισμένα */ body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_div { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; margin: 8px 0 !important; padding: 8px 0 !important; } body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_input { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; align-items: center !important; padding: 0 !important; margin: 0 !important; order: -1 !important; } body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_input > br { display: none !important; } body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_input input[type="checkbox"] { flex: 0 0 auto !important; width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #f97316 !important; cursor: pointer; } body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_div > label[for="agreed_field"] { flex: 1 1 auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; font-size: 13.5px !important; color: #1f2937 !important; cursor: pointer; } /* Required-checkbox empty state — wrap renders the red ring (native checkbox doesn't show outline/border reliably across browsers). */ body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_input.v2-field-error-wrap, body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_div:has(input.v2-field-error) #agreed_input { background: #fef2f2 !important; border: 2px solid #dc2626 !important; border-radius: 6px !important; padding: 4px !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important; animation: v2-checkbox-shake .35s ease-in-out; } body.desktop_v2_content #vmMainPage form.v2-user-form input[type="checkbox"].v2-field-error { accent-color: #dc2626 !important; } body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_div.v2-field-error-wrap > label[for="agreed_field"], body.desktop_v2_content #vmMainPage form.v2-user-form #agreed_div:has(input.v2-field-error) > label[for="agreed_field"] { color: #dc2626 !important; font-weight: 600 !important; } @keyframes v2-checkbox-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } /* Fieldsets — section dividers */ body.desktop_v2_content #vmMainPage form.v2-user-form fieldset { border: none !important; padding: 0 !important; margin: 0 0 14px !important; background: transparent !important; } body.desktop_v2_content #vmMainPage form.v2-user-form fieldset:last-of-type { margin-bottom: 0 !important; } body.desktop_v2_content #vmMainPage form.v2-user-form fieldset > legend, body.desktop_v2_content #vmMainPage form.v2-user-form fieldset > h2, body.desktop_v2_content #vmMainPage form.v2-user-form fieldset > h3 { font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1.2px !important; color: var(--primary) !important; padding: 0 0 8px !important; margin: 0 0 10px !important; border: none !important; border-bottom: 1px solid #eef0f3 !important; background: none !important; width: 100% !important; line-height: 1.3 !important; background-image: linear-gradient(var(--primary), var(--primary)) !important; background-repeat: no-repeat !important; background-size: 32px 2px !important; background-position: 0 100% !important; } /* Field wrappers — tight spacing */ body.desktop_v2_content #vmMainPage form.v2-user-form .formField { display: block !important; margin: 0 0 10px !important; padding: 0 !important; background: transparent !important; } /* Label div (e.g., #email_div) — show label + help icon inline */ body.desktop_v2_content #vmMainPage form.v2-user-form .formLabel, body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_div"] { display: flex !important; align-items: center !important; flex-wrap: wrap !important; margin: 0 0 4px !important; padding: 0 !important; } body.desktop_v2_content #vmMainPage form.v2-user-form .formLabel > label, body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_div"] > label { margin: 0 !important; } /* Universal label rule — make sure ALL legacy labels (username, password, first_name, etc.) render full-width on mobile, regardless of parent. */ body.desktop_v2_content #vmMainPage form.v2-user-form label[for] { display: block !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; font-size: 12.5px !important; font-weight: 600 !important; color: #4b5563 !important; text-align: left !important; margin: 0 0 4px !important; padding: 0 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; } body.desktop_v2_content #vmMainPage form.v2-user-form .formField > label, body.desktop_v2_content #vmMainPage form.v2-user-form .formField > b { display: block !important; width: 100% !important; } /* Field WRAPPER divs (legacy uses #email_div, #username_div, etc.) IMPORTANT: do NOT force display here — legacy JS shows/hides #password_div, #password2_div, #username_div based on radio state. */ body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_div"], body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_input"] { width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; float: none !important; } /* Required asterisk supers / strong / .required — hide all variants (replaced by red label::after for required labels) */ body.desktop_v2_content #vmMainPage form.v2-user-form sup, body.desktop_v2_content #vmMainPage form.v2-user-form strong.required, body.desktop_v2_content #vmMainPage form.v2-user-form .star, body.desktop_v2_content #vmMainPage form.v2-user-form .required, body.desktop_v2_content #vmMainPage form.v2-user-form .formField > sup, body.desktop_v2_content #vmMainPage form.v2-user-form .formField sup, body.desktop_v2_content #vmMainPage form.v2-user-form .formLabel sup, body.desktop_v2_content #vmMainPage form.v2-user-form .formLabel strong.required, body.desktop_v2_content #vmMainPage form.v2-user-form .formLabel .required { display: none !important; } /* Big bold red asterisk after required labels */ body.desktop_v2_content #vmMainPage form.v2-user-form label.v2-required::after { content: "*"; color: #dc2626; font-weight: 900; font-size: 22px; margin-left: 6px; line-height: 0; vertical-align: -3px; display: inline-block; } /* Move help "i" badge into label-div via JS — style as inline pill */ body.desktop_v2_content #vmMainPage form.v2-user-form div[id$="_div"] .v2-help { margin-left: 6px !important; vertical-align: middle !important; } /* If still inside formField (_input div), keep small at top-right */ body.desktop_v2_content #vmMainPage form.v2-user-form .formField > .v2-help { align-self: flex-end !important; margin-top: 2px !important; margin-left: 0 !important; } /* Inputs — full width, modern. EXCLUDES checkbox/radio. */ body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox[type="text"], body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox[type="email"], body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox[type="tel"], body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox[type="password"], body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox:not([type]), body.desktop_v2_content #vmMainPage form.v2-user-form select.inputbox, body.desktop_v2_content #vmMainPage form.v2-user-form textarea.inputbox, body.desktop_v2_content #vmMainPage form.v2-user-form .formField input:not([type="checkbox"]):not([type="radio"]), body.desktop_v2_content #vmMainPage form.v2-user-form .formField select, body.desktop_v2_content #vmMainPage form.v2-user-form .formField textarea { width: 100% !important; height: 42px !important; padding: 0 12px !important; border: 1.5px solid #d1d5db !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; background: #fff !important; color: #111827 !important; box-sizing: border-box !important; margin: 0 !important; -webkit-appearance: none !important; appearance: none !important; transition: border-color .15s ease, box-shadow .15s ease; } /* Checkbox + radio — KEEP native appearance, just brand-color accent */ body.desktop_v2_content #vmMainPage form.v2-user-form input[type="checkbox"], body.desktop_v2_content #vmMainPage form.v2-user-form input[type="radio"], body.desktop_v2_content #vmMainPage form.v2-user-form .formField input[type="checkbox"], body.desktop_v2_content #vmMainPage form.v2-user-form .formField input[type="radio"] { width: 22px !important; height: 22px !important; padding: 0 !important; margin: 2px 8px 0 0 !important; border: 1.5px solid #d1d5db !important; border-radius: 4px !important; background: #fff !important; accent-color: #f97316 !important; -webkit-appearance: checkbox !important; appearance: checkbox !important; cursor: pointer !important; flex-shrink: 0 !important; box-sizing: border-box !important; vertical-align: middle !important; } body.desktop_v2_content #vmMainPage form.v2-user-form input[type="radio"], body.desktop_v2_content #vmMainPage form.v2-user-form .formField input[type="radio"] { border-radius: 50% !important; -webkit-appearance: radio !important; appearance: radio !important; } body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox:focus, body.desktop_v2_content #vmMainPage form.v2-user-form select.inputbox:focus, body.desktop_v2_content #vmMainPage form.v2-user-form textarea.inputbox:focus, body.desktop_v2_content #vmMainPage form.v2-user-form .formField input:focus, body.desktop_v2_content #vmMainPage form.v2-user-form .formField select:focus, body.desktop_v2_content #vmMainPage form.v2-user-form .formField textarea:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important; } /* Textarea (e.g., notes) — taller */ body.desktop_v2_content #vmMainPage form.v2-user-form textarea.inputbox, body.desktop_v2_content #vmMainPage form.v2-user-form .formField textarea { height: auto !important; min-height: 80px !important; padding: 10px 12px !important; resize: vertical; line-height: 1.4 !important; } /* Custom dropdown chevron for selects */ body.desktop_v2_content #vmMainPage form.v2-user-form select.inputbox, body.desktop_v2_content #vmMainPage form.v2-user-form .formField select { padding-right: 36px !important; background-image: url('data:image/svg+xml;utf8,') !important; background-repeat: no-repeat !important; background-position: right 12px center !important; cursor: pointer; } /* Radio choice (guest vs register account) — pretty card list */ body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select, body.desktop_v2_content #vmMainPage table.ak_register_select { width: 100% !important; border: none !important; background: transparent !important; margin: 0 0 14px !important; border-collapse: separate !important; border-spacing: 0 6px !important; } body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select tr, body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select tbody { background: transparent !important; border: none !important; } body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select td { padding: 10px 12px !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; transition: border-color .15s ease, background .15s ease; } body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select td:has(input[type="radio"]:checked), body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select td:has(input:checked) { border-color: var(--primary) !important; background: var(--accent-bg) !important; } body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select input[type="radio"] { width: 18px !important; height: 18px !important; margin: 0 8px 0 0 !important; accent-color: var(--primary); vertical-align: middle; } body.desktop_v2_content #vmMainPage form.v2-user-form .ak_register_select label { font-size: 13.5px !important; font-weight: 600 !important; color: #1f2937 !important; cursor: pointer; vertical-align: middle; } /* Section headings (.Πληροφορίες Πελάτη, Στοιχεία Χρέωσης, etc.) */ body.desktop_v2_content #vmMainPage form.v2-user-form fieldset > legend { font-size: 12px !important; } /* h3-style section headings inside the form */ body.desktop_v2_content #vmMainPage form.v2-user-form > h3, body.desktop_v2_content #vmMainPage form.v2-user-form > h2, body.desktop_v2_content #vmMainPage form.v2-user-form > div > h3, body.desktop_v2_content #vmMainPage form.v2-user-form > div > h2 { font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--primary) !important; padding: 0 0 8px !important; margin: 6px 0 10px !important; border-bottom: 1px solid #eef0f3 !important; line-height: 1.3 !important; } /* The "(* = Απαιτούμενο)" hint text — replace styling so its asterisk matches */ body.desktop_v2_content #vmMainPage form.v2-user-form > p:first-of-type, body.desktop_v2_content #vmMainPage form.v2-user-form > div > p:first-of-type, body.desktop_v2_content #vmMainPage form.v2-user-form .ak_user_fields > p:first-of-type { font-size: 12px !important; color: #6b7280 !important; text-align: right !important; margin: 0 0 8px !important; font-style: italic !important; } /* The wrapping element of "(* = Απαιτούμενο)" — make it a normal note */ body.desktop_v2_content #vmMainPage form.v2-user-form .v2-required-line { display: block !important; font-size: 12px !important; color: #6b7280 !important; font-weight: 500 !important; text-align: right !important; margin: 0 0 8px !important; font-style: normal !important; } /* Make the * inside the legend match required-label asterisk */ body.desktop_v2_content #vmMainPage form.v2-user-form .v2-required-legend { color: #dc2626 !important; font-weight: 900 !important; font-size: 18px !important; line-height: 0; vertical-align: -2px; margin: 0 2px; font-style: normal; display: inline !important; } /* Submit button — orange CTA */ body.desktop_v2_content #vmMainPage form.v2-user-form input[type="submit"], body.desktop_v2_content #vmMainPage form.v2-user-form button[type="submit"] { width: 100% !important; height: 48px !important; border: none !important; border-radius: 10px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(249,115,22,.40) !important; margin: 12px 0 0 !important; -webkit-appearance: none !important; appearance: none !important; transition: filter .15s ease, transform .1s ease; } body.desktop_v2_content #vmMainPage form.v2-user-form input[type="submit"]:hover { filter: brightness(1.05); } body.desktop_v2_content #vmMainPage form.v2-user-form input[type="submit"]:active { transform: scale(0.98); } /* ── is-account address form actions (ΑΠΟΘΗΚΕΥΣΗ / ΑΚΥΡΩΣΗ / ΠΙΣΩ) ── Use VALUE-based selectors (not type=submit/button) because all 3 are actually input[type="submit"] in VM 1.x — distinguished only by value. Apply with high specificity so they beat the global `form input[type="submit"]` rule (which makes everything teal solid + width:100%). Match BOTH `form input[...]` (original location) AND `.v2-account-actions input[...]` (after JS moves them into the wrap). */ body.desktop_v2_content.is-account #vmMainPage form input[value*="ΑΠΟΘΗΚ" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="Αποθήκ" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="ΕΓΓΡΑΦ" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="ΥΠΟΒΟΛΗ" i], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="ΑΠΟΘΗΚ" i], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="Αποθήκ" i] { display: inline-block !important; width: auto !important; min-width: 200px !important; max-width: 280px !important; height: 48px !important; padding: 0 24px !important; margin: 6px 4px !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; border: none !important; border-radius: 10px !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(37,136,166,.30) !important; vertical-align: middle !important; -webkit-appearance: none !important; appearance: none !important; transition: filter .15s, transform .1s !important; } /* "ΑΚΥΡΩΣΗ" — outlined secondary (white bg, primary border + text) */ body.desktop_v2_content.is-account #vmMainPage form input[value*="ΑΚΥΡΩ" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="Ακύρω" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="ακύρω" i], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="ΑΚΥΡΩ" i], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="Ακύρω" i] { display: inline-block !important; width: auto !important; min-width: 160px !important; max-width: 240px !important; height: 48px !important; padding: 0 22px !important; margin: 6px 4px !important; background: #fff !important; background-image: none !important; border: 2px solid var(--primary) !important; border-radius: 10px !important; color: var(--primary) !important; font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .3px !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(37,136,166,.12) !important; vertical-align: middle !important; -webkit-appearance: none !important; appearance: none !important; transition: background .15s, color .15s, transform .1s !important; } body.desktop_v2_content.is-account #vmMainPage form input[value*="ΑΚΥΡΩ" i]:hover, body.desktop_v2_content.is-account #vmMainPage form input[value*="Ακύρω" i]:hover, body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="ΑΚΥΡΩ" i]:hover, body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="Ακύρω" i]:hover { background: var(--primary) !important; color: #fff !important; } /* "ΠΙΣΩ" — compact outlined gray (smaller than Cancel) */ body.desktop_v2_content.is-account #vmMainPage form input[value="ΠΙΣΩ" i], body.desktop_v2_content.is-account #vmMainPage form input[value="Πίσω" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="ΠΙΣΩ" i], body.desktop_v2_content.is-account #vmMainPage form input[value*="Πίσω" i], body.desktop_v2_content.is-account #vmMainPage form a[onclick*="history"], body.desktop_v2_content.is-account #vmMainPage form a[href*="javascript:history"], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="ΠΙΣΩ" i], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="Πίσω" i], body.desktop_v2_content.is-account #vmMainPage .v2-account-actions a[onclick*="history"] { display: inline-block !important; width: auto !important; min-width: 100px !important; height: 38px !important; padding: 0 16px !important; line-height: 34px !important; margin: 6px 4px !important; font-size: 12px !important; font-weight: 700 !important; background: transparent !important; background-image: none !important; border: 1.5px solid #94a3b8 !important; color: #475569 !important; border-radius: 8px !important; text-decoration: none !important; box-shadow: none !important; cursor: pointer !important; text-transform: uppercase !important; vertical-align: middle !important; -webkit-appearance: none !important; appearance: none !important; letter-spacing: 0 !important; } body.desktop_v2_content.is-account #vmMainPage form input[value*="ΠΙΣΩ" i]:hover, body.desktop_v2_content.is-account #vmMainPage form input[value*="Πίσω" i]:hover, body.desktop_v2_content.is-account #vmMainPage form a[onclick*="history"]:hover, body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="ΠΙΣΩ" i]:hover, body.desktop_v2_content.is-account #vmMainPage .v2-account-actions input[value*="Πίσω" i]:hover, body.desktop_v2_content.is-account #vmMainPage .v2-account-actions a[onclick*="history"]:hover { background: #f1f5f9 !important; color: #1e293b !important; border-color: #475569 !important; } /* Force buttons row alignment: kill
between buttons + flex the parent element that contains all 3 (Save+Cancel+Back). */ body.desktop_v2_content.is-account #vmMainPage form *:has(> input[value*="ΑΠΟΘΗΚ" i]):has(> input[value*="ΑΚΥΡΩ" i]), body.desktop_v2_content.is-account #vmMainPage form *:has(> input[value*="ΑΠΟΘΗΚ" i]) + br, body.desktop_v2_content.is-account #vmMainPage form .v2-account-actions { text-align: center !important; } body.desktop_v2_content.is-account #vmMainPage form *:has(> input[value*="ΑΠΟΘΗΚ" i]):has(> input[value*="ΑΚΥΡΩ" i]) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 12px auto 6px !important; } /* Suppress
elements inside the action row so buttons don't wrap */ body.desktop_v2_content.is-account #vmMainPage form *:has(> input[value*="ΑΠΟΘΗΚ" i]):has(> input[value*="ΑΚΥΡΩ" i]) > br, body.desktop_v2_content.is-account #vmMainPage form *:has(> input[value*="ΑΠΟΘΗΚ" i]):has(> input[value*="ΠΙΣΩ" i]) > br { display: none !important; } body.desktop_v2_content.is-account #vmMainPage form .v2-account-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 12px auto 6px !important; padding: 0 !important; } /* Terms checkbox row */ body.desktop_v2_content #vmMainPage form.v2-user-form input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 2px 8px 0 0 !important; accent-color: #f97316; vertical-align: top; flex-shrink: 0; } /* reCAPTCHA — center it */ body.desktop_v2_content #vmMainPage form.v2-user-form .g-recaptcha, body.desktop_v2_content #vmMainPage form.v2-user-form div[class*="recaptcha"] { margin: 12px auto !important; display: flex !important; justify-content: center !important; transform: scale(0.95); transform-origin: center top; } /* Hide stray
spacers and empty divs */ body.desktop_v2_content #vmMainPage form.v2-user-form > br, body.desktop_v2_content #vmMainPage form.v2-user-form fieldset > br, body.desktop_v2_content #vmMainPage form.v2-user-form .formField > br { display: none !important; } /* ── Red error state for empty required fields (client-side validation) High specificity selectors to beat the .inputbox[type="text"] rules */ body.desktop_v2_content #vmMainPage form.v2-user-form input.inputbox.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form select.inputbox.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form textarea.inputbox.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form input.v2-field-error[type], body.desktop_v2_content #vmMainPage form.v2-user-form select.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form textarea.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form .formField input.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form .formField select.v2-field-error, body.desktop_v2_content #vmMainPage form.v2-user-form .formField textarea.v2-field-error { border-color: #dc2626 !important; background: #fef2f2 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important; animation: v2-field-shake .3s ease-in-out; } @keyframes v2-field-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } body.desktop_v2_content #vmMainPage form.v2-user-form .v2-field-error-wrap label { color: #dc2626 !important; } /* Toast notification — bottom center */ .v2-form-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(100px); background: #dc2626; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.4; z-index: 3000; box-shadow: 0 8px 24px rgba(220,38,38,.40); max-width: 92vw; text-align: center; opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; } .v2-form-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .v2-form-toast strong { color: #fff; text-decoration: underline; } /* ════════════════════════════════════════════════════════════ §5 — CHECKOUT step pages (progress bar + shipping + payment + review) Simpler selectors (no :not(:has()) chains — those broke CSS parsing). ════════════════════════════════════════════════════════════ */ /* ── 4-step progress bar ──────────────────────────────────── */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress { display: block !important; width: 100% !important; border: none !important; background: transparent !important; margin: 0 0 10px !important; padding: 2px 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress tbody { display: block !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress tr { display: flex !important; width: 100% !important; counter-reset: chkstep; background: transparent !important; border: none !important; padding: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; flex: 1 1 0 !important; padding: 6px 4px !important; border: none !important; background: transparent !important; background-image: none !important; font-size: 12px !important; line-height: 1.3 !important; color: #6b7280 !important; text-align: center !important; gap: 8px !important; position: relative !important; counter-increment: chkstep !important; height: auto !important; width: auto !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td::before { content: counter(chkstep); width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 2; position: relative; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td:not(:last-child)::after { content: ''; position: absolute; top: 22px; left: calc(50% + 16px); right: calc(-50% + 16px); height: 2px; background: #e5e7eb; z-index: 1; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td:has(a)::before, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td.v2-step-current::before { background: var(--primary) !important; color: #fff !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td:has(a)::after, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td.v2-step-current::after { background: var(--primary) !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td a, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-progress td.v2-step-current { color: var(--primary) !important; text-decoration: none !important; font-size: 12px !important; line-height: 1.3 !important; padding: 0 !important; background: none !important; border: none !important; height: auto !important; } /* ── Shipping + Payment method radio cards ─────────────────── */ body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]), body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) { display: block !important; width: calc(100% - 24px) !important; max-width: 100% !important; margin: 0 auto 4px !important; border: none !important; background: transparent !important; border-collapse: separate !important; border-spacing: 0 6px !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tbody, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tbody { display: block !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr.sectiontableheader, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr.sectiontableheader, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) thead, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) thead { display: none !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr { display: grid !important; grid-template-columns: 30px 1fr auto !important; grid-template-areas: "radio name price" "radio desc desc" !important; gap: 4px 12px !important; padding: 14px 16px !important; margin: 0 0 8px !important; border: 1.5px solid #e5e7eb !important; border-radius: 12px !important; background: #fff !important; align-items: center !important; transition: border-color .15s, background .15s !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr td, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr td { border: none !important; background: transparent !important; padding: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(1), body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(1) { grid-area: radio !important; align-self: center !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(2), body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(2) { grid-area: name !important; font-weight: 700 !important; color: #111827 !important; font-size: 15px !important; line-height: 1.35 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:nth-child(3), body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr td:nth-child(3) { grid-area: desc !important; font-size: 12.5px !important; color: #6b7280 !important; line-height: 1.4 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr td:last-child, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr td:last-child { grid-area: price !important; font-size: 16px !important; font-weight: 800 !important; color: var(--primary) !important; text-align: right !important; align-self: start !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) tr:has(input:checked), body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) tr:has(input:checked) { border-color: var(--primary) !important; background: #f0f9ff !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) input[type="radio"], body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) input[type="radio"] { width: 20px !important; height: 20px !important; accent-color: var(--primary); margin: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="shipping_rate_id"]) a, body.desktop_v2_content.is-checkout #vmMainPage table:has(input[name="payment_method_id"]) a { color: var(--primary) !important; text-decoration: underline !important; pointer-events: auto !important; cursor: pointer !important; } /* ── pmeth divs (payment method cards via div, not table) ──── */ body.desktop_v2_content.is-checkout #vmMainPage div.pmeth { display: grid !important; grid-template-columns: 30px 1fr !important; grid-template-areas: "radio name" "radio desc" !important; gap: 2px 12px !important; padding: 8px 14px !important; margin: 0 0 5px !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; align-items: start !important; text-align: left !important; } body.desktop_v2_content.is-checkout #vmMainPage div.pmeth:has(input:checked) { border-color: var(--primary) !important; background: #f0f9ff !important; } body.desktop_v2_content.is-checkout #vmMainPage div.pmeth input[type="radio"] { grid-area: radio !important; width: 20px !important; height: 20px !important; accent-color: var(--primary); margin: 4px 0 0 !important; align-self: start !important; } body.desktop_v2_content.is-checkout #vmMainPage div.pmeth label { grid-area: name !important; font-weight: 700 !important; color: #111827 !important; font-size: 14px !important; margin: 0 !important; cursor: pointer; text-align: left !important; } body.desktop_v2_content.is-checkout #vmMainPage div.pmeth label a { color: #111827 !important; text-decoration: none !important; text-align: left !important; } body.desktop_v2_content.is-checkout #vmMainPage div.pmeth > .paym, body.desktop_v2_content.is-checkout #vmMainPage div.pmeth > div[class*="desc"] { grid-area: desc !important; font-size: 12.5px !important; color: #6b7280 !important; line-height: 1.35 !important; margin: 0 !important; text-align: left !important; } /* "Τρόπος Πληρωμής" fieldset legend — primary blue header strip matching the ΠΛΗΡΟΦΟΡΙΕΣ ΧΡΕΩΣΗΣ / ΑΠΟΣΤΟΛΗΣ headers at step 1. */ body.desktop_v2_content.is-checkout #vmMainPage fieldset:has(div.pmeth) > legend, body.desktop_v2_content.is-checkout #vmMainPage fieldset:has(div.pmeth) > strong:first-child { display: block !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; text-align: left !important; padding: 12px 18px !important; margin: 0 0 12px !important; border-radius: 12px 12px 0 0 !important; border: none !important; line-height: 1.3 !important; width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important; } /* Remove fieldset border so it doesn't double-up with the legend strip */ body.desktop_v2_content.is-checkout #vmMainPage fieldset:has(div.pmeth) { border: none !important; padding: 0 !important; margin: 0 0 14px !important; background: transparent !important; } /* Override inner in legend that legacy CSS makes blue+tall = invisible */ body.desktop_v2_content.is-checkout #vmMainPage fieldset:has(div.pmeth) > legend > strong, body.desktop_v2_content.is-checkout #vmMainPage fieldset:has(div.pmeth) > legend strong { color: #fff !important; background: transparent !important; background-image: none !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; font-weight: inherit !important; text-transform: inherit !important; line-height: inherit !important; display: inline !important; border: none !important; height: auto !important; } /* Coupon table — narrower than cart card so it's clearly contained */ body.desktop_v2_content.is-checkout #vmMainPage table:has(input#coupon_code) { margin: 0 auto 6px !important; width: 70% !important; max-width: 460px !important; box-sizing: border-box !important; } /* Kill stray
and .clear divs between progress bar and cart that add vertical gap */ body.desktop_v2_content.is-checkout #vmMainPage > br, body.desktop_v2_content.is-checkout #vmMainPage > div.clear { display: none !important; height: 0 !important; line-height: 0 !important; } /* Kill the chrome's top padding/margin that adds ~45px gap above "Ταμείο" title */ body.desktop_v2_content.is-checkout #s5_main_body4 { padding-top: 4px !important; } body.desktop_v2_content.is-checkout #s5_middle_wrapper { margin-top: 4px !important; } /* Kill checkout form padding so coupon (inside form) and cart-table (outside form) render at the same width = full #vmMainPage width. Also align fieldset to match. */ body.desktop_v2_content.is-checkout #vmMainPage form#checkout_adminForm, body.desktop_v2_content.is-checkout #vmMainPage form[action*="checkout"] { padding: 0 !important; margin: 0 0 8px !important; } /* ── Title h3 ("Ταμείο") ───────────────────────────────────── */ body.desktop_v2_content.is-checkout #vmMainPage h3, body.desktop_v2_content.is-checkout #vmMainPage > h3 { font-size: 22px !important; margin: 0 0 6px !important; padding: 0 !important; line-height: 1.2 !important; font-weight: 800 !important; color: #111827 !important; margin: 4px 0 14px !important; } /* ── "ΠΑΡΑΚΑΛΩ ΕΠΙΛΕΞΤΕ ..." prompts ────────────────────────── */ body.desktop_v2_content.is-checkout #vmMainPage h3:not(:first-of-type), body.desktop_v2_content.is-checkout #vmMainPage div[align="center"] strong { font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .4px !important; color: var(--primary) !important; margin: 14px 0 8px !important; padding: 0 0 6px !important; border-bottom: 1px solid #eef0f3 !important; } /* ── Step 4 review table — read-only line items as cards ──── */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table thead, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tbody, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table td, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table th { display: block !important; width: 100% !important; max-width: 100% !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table { margin: 8px 0 16px !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table thead, body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.sectiontableheader { display: none !important; } /* Product rows — same look & feel as v2-cart-row in §4 (cart card-stack): thumbnail (96px) on left + content (name + sku + qty) middle + subtotal right. JS prepends a .v2-review-thumb-cell to each product row, so the row now has 6 cells: [thumb][name][sku][price][qty][subtotal] */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row { display: grid !important; grid-template-columns: 96px minmax(0, 1fr) auto auto !important; grid-template-areas: "thumb name name subtotal" "thumb sku qty qty" !important; column-gap: 16px !important; row-gap: 6px !important; background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; padding: 14px !important; margin: 0 0 10px !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important; align-items: center !important; /* Hard constraints to prevent any cell from escaping the row */ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td { display: block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; background: transparent !important; border: none !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Thumbnail cell (prepended via JS) */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table .v2-review-thumb-cell { grid-area: thumb !important; width: 96px !important; align-self: start !important; } body.desktop_v2_content.is-checkout #vmMainPage img.v2-review-thumb, body.desktop_v2_content.is-checkout #vmMainPage div.v2-review-thumb { width: 96px !important; height: 96px !important; object-fit: contain !important; border-radius: 8px !important; border: 1px solid #eef0f3 !important; background: #fff !important; padding: 4px !important; box-sizing: border-box !important; transition: transform .15s ease, box-shadow .15s ease; } body.desktop_v2_content.is-checkout #vmMainPage div.v2-review-thumb-empty { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 36px !important; background: #f9fafb !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table a:hover img.v2-review-thumb { transform: scale(1.04); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10); } /* Now that JS prepends a thumb td, the original cells shift by +1. Original col indexes (post-prepend): 1=thumb, 2=name, 3=sku, 4=price, 5=qty, 6=subtotal */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(2) { grid-area: name !important; align-self: end !important; font-weight: 700 !important; color: #111827 !important; font-size: 14px !important; line-height: 1.35 !important; word-wrap: break-word; overflow-wrap: break-word; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(2) a { color: #111827 !important; text-decoration: none !important; font-weight: 700 !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(2) a:hover { color: var(--primary) !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(3) { grid-area: sku !important; align-self: start !important; font-family: ui-monospace, "SF Mono", Consolas, monospace !important; font-size: 12px !important; color: #6b7280 !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(3)::before { content: 'ΚΩΔ: '; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #9ca3af; font-weight: 500; margin-right: 2px; } /* Hide the standalone price column — we show subtotal as primary value */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(4) { display: none !important; } /* Qty cell — bottom right (below subtotal price), with Ποσότητα label */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(5) { grid-area: qty !important; align-self: start !important; text-align: right !important; font-size: 14px !important; font-weight: 700 !important; color: #1f2937 !important; padding: 0 !important; border: none !important; margin: 0 !important; white-space: nowrap !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(5)::before { content: 'Ποσότητα: '; color: #9ca3af; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; } /* Subtotal — big bold accent */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.v2-review-row td:nth-child(6) { grid-area: subtotal !important; align-self: start !important; font-size: 18px !important; font-weight: 800 !important; color: var(--primary) !important; text-align: right !important; white-space: nowrap !important; padding-left: 12px !important; } /* "Μερικό:" label removed by user request (review card) */ /* Summary rows (Μερικό Σύνολο, Έξοδα, Σύνολο) — flex 2-col */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.sectiontableentry1:not(.v2-review-row) { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 8px 14px !important; background: #fafbfc !important; border-bottom: 1px solid #f1f5f9 !important; font-size: 13px !important; color: #4b5563 !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.sectiontableentry1:not(.v2-review-row) td { width: auto !important; flex: 0 0 auto !important; background: transparent !important; color: inherit !important; font-size: inherit !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.sectiontableentry1:not(.v2-review-row) td:last-child { color: #1f2937 !important; font-weight: 700 !important; font-size: 14px !important; } /* Highlight the FINAL total row (which has Σύνολο label, not Μερικό) */ body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.sectiontableentry1:not(.v2-review-row):has(strong) { background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important; border-top: 2px solid var(--primary) !important; padding: 14px !important; font-size: 16px !important; color: #111827 !important; } body.desktop_v2_content.is-checkout #vmMainPage table.v2-checkout-review-table tr.sectiontableentry1:not(.v2-review-row):has(strong) strong { color: var(--primary) !important; font-weight: 900 !important; font-size: 22px !important; } /* ── Billing/Shipping info CARDS (table with single TH in header) ───── E.g. "ΠΛΗΡΟΦΟΡΙΕΣ ΧΡΕΩΣΗΣ" — primary header strip + key:value rows. */ body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) { display: block !important; width: 100% !important; max-width: 100% !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; margin: 0 0 16px !important; background: #fff !important; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important; box-sizing: border-box !important; border-collapse: separate !important; border-spacing: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tbody { display: block !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr.sectiontableheader { display: block !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; padding: 0 !important; border: none !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr.sectiontableheader > th { display: block !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: .5px !important; padding: 14px 18px !important; background: transparent !important; border: none !important; text-align: left !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr:not(.sectiontableheader) { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 2px 12px !important; padding: 6px 18px !important; border: none !important; border-bottom: 1px solid #f3f4f6 !important; background: transparent !important; line-height: 1.4 !important; min-height: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr:last-child { border-bottom: none !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr:not(.sectiontableheader) > td { display: inline !important; width: auto !important; padding: 0 !important; background: transparent !important; border: none !important; font-size: 13.5px !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr:not(.sectiontableheader) > td:first-child { flex: 0 0 auto !important; min-width: 130px !important; color: #6b7280 !important; font-size: 13px !important; font-weight: 500 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr:not(.sectiontableheader) > td:nth-child(2), body.desktop_v2_content.is-checkout #vmMainPage table:has(tr.sectiontableheader > th:only-of-type) tr:not(.sectiontableheader) > td:not(:first-child) { flex: 1 1 auto !important; color: #111827 !important; font-weight: 600 !important; word-break: break-word !important; } /* "(Ενημέρωση διεύθυνσης)" link — plain inline blue link (mobile-style) */ body.desktop_v2_content.is-checkout #vmMainPage a[href*="account_shipping_address_form"], body.desktop_v2_content.is-checkout #vmMainPage a[href*="account.shipping_address"], body.desktop_v2_content.is-checkout #vmMainPage a[href*="user.billing_form"], body.desktop_v2_content.is-checkout #vmMainPage a[href*="account_form"] { display: inline !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; color: var(--primary) !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 0 !important; text-decoration: underline !important; } /* "Προσθήκη νέας διεύθυνσης αποστολής" — text link with primary color */ body.desktop_v2_content.is-checkout #vmMainPage a[href*="ship_to_info_id="], body.desktop_v2_content.is-checkout #vmMainPage a[onclick*="addShipTo"] { color: var(--primary) !important; text-decoration: underline !important; font-weight: 700 !important; font-size: 14px !important; } /* "Προσθήκη νέας διεύθυνσης αποστολής" — JS-wrapped sentence (centered + dashed light-blue tile so it stands out as a CTA) */ body.desktop_v2_content.is-checkout #vmMainPage .v2-add-address-link { display: block !important; width: calc(100% - 24px) !important; max-width: 480px !important; margin: 8px auto 10px !important; padding: 10px 14px !important; text-align: center !important; background: #f0f9ff !important; border: 1.5px dashed #93c5db !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 700 !important; color: var(--primary) !important; line-height: 1.4 !important; transition: background .15s, border-color .15s !important; } body.desktop_v2_content.is-checkout #vmMainPage .v2-add-address-link:hover { background: #e0f2fe !important; border-color: var(--primary) !important; } body.desktop_v2_content.is-checkout #vmMainPage .v2-add-address-link::before { content: '+ '; color: var(--primary) !important; font-weight: 900 !important; margin-right: 2px !important; } body.desktop_v2_content.is-checkout #vmMainPage .v2-add-address-link a { color: var(--primary) !important; text-decoration: underline !important; font-weight: 700 !important; font-size: 14px !important; } /* ── COUPON section — compact inline (prompt + textbox + ΥΠΟΒΟΛΗ) ── The prompt text is a sibling text node OUTSIDE the form, both inside a wrapper td. Style the td as the flex container. */ body.desktop_v2_content.is-checkout #vmMainPage table:has(input#coupon_code) { width: 70% !important; max-width: 460px !important; border: none !important; background: transparent !important; margin: 0 auto 6px !important; border-collapse: separate !important; border-spacing: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input#coupon_code) tbody, body.desktop_v2_content.is-checkout #vmMainPage table:has(input#coupon_code) tr, body.desktop_v2_content.is-checkout #vmMainPage table:has(input#coupon_code) tr.sectiontableentry1 { display: block !important; width: 100% !important; background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input#coupon_code) td { display: block !important; width: 100% !important; background: #f9fafb !important; border: 1px dashed #d1d5db !important; border-radius: 10px !important; padding: 10px 14px !important; margin: 0 !important; font-size: 13px !important; font-weight: 700 !important; color: #1f2937 !important; text-align: left !important; line-height: 1.4 !important; text-transform: none !important; letter-spacing: 0 !important; } /* The form is inline inside the td, after the prompt text */ body.desktop_v2_content.is-checkout #vmMainPage form:has(input#coupon_code) { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; margin: 8px 0 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } body.desktop_v2_content.is-checkout #vmMainPage form:has(input#coupon_code) input#coupon_code { flex: 1 1 0 !important; min-width: 0 !important; height: 38px !important; padding: 0 12px !important; border: 1px solid var(--accent) !important; border-radius: 8px !important; font-size: 13px !important; margin: 0 !important; background: var(--accent-bg) !important; color: #111827 !important; box-sizing: border-box !important; } body.desktop_v2_content.is-checkout #vmMainPage form:has(input#coupon_code) input#coupon_code:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important; } body.desktop_v2_content.is-checkout #vmMainPage form:has(input#coupon_code) input[type="submit"] { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 38px !important; padding: 0 18px !important; background: #fff !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 700 !important; margin: 0 !important; box-shadow: none !important; text-transform: uppercase !important; letter-spacing: .3px !important; cursor: pointer !important; text-align: center !important; line-height: 1 !important; max-width: 140px !important; } body.desktop_v2_content.is-checkout #vmMainPage form:has(input#coupon_code) input[type="submit"]:hover { background: var(--primary) !important; color: #fff !important; } /* ── "ΠΑΡΑΚΑΛΩ ..." compact yellow strip (JS tags innermost only) ──── */ body.desktop_v2_content.is-checkout #vmMainPage .v2-checkout-warn { display: flex !important; align-items: center !important; gap: 8px !important; background: #fef3c7 !important; border: 1px solid #fbbf24 !important; border-radius: 8px !important; padding: 8px 14px !important; color: #78350f !important; font-size: 13px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .2px !important; line-height: 1.4 !important; margin: 10px 12px !important; text-align: left !important; box-shadow: none !important; } body.desktop_v2_content.is-checkout #vmMainPage .v2-checkout-warn::before { content: 'ⓘ'; color: #d97706; font-weight: 900; font-size: 14px; flex-shrink: 0; } /* ── "(Ενημέρωση διεύθυνσης)" link — plain inline blue link */ body.desktop_v2_content.is-checkout #vmMainPage a.v2-update-address-link { display: inline !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; color: var(--primary) !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 0 !important; text-decoration: underline !important; vertical-align: middle !important; } body.desktop_v2_content.is-checkout #vmMainPage a.v2-update-address-link:hover { color: var(--primary-dk) !important; text-decoration: underline !important; } /* "Πληροφορίες Αποστολής" — div.sectiontableheader OUTSIDE table. Style it identically to the billing card primary blue strip. */ body.desktop_v2_content.is-checkout #vmMainPage div.sectiontableheader, body.desktop_v2_content.is-checkout #vmMainPage span.sectiontableheader { display: block !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; font-weight: 800 !important; font-size: 14px !important; text-transform: uppercase !important; letter-spacing: .5px !important; padding: 14px 18px !important; margin: 14px 0 12px !important; border-radius: 12px 12px 0 0 !important; border: none !important; line-height: 1.3 !important; } /* ── Shipping ADDRESS radio cards (ship_to_info_id) ─────────────── */ body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) { display: block !important; width: 100% !important; border: none !important; background: transparent !important; margin: 0 0 14px !important; border-collapse: separate !important; border-spacing: 0 8px !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tbody { display: block !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr { display: grid !important; grid-template-columns: 28px 1fr !important; gap: 2px 10px !important; padding: 10px 14px !important; margin: 0 0 6px !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #fafbfc !important; align-items: center !important; transition: border-color .15s, background .15s !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td { border: none !important; background: transparent !important; padding: 0 !important; width: auto !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td:nth-child(1) { align-self: center !important; padding-top: 0 !important; width: 28px !important; max-width: 28px !important; min-width: 28px !important; justify-self: start !important; text-align: left !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td:nth-child(2) { font-size: 13.5px !important; color: #1f2937 !important; line-height: 1.5 !important; word-break: break-word !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td:nth-child(2) label { font-weight: 600 !important; color: #111827 !important; cursor: pointer; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td:nth-child(2) strong:first-child { color: var(--primary) !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .3px !important; display: inline !important; margin-right: 6px !important; } /* Make address inline (not stacked) — JS replaces
with space already */ body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td:nth-child(2) br { display: none !important; } /* Inline (Ενημέρωση διεύθυνσης) link inside ΟΙΚΙΑ row — small inline text */ body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr td:nth-child(2) a.v2-update-address-link { display: inline !important; padding: 0 !important; margin: 0 0 0 4px !important; background: transparent !important; border: none !important; font-size: 12px !important; text-decoration: underline !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) tr:has(input:checked) { border-color: var(--primary) !important; background: #f0f9ff !important; } body.desktop_v2_content.is-checkout #vmMainPage table:has(input[type="radio"][name="ship_to_info_id"]) input[type="radio"] { width: 20px !important; height: 20px !important; accent-color: var(--primary); margin: 0 !important; } /* ── Step 4 BOTTOM SECTION — confirm prompt + address + payment + notes ── */ /* "ΠΑΡΑΚΑΛΩ,ΕΛΕΓΞΤΕ ΤΑ ΣΤΟΙΧΕΙΑ ΚΑΙ ΕΠΙΒΕΒΑΙΩΣΤΕ ΤΗΝ ΠΑΡΑΓΓΕΛΙΑ ΣΑΣ!" header — keep blue primary, larger, with bottom border */ body.desktop_v2_content.is-checkout #vmMainPage strong:has(+ br):not(.v2-cart-total-val), body.desktop_v2_content.is-checkout #vmMainPage > strong:first-of-type, body.desktop_v2_content.is-checkout #vmMainPage div > strong:first-child:not(table strong) { font-size: 14px !important; font-weight: 800 !important; } body.desktop_v2_content.is-checkout #vmMainPage form[name="adminForm"] > strong:first-of-type, body.desktop_v2_content.is-checkout #vmMainPage form[action*="checkout"] > strong:first-of-type { display: block !important; color: var(--primary) !important; font-size: 16px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .4px !important; padding: 0 0 10px !important; margin: 18px 0 12px !important; border-bottom: 2px solid #eef0f3 !important; } /* Address / Cost / Payment info rows — clean key:value layout */ body.desktop_v2_content.is-checkout #vmMainPage form table:not(.v2-checkout-review-table):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])):not(:has(tr.sectiontableheader > th:only-of-type)):not(:has(input#coupon_code)) { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden !important; margin: 0 auto 10px !important; background: #fff !important; border-collapse: separate !important; border-spacing: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage form table:not(.v2-checkout-review-table):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])):not(:has(tr.sectiontableheader > th:only-of-type)):not(:has(input#coupon_code)) td { padding: 10px 16px !important; border-bottom: 1px solid #f3f4f6 !important; background: transparent !important; font-size: 13.5px !important; color: #1f2937 !important; vertical-align: top !important; } body.desktop_v2_content.is-checkout #vmMainPage form table:not(.v2-checkout-review-table):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])):not(:has(tr.sectiontableheader > th:only-of-type)):not(:has(input#coupon_code)) tr:last-child td { border-bottom: none !important; } body.desktop_v2_content.is-checkout #vmMainPage form table:not(.v2-checkout-review-table):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])):not(:has(tr.sectiontableheader > th:only-of-type)):not(:has(input#coupon_code)) td:first-child { color: #6b7280 !important; font-weight: 500 !important; width: 200px !important; text-align: right !important; font-size: 13px !important; } body.desktop_v2_content.is-checkout #vmMainPage form table:not(.v2-checkout-review-table):not(:has(input[name="shipping_rate_id"])):not(:has(input[name="payment_method_id"])):not(:has(tr.sectiontableheader > th:only-of-type)):not(:has(input#coupon_code)) td:nth-child(2) { color: #111827 !important; font-weight: 600 !important; } /* Notes textarea — polished, light-blue tint to stand out */ body.desktop_v2_content.is-checkout #vmMainPage textarea[name="customer_note"], body.desktop_v2_content.is-checkout #vmMainPage textarea[name*="note"] { width: calc(100% - 24px) !important; display: block !important; min-height: 100px !important; padding: 12px 14px !important; border: 1.5px solid #93c5db !important; border-radius: 10px !important; font-size: 14px !important; line-height: 1.5 !important; color: #111827 !important; background: #f0f9ff !important; box-sizing: border-box !important; margin: 6px auto 10px !important; font-family: inherit !important; resize: vertical !important; transition: border-color .15s, box-shadow .15s, background .15s !important; } body.desktop_v2_content.is-checkout #vmMainPage textarea[name="customer_note"]::placeholder, body.desktop_v2_content.is-checkout #vmMainPage textarea[name*="note"]::placeholder { color: #6b94a8 !important; } body.desktop_v2_content.is-checkout #vmMainPage textarea[name*="note"]:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37,136,166,.12) !important; } /* "Παρακαλούμε αφήστε σημείωση..." prompt above textarea */ body.desktop_v2_content.is-checkout #vmMainPage form:has(textarea[name*="note"]) > div:has(textarea) { margin: 10px 12px 0 !important; } /* Step 4: agreement checkbox + label row, narrowed like the rest */ body.desktop_v2_content.is-checkout #vmMainPage form:has(textarea[name*="note"]) > div:has(input[type="checkbox"]) { margin: 8px 12px !important; } /* ── Next-step submit (ΕΠΟΜΕΝΟ >>) + Step-4 confirm (ΕΠΙΒΕΒΑΙΩΣΗ ΠΑΡΑΓΓΕΛΙΑΣ) */ body.desktop_v2_content.is-checkout #vmMainPage input.vmCart, body.desktop_v2_content.is-checkout #vmMainPage input[type="submit"][name*="checkout"], body.desktop_v2_content.is-checkout #vmMainPage input[type="image"][name*="checkout"], body.desktop_v2_content.is-checkout #vmMainPage button[name*="checkout"], body.desktop_v2_content.is-checkout #vmMainPage form[action*="checkout"] input[type="submit"]:not([name="ApplyCoupon"]):not([name="apply_coupon"]):not([name*="coupon"]):not(.addtocart_button), body.desktop_v2_content.is-checkout #vmMainPage form[action*="checkout"] button[type="submit"]:not([name*="coupon"]), body.desktop_v2_content.is-checkout #vmMainPage form[action*="checkout"] input[type="image"], body.desktop_v2_content.is-checkout #vmMainPage form[name*="checkout"] input[type="submit"]:not([name*="coupon"]), body.desktop_v2_content.is-checkout #vmMainPage form:has(textarea[name*="note"]) input[type="submit"], body.desktop_v2_content.is-checkout #vmMainPage form:has(textarea[name*="note"]) button[type="submit"], body.desktop_v2_content.is-checkout #vmMainPage form:has(textarea[name*="note"]) input[type="image"], body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="agreed"]) input[type="submit"], body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="agreed"]) button[type="submit"], body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="shipping_rate_id"]) input[type="submit"]:not([name*="coupon"]), body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="payment_method_id"]) input[type="submit"]:not([name*="coupon"]), body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="ship_to_info_id"]) input[type="submit"]:not([name*="coupon"]) { display: block !important; width: calc(100% - 24px) !important; max-width: 480px !important; margin: 4px auto 6px !important; padding: 14px 24px !important; height: 52px !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(37,136,166,.30) !important; transition: filter .15s, transform .1s !important; } body.desktop_v2_content.is-checkout #vmMainPage input.vmCart:hover { filter: brightness(1.05); } body.desktop_v2_content.is-checkout #vmMainPage input.vmCart:active { transform: scale(0.98); } /* ── Box Now: respect legacy `style="display: none"` on submit + style the #selectBoxAlert orange warning. Legacy JS in index.php hides the submit and shows the alert when Box Now is selected without a chosen locker (cookie boxnow_id). Our `display: block !important` rules above would force the submit visible regardless — these selectors override. */ body.desktop_v2_content.is-checkout #vmMainPage input[type="submit"][style*="display: none"], body.desktop_v2_content.is-checkout #vmMainPage input[type="submit"][style*="display:none"], body.desktop_v2_content.is-checkout #vmMainPage button[style*="display: none"], body.desktop_v2_content.is-checkout #vmMainPage button[style*="display:none"] { display: none !important; } /* Belt-and-suspenders: when body has v2-needs-box (set by §5b0c JS), hide the main submit button regardless of inline style format. */ body.desktop_v2_content.is-checkout.v2-needs-box #vmMainPage #checkout_adminForm input[type="submit"]:not([name*="coupon"]):not([name*="Coupon"]):not(.addtocart_button), body.desktop_v2_content.is-checkout.v2-needs-box #vmMainPage #checkout_adminForm button[type="submit"]:not([name*="coupon"]) { display: none !important; visibility: hidden !important; } /* #selectBoxAlert — orange warning tile, CLICKABLE (re-opens the Box Now picker) */ body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert { width: calc(100% - 24px) !important; max-width: 480px !important; margin: 10px auto !important; padding: 12px 16px !important; background: #fff7ed !important; border: 2px solid #f97316 !important; border-radius: 10px !important; color: #9a3412 !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; line-height: 1.4 !important; box-shadow: 0 2px 8px rgba(249,115,22,.20) !important; text-decoration: underline !important; cursor: pointer !important; box-sizing: border-box !important; transition: background .15s ease, transform .1s ease, box-shadow .15s ease !important; user-select: none !important; } body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert:hover { background: #ffedd5 !important; box-shadow: 0 4px 14px rgba(249,115,22,.30) !important; } body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert:active { transform: scale(0.99) !important; } body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert::before { content: '⚠ '; color: #ea580c !important; margin-right: 4px !important; font-size: 16px !important; } body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert::after { content: ' 📍 Επιλέξτε BOX'; display: inline-block !important; margin-left: 8px !important; padding: 2px 10px !important; background: #f97316 !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; border-radius: 6px !important; text-decoration: none !important; vertical-align: middle !important; } /* When alert is shown via JS (style="display:block"), keep our visual styling */ body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert[style*="display: block"], body.desktop_v2_content.is-checkout #vmMainPage #selectBoxAlert[style*="display:block"] { display: block !important; } /* ── Box Now SELECTED locker — green success card ──────────────── Shown above ΕΠΟΜΕΝΟ when Box Now selected AND boxnow_id cookie set. Built by §5b0c v2BoxNow refresh(); name+addr filled from cookies set by the wrapped _bn_map_widget_config.afterSelect callback. */ body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card { width: calc(100% - 24px) !important; max-width: 480px !important; margin: 10px auto !important; padding: 12px 14px !important; background: #f0fdf4 !important; border: 2px solid #16a34a !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(22,163,74,.18) !important; box-sizing: border-box !important; text-align: left !important; line-height: 1.4 !important; color: #052e16 !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-head { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 6px !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-check { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #16a34a !important; color: #fff !important; font-size: 14px !important; font-weight: 900 !important; flex-shrink: 0 !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-title { font-size: 13px !important; font-weight: 800 !important; color: #166534 !important; text-transform: uppercase !important; letter-spacing: .3px !important; flex: 1 1 auto !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-change { display: inline-block !important; padding: 4px 12px !important; background: #16a34a !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; border-radius: 6px !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: .3px !important; cursor: pointer !important; transition: background .15s ease, transform .1s ease !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-change:hover { background: #15803d !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-change:active { transform: scale(0.97) !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-name { font-size: 14px !important; font-weight: 700 !important; color: #052e16 !important; margin: 4px 0 2px !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-name::before { content: '📍 '; margin-right: 2px !important; } body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card .v2-bn-addr { font-size: 12.5px !important; color: #166534 !important; font-weight: 500 !important; padding-left: 22px !important; /* align with text after 📍 */ } /* When card is shown via JS (style="display:block"), keep our visual styling */ body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card[style*="display: block"], body.desktop_v2_content.is-checkout #vmMainPage #v2-boxnow-card[style*="display:block"] { display: block !important; } /* Kill the gap: legacy
+ empty paragraphs/divs between radio table and submit */ body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="shipping_rate_id"]) br, body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="payment_method_id"]) br { display: none !important; } body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="shipping_rate_id"]) p:empty, body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="payment_method_id"]) p:empty, body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="shipping_rate_id"]) div:empty, body.desktop_v2_content.is-checkout #vmMainPage form:has(input[name="payment_method_id"]) div:empty { display: none !important; } /* ════════════════════════════════════════════════════════════ §13 NEWSLETTER POPUP — Moved from flypage_v2_desktop.php §12 Sitewide because the popup is global (not flypage-only). Anti-flicker: hide form#ak_popup_newsletter unless .v2-nl-active. ════════════════════════════════════════════════════════════ */ /* Hide popup by default — anti-flicker baseline */ form#ak_popup_newsletter { display: none !important; } form#ak_popup_newsletter:not(.v2-nl-active) > div.ak_popup_newsletter { display: none !important; } /* When opened: full-screen overlay with backdrop blur */ form#ak_popup_newsletter.v2-nl-active { display: flex !important; flex-direction: column !important; position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9999 !important; background: rgba(15, 23, 42, .55) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); overflow-y: auto; align-items: center; justify-content: flex-start; padding: 24px 16px; margin: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; box-sizing: border-box !important; border: none !important; outline: none !important; animation: v2dnl-fade .25s ease; } @keyframes v2dnl-fade { from { background: rgba(15,23,42,0); backdrop-filter: blur(0); } to { background: rgba(15,23,42,.55); backdrop-filter: blur(3px); } } form#ak_popup_newsletter.v2-nl-active * { border-color: transparent; } form#ak_popup_newsletter .nl_overlay { display: none !important; } /* Modal card */ form#ak_popup_newsletter.v2-nl-active > div.ak_popup_newsletter { display: block !important; background: #ffffff !important; border: none !important; border-radius: 14px !important; box-shadow: 0 12px 36px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15) !important; width: 92% !important; max-width: 460px !important; max-height: none !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: auto !important; flex-shrink: 0 !important; flex-grow: 0 !important; position: relative !important; animation: v2dnl-pop .3s cubic-bezier(.2,.9,.3,1.1); box-sizing: border-box !important; } @keyframes v2dnl-pop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Inner content reset (legacy .nlcontent has fixed positioning + 4px border) */ form#ak_popup_newsletter .nlcontent { padding: 12px 18px 18px !important; text-align: center !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; border: none !important; margin: 0 !important; max-height: none !important; overflow: visible !important; background: transparent !important; } /* Close X — top right */ form#ak_popup_newsletter .nlclose { position: absolute !important; top: 10px !important; right: 10px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #fff7ed !important; color: #f97316 !important; border: 1.5px solid #fed7aa !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 0 !important; line-height: 1 !important; z-index: 5 !important; transition: background .15s ease, transform .1s ease; text-indent: 0 !important; } form#ak_popup_newsletter .nlclose::before { content: "×"; font-size: 22px; line-height: 1; font-weight: 600; color: #f97316; } form#ak_popup_newsletter .nlclose:hover { background: #ffedd5 !important; } form#ak_popup_newsletter .nlclose:active { transform: scale(0.92); } /* Stack image + form vertically (RSForm renders them inline-block side-by-side) */ form#ak_popup_newsletter .nlimage, form#ak_popup_newsletter .nlform { display: block !important; width: 100% !important; max-width: 100% !important; vertical-align: top !important; } /* Hero image */ form#ak_popup_newsletter .nlimage { margin: 0 0 8px !important; padding: 0 !important; text-align: center !important; } form#ak_popup_newsletter .nlimage img { max-width: 80% !important; max-height: 280px !important; width: auto !important; height: auto !important; border-radius: 10px !important; margin: 0 auto !important; display: block !important; box-shadow: 0 2px 8px rgba(0,0,0,.10); } /* Heading */ form#ak_popup_newsletter .nlform h2, form#ak_popup_newsletter h2 { font-size: 17px !important; font-weight: 800 !important; color: #1a56db !important; margin: 6px 0 6px !important; padding: 0 38px !important; line-height: 1.25 !important; border: none !important; background: none !important; text-transform: none !important; letter-spacing: 0 !important; text-align: center !important; } /* Body paragraphs */ form#ak_popup_newsletter .nlform p, form#ak_popup_newsletter p { font-size: 13px !important; color: #475569 !important; margin: 0 0 4px !important; line-height: 1.4 !important; text-align: center !important; } /* RSForm Pro tables — flatten */ form#ak_popup_newsletter table { width: 100% !important; border: none !important; border-collapse: collapse !important; margin: 0 !important; background: transparent !important; } form#ak_popup_newsletter table tr, form#ak_popup_newsletter table tbody, form#ak_popup_newsletter table td { border: none !important; background: transparent !important; padding: 0 !important; } form#ak_popup_newsletter table td { padding: 5px 0 !important; display: block !important; width: 100% !important; text-align: left !important; } /* Email input */ form#ak_popup_newsletter .nlinput, form#ak_popup_newsletter input[type="text"], form#ak_popup_newsletter input[type="email"] { width: 100% !important; height: 40px !important; padding: 0 14px !important; border: 1.5px solid #d1d5db !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 500 !important; background: #fff !important; color: #111827 !important; box-sizing: border-box !important; margin: 4px 0 !important; -webkit-appearance: none !important; appearance: none !important; } form#ak_popup_newsletter .nlinput:focus, form#ak_popup_newsletter input[type="text"]:focus, form#ak_popup_newsletter input[type="email"]:focus { outline: none !important; border-color: #1a56db !important; box-shadow: 0 0 0 3px rgba(26, 86, 219, .15) !important; } /* Terms checkbox + label */ form#ak_popup_newsletter input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 2px 8px 0 0 !important; flex-shrink: 0 !important; accent-color: #f97316; vertical-align: middle; } form#ak_popup_newsletter label { font-size: 12px !important; color: #475569 !important; line-height: 1.4 !important; text-align: left !important; display: inline-block !important; vertical-align: middle; width: calc(100% - 32px); font-weight: 500; } form#ak_popup_newsletter label a { color: #1a56db; } /* Submit button — center text by killing legacy `padding: 20px 50px` that pushed "Πάρε το Δώρο σου" off-center inside the 44px-tall button */ form#ak_popup_newsletter .nlbutton, form#ak_popup_newsletter input[type="submit"] { display: block !important; width: 100% !important; height: 48px !important; padding: 0 24px !important; /* override legacy 20px 50px */ line-height: 48px !important; border: none !important; border-radius: 8px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .4px !important; text-align: center !important; cursor: pointer !important; box-shadow: 0 3px 8px rgba(249,115,22,.35) !important; margin: 8px 0 0 !important; -webkit-appearance: none !important; appearance: none !important; transition: filter .15s ease, transform .1s ease; box-sizing: border-box !important; } form#ak_popup_newsletter .nlbutton:hover, form#ak_popup_newsletter input[type="submit"]:hover { filter: brightness(1.05); } form#ak_popup_newsletter .nlbutton:active, form#ak_popup_newsletter input[type="submit"]:active { transform: scale(0.98); } /* RSForm errors */ form#ak_popup_newsletter .formClr { clear: both; } form#ak_popup_newsletter .formError { font-size: 12px; color: #dc2626; } form#ak_popup_newsletter .formNoError { color: transparent; font-size: 12px; } /* "Δείτε περισσότερα" accordion */ form#ak_popup_newsletter .v2-nl-more { margin: 6px 0 0 !important; text-align: center !important; } form#ak_popup_newsletter .v2-nl-more-toggle { display: inline-block !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 700 !important; color: #1a56db !important; cursor: pointer !important; text-decoration: none !important; border-radius: 8px !important; background: rgba(26, 86, 219, .06) !important; } form#ak_popup_newsletter .v2-nl-more-toggle:hover { background: rgba(26, 86, 219, .12) !important; } form#ak_popup_newsletter .v2-nl-more-toggle .v2-chev { display: inline-block !important; transition: transform .25s ease !important; margin-left: 4px !important; font-size: 10px !important; } form#ak_popup_newsletter .v2-nl-more.is-open .v2-nl-more-toggle .v2-chev { transform: rotate(180deg) !important; } form#ak_popup_newsletter .v2-nl-more-body { max-height: 0 !important; overflow: hidden !important; transition: max-height .35s ease, opacity .25s ease, margin .25s ease !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; } form#ak_popup_newsletter .v2-nl-more.is-open .v2-nl-more-body { max-height: 2000px !important; opacity: 1 !important; margin: 4px 0 0 !important; } form#ak_popup_newsletter .v2-nl-more-body p { margin: 4px 0 !important; line-height: 1.4 !important; } /* NOTE: .nlopen position is intentionally LEFT TO LEGACY CSS — the legacy template already stacks the gift button above #fbchat-facade and #wachat-facade (Messenger + WhatsApp). Don't override here. */ /* ════════════════════════════════════════════════════════════ §14 BROWSE PAGES — admin filter row hide + bottom toolbar pagination (Ported from mobile_v2.css §X — keep design unified.) ════════════════════════════════════════════════════════════ */ /* Unified bottom toolbar — single white card around pagination + result chip */ body.desktop_v2_content.is-browse .v2-bottom-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 10px 12px !important; margin: 14px auto 12px !important; background: #fff !important; border: 1px solid #eef0f3 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(16,24,40,.04) !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar > * { margin: 0 !important; flex: 0 0 auto !important; } /* "Σύνολο: X προϊόντα" chip on top */ body.desktop_v2_content.is-browse .v2-bottom-toolbar .v2-result-chip { flex: 1 1 100% !important; text-align: center !important; font-size: 12.5px !important; color: #6b7280 !important; padding: 0 0 6px !important; border-bottom: 1px dashed #eef0f3 !important; margin-bottom: 4px !important; letter-spacing: .2px; } body.desktop_v2_content.is-browse .v2-bottom-toolbar .v2-result-chip strong { color: var(--primary); font-weight: 800; font-size: 14px; } /* Pagination row */ body.desktop_v2_content.is-browse .v2-bottom-toolbar > div { flex: 1 1 100% !important; padding: 0 !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination, body.desktop_v2_content.is-browse #a_search_form ul.pagination { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: auto !important; flex: 0 1 auto !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li, body.desktop_v2_content.is-browse #a_search_form ul.pagination li { list-style: none !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; display: inline-flex !important; border: none !important; background: none !important; } /* Pagination chips (a + span) — chip styling, compact */ body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination a, body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination span, body.desktop_v2_content.is-browse #a_search_form ul.pagination a, body.desktop_v2_content.is-browse #a_search_form ul.pagination span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 28px !important; height: 28px !important; padding: 0 7px !important; margin: 0 !important; border-radius: 6px !important; color: var(--primary) !important; font-weight: 700 !important; font-size: 12.5px !important; text-decoration: none !important; background: #f7f9fb !important; border: 1px solid #e5e7eb !important; transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease; flex: 0 0 auto !important; } /* Ellipsis chip — non-clickable spacer */ body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li.v2-pag-ellipsis, body.desktop_v2_content.is-browse #a_search_form ul.pagination li.v2-pag-ellipsis { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 20px !important; color: #9ca3af !important; font-weight: 700 !important; font-size: 14px !important; pointer-events: none !important; user-select: none !important; } /* Hidden chips (truncated by JS) — beats the li inline-flex !important */ body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li.v2-pag-hidden, body.desktop_v2_content.is-browse #a_search_form ul.pagination li.v2-pag-hidden { display: none !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination a:hover, body.desktop_v2_content.is-browse #a_search_form ul.pagination a:hover { background: #eef6fb !important; border-color: var(--primary) !important; color: var(--primary-dk) !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination a:active { transform: scale(0.95); } /* Current page (active) — solid primary blue */ body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li > span, body.desktop_v2_content.is-browse #a_search_form ul.pagination li > span { color: #fff !important; background: var(--primary) !important; border-color: var(--primary) !important; font-weight: 800 !important; box-shadow: 0 2px 6px rgba(37,136,166,.30) !important; } /* Disabled chevron arrows (first/last/prev/next when on edge page) */ body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li > span.v2-pag-first, body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li > span.v2-pag-prev, body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li > span.v2-pag-next, body.desktop_v2_content.is-browse .v2-bottom-toolbar ul.pagination li > span.v2-pag-last, body.desktop_v2_content.is-browse #a_search_form ul.pagination li > span.v2-pag-first, body.desktop_v2_content.is-browse #a_search_form ul.pagination li > span.v2-pag-prev, body.desktop_v2_content.is-browse #a_search_form ul.pagination li > span.v2-pag-next, body.desktop_v2_content.is-browse #a_search_form ul.pagination li > span.v2-pag-last { color: #cbd5e1 !important; background: #f3f4f6 !important; cursor: default !important; border-color: #e5e7eb !important; box-shadow: none !important; font-weight: 700 !important; } /* "Προϊόντα/σελίδα:" label */ body.desktop_v2_content.is-browse .v2-bottom-toolbar .v2-limit-label { font-size: 12px !important; color: #6b7280 !important; font-weight: 600 !important; margin-right: 4px !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar select[name*="limit"] { height: 32px !important; padding: 0 8px !important; border: 1px solid #d1d5db !important; border-radius: 6px !important; font-size: 13px !important; background: #fff !important; } /* ════════════════════════════════════════════════════════════ §15 BROWSE PAGE — visual polish (per-card) Polishes appearance of legacy product cards without changing the layout/grid or removing admin fields. Sections: A) Card hover/lift + soft border B) Title color/typography C) Price box (old + new + discount pill) D) Διαθεσιμότητα badge (green pill / red pill when OOS) E) Αγορά button — orange gradient + hover F) HOT pill — replaces legacy hot_price PNG Each section is self-contained — remove individually if needed. ════════════════════════════════════════════════════════════ */ /* ── A) Card hover/lift + soft border ─────────────────────── */ body.desktop_v2_content.is-browse .browseProductContainer { border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 10px 12px !important; margin: 4px auto 4px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; background: #fff !important; box-shadow: 0 4px 14px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06) !important; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important; } body.desktop_v2_content.is-browse .browseProductContainer:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08) !important; border-color: #cbd5e1 !important; } /* ── B) Title — primary blue, slight bold, hover underline ─── */ body.desktop_v2_content.is-browse .browseProductTitle { margin: 0 0 6px !important; padding: 0 !important; } body.desktop_v2_content.is-browse .browseProductTitle a { color: var(--primary) !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; line-height: 1.35 !important; transition: color .15s ease !important; } body.desktop_v2_content.is-browse .browseProductTitle a:hover { color: var(--primary-dk) !important; text-decoration: underline !important; } /* ── C) Price box (old strikethrough + new bold + discount pill) ── */ body.desktop_v2_content.is-browse .browsePriceContainer { display: inline-flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 10px !important; padding: 8px 14px !important; margin: 6px 0 8px !important; background: #f0f9ff !important; border: 1.5px solid #bae6fd !important; border-radius: 10px !important; box-shadow: 0 1px 3px rgba(2,132,199,.08) !important; } body.desktop_v2_content.is-browse .browsePriceContainer .product-Old-Price { font-size: 13px !important; color: #94a3b8 !important; text-decoration: line-through !important; font-weight: 500 !important; background: none !important; padding: 0 !important; } body.desktop_v2_content.is-browse .browsePriceContainer #productPrice, body.desktop_v2_content.is-browse .browsePriceContainer .productPrice { font-size: 22px !important; font-weight: 800 !important; color: var(--primary) !important; letter-spacing: -0.5px !important; background: none !important; padding: 0 !important; line-height: 1 !important; } /* Discount pill injected by JS §4c(a) */ body.desktop_v2_content.is-browse .v2-discount-pill { display: inline-flex !important; align-items: center !important; padding: 3px 10px !important; background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: -0.2px !important; line-height: 1.2 !important; box-shadow: 0 1px 3px rgba(185,28,28,.12) !important; } /* ── D) Διαθεσιμότητα badge ─────────────────────────────── */ body.desktop_v2_content.is-browse .availabilityBlock { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 12px !important; margin: 6px 0 !important; background: #f0fdf4 !important; border: 1px solid #86efac !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; color: #166534 !important; text-decoration: none !important; line-height: 1.3 !important; } body.desktop_v2_content.is-browse .availabilityBlock::before { content: '✓'; font-weight: 900 !important; color: #16a34a !important; font-size: 13px !important; } body.desktop_v2_content.is-browse .availabilityHeader { color: #166534 !important; font-weight: 700 !important; text-decoration: none !important; background: none !important; border: none !important; padding: 0 !important; font-size: 12px !important; } /* Out-of-stock variant — JS §4c(c) tags .availabilityBlock with .is-oos */ body.desktop_v2_content.is-browse .availabilityBlock.is-oos { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; } body.desktop_v2_content.is-browse .availabilityBlock.is-oos::before { content: '✗' !important; color: #dc2626 !important; } body.desktop_v2_content.is-browse .availabilityBlock.is-oos .availabilityHeader { color: #991b1b !important; } /* ── E) Αγορά button — orange gradient ─────────────────────── */ body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="submit"], body.desktop_v2_content.is-browse .browseAddToCartContainer .addtocart_button, body.desktop_v2_content.is-browse input.addtocart_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 40px !important; padding: 0 22px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; cursor: pointer !important; box-shadow: 0 3px 8px rgba(249,115,22,.30) !important; transition: filter .15s ease, transform .1s ease !important; -webkit-appearance: none !important; appearance: none !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="submit"]:hover, body.desktop_v2_content.is-browse input.addtocart_button:hover { filter: brightness(1.08) !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="submit"]:active, body.desktop_v2_content.is-browse input.addtocart_button:active { transform: scale(0.97) !important; } /* ── F) HOT pill — replaces legacy hot_price PNG ───────────── */ body.desktop_v2_content.is-browse .browseProductImageContainer { position: relative !important; } /* Hide legacy badge image (replaced by V2 CSS pill below) */ body.desktop_v2_content.is-browse .browseProductImageContainer img.list_badge_img, body.desktop_v2_content.is-browse .browseProductImageContainer #list_badge_img { display: none !important; } /* HOT PRICE — round badge AFTER the price (only on non-sale products; sale products already have the discount-% pill). Two-line text "Hot / Price" stacked inside a circle. Note: .productPrice has flex `order: 2`, so we set our pill to order: 3 to ensure it visually follows the price. */ body.desktop_v2_content.is-browse .v2-hot-pill.v2-hot-round { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; order: 3 !important; width: 40px !important; height: 40px !important; margin-left: 8px !important; padding: 0 !important; color: #fff !important; line-height: 1 !important; background: radial-gradient(circle at 30% 30%, #fb923c 0%, #ea580c 60%, #c2410c 100%) !important; border-radius: 50% !important; border: 2px solid #fff !important; box-shadow: 0 3px 10px rgba(234,88,12,.40), 0 0 0 1px rgba(234,88,12,.30) !important; vertical-align: middle !important; flex-shrink: 0 !important; cursor: default !important; text-align: center !important; } body.desktop_v2_content.is-browse .v2-hot-pill.v2-hot-round .v2-hot-l1 { font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: capitalize !important; } body.desktop_v2_content.is-browse .v2-hot-pill.v2-hot-round .v2-hot-l2 { font-size: 10px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: capitalize !important; margin-top: 1px !important; } /* Legacy: leftover image-container hot pill (shouldn't render anymore but keep CSS no-op safe in case JS path 'b' didn't move it). */ body.desktop_v2_content.is-browse .browseProductImageContainer .v2-hot-pill { display: none !important; } /* Old positioning rules retained as no-ops (overridden above). */ body.desktop_v2_content.is-browse .browseProductImageContainer.legacy_hot_pill_pos { position: absolute !important; bottom: 100% !important; margin-bottom: 8px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; padding: 3px 10px !important; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; color: #fff !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.4px !important; border-radius: 999px !important; box-shadow: 0 2px 6px rgba(220,38,38,.30), 0 0 0 2px #fff !important; z-index: 10 !important; pointer-events: none !important; line-height: 1 !important; white-space: nowrap !important; text-transform: uppercase !important; } /* Ensure card and image container don't clip the overflowing pill */ body.desktop_v2_content.is-browse .browseProductContainer, body.desktop_v2_content.is-browse .browseProductImageContainer { overflow: visible !important; } /* ════════════════════════════════════════════════════════════ §16 BROWSE CARD — Grid restructuring (better field placement) Two-column grid: content (1fr) + image (200px right column). Admin info gathered at the end into .v2-admin-footer (full width). ════════════════════════════════════════════════════════════ */ body.desktop_v2_content.is-browse .browseProductContainer { display: grid !important; grid-template-columns: minmax(0, 1fr) 180px !important; grid-auto-rows: max-content !important; column-gap: 14px !important; row-gap: 10px !important; /* αραίωση: 3 → 10 (more breathing room) */ align-items: start !important; } /* Title — full width, row 1 */ body.desktop_v2_content.is-browse .browseProductContainer > .browseProductTitle { grid-column: 1 / -1 !important; grid-row: 1 !important; margin: 0 0 2px !important; padding: 0 !important; } /* Image — right column, rows 2-3 (covers price-row + description). The addtocart container goes BELOW the image (row 4 right column) so the buttons are 180px wide instead of 432px (less visual noise). */ body.desktop_v2_content.is-browse .browseProductContainer > .browseProductImageContainer { grid-column: 2 !important; grid-row: 2 / span 2 !important; /* image spans 2 rows, addtocart row 4 */ width: 100% !important; max-width: 200px !important; margin: 0 !important; float: none !important; text-align: center !important; align-self: start !important; } body.desktop_v2_content.is-browse .browseProductImageContainer img.browseProductImage { max-width: 100% !important; height: auto !important; border-radius: 6px !important; } /* Price box — left column row 2 */ body.desktop_v2_content.is-browse .browseProductContainer > .browsePriceContainer { grid-column: 1 !important; grid-row: 2 !important; align-self: start !important; justify-self: start !important; margin: 2px 0 !important; } /* Description — left column row 3, FILLS full width of left col (legacy adds inline width:50% / fixed widths — override) */ body.desktop_v2_content.is-browse .browseProductContainer > .browseProductDescription { grid-column: 1 !important; grid-row: 3 !important; margin: 2px 0 !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: #475569 !important; } body.desktop_v2_content.is-browse .browseProductContainer > .browseProductDescription > div, body.desktop_v2_content.is-browse .browseProductContainer > .browseProductDescription > p { width: auto !important; max-width: 100% !important; margin: 0 !important; } /* "Λεπτομέρειες προϊόντος…" link — small chip */ body.desktop_v2_content.is-browse .browseProductDescription a { display: inline-block !important; margin-top: 6px !important; padding: 4px 10px !important; background: #fff !important; border: 1.5px solid var(--primary) !important; border-radius: 6px !important; color: var(--primary) !important; font-size: 11.5px !important; font-weight: 700 !important; font-style: normal !important; text-decoration: none !important; transition: background .15s ease, color .15s ease !important; } body.desktop_v2_content.is-browse .browseProductDescription a::after { content: ' →'; font-weight: 900 !important; } body.desktop_v2_content.is-browse .browseProductDescription a:hover { background: var(--primary) !important; color: #fff !important; } /* Availability badge — left column row 4 */ body.desktop_v2_content.is-browse .browseProductContainer > .availabilityBlock { grid-column: 1 !important; grid-row: 4 !important; align-self: start !important; justify-self: start !important; margin: 2px 0 !important; } /* Add-to-cart container — RIGHT column row 4 (BELOW the image) Width = image width (200px), so buttons are 180-200px not 432px. Less visual noise; buttons feel like a natural CTA below product photo. */ body.desktop_v2_content.is-browse .browseProductContainer > .browseAddToCartContainer { grid-column: 2 !important; grid-row: 4 !important; width: 100% !important; max-width: 200px !important; margin: 8px 0 0 !important; padding: 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-self: center !important; gap: 0 !important; } /* "Ποσότητα:" label */ body.desktop_v2_content.is-browse .browseAddToCartContainer > br, body.desktop_v2_content.is-browse .browseProductContainer > br { display: none !important; } /* Quantity input + spinner buttons */ body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="text"], body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity, body.desktop_v2_content.is-browse .browseAddToCartContainer input[name="quantity"] { width: 50px !important; height: 40px !important; padding: 0 8px !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; color: #111827 !important; background: #fff !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="text"]:focus, body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity:focus { outline: none !important; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(37,136,166,.15) !important; } /* Spinner +/- (legacy uses small input[type="button"] or input[type="image"]) */ body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="button"], body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="image"] { width: 24px !important; height: 18px !important; background: #f3f4f6 !important; border: 1px solid #d1d5db !important; border-radius: 4px !important; cursor: pointer !important; padding: 0 !important; color: #475569 !important; font-weight: 800 !important; line-height: 1 !important; -webkit-appearance: none !important; appearance: none !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="button"]:hover { background: #e5e7eb !important; } /* "Ποσότητα:" label text */ body.desktop_v2_content.is-browse .browseAddToCartContainer { font-size: 13px !important; color: #6b7280 !important; font-weight: 600 !important; } /* ── Admin footer (gathered Stock/SKU/Κωδικός lines) ─────────── */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-admin-footer { grid-column: 1 / -1 !important; grid-row: 6 !important; margin: 8px 0 0 !important; padding: 5px 10px !important; background: #fafafa !important; border: 1px dashed #d1d5db !important; border-radius: 6px !important; display: flex !important; flex-wrap: wrap !important; gap: 2px 16px !important; font-size: 10.5px !important; color: #6b7280 !important; line-height: 1.4 !important; } body.desktop_v2_content.is-browse .v2-admin-footer .v2-admin-line { display: inline-flex !important; align-items: baseline !important; gap: 4px !important; white-space: nowrap !important; font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace !important; color: #6b7280 !important; } body.desktop_v2_content.is-browse .v2-admin-footer .v2-admin-line font, body.desktop_v2_content.is-browse .v2-admin-footer .v2-admin-line b { color: #374151 !important; font-weight: 700 !important; background: none !important; } body.desktop_v2_content.is-browse .v2-admin-footer .v2-admin-line::before { content: '🔒'; margin-right: 2px; opacity: 0.4; font-size: 10px; } /* ── Browse list wrapper — center the cards inside vmMainPage ──── */ body.desktop_v2_content.is-browse #vmMainPage .browse_1, body.desktop_v2_content.is-browse #product_list, body.desktop_v2_content.is-browse #vmMainPage > div:has(> .browseProductContainer) { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; width: 100% !important; } /* Image centered in its column at 200px (was 180) */ body.desktop_v2_content.is-browse .browseProductImageContainer { max-width: 200px !important; } body.desktop_v2_content.is-browse .browseProductImageContainer img.browseProductImage { max-width: 100% !important; max-height: 200px !important; } /* ════════════════════════════════════════════════════════════ §17 BROWSE — price-row (price + availability side-by-side) + 2-line availability + quantity +/- buttons ════════════════════════════════════════════════════════════ */ /* Row 2 of card: side-by-side price box + availability box, equal height */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-price-row { grid-column: 1 !important; grid-row: 2 !important; display: flex !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; margin: 2px 0 !important; } body.desktop_v2_content.is-browse .v2-price-row > .browsePriceContainer, body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock { flex: 1 1 50% !important; margin: 0 !important; box-sizing: border-box !important; align-self: stretch !important; } /* Make availability a vertical 2-line box (was inline pill) */ body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 8px 14px !important; background: #f0fdf4 !important; border: 1.5px solid #86efac !important; border-radius: 10px !important; color: #166534 !important; line-height: 1.3 !important; box-shadow: 0 1px 3px rgba(22,163,74,.08) !important; } /* Override the old ::before ✓ from §15 (we use header+body instead now) */ body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock::before { content: none !important; } /* Header line — small uppercase with green dot */ body.desktop_v2_content.is-browse .v2-avail-header { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; font-weight: 800 !important; color: #15803d !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; line-height: 1.2 !important; margin-bottom: 3px !important; } body.desktop_v2_content.is-browse .v2-avail-dot { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #16a34a !important; box-shadow: 0 0 0 2px rgba(22,163,74,.18) !important; flex-shrink: 0 !important; } /* Body line — bold value */ body.desktop_v2_content.is-browse .v2-avail-body { display: block !important; font-size: 13.5px !important; font-weight: 700 !important; color: #052e16 !important; line-height: 1.3 !important; } /* Out-of-stock variant */ body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock.is-oos { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #991b1b !important; } body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock.is-oos .v2-avail-header { color: #b91c1c !important; } body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock.is-oos .v2-avail-dot { background: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.18) !important; } body.desktop_v2_content.is-browse .v2-price-row > .availabilityBlock.is-oos .v2-avail-body { color: #7f1d1d !important; } /* Quantity +/- buttons — use legacy class names with value text from JS */ body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_up, body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_down { width: 26px !important; height: 19px !important; background: #f3f4f6 !important; border: 1px solid #d1d5db !important; border-radius: 4px !important; cursor: pointer !important; padding: 0 !important; color: #374151 !important; font-weight: 900 !important; font-size: 13px !important; line-height: 17px !important; text-align: center !important; -webkit-appearance: none !important; appearance: none !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_up:hover, body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_down:hover { background: #e5e7eb !important; color: var(--primary) !important; border-color: var(--primary) !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_up { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_down { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: none !important; } /* ════════════════════════════════════════════════════════════ §18 BROWSE — bigger Αγορά + ΕΠΙΛΟΓΕΣ button (parent products) ════════════════════════════════════════════════════════════ */ /* form.addtocart_form is the actual flex parent. nowrap so qty+ΑΓΟΡΑ stay on ONE line (no wrap). Compact: qty + spinners + Αγορά. */ body.desktop_v2_content.is-browse .browseAddToCartContainer > form.addtocart_form { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Αγορά — discreet button below image */ body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="submit"], body.desktop_v2_content.is-browse input.addtocart_button { height: 36px !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 0 10px !important; margin: 0 !important; font-size: 12.5px !important; letter-spacing: 0.3px !important; box-shadow: 0 2px 6px rgba(249,115,22,.25) !important; white-space: nowrap !important; } /* Notify button (Εκδήλωση Ενδιαφέροντος) — long text, needs 2-line wrap */ body.desktop_v2_content.is-browse .browseAddToCartContainer input.notify_button, body.desktop_v2_content.is-browse input.notify_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; height: auto !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 5px 6px !important; margin: 0 !important; white-space: normal !important; line-height: 1.1 !important; font-size: 10px !important; letter-spacing: 0.2px !important; word-break: keep-all !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(37,136,166,.32) !important; -webkit-appearance: none !important; appearance: none !important; } body.desktop_v2_content.is-browse input.notify_button:hover { filter: brightness(1.08) !important; } /* HIDE quantity input + spinners — not needed on browse cards. User adds to cart with default qty (1) via the Αγορά button alone. This also lets the Αγορά button take the full row width = same as ΕΠΙΛΟΓΕΣ / Εκδήλωση Ενδιαφέροντος. */ body.desktop_v2_content.is-browse .browseAddToCartContainer input[type="text"], body.desktop_v2_content.is-browse .browseAddToCartContainer input.inputboxquantity, body.desktop_v2_content.is-browse .browseAddToCartContainer input[name="quantity"], body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_up, body.desktop_v2_content.is-browse .browseAddToCartContainer input.quantity_box_button_down { display: none !important; } /* Wipe text/font-size of any stray "Ποσότητα:" leftover (label is a bare text node before qty input — JS strips it; this is a fallback) */ body.desktop_v2_content.is-browse .browseAddToCartContainer { font-size: 0 !important; } body.desktop_v2_content.is-browse .browseAddToCartContainer input, body.desktop_v2_content.is-browse .browseAddToCartContainer button, body.desktop_v2_content.is-browse .browseAddToCartContainer a { font-size: 15px !important; /* re-enable for the buttons */ } body.desktop_v2_content.is-browse .browseAddToCartContainer .v2-options-btn { font-size: 15px !important; } /* ΕΠΙΛΟΓΕΣ button — for parent products with attributes (no direct add-to-cart). Same visual weight as Αγορά but in primary blue (so user sees it's a different action: navigate to product page to choose attributes). */ body.desktop_v2_content.is-browse .v2-options-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; font-size: 12.5px !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 4px 12px rgba(37,136,166,.32) !important; transition: filter .15s ease, transform .1s ease !important; } body.desktop_v2_content.is-browse .v2-options-btn:hover { filter: brightness(1.08) !important; color: #fff !important; text-decoration: none !important; } body.desktop_v2_content.is-browse .v2-options-btn:active { transform: scale(0.97) !important; } body.desktop_v2_content.is-browse .v2-options-btn .v2-options-arrow { font-size: 18px !important; font-weight: 900 !important; line-height: 1 !important; } /* Parent product availability box — neutral blue (info, not green/red) */ body.desktop_v2_content.is-browse .v2-has-attrs .v2-price-row > .availabilityBlock { background: #f0f9ff !important; border-color: #bae6fd !important; color: #0c4a6e !important; } body.desktop_v2_content.is-browse .v2-has-attrs .v2-avail-header { color: #0369a1 !important; } body.desktop_v2_content.is-browse .v2-has-attrs .v2-avail-dot { background: #0284c7 !important; box-shadow: 0 0 0 2px rgba(2,132,199,.18) !important; } body.desktop_v2_content.is-browse .v2-has-attrs .v2-avail-body { color: #0c4a6e !important; font-size: 11.5px !important; font-weight: 500 !important; /* not bold */ font-style: normal !important; /* no italic */ line-height: 1.35 !important; text-align: center !important; /* centered */ } body.desktop_v2_content.is-browse .v2-has-attrs .v2-price-row > .availabilityBlock { align-items: center !important; /* center children horizontally */ text-align: center !important; } body.desktop_v2_content.is-browse .v2-has-attrs .v2-avail-header { justify-content: center !important; } /* Hide the empty .browseAddToCartContainer's "Ποσότητα:" label leftover — for parent products, the container has only our injected ΕΠΙΛΟΓΕΣ btn */ body.desktop_v2_content.is-browse .v2-has-attrs .browseAddToCartContainer { font-size: 0 !important; /* hides any stray "Ποσότητα:" text node */ } body.desktop_v2_content.is-browse .v2-has-attrs .browseAddToCartContainer .v2-options-btn { font-size: 15px !important; /* re-enable for our button */ } /* ════════════════════════════════════════════════════════════ §19 BROWSE — TOP TOOLBAR: Φίλτρα button + collapsible panel (Sort dropdown + ASC/DESC icon collapse into "Φίλτρα" button. Ported from mobile_v2.css §X — same UX on desktop.) ════════════════════════════════════════════════════════════ */ body.desktop_v2_content.is-browse #a_search_form { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 8px auto 12px !important; padding: 10px 12px !important; background: #fff !important; border: 1px solid #eef0f3 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(16,24,40,.04) !important; row-gap: 10px !important; } /* Pagination on its OWN row (row 2, BELOW Φίλτρα + button_2) The ul.pagination is nested inside a wrapper
in #a_search_form, so we target THAT div (the actual flex item) via :has(). */ body.desktop_v2_content.is-browse #a_search_form > div:has(> ul.pagination) { flex: 0 0 100% !important; /* fixed 100% — forces wrap */ order: 99 !important; /* placed AFTER row-1 items */ width: 100% !important; max-width: 100% !important; margin-top: 4px !important; padding-top: 10px !important; border-top: 1px dashed #eef0f3 !important; display: flex !important; justify-content: center !important; } body.desktop_v2_content.is-browse #a_search_form ul.pagination { margin: 0 !important; } /* Φίλτρα button to the LEFT side (row 1) */ body.desktop_v2_content.is-browse #a_search_form .v2-filter-wrapper { order: 1 !important; margin-right: auto !important; } /* button_2 ("Απόκρυψη Μη Διαθέσιμων") to the RIGHT side (row 1, aligned with Φίλτρα) */ body.desktop_v2_content.is-browse #a_search_form .button_container, body.desktop_v2_content.is-browse #a_search_form a.button_2 { order: 2 !important; margin-left: auto !important; margin-right: 14px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 14px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(249,115,22,.30) !important; } body.desktop_v2_content.is-browse #a_search_form .button_container { background: none !important; box-shadow: none !important; padding: 0 !important; height: auto !important; } body.desktop_v2_content.is-browse #a_search_form .button_container > a.button_2, body.desktop_v2_content.is-browse #a_search_form .button_container a { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; padding: 0 14px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 2px 6px rgba(249,115,22,.30) !important; } /* "Εμφάνιση:" limit row inside the Φίλτρα panel (top toolbar) */ body.desktop_v2_content.is-browse #a_search_form .v2-filter-limit-row { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 10px !important; padding-top: 10px !important; border-top: 1px dashed #e5e7eb !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-limit-label { font-size: 12.5px !important; color: #6b7280 !important; font-weight: 700 !important; flex: 0 0 auto !important; margin: 0 !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-limit-row select { flex: 1 1 auto !important; height: 32px !important; padding: 0 8px !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; background: #fff !important; font-size: 13px !important; min-width: 80px !important; } /* Bottom toolbar — "Προϊόντα/σελίδα: 20" smaller, on ONE line. The legacy wraps the limit selector + label inside a FORM (display:block, full row width). Force that FORM (and any DIV parent) to inline-flex nowrap so the label + dropdown stay on a single compact line. */ body.desktop_v2_content.is-browse .v2-bottom-toolbar .v2-limit-label { font-size: 11.5px !important; color: #6b7280 !important; font-weight: 600 !important; margin: 0 4px 0 0 !important; padding: 0 !important; white-space: nowrap !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; } body.desktop_v2_content.is-browse .v2-bottom-toolbar select[name*="limit"] { width: auto !important; height: 26px !important; padding: 0 22px 0 8px !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 5px !important; border: 1px solid #d1d5db !important; background: #fff !important; min-width: 0 !important; max-width: 80px !important; flex: 0 0 auto !important; box-sizing: border-box !important; line-height: 24px !important; } /* Force the limit label + select container (FORM or DIV) to inline-flex nowrap */ body.desktop_v2_content.is-browse .v2-bottom-toolbar > form:has(select[name*="limit"]), body.desktop_v2_content.is-browse .v2-bottom-toolbar > div:has(select[name*="limit"]) { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Hide stray
+ plain text labels inside that form (Εμφάνιση # leftover) */ body.desktop_v2_content.is-browse .v2-bottom-toolbar > form:has(select[name*="limit"]) br, body.desktop_v2_content.is-browse .v2-bottom-toolbar > div:has(select[name*="limit"]) br { display: none !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-wrapper { display: inline-block !important; position: relative !important; flex: 0 0 auto !important; width: auto !important; vertical-align: middle; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important; border: 1.5px solid #d1d5db !important; border-radius: 8px !important; padding: 0 14px !important; height: 36px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--primary) !important; cursor: pointer !important; transition: background .15s ease, transform .1s ease; line-height: 1 !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn:hover { background: #eef6fb !important; border-color: var(--primary) !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn:active { transform: scale(0.97); } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn .v2-filter-icon { color: #f97316 !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn .v2-filter-text, body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn .v2-filter-chev { /* Defensive — block any pagination chip styles bleeding in */ display: inline !important; background: transparent !important; border: none !important; box-shadow: none !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; font-weight: 700 !important; font-size: 13px !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn .v2-filter-text { color: var(--primary) !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-btn .v2-filter-chev { font-size: 9px !important; color: #6b7280 !important; transition: transform .25s ease; margin-left: 2px !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-wrapper.is-open .v2-filter-btn .v2-filter-chev { transform: rotate(180deg); } body.desktop_v2_content.is-browse #a_search_form .v2-filter-wrapper.is-open .v2-filter-btn { background: #eef6fb !important; border-color: var(--primary) !important; } /* Collapsible panel containing the sort dropdown + asc/desc */ body.desktop_v2_content.is-browse #a_search_form .v2-filter-panel { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 100 !important; min-width: 280px !important; max-width: 360px !important; background: #fff !important; border: 1.5px solid var(--primary) !important; border-radius: 10px !important; box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; padding: 0 !important; margin: 0 !important; transition: max-height .25s ease, opacity .2s ease, padding .2s ease; pointer-events: none; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-wrapper.is-open .v2-filter-panel { max-height: 240px !important; padding: 12px 14px !important; opacity: 1 !important; pointer-events: auto; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-wrapper.is-open .v2-filter-panel::before { content: ""; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: #fff; border-left: 1.5px solid var(--primary); border-top: 1.5px solid var(--primary); transform: rotate(45deg); } body.desktop_v2_content.is-browse #a_search_form .v2-filter-cluster { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-cluster select.inputbox { padding: 6px 10px !important; font-size: 13px !important; border-radius: 6px !important; border: 1.5px solid #d1d5db !important; background: #fff !important; min-width: 200px !important; flex: 1 1 200px !important; } /* ASC/DESC icon — small chip */ body.desktop_v2_content.is-browse #a_search_form .v2-filter-asc-desc { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 32px !important; padding: 0 !important; background: #f7f9fb !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; flex-shrink: 0 !important; } body.desktop_v2_content.is-browse #a_search_form .v2-filter-asc-desc img { max-width: 14px !important; max-height: 14px !important; display: block !important; } /* ════════════════════════════════════════════════════════════ §20 Browse cards — "Λεπτομέρειες" row at bottom-left (aligned vertically with Αγορά button on the right column) ════════════════════════════════════════════════════════════ */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row { grid-column: 1 !important; grid-row: 4 !important; /* same row as .browseAddToCartContainer */ align-self: end !important; /* anchor to bottom of row */ justify-self: start !important; margin: 0 !important; } /* "Λεπτομέρειες προϊόντος... →" chip — moved BELOW description (right after .v2-card-content), shorter height. */ body.desktop_v2_content.is-browse .v2-card-content > .v2-details-row, body.desktop_v2_content.is-browse .v2-card-content + .v2-details-row { margin: 6px 0 0 0 !important; } body.desktop_v2_content.is-browse .v2-details-row a { display: inline-block !important; padding: 3px 10px !important; /* was 6px 12px — shorter */ background: #fff !important; border: 1.5px solid var(--primary) !important; border-radius: 6px !important; color: var(--primary) !important; font-size: 11px !important; /* was 12px — slimmer */ font-weight: 700 !important; font-style: normal !important; text-decoration: none !important; line-height: 1.3 !important; /* tight height */ transition: background .15s ease, color .15s ease !important; } body.desktop_v2_content.is-browse .v2-details-row a::after { content: ' →'; font-weight: 900 !important; } body.desktop_v2_content.is-browse .v2-details-row a:hover { background: var(--primary) !important; color: #fff !important; } /* Description no longer needs the "Λεπτομέρειες" link (extracted by JS), but if any chip remains as fallback (un-extracted), reset its margin. */ body.desktop_v2_content.is-browse .browseProductDescription a { margin-top: 0 !important; } /* ════════════════════════════════════════════════════════════ §21 BROWSE CARD V4b — 2-column layout (image stays as direct child) Grid: 1fr | 200px LEFT col 1, rows 1/-2 = .v2-card-content (title, price+chips, desc, details) RIGHT col 2, row 1 = .browseProductImageContainer (NOT moved by JS) RIGHT col 2, row 2 = .v2-card-actions (atc + Γρήγορη Παραγγ.) ════════════════════════════════════════════════════════════ */ /* Override §16 grid — 2 columns, auto rows (card height fits content) */ body.desktop_v2_content.is-browse .browseProductContainer { grid-template-columns: minmax(0, 1fr) 200px !important; grid-template-rows: auto auto !important; column-gap: 18px !important; row-gap: 8px !important; align-items: stretch !important; } /* Image — col 2 row 1 (image is NEVER moved out of card by JS) */ body.desktop_v2_content.is-browse .browseProductContainer > .browseProductImageContainer { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; max-width: 200px !important; align-self: start !important; justify-self: center !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; overflow: visible !important; position: relative !important; margin-top: 0 !important; /* hot pill no longer above image */ } /* Content wrapper — col 1, row 1 only (actions bar takes row 2 full-width) */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-card-content { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; align-self: start !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Description: extra breathing room ABOVE (push it ~5px below the price+chips row) and shrink bottom margin so the bottom button bar sits closer. */ body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription { margin-top: 10px !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Extra breathing room between title and price+chips row */ body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle { margin-bottom: 4px !important; } body.desktop_v2_content.is-browse .v2-card-content .v2-price-info-row { margin-top: 4px !important; } /* Price + chips — GRID layout with FIXED price column so the chips («καρτούλα» διαθεσιμότητας + Κωδικός) ALWAYS start at the same horizontal offset regardless of whether the price block is single-line (μόνο €X) or multi-element (regular crossed-out + sale + -X% chip). */ body.desktop_v2_content.is-browse .v2-card-content .v2-price-info-row { display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important; align-items: center !important; gap: 16px !important; margin: 2px 0 0 !important; width: 100% !important; } body.desktop_v2_content.is-browse .v2-card-content .v2-price-info-row > .v2-price-row { grid-column: 1 !important; min-width: 0 !important; margin: 0 !important; /* Allow the price block to shrink/grow within its 220px slot without pushing the chips column. */ display: flex !important; align-items: center !important; flex-wrap: wrap !important; } body.desktop_v2_content.is-browse .v2-card-content .v2-price-info-row > .v2-card-chips { grid-column: 2 !important; margin: 0 !important; min-width: 0 !important; /* Optional right-side breathing room so chips don't glue to image */ padding-right: 8px !important; } /* Title — big, bold, primary blue */ body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle { grid-column: unset !important; grid-row: unset !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle { min-height: 41px !important; /* fits 2 lines @ 15px/1.35 */ max-height: 41px !important; /* clamp longer titles to 2 lines */ overflow: hidden !important; } body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle a { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle a { font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--primary) !important; text-decoration: none !important; display: -webkit-box !important; /* enables line-clamp ellipsis */ -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; max-width: 100% !important; word-wrap: break-word !important; } body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle a:hover, body.desktop_v2_content.is-browse .browseProductTitle a:hover { color: #ea580c !important; /* coral on hover */ text-decoration: underline !important; } /* Inline "Λεπτομέρειες προϊόντος…" link — appended at end of description. Plain text link styling, no box, no chip — flows with description. */ body.desktop_v2_content.is-browse .browseProductDescription a.v2-details-inline, body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription a.v2-details-inline { display: inline !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: var(--primary) !important; font-size: inherit !important; font-weight: 600 !important; font-style: normal !important; text-decoration: underline !important; line-height: inherit !important; } body.desktop_v2_content.is-browse .browseProductDescription a.v2-details-inline:hover { color: #ea580c !important; } /* Hide any leftover .v2-details-row block (pre-fix structure) */ body.desktop_v2_content.is-browse .v2-details-row { display: none !important; } /* Chips column — vertical stack (avail + Κωδικός on 2 lines beside price) */ body.desktop_v2_content.is-browse .v2-card-chips { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; margin: 0 !important; } /* Availability chip — small orange chip (matches mockup) */ body.desktop_v2_content.is-browse .v2-card-chips .availabilityBlock { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; align-items: center !important; gap: 4px !important; padding: 2px 8px !important; margin: 0 !important; background: #fff7ed !important; border: 1px solid #fed7aa !important; border-radius: 4px !important; color: #9a3412 !important; font-size: 11px !important; font-weight: 700 !important; text-align: left !important; box-shadow: none !important; flex-direction: row !important; } body.desktop_v2_content.is-browse .v2-card-chips .v2-avail-header { display: none !important; } body.desktop_v2_content.is-browse .v2-card-chips .v2-avail-body { font-size: 11px !important; font-weight: 700 !important; color: #9a3412 !important; font-style: normal !important; text-align: left !important; } body.desktop_v2_content.is-browse .v2-card-chips .availabilityBlock.is-oos { background: #fef2f2 !important; border-color: #ef4444 !important; color: #dc2626 !important; } body.desktop_v2_content.is-browse .v2-card-chips .availabilityBlock.is-oos .v2-avail-body { color: #dc2626 !important; font-weight: 800 !important; } /* Κωδικός chip */ body.desktop_v2_content.is-browse .v2-card-chips .v2-card-chip-code { display: inline-flex !important; align-items: center !important; padding: 2px 8px !important; background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; border-radius: 4px !important; color: #6b7280 !important; font-size: 11px !important; font-weight: 500 !important; font-family: ui-monospace, "SF Mono", Consolas, monospace !important; } body.desktop_v2_content.is-browse .v2-card-chip-code strong { color: #1f2937 !important; font-weight: 700 !important; margin-left: 3px !important; } /* Description — fill full width of left column (override legacy width=50%) */ body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription { grid-column: unset !important; grid-row: unset !important; margin: 4px 0 0 !important; font-size: 13px !important; line-height: 1.55 !important; color: #475569 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Inner wrappers VirtueMart adds with inline widths */ body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription > div, body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription > p, body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription > span { width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; display: block !important; } /* ── ROW 2 full-width actions bar — Λεπτομέρειες | Γρήγορη | Αγορά ── */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-card-actions { grid-column: 1 / -1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; align-items: stretch !important; gap: 8px !important; min-width: 0 !important; width: 100% !important; margin-top: 4px !important; padding-top: 4px !important; border-top: 1px solid #f1f5f9 !important; align-self: stretch !important; } /* Price + old-price + discount pill — old price above, then [price | -XX%] row */ body.desktop_v2_content.is-browse .v2-card-content .v2-price-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; flex: 0 0 auto !important; grid-column: unset !important; grid-row: unset !important; } body.desktop_v2_content.is-browse .v2-card-content .browsePriceContainer { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 10px !important; row-gap: 2px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } /* Big price — same primary blue as the title, never wraps */ body.desktop_v2_content.is-browse .v2-card-content .productPrice, body.desktop_v2_content.is-browse .v2-card-content #productPrice { font-size: 25px !important; font-weight: 800 !important; color: var(--primary) !important; line-height: 1 !important; letter-spacing: -0.5px !important; background: transparent !important; padding: 0 !important; margin: 0 !important; order: 2 !important; flex: 0 0 auto !important; white-space: nowrap !important; display: inline-block !important; } /* Old price — INLINE with new price + badge (same row) */ body.desktop_v2_content.is-browse .v2-card-content .product-Old-Price { font-size: 13px !important; color: #94a3b8 !important; text-decoration: line-through !important; font-weight: 500 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; width: auto !important; order: 1 !important; line-height: 1 !important; white-space: nowrap !important; display: inline-block !important; align-self: center !important; } /* Discount pill — TRUE CIRCLE badge with stacked "XX%" + "OFF" */ body.desktop_v2_content.is-browse .v2-card-content .v2-discount-pill, body.desktop_v2_content.is-browse .v2-card-content > .v2-price-info-row .v2-discount-pill, body.desktop_v2_content.is-browse .browsePriceContainer > .v2-discount-pill { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; align-self: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; box-sizing: border-box !important; margin: 0 0 0 8px !important; padding: 0 !important; line-height: 1 !important; border-radius: 50% !important; background: radial-gradient(circle at 30% 30%, #f87171 0%, #dc2626 60%, #b91c1c 100%) !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: 0 3px 10px rgba(220,38,38,.40), 0 0 0 1px rgba(220,38,38,.30) !important; text-transform: none !important; flex: 0 0 auto !important; order: 3 !important; } body.desktop_v2_content.is-browse .v2-discount-pill .v2-disc-num { font-size: 14px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.5px !important; } body.desktop_v2_content.is-browse .v2-discount-pill .v2-disc-off { font-size: 8px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.8px !important; margin-top: 2px !important; } /* Hide stray availability inside actions (it lives in chips now) */ body.desktop_v2_content.is-browse .v2-card-actions .availabilityBlock { display: none !important; } /* All buttons in actions: same width, same height, NO overflow, NO uppercase */ body.desktop_v2_content.is-browse .v2-card-actions, body.desktop_v2_content.is-browse .v2-card-actions * { box-sizing: border-box !important; } body.desktop_v2_content.is-browse .v2-card-actions input, body.desktop_v2_content.is-browse .v2-card-actions a, body.desktop_v2_content.is-browse .v2-card-actions button, body.desktop_v2_content.is-browse .v2-card-actions input.addtocart_button, body.desktop_v2_content.is-browse .v2-card-actions input.notify_button, body.desktop_v2_content.is-browse .v2-card-actions a.v2-options-btn, body.desktop_v2_content.is-browse .v2-card-actions a.v2-qo-btn, body.desktop_v2_content.is-browse .v2-card-actions .v2-details-row a { text-transform: none !important; letter-spacing: 0 !important; } body.desktop_v2_content.is-browse .v2-card-actions .browseAddToCartContainer { grid-column: unset !important; grid-row: unset !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; flex: 0 0 auto !important; } body.desktop_v2_content.is-browse .v2-card-actions form.addtocart_form { display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.desktop_v2_content.is-browse .v2-card-actions input.addtocart_button { width: 100% !important; max-width: 100% !important; height: 38px !important; padding: 0 10px 0 32px !important; margin: 0 !important; font-size: 12.5px !important; line-height: 38px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; position: relative !important; flex: 0 0 auto !important; } /* Cart icon — only for Αγορά forms (without the v2-notify-form flag) */ body.desktop_v2_content.is-browse .v2-card-actions form.addtocart_form:not(.v2-notify-form)::before { content: '🛒'; position: absolute !important; top: 50% !important; left: 6px !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.25) !important; border-radius: 4px !important; font-size: 12px !important; pointer-events: none !important; z-index: 2 !important; } /* Bell icon — for Ειδοποίηση form, sits close to the text (no box) */ body.desktop_v2_content.is-browse .v2-card-actions form.addtocart_form.v2-notify-form::before { content: '🔔'; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-58px, -50%) !important; width: auto !important; height: auto !important; background: transparent !important; border-radius: 0 !important; font-size: 14px !important; line-height: 1 !important; pointer-events: none !important; z-index: 2 !important; color: var(--primary) !important; } /* When notify-form is present, shift input text right so bell sits before it */ body.desktop_v2_content.is-browse #vmMainPage .v2-card-actions form.v2-notify-form input.notify_button { padding-left: 24px !important; padding-right: 0 !important; } /* Γρήγορη Παραγγελία (outlined) */ body.desktop_v2_content.is-browse .v2-card-actions .v2-qo-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; height: 38px !important; padding: 0 10px !important; margin: 0 !important; background: #fff !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; color: #475569 !important; font-size: 12.5px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease, color .15s ease !important; flex: 0 0 auto !important; } body.desktop_v2_content.is-browse .v2-card-actions .v2-qo-btn:hover { background: #f8fafc !important; border-color: var(--primary) !important; color: var(--primary) !important; } body.desktop_v2_content.is-browse .v2-card-actions .v2-qo-btn svg { flex-shrink: 0 !important; color: #f97316 !important; } body.desktop_v2_content.is-browse .v2-card-actions .v2-qo-btn:hover svg { color: var(--primary) !important; } /* Επιλογές — same dimensions as Αγορά */ body.desktop_v2_content.is-browse .v2-card-actions .v2-options-btn { width: 100% !important; max-width: 100% !important; height: 38px !important; padding: 0 10px !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; flex: 0 0 auto !important; } /* Ειδοποίηση — same outlined style as Γρήγορη Παραγγελία. The #vmMainPage prefix is REQUIRED here: a legacy rule `#vmMainPage form input[type="submit"]:not(.addtocart_button)` has higher specificity (ID > class) and would otherwise win the cascade. */ body.desktop_v2_content.is-browse #vmMainPage .v2-card-actions input.notify_button, body.desktop_v2_content.is-browse #vmMainPage .browseAddToCartContainer input.notify_button.notify_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 38px !important; padding: 0 10px !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1 !important; background-color: #ffffff !important; background-image: none !important; background: #ffffff !important; border: 1.5px solid #d1d5db !important; border-radius: 6px !important; color: #475569 !important; cursor: pointer !important; box-shadow: none !important; text-shadow: none !important; transition: background .15s ease, border-color .15s ease, color .15s ease !important; flex: 0 0 auto !important; white-space: nowrap !important; } body.desktop_v2_content.is-browse #vmMainPage .v2-card-actions input.notify_button:hover { background: #f8fafc !important; border-color: var(--primary) !important; color: var(--primary) !important; filter: none !important; } /* Λεπτομέρειες — first cell of the bottom 3-button bar */ body.desktop_v2_content.is-browse .v2-card-actions .v2-details-row { grid-column: unset !important; grid-row: unset !important; width: 100% !important; margin: 0 !important; padding: 0 !important; align-self: stretch !important; justify-self: stretch !important; } body.desktop_v2_content.is-browse .v2-card-actions .v2-details-row a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 38px !important; padding: 0 8px !important; font-size: 12.5px !important; margin: 0 !important; box-sizing: border-box !important; text-transform: none !important; } /* HOT PRICE pill — discreet, OUTSIDE + ABOVE the image */ body.desktop_v2_content.is-browse .browseProductContainer > .browseProductImageContainer { position: relative !important; overflow: visible !important; } body.desktop_v2_content.is-browse .browseProductImageContainer .v2-hot-pill { position: absolute !important; bottom: 100% !important; left: 50% !important; top: auto !important; right: auto !important; transform: translateX(-50%) !important; margin: 0 0 4px !important; padding: 1px 7px !important; background: #fef2f2 !important; color: #b91c1c !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; border: 1px solid #fecaca !important; border-radius: 3px !important; box-shadow: none !important; z-index: 5 !important; pointer-events: none !important; line-height: 1.4 !important; white-space: nowrap !important; text-transform: none !important; opacity: .92 !important; } /* Image hover zoom (subtle) */ body.desktop_v2_content.is-browse .browseProductImageContainer img.browseProductImage { transition: transform .25s ease !important; max-height: 180px !important; } body.desktop_v2_content.is-browse .browseProductContainer:hover .browseProductImageContainer img.browseProductImage { transform: scale(1.04) !important; } /* ════════════════════════════════════════════════════════════════════ §23 THANK-YOU / PAYMENT pages — ported 1:1 from mobile_v2 §19+§19b+§19c Selectors swapped: body.is-thankyou .mobile_content → body.desktop_v2_content.is-thankyou ════════════════════════════════════════════════════════════════════ */ /* §23a — H3 success heading (subtle polish only) */ body.desktop_v2_content.is-thankyou #vmMainPage > h3:first-of-type { font-size: 20px !important; font-weight: 800 !important; color: var(--primary) !important; line-height: 1.35 !important; margin: 8px 0 14px !important; padding: 16px 18px !important; background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%) !important; border-left: 4px solid #10b981 !important; border-radius: 8px !important; text-align: left !important; } body.desktop_v2_content.is-thankyou #vmMainPage > h3:first-of-type::before { content: "✓"; display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; background: #10b981; color: #fff; border-radius: 50%; font-size: 17px; font-weight: 900; margin-right: 10px; vertical-align: -4px; } /* Confirmation paragraph */ body.desktop_v2_content.is-thankyou #vmMainPage > p:first-of-type { font-size: 14px !important; line-height: 1.55 !important; color: #374151 !important; margin: 0 0 14px !important; padding: 14px 16px !important; background: #f9fafb !important; border: 1px solid #eef0f3 !important; border-radius: 10px !important; } body.desktop_v2_content.is-thankyou #vmMainPage > p:first-of-type img { display: none !important; } body.desktop_v2_content.is-thankyou #vmMainPage > p:first-of-type b, body.desktop_v2_content.is-thankyou #vmMainPage > p:first-of-type strong { color: var(--primary) !important; font-weight: 700 !important; } body.desktop_v2_content.is-thankyou #vmMainPage table { margin: 10px 0 !important; line-height: 1.6 !important; } body.desktop_v2_content.is-thankyou #vmMainPage td { line-height: 1.55 !important; } body.desktop_v2_content.is-thankyou #vmMainPage strong:not(:empty), body.desktop_v2_content.is-thankyou #vmMainPage b:not(:empty) { user-select: text !important; -webkit-user-select: text !important; } body.desktop_v2_content.is-thankyou #vmMainPage h2, body.desktop_v2_content.is-thankyou #vmMainPage h4 { font-size: 16px !important; font-weight: 800 !important; color: var(--primary) !important; margin: 18px 0 10px !important; line-height: 1.35 !important; text-align: left !important; } body.desktop_v2_content.is-thankyou #vmMainPage a[href*="order_details"], body.desktop_v2_content.is-thankyou #vmMainPage a[href*="account.order"] { display: inline-block !important; padding: 11px 22px !important; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important; margin: 8px 0 12px !important; box-shadow: 0 3px 8px rgba(37,136,166,.30) !important; } /* §23b — VivaPay/PayPal pending payment "urgent action" card */ body.desktop_v2_content .v2-pay-card { background: linear-gradient(180deg, #fff7ed 0%, #fef3c7 100%) !important; border: 2px solid #f59e0b !important; border-radius: 16px !important; padding: 22px 20px !important; /* Use individual margin properties — when the card is a (PayPal/VivaPay both wrap in a table), `margin: 18px auto` on a forced-block table can be ignored if the table has an HTML `align` attribute. Splitting into longhand + float:none + the attribute reset below makes the centering bulletproof. */ margin-top: 18px !important; margin-right: auto !important; margin-bottom: 18px !important; margin-left: auto !important; box-shadow: 0 6px 20px rgba(245, 158, 11, .15) !important; text-align: center !important; width: auto !important; max-width: 560px !important; display: block !important; float: none !important; } /* Reset legacy HTML `align` attribute on the wrapping table */ body.desktop_v2_content table.v2-pay-card[align], body.desktop_v2_content .v2-pay-card[align] { margin-left: auto !important; margin-right: auto !important; } /* Ensure the parent of .v2-pay-card centers it (some VM templates use

or text-align:left around the form table). */ body.desktop_v2_content #vmMainPage td:has(> .v2-pay-card), body.desktop_v2_content #vmMainPage div:has(> .v2-pay-card), body.desktop_v2_content #vmMainPage td:has(.v2-pay-card), body.desktop_v2_content #vmMainPage tr:has(.v2-pay-card), body.desktop_v2_content #vmMainPage table:has(.v2-pay-card), body.desktop_v2_content #vmMainPage div:has(.v2-pay-card) { text-align: center !important; width: auto !important; float: none !important; } /* Bulletproof: force margin:auto to win even when the wrapping element is the legacy outer

from checkout.thankyou.tpl.php. Higher specificity (4 class+id chains) than any inherited VM rule. */ body.desktop_v2_content.is-thankyou #vmMainPage .v2-pay-card, body.desktop_v2_content.is-account #vmMainPage .v2-pay-card, body.desktop_v2_content #vmMainPage table.v2-pay-card, body.desktop_v2_content #vmMainPage fieldset.v2-pay-card { margin-left: auto !important; margin-right: auto !important; max-width: 560px !important; width: auto !important; float: none !important; display: block !important; box-sizing: border-box !important; } /* When the v2-pay-card sits inside a legacy outer
from thankyou.tpl.php (line 49:
), that outer wrapper itself needs to be 100% so the inner card can use margin:auto inside a full-width container. Force any ancestor table between #vmMainPage and the card to take full width + neutral align. */ body.desktop_v2_content #vmMainPage table:has(> tbody > tr > td .v2-pay-card), body.desktop_v2_content #vmMainPage table:has(> tr > td .v2-pay-card), body.desktop_v2_content #vmMainPage td:has(> .v2-pay-card), body.desktop_v2_content #vmMainPage td:has(> table.v2-pay-card), body.desktop_v2_content #vmMainPage td:has(> fieldset.v2-pay-card) { width: 100% !important; text-align: center !important; padding: 0 !important; background: transparent !important; border: none !important; } body.desktop_v2_content .v2-pay-card td, body.desktop_v2_content .v2-pay-card tr, body.desktop_v2_content .v2-pay-card tbody, body.desktop_v2_content .v2-pay-card table { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; } body.desktop_v2_content .v2-pay-card fieldset, body.desktop_v2_content .v2-pay-card .fieldset { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } body.desktop_v2_content .v2-pay-card legend, body.desktop_v2_content .v2-pay-card .legend { background: transparent !important; color: #b45309 !important; border: none !important; padding: 0 !important; margin: 0 0 4px !important; width: 100% !important; display: block !important; text-align: center !important; } body.desktop_v2_content .v2-pay-card legend h1 { font-size: 22px !important; font-weight: 900 !important; color: #b45309 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; line-height: 1.25 !important; } body.desktop_v2_content .v2-pay-card legend h1 .akey, body.desktop_v2_content .v2-pay-card legend h1 span { color: #b45309 !important; } body.desktop_v2_content .v2-pay-card > strong, body.desktop_v2_content .v2-pay-card strong h1, body.desktop_v2_content .v2-pay-card td > strong { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: #78350f !important; margin: 4px 0 0 !important; text-align: center !important; line-height: 1.4 !important; } body.desktop_v2_content .v2-pay-warn { margin: 8px auto 12px !important; padding: 12px 14px !important; background: #fef3c7 !important; border: 1px solid #fbbf24 !important; border-radius: 10px !important; font-size: 13px !important; color: #78350f !important; text-align: center !important; font-weight: 600 !important; line-height: 1.45 !important; } body.desktop_v2_content .v2-pay-amount { margin: 14px auto !important; padding: 14px 22px !important; background: #fff !important; border: 2px dashed #f59e0b !important; border-radius: 14px !important; display: inline-block !important; text-align: center !important; min-width: 60% !important; } body.desktop_v2_content .v2-pay-amount-lab { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: #92400e !important; font-weight: 700 !important; } body.desktop_v2_content .v2-pay-amount-val { font-size: 32px !important; font-weight: 900 !important; color: #b45309 !important; line-height: 1.1 !important; margin-top: 4px !important; font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important; } body.desktop_v2_content .v2-pay-cta { display: block !important; width: 100% !important; padding: 16px 22px !important; margin: 14px 0 6px !important; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; color: #fff !important; border: none !important; border-radius: 14px !important; font-size: 17px !important; font-weight: 800 !important; box-shadow: 0 6px 16px rgba(234, 88, 12, .40) !important; cursor: pointer !important; line-height: 1.2 !important; } body.desktop_v2_content .v2-pay-cta:hover { filter: brightness(1.06) !important; } body.desktop_v2_content .v2-pay-cta:active { transform: scale(0.98) !important; box-shadow: 0 3px 8px rgba(234, 88, 12, .35) !important; } body.desktop_v2_content .v2-pay-secure { margin: 8px 0 4px !important; font-size: 12.5px !important; color: #15803d !important; text-align: center !important; font-weight: 700 !important; letter-spacing: .2px !important; } body.desktop_v2_content .v2-pay-card form[name="vivapayments"] { margin: 0 !important; padding: 0 !important; } body.desktop_v2_content .v2-pay-card form[name="vivapayments"] p { margin: 6px 0 0 !important; text-align: center !important; } body.desktop_v2_content .v2-pay-card form[name="vivapayments"] input[type="image"], body.desktop_v2_content .v2-pay-card form[action*="paypal.com"] input[type="image"] { max-width: 200px !important; height: auto !important; opacity: .85 !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 6px !important; background: #fff !important; } body.desktop_v2_content .v2-pay-card-title { margin: 0 0 8px !important; text-align: center !important; } body.desktop_v2_content .v2-pay-card-title h1 { font-size: 22px !important; font-weight: 900 !important; color: #b45309 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; line-height: 1.25 !important; } body.desktop_v2_content .v2-pay-card-sub { font-size: 14px !important; font-weight: 600 !important; color: #78350f !important; margin: 4px 0 0 !important; text-align: center !important; line-height: 1.4 !important; } /* §23c — Payment-RESULT pages (success/failure return URLs) */ body.desktop_v2_content[data-v2pay-fix] #vmMainPage img[src*="button_cancel"], body.desktop_v2_content[data-v2pay-fix] #vmMainPage img[src*="checked.png"], body.desktop_v2_content[data-v2pay-fix] #vmMainPage img[src*="success.png"], body.desktop_v2_content[data-v2pay-fix] #vmMainPage img[src*="failure.png"], body.desktop_v2_content[data-v2pay-fix] #vmMainPage img[src*="error.png"] { display: none !important; } body.desktop_v2_content[data-v2pay-fix] .v2-pay-legacy-hide { display: none !important; } body.desktop_v2_content .v2-pay-result { margin: 14px auto 18px !important; /* center horizontally */ padding: 28px 22px !important; border-radius: 18px !important; text-align: center !important; box-shadow: 0 8px 24px rgba(0,0,0,.06) !important; max-width: 640px !important; width: auto !important; } body.desktop_v2_content .v2-pay-result.is-success { background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%) !important; border: 2px solid #10b981 !important; } body.desktop_v2_content .v2-pay-result.is-failure { background: linear-gradient(180deg, #fef2f2 0%, #fecaca 100%) !important; border: 2px solid #ef4444 !important; } body.desktop_v2_content .v2-pay-result-icon { font-size: 64px !important; line-height: 1 !important; display: block !important; margin: 0 auto 10px !important; } body.desktop_v2_content .v2-pay-result.is-success .v2-pay-result-icon { color: #059669 !important; } body.desktop_v2_content .v2-pay-result.is-failure .v2-pay-result-icon { color: #dc2626 !important; } body.desktop_v2_content .v2-pay-result-title { font-size: 24px !important; font-weight: 900 !important; line-height: 1.25 !important; margin: 4px 0 6px !important; } body.desktop_v2_content .v2-pay-result.is-success .v2-pay-result-title { color: #047857 !important; } body.desktop_v2_content .v2-pay-result.is-failure .v2-pay-result-title { color: #b91c1c !important; } body.desktop_v2_content .v2-pay-result-sub { font-size: 14.5px !important; color: #374151 !important; margin: 0 auto 14px !important; max-width: 92% !important; line-height: 1.5 !important; } body.desktop_v2_content .v2-pay-result-orderbadge { display: inline-block !important; padding: 9px 16px !important; background: #fff !important; border-radius: 999px !important; margin: 6px 0 14px !important; font-size: 13.5px !important; font-weight: 700 !important; color: #1f2937 !important; box-shadow: 0 2px 6px rgba(0,0,0,.06) !important; } body.desktop_v2_content .v2-pay-result-orderbadge strong { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; color: #0f766e !important; margin-left: 4px !important; } body.desktop_v2_content .v2-pay-result.is-failure .v2-pay-result-orderbadge strong { color: #b91c1c !important; } body.desktop_v2_content .v2-pay-result-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 8px !important; align-items: stretch !important; justify-content: center !important; } body.desktop_v2_content .v2-pay-result-btn { display: inline-block !important; padding: 14px 22px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important; text-align: center !important; cursor: pointer !important; border: none !important; line-height: 1.2 !important; } body.desktop_v2_content .v2-pay-result-btn-primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(16, 185, 129, .35) !important; } body.desktop_v2_content .v2-pay-result.is-failure .v2-pay-result-btn-primary { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; box-shadow: 0 4px 12px rgba(234, 88, 12, .35) !important; } body.desktop_v2_content .v2-pay-result-btn-secondary { background: #fff !important; color: #374151 !important; border: 1px solid #d1d5db !important; } body.desktop_v2_content .v2-pay-result-eta { font-size: 12.5px !important; color: #6b7280 !important; margin-top: 14px !important; } body.desktop_v2_content .v2-pay-result-help { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px dashed #fca5a5 !important; font-size: 13px !important; color: #6b7280 !important; line-height: 1.7 !important; } body.desktop_v2_content .v2-pay-result-help strong { color: #b91c1c !important; font-weight: 700 !important; display: block !important; margin-bottom: 4px !important; } body.desktop_v2_content .v2-pay-result-help a { color: #b91c1c !important; text-decoration: none !important; font-weight: 700 !important; } body.desktop_v2_content .v2-pay-result-help-hours { color: #9ca3af !important; font-weight: 500 !important; } body.desktop_v2_content .v2-pay-result-help-line { display: block !important; margin-top: 4px !important; } body.desktop_v2_content .v2-pay-result-help br { display: none !important; } /* ════════════════════════════════════════════════════════════════════ §24 V6 SIMPLIFIED BROWSE CARDS — only "Λεπτομέρειες προϊόντος" CTA below the image. No Αγορά / Ειδοποίηση / Γρήγορη Παραγγελία / Επιλογές. ════════════════════════════════════════════════════════════════════ */ /* HIDE all action / cart elements completely */ body.desktop_v2_content.is-browse .browseProductContainer .browseAddToCartContainer, body.desktop_v2_content.is-browse .browseProductContainer > .v2-card-actions, body.desktop_v2_content.is-browse .browseProductContainer .v2-card-actions, body.desktop_v2_content.is-browse .browseProductContainer .v2-qo-btn, body.desktop_v2_content.is-browse .browseProductContainer .v2-options-btn, body.desktop_v2_content.is-browse .browseProductContainer input.addtocart_button, body.desktop_v2_content.is-browse .browseProductContainer input.notify_button { display: none !important; } /* Λεπτομέρειες button — placed in col 2 row 2 (BELOW the image). Default: WHITE outlined, primary-blue text. Hover/active: filled primary-blue with white text. */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row { grid-column: 2 !important; grid-row: 2 !important; margin: 6px 0 0 !important; padding: 0 !important; width: 100% !important; max-width: 200px !important; justify-self: center !important; align-self: start !important; text-align: center !important; } body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row a { display: block !important; width: 100% !important; height: 38px !important; line-height: 36px !important; padding: 0 12px !important; background: #fff !important; color: var(--primary) !important; border: 1.5px solid var(--primary) !important; border-radius: 8px !important; font-size: 12.5px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; text-align: center !important; cursor: pointer !important; box-shadow: none !important; transition: background .15s ease, color .15s ease, box-shadow .15s ease !important; box-sizing: border-box !important; font-style: normal !important; } body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row a:hover, body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row a:focus { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%) !important; color: #fff !important; border-color: var(--primary-dk) !important; box-shadow: 0 3px 10px rgba(37,136,166,.28) !important; filter: none !important; } body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row a:active { transform: scale(0.97) !important; background: var(--primary-dk) !important; color: #fff !important; } /* The arrow (::after ' →') was already injected by §20 — keep it visible */ body.desktop_v2_content.is-browse .browseProductContainer > .v2-details-row a::after { content: ' →' !important; font-weight: 800 !important; } /* Tighten the card — reduce content gaps so description aligns with the bottom of the Λεπτομέρειες button. */ body.desktop_v2_content.is-browse .browseProductContainer { row-gap: 4px !important; padding: 12px 14px !important; } body.desktop_v2_content.is-browse .browseProductContainer > .v2-card-content { grid-row: 1 / span 2 !important; gap: 6px !important; } body.desktop_v2_content.is-browse .v2-card-content .browseProductTitle { margin-bottom: 2px !important; } body.desktop_v2_content.is-browse .v2-card-content .v2-price-info-row { margin-top: 10px !important; /* gap below title */ } body.desktop_v2_content.is-browse .v2-card-content .browseProductDescription { margin: 10px 0 0 !important; /* gap below price+chips row */ font-size: 12.5px !important; line-height: 1.5 !important; min-height: 95px !important; /* ~5 lines × 18.75px → cards equal height */ } /* Card width matches toolbar width (filters/pagination above). Default Shape5 wraps each card in a class-less
with margin-right:10px, leaving the card 13px short of the surrounding toolbar. Remove wrapper margins/padding and force the card to fill 100% of the row. */ body.desktop_v2_content.is-browse .browse_1 > div { margin-right: 0 !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } body.desktop_v2_content.is-browse .browse_1 > div > .browseProductContainer { width: 100% !important; box-sizing: border-box !important; padding-bottom: 7px !important; /* shorter card by 5px from bottom */ } /* Image: 200px. Hot pill no longer above image so margin-top=0. The legacy CSS has `.browseProductImageContainer a img { width: 200px !important }` that beats the V2 max-width — we MUST override `width` explicitly. */ body.desktop_v2_content.is-browse .browseProductContainer > .browseProductImageContainer { margin-top: 0 !important; max-width: 200px !important; } body.desktop_v2_content.is-browse .browseProductImageContainer img.browseProductImage, body.desktop_v2_content.is-browse .browseProductImageContainer a img { width: auto !important; max-width: 100% !important; max-height: 200px !important; height: auto !important; } /* The image still stays at col 2 row 1 (auto-positioned) — no change needed. */ /* ============================================================================ * §60 — Promo banner (per-product offer) — DESKTOP VERSION * * The promo_banner.js (shared with mobile) injects countdown numbers; the * banner HTML lives in a Joomla module at position mobile_product_offer_{pid} * which the flypage_v2_desktop.php renderer drops into
. * * IMPORTANT: this block intentionally DUPLICATES the styling that's in * features/promo_banner/promo_banner.css (mobile version). We do NOT share * the CSS file because the mobile maintainer must be free to tweak it * without risking desktop regressions. The JS is shared (DOM contract is * stable). If the visual contract changes (new sub-element class), update * both sides. * * Selectors prefixed with body.desktop_v2_content to: * 1. Match only when our chrome is active (DEV or STABLE — both set the * desktop_v2_content body class via JS in desktop_v2.js §1) * 2. Win specificity (0,2,1) against the admin's per-banner inline override * `.v2-promo-banner[data-product="X"]` (specificity 0,2,0). That way * our desktop uplift sizes apply regardless of the admin's mobile-tuned * variable values. * ============================================================================ */ /* Banner = 2-column grid: SPECIAL OFFER badge image (left, 180px) + content (right, all centered: tag / title / countdown / until). Compact spacing — row-gap intentionally 0 (gap: 0 24px), rows separated by per-row margin-top. Image is rendered via ::before with background-image at /gk/special-offer.png so no PHP/JS changes are needed in the offer module HTML — pure CSS. */ body.desktop_v2_content .v2-promo-banner { position: relative; background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffb627 100%); background-size: 200% 200%; animation: v2promoShift 4s ease infinite; color: #fff; display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 0 24px; text-align: center; padding: 10px 18px; border-radius: 12px; margin: 4px 0 6px; line-height: 1; box-shadow: 0 4px 14px rgba(255, 107, 53, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: visible; } @keyframes v2promoShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* SPECIAL OFFER badge (image at /gk/special-offer.png, 392x252 natural). Unsharp filter v2-promo-sharp (kernel center 2.5, sums to 1.0) defined in flypage_v2_desktop.php's inline SVG block, chained with a strong drop-shadow for prominence on the gradient bg. */ body.desktop_v2_content .v2-promo-banner::before { content: ''; grid-column: 1 / 2; grid-row: 1 / 5; align-self: center; width: 180px; height: 116px; background: url('/gk/special-offer.png') center / contain no-repeat; filter: url(#v2-promo-sharp) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); will-change: filter; } body.desktop_v2_content .v2-promo-banner .v2-promo-tag { grid-column: 2 / 3; grid-row: 1; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; line-height: 1; opacity: 0.95; margin: 0; } body.desktop_v2_content .v2-promo-banner .v2-promo-title { grid-column: 2 / 3; grid-row: 2; font-size: 18px; font-weight: 900; letter-spacing: 1px; line-height: 1.15; margin: 8px 0 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } body.desktop_v2_content .v2-promo-banner .v2-promo-countdown { grid-column: 2 / 3; grid-row: 3; display: flex; justify-content: center; gap: 10px; margin: 10px 0 0; } body.desktop_v2_content .v2-promo-banner .v2-promo-unit { background: rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; padding: 7px 14px; min-width: 60px; line-height: 1; } body.desktop_v2_content .v2-promo-banner .v2-promo-unit span { display: block; font-size: 26px; font-weight: 900; line-height: 1; } body.desktop_v2_content .v2-promo-banner .v2-promo-unit label { display: block; font-size: 9px; letter-spacing: 1.2px; line-height: 1; margin-top: 2px; opacity: 0.85; } body.desktop_v2_content .v2-promo-banner .v2-promo-until { grid-column: 2 / 3; grid-row: 4; font-size: 10.5px; font-weight: 600; line-height: 1.25; margin: 8px 0 0; opacity: 0.95; } body.desktop_v2_content .v2-promo-banner .v2-promo-until strong { font-weight: 800; } body.desktop_v2_content .v2-promo-banner.v2-promo-urgent { background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%); background-size: 200% 200%; animation: v2promoShift 2.5s ease infinite; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; }