/** * Adata_CountryDelivery – Country Delivery Table widget * * Deliberately plain CSS rather than Tailwind utilities. * * A module template lives outside the Hyvä theme's `tailwind.config.js` * `content` paths, so any utility class used only here is purged from the * compiled stylesheet and silently does nothing. Shipping the styles with the * module means the widget renders correctly on a stock theme with no build * step and no theme config edit. * * Everything is scoped under .adata-cd so it cannot leak into the theme. * Colours are exposed as custom properties on .adata-cd — override them in * your theme to re-skin without touching this file. */ /* * Declared on :root as well as .adata-cd. The enquiry dialog is reparented to * when it opens, so it is no longer a descendant of .adata-cd and would * otherwise lose every custom property — rendering with no accent colour, no * borders and black-on-black text. */ :root { --adata-cd-accent: #1da3dd; --adata-cd-accent-dark: #178bbd; --adata-cd-yes-bg: #e7f9ef; --adata-cd-yes-text: #17a34a; --adata-cd-no-bg: #fdeaea; --adata-cd-no-text: #e35555; --adata-cd-maybe-bg: #fdf3dd; --adata-cd-maybe-text: #b07813; --adata-cd-border: #f0f2f5; --adata-cd-field-border: #dfe3e8; --adata-cd-heading: #000000; --adata-cd-text: #1f2a37; --adata-cd-muted: #7c8794; } .adata-cd { --adata-cd-accent: #1da3dd; --adata-cd-accent-dark: #178bbd; --adata-cd-yes-bg: #e7f9ef; --adata-cd-yes-text: #17a34a; --adata-cd-no-bg: #fdeaea; --adata-cd-no-text: #e35555; --adata-cd-maybe-bg: #fdf3dd; --adata-cd-maybe-text: #b07813; --adata-cd-border: #f0f2f5; --adata-cd-field-border: #dfe3e8; --adata-cd-heading: #000000; --adata-cd-text: #1f2a37; --adata-cd-muted: #7c8794; /* * Keeps a sticky site header from covering the search box when pagination * scrolls here. Raise it in your theme to match your header's height: * .adata-cd { --adata-cd-scroll-offset: 90px; } */ --adata-cd-scroll-offset: 1.5rem; color: var(--adata-cd-text); font-size: 16px; line-height: 1.5; scroll-margin-top: var(--adata-cd-scroll-offset); } .adata-cd *, .adata-cd *::before, .adata-cd *::after, .adata-cd__modal, .adata-cd__modal *, .adata-cd__modal *::before, .adata-cd__modal *::after { box-sizing: border-box; } /* * Blanket reset for text-level elements inside the widget. * * Magento themes routinely border span, p, svg and img inside table cells, * which has now surfaced four separate times here — on the header controls, * the courier logos, the enquiry button, and most recently as black rectangles * around every country name. Patching each component as it appeared was not * holding, so the reset is declared once, up front. * * Deliberately limited to elements that never carry a border in this design. * Structural elements — the table wrapper, pills, inputs, buttons, the card, * the dropdown panel, row separators — are untouched and keep their borders. * Only the box-drawing properties are reset, so backgrounds (the status badge) * and colours survive. * * !important is required: these theme rules load after this stylesheet and * out-specify a class selector, so a normal declaration cannot win. */ .adata-cd span, .adata-cd p, .adata-cd h1, .adata-cd h2, .adata-cd h3, .adata-cd svg, .adata-cd img, .adata-cd label, .adata-cd__modal span, .adata-cd__modal p, .adata-cd__modal h2, .adata-cd__modal h3, .adata-cd__modal svg, .adata-cd__modal img, .adata-cd__modal label { border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; text-shadow: none !important; } /* Exempt: the flag's hairline is the one img border the widget draws. The modal selector is needed too, since the dialog is reparented to . */ .adata-cd img.adata-cd__flag, .adata-cd__modal img.adata-cd__flag { border: 1px solid rgba(16, 24, 40, 0.12) !important; } .adata-cd__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Heading ─────────────────────────────────────────────────────────────── */ .adata-cd__intro { /* * Top margin sits on the section's own header rather than on .adata-cd, * so it does not collide with whatever spacing the CMS block above the * widget already applies. */ margin: 2rem 0 1.5rem; } /* * h1 because this is the page's subject wherever the widget is placed. If it * ever sits below another h1 on the same page, change this to h2 in the * template rather than restyling — the level should follow the document, not * the appearance. */ .adata-cd__heading { margin: 0 0 0.5rem; font-size: 2.1rem; font-weight: 700; line-height: 1.2; color: var(--adata-cd-heading); } .adata-cd__lede { margin: 0; font-size: 1rem; line-height: 1.5; /* Black, matching the heading — not the muted grey used elsewhere. */ color: #000000; } /* ── Search ──────────────────────────────────────────────────────────────── */ .adata-cd__search { position: relative; margin-bottom: 1.5rem; } .adata-cd__search-icon { position: absolute; top: 50%; left: 1.25rem; width: 22px; height: 22px; transform: translateY(-50%); color: #98a2b0; pointer-events: none; } .adata-cd__search-input { width: 100%; padding: 1.05rem 1.25rem 1.05rem 3.4rem; font-size: 1.05rem; color: var(--adata-cd-text); background: #fff; border: 1px solid var(--adata-cd-field-border); border-radius: 0.75rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .adata-cd__search-input::placeholder { color: #98a2b0; } .adata-cd__search-input:focus { outline: none; border-color: var(--adata-cd-accent); box-shadow: 0 0 0 3px rgba(29, 163, 221, 0.15); } /* ── Continent filter pills ──────────────────────────────────────────────── */ .adata-cd__filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; } .adata-cd__pill { padding: 0.7rem 1.6rem; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--adata-cd-text); background: #fff; border: 1px solid var(--adata-cd-field-border); border-radius: 9999px; cursor: pointer; transition: all 0.15s ease; } .adata-cd__pill:hover { border-color: var(--adata-cd-accent); color: var(--adata-cd-accent); } .adata-cd__pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 163, 221, 0.25); } .adata-cd__pill--active, .adata-cd__pill--active:hover { color: #fff; background: var(--adata-cd-accent); border-color: var(--adata-cd-accent); } /* * Secondary outline, never the accent colour: the reset undoes filtering * rather than performing it, so it must not compete with the continent pills. * margin-left:auto pushes it to the right end of whatever row it lands on. */ .adata-cd__reset { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; color: var(--adata-cd-muted); background: transparent; border: 1px dashed #cbd3dc; border-radius: 9999px; font-weight: 600; } .adata-cd__reset:hover:not(:disabled) { color: var(--adata-cd-text); background: #fff; border-color: var(--adata-cd-muted); border-style: solid; } .adata-cd__reset:disabled { opacity: 0.45; cursor: not-allowed; } /* Solid once something is actually filtered, so it reads as available. */ .adata-cd__reset.is-armed { color: var(--adata-cd-text); border-style: solid; border-color: #cbd3dc; background: #fff; } .adata-cd__reset-icon { flex: none; width: 15px; height: 15px; } /* ── Table ───────────────────────────────────────────────────────────────── */ /* * One border, on the container only. overflow hidden clips the blue band to * the rounded corners, so the header, the rows and the outline read as a * single object rather than stacked boxes. */ .adata-cd__table-wrap.is-menu-open { min-height: 260px; } .adata-cd__table-wrap { overflow: auto; border: 1px solid #e6e9ee; border-radius: 0.6rem; box-shadow: none; } .adata-cd__table, .adata-cd__table thead, .adata-cd__table tbody, .adata-cd__table tr { border: 0; outline: 0; } .adata-cd__table { width: 100%; min-width: 920px; border-collapse: collapse; background: #fff; } .adata-cd__table thead th { vertical-align: middle; border: 0; padding: 1.1rem 1.5rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; text-align: left; color: #fff; background: var(--adata-cd-accent); white-space: nowrap; } /* * Holds the table together above the mobile breakpoint. * * Magento themes ship responsive-table rules that set display:block on table, * tr, th and td at narrow widths and inject a label through td::before. This * widget does its own responsive work — cards below 768px — so those rules * would only produce the broken half-state: detached columns and dividers that * stop mid-row. */ @media (min-width: 768px) { .adata-cd__table { display: table !important; width: 100%; } .adata-cd__table thead { display: table-header-group !important; } .adata-cd__table tbody { display: table-row-group !important; } .adata-cd__table tr { display: table-row !important; } .adata-cd__table th, .adata-cd__table td { display: table-cell !important; float: none !important; width: auto; } /* Luma prints the column heading into each cell in its block mode. */ .adata-cd__table td::before, .adata-cd__table th::before { content: none !important; display: none !important; } } /* ── In-header controls ──────────────────────────────────────────────────── */ /* * The control inherits the heading's type so the band reads as one row of * headings, not a row of widgets. Every heading is "LABEL v": the chevron is * dimmed until that column is actually sorted or filtered, which is the only * signal that the control is doing something. */ .adata-cd__th-control { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; } /* * Keyboard focus only. The previous :focus-within rule fired when the overlaid * select took focus on click, leaving a persistent outline that read as a * bordered box around the heading. The visible ring is declared further down, * as an exemption from the hard reset. */ /* * The select is invisible, so it cannot show a focus ring of its own without * drawing a box. Brightening the chevron marks focus instead. */ .adata-cd__th-control:focus-within .adata-cd__chevron { opacity: 1; } .adata-cd__th-clear { position: relative; z-index: 2; margin: 0; padding: 0 0 0 0.1rem; font-size: 1.05em; line-height: 1; color: inherit; background: none; border: 0; outline: 0; box-shadow: none; opacity: 0.8; cursor: pointer; } .adata-cd__th-clear:hover { opacity: 1; } /* * Hard reset for every element inside the header band. * * !important is deliberate and is confined to this one block. Magento themes * style bare button, select and input globally, often from a stylesheet that * loads after this file; when both specificity and source order favour the * theme, a normal declaration cannot win. Two earlier attempts at this with * plain selectors were overridden in situ. * * Scope is one table's thead, and the properties are only the ones that draw a * box, so nothing outside the header band is affected. */ .adata-cd .adata-cd__table thead th, .adata-cd .adata-cd__table thead th * { background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; text-shadow: none !important; } .adata-cd .adata-cd__table thead th button, .adata-cd .adata-cd__table thead th select, .adata-cd .adata-cd__table thead th label, .adata-cd .adata-cd__table thead th span { min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; font: inherit !important; color: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; background-color: transparent !important; appearance: none !important; -webkit-appearance: none !important; } .adata-cd .adata-cd__table thead th button, .adata-cd .adata-cd__table thead th select, .adata-cd .adata-cd__table thead th label { padding: 0 !important; } /* * Also exempted: the keyboard focus ring is the one outline the header should * ever draw, so it needs the same weight to survive the reset. */ .adata-cd .adata-cd__table thead th .adata-cd__th-control:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85) !important; outline-offset: 4px; } .adata-cd__chevron { flex: none; width: 13px; height: 13px; opacity: 0.55; transition: transform 0.15s ease, opacity 0.15s ease; } .adata-cd__th-control.is-active .adata-cd__chevron { opacity: 1; } .adata-cd__chevron.is-up { transform: rotate(180deg); } /* ── Delivery Status dropdown ────────────────────────────────────────────── */ .adata-cd__dropdown { position: relative; } .adata-cd__th-trigger { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } /* * The panel is a child of the header cell, so every property that gives it * shape has to out-weigh the header reset — hence the specificity and * !important here. Without them the panel would inherit the band's white text * on no background and lose its border and shadow. */ .adata-cd .adata-cd__table thead th .adata-cd__menu { position: absolute !important; top: calc(100% + 0.65rem); left: 0; z-index: 30; min-width: 210px; padding: 0.35rem 0 !important; text-align: left; background: #fff !important; background-color: #fff !important; border: 1px solid #e6e9ee !important; border-radius: 0.6rem !important; box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14) !important; } /* Small pointer up to the heading that opened it. */ .adata-cd .adata-cd__table thead th .adata-cd__menu::before { content: ""; position: absolute; top: -6px; left: 1.4rem; width: 11px; height: 11px; background: #fff; border-top: 1px solid #e6e9ee; border-left: 1px solid #e6e9ee; transform: rotate(45deg); } .adata-cd .adata-cd__table thead th .adata-cd__menu-item { display: flex !important; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 0.7rem 1.1rem !important; font-size: 1rem !important; font-weight: 600 !important; line-height: 1.2; text-align: left; text-transform: none !important; letter-spacing: normal !important; background: none !important; background-color: transparent !important; cursor: pointer; transition: background-color 0.12s ease; } .adata-cd .adata-cd__table thead th .adata-cd__menu-item:hover { background-color: #f4f7fa !important; } /* Separator between the two options, matching the table's row rules. */ .adata-cd .adata-cd__table thead th .adata-cd__menu-item + .adata-cd__menu-item { border-top: 1px solid var(--adata-cd-border) !important; } .adata-cd .adata-cd__table thead th .adata-cd__menu-item--yes { color: var(--adata-cd-yes-text) !important; } .adata-cd .adata-cd__table thead th .adata-cd__menu-item--maybe { color: var(--adata-cd-maybe-text) !important; } .adata-cd .adata-cd__table thead th .adata-cd__menu-item--no { color: var(--adata-cd-no-text) !important; } .adata-cd__tick { flex: none; width: 17px; height: 17px; } /* Alpine sets x-show before the stylesheet applies; without this the panel flashes open on first paint. */ [x-cloak] { display: none !important; } .adata-cd__menu--enter { animation: adata-cd-menu-in 0.14s ease-out; } @keyframes adata-cd-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .adata-cd__table tbody td { padding: 1.05rem 1.5rem; /* border shorthand first so a theme's vertical td borders are cleared, then the horizontal row separator is put back. */ border: 0; border-bottom: 1px solid var(--adata-cd-border); vertical-align: middle; } /* Nothing to separate the last row from — a trailing rule reads as a box edge. */ .adata-cd__table tbody tr:last-child td { border-bottom: 0; } .adata-cd__country { font-weight: 700; white-space: nowrap; } /* * The cell stays a table cell. Putting display:flex here — as an earlier build * did — takes it out of the table's box model: the column renders as its own * block, the row divider stops at its edge, and a vertical gap opens between it * and the rest of the row. The flex layout belongs on the inner span. */ .adata-cd__country { vertical-align: middle; } .adata-cd__country-inner { display: flex; align-items: center; gap: 0.65rem; } /* * The name is a plain run of text: no padding, no background, nothing that * could read as a control. */ .adata-cd__country-name { display: inline-block; margin: 0; padding: 0; background: none; line-height: 1.2; } /* * Fixed box with object-fit: contain. The assets are all 4:3, but a border and * a fixed size keep a white flag (Japan) visible against the row and stop any * odd-sized replacement asset from changing the row height. */ /* * Fixed box on every row. width and height are set together and object-fit * does the fitting, so a flag with an unusual ratio letterboxes inside the box * rather than changing its own size — which is what keeps the name column * starting at the same x on every row. */ .adata-cd__flag { display: block; flex: none; width: 26px; height: 20px; min-width: 26px; max-width: 26px; margin: 0; padding: 0; object-fit: contain; border: 1px solid rgba(16, 24, 40, 0.12); border-radius: 2px; background: #fff; } .adata-cd__flag--card { width: 34px; height: 26px; min-width: 34px; max-width: 34px; border-radius: 3px; } .adata-cd__card-identity { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .adata-cd__col-continent { width: 150px; } .adata-cd__continent { color: var(--adata-cd-muted); white-space: nowrap; } .adata-cd__col-status { width: 230px; } /* ── Status badges ───────────────────────────────────────────────────────── */ .adata-cd__badge { display: inline-block; /* Defensive: themes that border span/[class] draw an outline on the pill. */ border: 0; outline: 0; box-shadow: none; min-width: 190px; padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 700; text-align: center; border-radius: 9999px; } .adata-cd__badge--yes { color: var(--adata-cd-yes-text); background: var(--adata-cd-yes-bg); } .adata-cd__badge--no { color: var(--adata-cd-no-text); background: var(--adata-cd-no-bg); } .adata-cd__badge--maybe { color: var(--adata-cd-maybe-text); background: var(--adata-cd-maybe-bg); } /* ── Couriers ────────────────────────────────────────────────────────────── */ /* * Border/background reset is defensive. The widget never draws a box here, but * themes that style div or [class] inside table cells will, which is what put * the outline around the whole courier strip. */ .adata-cd__couriers { display: flex; /* * nowrap, not wrap: a country's couriers always read as a single row. * The cell then has a min-content width equal to the sum of its slots, so * the table grows and .adata-cd__table-wrap scrolls horizontally when the * viewport is too narrow — rather than the logos folding onto a second * line and breaking the column alignment down the table. */ flex-wrap: nowrap; align-items: center; /* * Tight gap, because the slot already carries the visual breathing room: * a 104px logo cap inside a 112px slot leaves ~8px of built-in padding * around each mark. Adding a large gap on top of that reads as a gappy, * unbalanced strip and pushes the last logo out of view. */ gap: 0.625rem; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0; } /* * Fixed-width slots, not natural widths. Couriers come back in a stable * sort_order, so equal slots make the marks line up in columns down the table * — DHL under DHL, UPS under UPS — which is what the reference does and what * natural-width flex items cannot give you, since a row missing one courier * would shift every mark after it. * * No border, background or padding: the logo sits directly on the row. The * reset is explicit because Luma and several themes put borders on img inside * table cells. */ .adata-cd__courier { display: inline-flex; align-items: center; justify-content: center; width: 112px; flex: 0 0 112px; min-height: 46px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0; } /* * width/height auto plus max-* bounds preserves the source aspect ratio. * Setting both dimensions, or object-fit: cover, would distort logos whose * proportions differ from the slot. */ .adata-cd__courier img { display: block; width: auto; height: auto; max-width: 104px; max-height: 44px; object-fit: contain; background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0; } .adata-cd__courier-name { font-size: 0.8rem; font-weight: 700; color: var(--adata-cd-muted); text-align: center; line-height: 1.15; overflow: hidden; } /* * Plain text, not a field. The resets are explicit because the message renders * inside a table cell where theme rules for p / .message can otherwise supply * a border, background or padding and make it read as an input box. */ .adata-cd__message { display: block; margin: 0; padding: 0; color: var(--adata-cd-text); background: none; border: 0; border-radius: 0; box-shadow: none; font-style: normal; } /* ── "Contact Us to Enquire" (Maybe status) ──────────────────────────────── */ /* * A plain flow wrapper, not a panel: no border, background or padding of its * own, so the button reads as a standalone action sitting in the row. */ .adata-cd__enquiry-wrap { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } /* * A real button, not a text link: it is the row's only call to action and has * to be as tappable on a phone card as it is scannable in a desktop table. */ .adata-cd__enquiry { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 42px; /* Generous horizontal padding keeps it a compact pill rather than a bar. */ padding: 0.6rem 1.4rem; font-size: 0.95rem; white-space: nowrap; font-weight: 600; line-height: 1.2; color: #fff !important; text-align: center; text-decoration: none !important; background: var(--adata-cd-accent); border: 0; border-radius: 0.45rem; cursor: pointer; transition: background-color 0.15s ease; } .adata-cd__enquiry:hover, .adata-cd__enquiry:focus { color: #fff !important; background: var(--adata-cd-accent-dark); text-decoration: none !important; } /* * Hard reset on the button and everything inside it. * * The white box around the label and the arrow is a theme rule bordering * span / svg inside a table cell — the widget draws neither. !important is * needed because those rules load after this file and out-specify a class * selector. Scoped to this one component and limited to the properties that * draw a box, so the accent background is untouched. */ .adata-cd .adata-cd__enquiry, .adata-cd .adata-cd__enquiry > * { border: 0 !important; outline: 0 !important; box-shadow: none !important; background-image: none !important; text-decoration: none !important; text-shadow: none !important; } .adata-cd .adata-cd__enquiry > * { /* Children only: the button itself keeps its accent fill. */ padding: 0 !important; background: none !important; background-color: transparent !important; } /* * Exempt from the reset above, so keyboard focus stays visible. Declared after * it and at higher specificity, and offset outside the button so it reads * against the accent fill rather than on top of it. */ .adata-cd .adata-cd__enquiry:focus-visible { outline: 2px solid var(--adata-cd-accent-dark) !important; outline-offset: 3px; } /* Full width inside a card, where there is no adjacent column to balance. */ .adata-cd__enquiry-arrow { flex: none; width: 17px; height: 17px; } /* Full width inside a card, where there is no adjacent column to balance. */ .adata-cd__enquiry--block { width: 100%; } .adata-cd__none { font-size: 0.9rem; color: var(--adata-cd-muted); } .adata-cd__empty { padding: 3.5rem 1.5rem !important; text-align: center; color: var(--adata-cd-muted); } /* ── Footer: count, pagination, page size ────────────────────────────────── */ /* * min-height reserves the control row's height. The nav and page-size selector * are toggled with x-show, and letting the footer collapse when they hide moves * everything below it — a second, subtler source of the page shifting under the * reader mid-interaction. */ .adata-cd__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 2.9rem; margin-top: 1.75rem; } .adata-cd__count { font-size: 0.95rem; color: var(--adata-cd-muted); } .adata-cd__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; } .adata-cd__page { min-width: 2.65rem; height: 2.65rem; padding: 0 0.6rem; font-size: 1rem; font-weight: 600; color: var(--adata-cd-text); background: #fff; border: 1px solid var(--adata-cd-field-border); border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease; } .adata-cd__page:hover:not(:disabled) { border-color: var(--adata-cd-accent); color: var(--adata-cd-accent); } .adata-cd__page:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 163, 221, 0.25); } .adata-cd__page--active, .adata-cd__page--active:hover { color: #fff; background: var(--adata-cd-accent); border-color: var(--adata-cd-accent); } /* Previous / Next read as text links, not boxes. */ .adata-cd__step { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.65rem; padding: 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--adata-cd-accent); background: none; border: 0; cursor: pointer; } .adata-cd__step:hover:not(:disabled) { color: var(--adata-cd-accent-dark); } .adata-cd__step:disabled { color: #b3bcc7; cursor: not-allowed; } .adata-cd__step svg { width: 18px; height: 18px; flex: none; } .adata-cd__gap { min-width: 1.5rem; text-align: center; color: var(--adata-cd-muted); user-select: none; } .adata-cd__page-size { justify-self: end; } .adata-cd__page-size select { height: 2.9rem; padding: 0 2.4rem 0 1.1rem; font-size: 1rem; color: var(--adata-cd-text); background-color: #fff; /* Inline chevron so the control matches the reference on every platform; native select arrows differ wildly between Windows, macOS and Linux. */ background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c8794' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px 18px; border: 1px solid var(--adata-cd-field-border); border-radius: 0.5rem; cursor: pointer; appearance: none; -webkit-appearance: none; } .adata-cd__page-size select:focus { outline: none; border-color: var(--adata-cd-accent); box-shadow: 0 0 0 3px rgba(29, 163, 221, 0.15); } /* ── Card layout (markup always present, shown below 768px) ─────────────── */ .adata-cd__cards { display: none; flex-direction: column; gap: 1rem; } .adata-cd__card { padding: 1.15rem 1.15rem 1.25rem; background: #fff; border: 1px solid #e6e9ee; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05); } .adata-cd__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.85rem; } .adata-cd__card-title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; } .adata-cd__card-continent { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--adata-cd-muted); } .adata-cd__badge--compact { flex: none; min-width: 0; padding: 0.35rem 0.95rem; font-size: 0.9rem; } .adata-cd__card-section { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--adata-cd-border); } .adata-cd__card-label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 700; color: var(--adata-cd-text); } .adata-cd__card-availability { margin: 0; font-size: 1rem; font-weight: 700; } .adata-cd__card-availability.is-yes { color: var(--adata-cd-yes-text); } .adata-cd__card-availability.is-no { color: var(--adata-cd-no-text); } .adata-cd__card-availability.is-maybe { color: var(--adata-cd-maybe-text); } .adata-cd__card .adata-cd__message { margin-top: 0.5rem; } .adata-cd__card .adata-cd__empty { padding: 2.5rem 1rem !important; } /* ── Tablet: 768px – 1199px ──────────────────────────────────────────────── */ @media (max-width: 1199px) { .adata-cd { font-size: 15px; } .adata-cd__heading { font-size: 1.85rem; } /* * Three per row, equal width. A grid rather than flex-wrap because * flex-wrap sizes pills to their labels, so "South America" and "Asia" * come out wildly different widths and the rows never line up. Every * continent stays on screen with no horizontal scrolling. */ .adata-cd__filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; } .adata-cd__pill { width: 100%; min-height: 44px; padding: 0.55rem 0.5rem; font-size: 0.92rem; /* Long labels shrink rather than overflow their cell. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * margin-left:auto is a flex idiom and does nothing in a grid, so the * reset simply takes the next cell. Spanning the full row instead keeps it * from being mistaken for a seventh continent. */ .adata-cd__reset { grid-column: 1 / -1; margin-left: 0; justify-content: center; } .adata-cd__search-input { padding: 0.9rem 1rem 0.9rem 3rem; font-size: 1rem; } .adata-cd__table { min-width: 720px; } .adata-cd__table thead th { padding: 0.85rem 0.9rem; font-size: 0.85rem; } .adata-cd__table tbody td { padding: 0.75rem 0.9rem; } .adata-cd__flag { width: 23px; height: 18px; min-width: 23px; max-width: 23px; } .adata-cd__col-continent { width: 120px; } .adata-cd__col-status { width: 150px; } .adata-cd__badge { min-width: 92px; padding: 0.4rem 0.75rem; font-size: 0.88rem; } .adata-cd__couriers { gap: 0.5rem; } .adata-cd__courier { width: 84px; flex: 0 0 84px; min-height: 34px; } .adata-cd__courier img { max-width: 78px; max-height: 30px; } } @media (max-width: 900px) { .adata-cd__footer { grid-template-columns: 1fr; justify-items: center; text-align: center; } .adata-cd__page-size { justify-self: center; } } /* ── Mobile: below 768px ─────────────────────────────────────────────────── */ @media (max-width: 767px) { /* * Table out, cards in. Four columns on a phone would force horizontal * scrolling on every row; the card carries the same four facts stacked in * reading order instead. */ .adata-cd__table-wrap { display: none; } .adata-cd__cards { display: flex; } .adata-cd__heading { font-size: 1.5rem; } .adata-cd__lede { font-size: 0.95rem; } .adata-cd__intro { margin-bottom: 1.15rem; } .adata-cd__search-input { padding: 0.85rem 1rem 0.85rem 2.9rem; border-radius: 0.6rem; } .adata-cd__search-icon { left: 1rem; width: 19px; height: 19px; } .adata-cd__filters { gap: 0.5rem; margin-bottom: 1.15rem; } .adata-cd__pill { padding: 0.5rem 0.35rem; font-size: 0.85rem; } /* * Cards are narrow, so courier logos wrap here — the fixed-slot column * alignment that matters in the table is meaningless in a single card. */ .adata-cd__couriers { flex-wrap: wrap; gap: 0.75rem 1rem; } .adata-cd__courier { width: auto; flex: 0 0 auto; min-height: 30px; } .adata-cd__courier img { max-width: 72px; max-height: 28px; } .adata-cd__footer { gap: 0.85rem; margin-top: 1.25rem; } .adata-cd__page { min-width: 2.35rem; height: 2.35rem; font-size: 0.92rem; } /* Touch targets stay full size; only the labels go. */ .adata-cd__step { font-size: 0; gap: 0; } .adata-cd__step svg { width: 20px; height: 20px; } } /* ── Enquiry modal ───────────────────────────────────────────────────────── */ /* Base type for the dialog, which no longer inherits it from .adata-cd. */ .adata-cd__modal { color: var(--adata-cd-text); font-size: 16px; line-height: 1.5; position: fixed; inset: 0; /* * Deliberately at the top of the range. 100000 was not enough here: sticky * site headers and third-party bars routinely sit at 999999, and the * backdrop was painting under one of them, leaving the header undimmed. * * The JS also reparents this element to on first open, which is the * half that matters when an ancestor has created a stacking context the * z-index could never escape. */ z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; /* * hidden, not auto. The dialog itself is height-capped and scrolls * internally; letting this outer layer scroll instead is what allowed the * footer to sit below the fold with no way to reach it. */ overflow: hidden; } /* * Dim plus blur. The blur is progressive enhancement — browsers without * backdrop-filter (older Firefox, some in-app webviews) still get the dimming, * which is what actually carries the focus, so nothing is lost. */ .adata-cd__backdrop { position: fixed; inset: 0; z-index: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .adata-cd__dialog { z-index: 1; } /* Set on while the dialog is open: without it the page behind scrolls under the modal and the reader loses their place in the table. */ body.adata-cd-modal-open { overflow: hidden; } /* * Three-part column: fixed header, scrolling body, fixed footer. * * The height cap is what keeps the Submit button on screen no matter how tall * the form grows or how short the viewport is — overflow moves into the body * rather than pushing the footer past the bottom of the window. */ .adata-cd__dialog { position: relative; display: flex; flex-direction: column; width: 100%; /* * A compact centred card, not a full-width sheet. Capped in both * directions so it reads as a dialog floating over the page rather than a * second page: the height cap is what keeps the footer on screen, and the * min() stops it stretching on a tall desktop monitor. */ max-width: 780px; max-height: calc(100vh - 3rem); max-height: min(90dvh, 880px); padding: 0; background: #fff; border-radius: 0.75rem; box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3); overflow: hidden; } .adata-cd__dialog-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem 1.15rem; border-bottom: 1px solid var(--adata-cd-border); } /* * The only part that scrolls. * * The extra bottom padding is the fix for the Message field sitting under the * footer at full scroll: a scroll container stops at its last child's edge, so * without trailing space the final field ends flush against the footer with no * room to read or click into it. overscroll-behavior stops the page behind * taking over once this reaches its end. */ .adata-cd__dialog-body { flex: 1 1 auto; min-height: 0; padding: 1.5rem 1.75rem 2.25rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Lifts the footer off the scrolling content so the boundary is legible. */ .adata-cd__dialog-foot, .adata-cd__dialog-note { background: #fff; } .adata-cd__dialog-title { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; color: #0f2c52; } .adata-cd__dialog-sub { margin: 0; color: var(--adata-cd-muted); } .adata-cd__dialog-close { flex: none; width: 2.25rem; height: 2.25rem; font-size: 1.6rem; line-height: 1; color: var(--adata-cd-muted); background: none; border: 0; cursor: pointer; } .adata-cd__dialog-close:hover { color: var(--adata-cd-text); } .adata-cd__fieldset-title { margin: 1.5rem 0 0.85rem; font-size: 1.05rem; font-weight: 700; color: var(--adata-cd-accent); } .adata-cd__fieldset-title:first-child { margin-top: 0; } /* Two columns on desktop, one on narrow screens. */ .adata-cd__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem 1.25rem; } .adata-cd__field--wide { grid-column: 1 / -1; } .adata-cd__field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .adata-cd__field > span:first-child { font-size: 0.9rem; font-weight: 600; } .adata-cd__field em { color: #e02b27; font-style: normal; } .adata-cd__field input, .adata-cd__field select, .adata-cd__field textarea { width: 100%; padding: 0.7rem 0.9rem; font: inherit; font-size: 0.95rem; color: var(--adata-cd-text); background: #fff; border: 1px solid var(--adata-cd-field-border); border-radius: 0.5rem; } .adata-cd__field input:focus, .adata-cd__field select:focus, .adata-cd__field textarea:focus { outline: none; border-color: var(--adata-cd-accent); box-shadow: 0 0 0 3px rgba(29, 163, 221, 0.15); } .adata-cd__field textarea { min-height: 96px; resize: vertical; } .adata-cd__counter { align-self: flex-end; font-size: 0.8rem; color: var(--adata-cd-muted); } /* Dial code sits inside the field, so the phone reads as one control. */ .adata-cd__phone { display: flex; align-items: stretch; gap: 0; } .adata-cd__phone-code { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; padding: 0.7rem 0.75rem; font-size: 0.95rem; background: #f6f8fa; border: 1px solid var(--adata-cd-field-border); border-right: 0; border-radius: 0.5rem 0 0 0.5rem; } .adata-cd__phone input { border-radius: 0 0.5rem 0.5rem 0 !important; } .adata-cd__readonly { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.9rem; background: #f6f8fa; border: 1px solid var(--adata-cd-field-border); border-radius: 0.5rem; } .adata-cd__errors { margin: 0 0 1rem; padding: 0.85rem 1rem 0.85rem 2.1rem; color: #8a1f1f; background: #fdeaea; border-radius: 0.5rem; } .adata-cd__dialog-foot { flex: none; display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.15rem 1.75rem; border-top: 1px solid var(--adata-cd-border); } .adata-cd__btn { min-height: 44px; padding: 0.65rem 1.6rem; font: inherit; font-size: 0.98rem; font-weight: 600; color: var(--adata-cd-text); background: #fff; border: 1px solid var(--adata-cd-field-border); border-radius: 0.5rem; cursor: pointer; } .adata-cd__btn--primary { color: #fff; background: var(--adata-cd-accent); border-color: var(--adata-cd-accent); } .adata-cd__btn--primary:hover:not(:disabled) { background: var(--adata-cd-accent-dark); border-color: var(--adata-cd-accent-dark); } .adata-cd__btn:disabled { opacity: 0.6; cursor: not-allowed; } .adata-cd__dialog-note { flex: none; margin: 0; padding: 0 1.75rem 1.1rem; font-size: 0.82rem; text-align: center; color: var(--adata-cd-muted); } .adata-cd__enquiry-done { padding: 2.5rem 1rem; text-align: center; } .adata-cd__enquiry-done-text { margin: 0 0 1.5rem; font-size: 1.1rem; font-weight: 600; color: var(--adata-cd-yes-text); } @media (max-width: 767px) { .adata-cd__modal { padding: 0; } .adata-cd__dialog { max-width: none; max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; } .adata-cd__dialog-head { padding: 1.1rem 1.1rem 0.9rem; } .adata-cd__dialog-body { padding: 1.1rem 1.1rem 1.75rem; } .adata-cd__dialog-foot { padding: 0.9rem 1.1rem; } .adata-cd__dialog-note { padding: 0 1.1rem 0.9rem; } .adata-cd__grid { grid-template-columns: minmax(0, 1fr); } .adata-cd__dialog-title { font-size: 1.35rem; } .adata-cd__dialog-foot { flex-direction: column-reverse; } .adata-cd__btn { width: 100%; } }