/* ═══════════════════════════════════════════════════════════════════════ pretix-modern-theme — Design System Applied AFTER pretix's own CSS to cleanly override Bootstrap 3 visuals. All event colours come from --pretix-brand-* (set by Pretix theme engine). ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ────────────────────────────────────────────────────────── */ :root { --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e2e8f0; --text: #0f172a; --text-2: #475569; --text-3: #94a3b8; --primary: var(--pretix-brand-primary, #6366f1); --primary-dk: var(--pretix-brand-primary-darken-10, #4f46e5); --success: #16a34a; --danger: #dc2626; --warning: #d97706; --info: #2563eb; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --sh-sm: 0 1px 2px rgba(0,0,0,.05); --sh: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); --sh-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06); --sh-lg: 0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05); --nav-h: 64px; --ease: cubic-bezier(.4,0,.2,1); } [data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --surface-2: #334155; --border: #334155; --text: #f1f5f9; --text-2: #94a3b8; --text-3: #475569; --sh-sm: 0 1px 2px rgba(0,0,0,.4); --sh: 0 1px 3px rgba(0,0,0,.5); --sh-md: 0 4px 6px rgba(0,0,0,.5); --sh-lg: 0 10px 15px rgba(0,0,0,.5); } /* ── 2. GLOBAL RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; /* Applied by inline script in before render to avoid FOUC */ } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.65; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; padding-top: var(--nav-h); /* offset for fixed navbar */ } h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.25; color: var(--text); margin-top: 0; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3,.h3 { font-size: 1.2rem; } h4,.h4 { font-size: 1rem; } p { margin-bottom: 1rem; } small,.small { font-size: .85em; } a { color: var(--primary); text-decoration: none; transition: opacity 150ms var(--ease); } a:hover { opacity: .82; text-decoration: underline; } code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; font-size: .88em; color: var(--text); } /* ── 3. NAVBAR (fixed top) ────────────────────────────────────────────── */ .mt-header { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); box-shadow: var(--sh-sm); transition: background 200ms var(--ease); } [data-theme="dark"] .mt-header { background: rgba(15,23,42,.88); } .mt-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 16px; } .mt-brand { font-size: 1.1rem; font-weight: 700; color: var(--text) !important; text-decoration: none !important; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .mt-brand img { height: 36px; width: auto; } .mt-nav-spacer { flex: 1; } /* Locale nav in header */ .mt-nav-locales { display: flex; gap: 6px; align-items: center; } .mt-nav-locales a { font-size: .82rem; font-weight: 500; color: var(--text-2) !important; padding: 4px 10px; border-radius: 6px; transition: all 150ms var(--ease); } .mt-nav-locales a.active, .mt-nav-locales a:hover { background: var(--primary); color: #fff !important; text-decoration: none !important; } /* Login/account link */ .mt-nav-account a { font-size: .88rem; font-weight: 500; color: var(--text-2) !important; padding: 6px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--border); transition: all 150ms var(--ease); } .mt-nav-account a:hover { border-color: var(--primary); color: var(--primary) !important; text-decoration: none !important; } /* Dark mode toggle */ .mt-theme-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 150ms var(--ease); flex-shrink: 0; } .mt-theme-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .mt-theme-btn svg { width: 18px; height: 18px; pointer-events: none; } /* ── 4. ABOVE BLOCK (banners, locale bar) ─────────────────────────────── */ .mt-above { background: var(--surface); border-bottom: 1px solid var(--border); } /* Offline / unpublished banner */ .offline-banner { background: var(--warning); color: #fff; text-align: center; padding: 8px 20px; font-size: .9rem; font-weight: 600; } .offline-banner a { color: #fff; text-decoration: underline; } /* "Header links" strip (organizer back link etc.) */ .page-header-links { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--text-2); } .page-header-links .locales ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; } .page-header-links .locales a { padding: 3px 8px; border-radius: 6px; font-size: .82rem; font-weight: 500; color: var(--text-2); } .page-header-links .locales a.active { background: var(--primary); color: #fff; } /* ── 5. HERO ──────────────────────────────────────────────────────────── */ .mt-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dk) 100%); color: #fff; padding: 56px 24px 48px; text-align: center; position: relative; overflow: hidden; } /* Subtle decorative circle */ .mt-hero::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.06); top: -180px; right: -120px; pointer-events: none; } .mt-hero-inner { max-width: 760px; margin: 0 auto; position: relative; } .mt-hero-logo { max-height: 80px; width: auto; margin-bottom: 24px; border-radius: var(--r-sm); } .mt-hero-title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.15; } .mt-hero-subtitle { font-size: 1.05rem; color: rgba(255,255,255,.82); margin: 0; } /* Large logo mode (logo replaces text hero) */ .mt-hero.mt-hero-logo-large { padding: 0; background: var(--surface); } .mt-hero.mt-hero-logo-large img.mt-hero-logo-full { width: 100%; max-height: 400px; object-fit: cover; display: block; } /* ── 6. LAYOUT ────────────────────────────────────────────────────────── */ .mt-wrapper { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; } .mt-main > *:not(script) { animation: mt-fadein .3s var(--ease) both; } @keyframes mt-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .mt-fadein { opacity: 0; transform: translateY(16px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .mt-fadein.mt-visible { opacity: 1; transform: none; } /* ── 7. CARDS (Bootstrap panel override) ─────────────────────────────── */ .panel { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; box-shadow: var(--sh) !important; margin-bottom: 24px; overflow: hidden; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); } .panel-heading { background: var(--surface-2) !important; border-bottom: 1px solid var(--border) !important; padding: 16px 24px 14px !important; } .panel-title { font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0; } .panel-body { padding: 22px 24px !important; } .panel-primary > .panel-heading { background: var(--primary) !important; border-color: transparent !important; } .panel-primary > .panel-heading .panel-title, .panel-primary > .panel-heading h3, .panel-primary > .panel-heading * { color: #fff !important; } /* Panel-heading-flex (checkout_confirm) */ .panel-heading-flex { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap; } .panel-heading-flex-gap { flex: 1; } /* Details/summary accordion panels */ details.panel > summary.panel-heading { cursor: pointer; list-style: none; user-select: none; } details.panel > summary.panel-heading::-webkit-details-marker { display: none; } details.panel > summary.panel-heading::marker { display: none; } /* ── 8. PRODUCT GRID ──────────────────────────────────────────────────── */ .item-category { margin-bottom: 36px; } .item-category > h3, .item-category > .h3 { font-size: 1.15rem; font-weight: 700; padding-bottom: 12px; border-bottom: 2px solid var(--border); margin-bottom: 20px; color: var(--text); } /* Simple products — card style */ article.product-row.simple, article.item-with-variations { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-sm); margin-bottom: 16px; padding: 20px 24px; overflow: hidden; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease); } article.product-row.simple:hover, article.item-with-variations:hover { box-shadow: var(--sh-md); transform: translateY(-2px); border-color: var(--primary); } /* Bootstrap .row inside product cards — strip negative margin */ article.product-row.row { margin-left: 0 !important; margin-right: 0 !important; } article.item-with-variations .product-row.headline.row { margin-left: 0 !important; margin-right: 0 !important; } /* Product image thumbnail */ .productpicture { float: left; margin-right: 14px; margin-bottom: 6px; } .productpicture img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); } /* Price */ .product-row .price, .col-md-2.price { font-size: 1.15rem; font-weight: 800; color: var(--primary); white-space: nowrap; } del { color: var(--text-3); font-weight: 400; } ins { text-decoration: none; color: var(--danger); font-weight: 700; } /* Variation rows inside expanded items */ .variations { border-top: 1px solid var(--border); margin-top: 16px; } article.product-row.variation { margin-left: 0 !important; margin-right: 0 !important; padding: 14px 0; border-bottom: 1px solid var(--border); overflow: hidden; } article.product-row.variation:last-child { border-bottom: none; } /* Availability states */ .availability-box.available { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .gone { color: var(--danger); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .unavailable { color: var(--warning); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } /* In-cart bubble */ .textbubble-success { display: inline-flex; align-items: center; gap: 5px; background: #dcfce7; color: #166534; font-size: .75rem; font-weight: 700; border-radius: 20px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; } [data-theme="dark"] .textbubble-success { background: #14532d; color: #86efac; } /* Add to cart CTA */ #btn-add-to-cart { font-size: 1.05rem !important; padding: 14px 36px !important; } /* ── 9. QUANTITY STEPPER ──────────────────────────────────────────────── */ .input-item-count-group { display: inline-flex !important; align-items: stretch; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-sm); min-width: 120px; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); padding: 0; margin: 0; } .input-item-count-group.mt-has-value { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); } .input-item-count-dec, .input-item-count-inc { flex: 0 0 40px; width: 40px !important; height: 44px !important; padding: 0 !important; font-size: 1.3rem !important; font-weight: 700 !important; background: var(--surface-2) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: var(--text-2) !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms var(--ease), color 150ms var(--ease) !important; } .input-item-count-dec { border-right: 2px solid var(--border) !important; } .input-item-count-inc { border-left: 2px solid var(--border) !important; } .input-item-count-dec:hover, .input-item-count-inc:hover { background: var(--primary) !important; color: #fff !important; transform: none !important; } .input-item-count { flex: 1; width: 44px !important; height: 44px !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-size: 1rem !important; font-weight: 700 !important; background: var(--surface) !important; color: var(--text) !important; padding: 0 4px !important; -moz-appearance: textfield; } .input-item-count::-webkit-inner-spin-button, .input-item-count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .input-item-count:focus { outline: none; } /* Select/checkbox button */ .btn-checkbox { border: 2px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; padding: 10px 18px !important; position: relative; } .btn-checkbox:has(input:checked) { border-color: var(--primary) !important; background: var(--primary) !important; color: #fff !important; } .btn-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } /* ── 10. BUTTONS ──────────────────────────────────────────────────────── */ .btn { border-radius: var(--r-sm) !important; font-weight: 600 !important; padding: 10px 22px !important; font-size: .95rem !important; border: none !important; transition: all 150ms var(--ease) !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; text-decoration: none !important; white-space: nowrap; user-select: none; } .btn-primary { background: var(--primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.15) !important; } .btn-primary:hover, .btn-primary:focus { background: var(--primary-dk) !important; box-shadow: 0 6px 18px rgba(0,0,0,.22) !important; transform: translateY(-2px); color: #fff !important; } .btn-primary:active { transform: translateY(0); } .btn-default { background: var(--surface) !important; color: var(--text) !important; border: 1.5px solid var(--border) !important; box-shadow: var(--sh-sm) !important; } .btn-default:hover, .btn-default:focus { background: var(--surface-2) !important; border-color: var(--primary) !important; color: var(--primary) !important; transform: translateY(-1px); text-decoration: none !important; } .btn-default:active { transform: translateY(0); } .btn-danger { background: var(--danger) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(220,38,38,.2) !important; } .btn-danger:hover { background: #b91c1c !important; transform: translateY(-1px); } .btn-success { background: var(--success) !important; color: #fff !important; } .btn-success:hover { filter: brightness(.9); transform: translateY(-1px); } .btn-link { background: transparent !important; color: var(--primary) !important; box-shadow: none !important; border: none !important; padding: 4px 0 !important; } .btn-link:hover { text-decoration: underline !important; transform: none !important; } .btn-lg { padding: 13px 32px !important; font-size: 1.02rem !important; border-radius: 10px !important; } .btn-sm { padding: 6px 14px !important; font-size: .84rem !important; } .btn-xs { padding: 3px 10px !important; font-size: .78rem !important; } .btn-block { width: 100% !important; } .btn[disabled], .btn.disabled { opacity: .48 !important; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* Checkout navigation buttons */ .checkout-button-row { margin-top: 28px; } /* ── 11. FORMS ────────────────────────────────────────────────────────── */ .form-control { background: var(--surface) !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-sm) !important; color: var(--text) !important; font-size: .95rem !important; padding: 10px 14px !important; height: auto !important; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease) !important; width: 100%; } .form-control:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.14) !important; outline: none !important; } .form-control::placeholder { color: var(--text-3); } select.form-control { appearance: none !important; -webkit-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2394a3b8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; } .control-label, .form-group > label { font-weight: 600; font-size: .85rem; color: var(--text-2); margin-bottom: 6px; display: block; } .form-group { margin-bottom: 20px; } input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; } .has-error .form-control { border-color: var(--danger) !important; } .has-error .help-block, .has-error .control-label { color: var(--danger) !important; } .help-block { font-size: .82rem; color: var(--text-2); margin-top: 4px; } /* Input groups */ .input-group .form-control:not(:last-child) { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; } .input-group .form-control:not(:first-child) { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; } .input-group-btn:last-child > .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; } .input-group-btn:first-child > .btn { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; } .input-group-addon { background: var(--surface-2) !important; border: 1.5px solid var(--border) !important; color: var(--text-2); font-size: .92rem; padding: 0 14px; } .input-group-price .input-group-addon { border-right: none !important; } /* Free-price input height */ .input-item-price.form-control { height: 44px !important; } /* Payment accordion radios */ .accordion-panel .panel-heading { cursor: pointer; } .accordion-panel input[type="radio"] { margin-right: 10px; } .accordion-label-text { font-weight: 600; font-size: .95rem; } /* ── 12. ALERTS ───────────────────────────────────────────────────────── */ .alert { border: none !important; border-radius: var(--r-sm) !important; padding: 13px 18px 13px 14px !important; font-size: .93rem; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; } .alert > p { margin: 0; flex: 1; } .alert > p + p { margin-top: 6px; } .alert .sr-only { position: absolute; } .alert-info { background: #dbeafe !important; color: #1e40af !important; } .alert-success { background: #dcfce7 !important; color: #166534 !important; } .alert-warning { background: #fef3c7 !important; color: #92400e !important; } .alert-danger { background: #fee2e2 !important; color: #991b1b !important; } [data-theme="dark"] .alert-info { background: #1e3a5f !important; color: #93c5fd !important; } [data-theme="dark"] .alert-success { background: #14532d !important; color: #86efac !important; } [data-theme="dark"] .alert-warning { background: #78350f !important; color: #fcd34d !important; } [data-theme="dark"] .alert-danger { background: #7f1d1d !important; color: #fca5a5 !important; } /* Test mode stripe */ .alert-testmode { background: repeating-linear-gradient(45deg,#fbbf24,#fbbf24 12px,#fef3c7 12px,#fef3c7 24px) !important; color: #78350f !important; font-weight: 600; } /* ── 13. CART ─────────────────────────────────────────────────────────── */ .cart.panel > .panel-heading { background: var(--primary) !important; } .cart.panel > .panel-heading * { color: #fff !important; } .cart-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); } .cart-row:last-child { border-bottom: none; } .cart-row .price { font-weight: 800; color: var(--primary); white-space: nowrap; margin-left: auto; } .cart-row.total { border-top: 2px solid var(--border) !important; border-bottom: none; padding-top: 16px; font-size: 1.05rem; } #cart-deadline-short { font-size: .88rem; background: rgba(255,255,255,.18); padding: 2px 10px; border-radius: 20px; } /* Aside cart (checkout pages) */ .mt-checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; } .mt-checkout-aside { position: sticky; top: calc(var(--nav-h) + 20px); } /* ── 14. CHECKOUT STEPS ───────────────────────────────────────────────── */ .checkout-flow { list-style: none; margin: 0 0 36px; padding: 0; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-sm); overflow: hidden; } .checkout-flow .checkout-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: .84rem; font-weight: 600; color: var(--text-3); border-right: 1px solid var(--border); transition: background 200ms var(--ease); } .checkout-flow .checkout-step:last-child { border-right: none; } .checkout-flow .checkout-step a { display: contents; text-decoration: none; color: inherit; } .checkout-step-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; transition: background 200ms var(--ease), color 200ms var(--ease); } .checkout-step.step-done { color: var(--success); } .checkout-step.step-done .checkout-step-icon { background: #dcfce7; color: var(--success); } .checkout-step.step-current { color: var(--text); background: var(--surface-2); } .checkout-step.step-current .checkout-step-icon { background: var(--primary); color: #fff; } /* ── 15. ORDER / THANK YOU ────────────────────────────────────────────── */ .mt-thank-you { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 56px 32px 48px; text-align: center; margin-bottom: 36px; } .mt-thank-you .mt-success-icon { width: 72px; height: 72px; border-radius: 50%; background: #dcfce7; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .mt-thank-you .mt-success-icon .fa { font-size: 2rem; color: var(--success); } .mt-thank-you h2 { font-size: 2.2rem; margin-bottom: 12px; } .mt-thank-you .lead { color: var(--text-2); font-size: 1.05rem; max-width: 560px; margin: 0 auto 20px; } [data-theme="dark"] .mt-thank-you .mt-success-icon { background: #14532d; } /* ── 16. LABELS / BADGES ──────────────────────────────────────────────── */ .label { border-radius: 6px !important; padding: 3px 10px !important; font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 4px; } .label-success { background: var(--success) !important; color: #fff !important; } .label-warning { background: var(--warning) !important; color: #fff !important; } .label-danger { background: var(--danger) !important; color: #fff !important; } .label-info { background: var(--info) !important; color: #fff !important; } .label-default { background: var(--text-2) !important; color: #fff !important; } /* ── 17. LIST GROUPS ──────────────────────────────────────────────────── */ .list-group { border-radius: 0 !important; overflow: hidden; } .list-group-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text); padding: 16px 22px !important; transition: background 150ms var(--ease); } .list-group-item:first-child { border-top: none !important; } .list-group-item:last-child { border-bottom: none !important; } /* ── 18. DL HORIZONTAL ────────────────────────────────────────────────── */ .dl-horizontal dt { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); float: left; clear: left; width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; margin-bottom: 10px; color: var(--text); } /* ── 19. TABLES ───────────────────────────────────────────────────────── */ .table { width: 100%; border-collapse: collapse; background: var(--surface); } .table th { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); background: var(--surface-2); border-bottom: 2px solid var(--border) !important; padding: 12px 14px; } .table td { padding: 13px 14px; border-bottom: 1px solid var(--border) !important; color: var(--text); vertical-align: middle; } .table tr:last-child td { border-bottom: none !important; } /* ── 20. FOOTER ───────────────────────────────────────────────────────── */ .mt-footer { border-top: 1px solid var(--border); margin-top: 64px; padding-top: 32px; padding-bottom: 24px; } .mt-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .mt-footer-links li { display: flex; align-items: center; } .mt-footer-links li + li::before { content: '·'; color: var(--text-3); margin: 0 12px; } .mt-footer-links li:last-child { margin-left: auto; } .mt-footer-links a, .mt-footer-links button.btn-link { color: var(--text-2) !important; font-size: .86rem; font-weight: 500; padding: 4px 0 !important; } .mt-footer-links a:hover, .mt-footer-links button.btn-link:hover { color: var(--primary) !important; text-decoration: underline !important; } .site-notice-top, .site-notice-bottom { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 18px; margin-bottom: 18px; font-size: .93rem; } /* ── 21. MISC ─────────────────────────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; } .text-muted { color: var(--text-2) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } /* Gift card code display */ .refund-gift-card-code { font-family: 'Courier New', monospace; font-size: 1.4rem; font-weight: 700; letter-spacing: .1em; color: var(--primary); text-align: center; margin: 14px 0; } /* Print button */ .print-this-page { float: right; } /* Voucher / resend link sections */ .front-page { margin-top: 32px; } .front-page > h2.h3 { font-size: 1.1rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--border); } /* ── 22. RESPONSIVE ───────────────────────────────────────────────────── */ @media (max-width: 991px) { .mt-checkout-layout { grid-template-columns: 1fr; } .mt-checkout-aside { position: static; } } @media (max-width: 767px) { .mt-wrapper { padding: 24px 14px 60px; } .mt-hero { padding: 36px 16px 32px; } .mt-hero-title { font-size: 1.6rem; } .panel-body { padding: 16px 16px !important; } .panel-heading { padding: 14px 16px !important; } .btn-lg { padding: 12px 22px !important; } .checkout-flow { flex-direction: column; border-radius: var(--r-sm); } .checkout-flow .checkout-step { border-right: none; border-bottom: 1px solid var(--border); } .checkout-flow .checkout-step:last-child { border-bottom: none; } .mt-thank-you { padding: 36px 20px 32px; } .mt-thank-you h2 { font-size: 1.7rem; } .mt-header-inner { padding: 0 14px; gap: 10px; } .dl-horizontal dt, .dl-horizontal dd { float: none; width: 100%; margin-left: 0; } .dl-horizontal dd { margin-bottom: 6px; } .mt-footer-links { flex-direction: column; align-items: flex-start; gap: 0; } .mt-footer-links li + li::before { display: none; } .mt-footer-links li { padding: 5px 0; } .mt-footer-links li:last-child { margin-left: 0; margin-top: 14px; } article.product-row.simple, article.item-with-variations { padding: 14px 16px; } } /* ── 23. DARK SCROLLBARS ──────────────────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }