/*
* Storefront INFORMATION screens — Phase 2 native (Tabler) re-skin.
* catalog/view/stylesheet/aarzaa/information.css (NEW FILE — CC-exempt)
*
* Linked by (and only by):
* catalog/view/template/information/contact.twig
* catalog/view/template/information/gdpr.twig
* catalog/view/template/information/information.twig
* catalog/view/template/information/sitemap.twig
*
* Scope rule (same discipline as aarzaa/account.css): this file adds ONLY what
* the shared shell does not already provide. Everything structural —
* .container band + gutter, .breadcrumb, `#content > h1`, link colours, the
* .btn/.form-control/.alert/.accordion primitives — comes from
* catalog/view/javascript/native/css/{app,store,ui-form,ui-list}.css and
* uix.min.css (Tabler) and is deliberately NOT redefined here.
*
* Palette is the shell's: #0f172a text, #475569/#64748b/#94a3b8 muted,
* #1a56db primary, #e2e8f0/#f1f5f9 borders, #dc2626 danger.
* Radius/shadow reuse the shell tokens --app-radius / --app-shadow.
*
* Authoring rules: logical properties only (RTL-safe), no !important except
* where a Tabler base rule must be neutralised (marked inline).
*/
/* ──────────────────────────────────────────────────────────────────────────
1. Page furniture
────────────────────────────────────────────────────────────────────────── */
/* Sub-heading above a group of cards. Mirrors ui-form.css .section-label but
without the app-shell inset, because information pages sit in .container. */
.info-label {
font-size: 11px; font-weight: 700; letter-spacing: .5px;
text-transform: uppercase; color: #94a3b8;
margin: 18px 0 8px;
}
.info-label:first-child { margin-top: 0; }
/* The card shell. .card-android carries `margin: 0 12px` for the app-shell
grid; inside .container the gutter is already applied, so this is the same
surface with a flush inline margin. */
.info-card {
background: #fff;
border-radius: var(--app-radius, 16px);
box-shadow: var(--app-shadow, 0 1px 3px rgba(0, 0, 0, .06));
margin: 0 0 12px;
overflow: hidden;
}
.info-card-body { padding: 16px; }
.info-card-title {
font-size: 14px; font-weight: 800; color: #0f172a;
padding: 14px 16px; margin: 0;
border-bottom: 1px solid #f1f5f9;
display: flex; align-items: center; gap: 8px;
}
.info-card-title .ti { font-size: 17px; color: #64748b; }
/* Lead paragraph under the . */
.info-lead {
font-size: 13.5px; line-height: 1.6; color: #64748b;
margin: -6px 0 16px; max-width: 68ch;
}
.info-lead a { font-weight: 600; }
/* ──────────────────────────────────────────────────────────────────────────
2. Static CMS page body (information.twig)
The description is store-authored HTML, so every common tag is normalised
here — otherwise a pasted
/![]()
blows the container out on phones.
────────────────────────────────────────────────────────────────────────── */
.info-body { font-size: 14px; line-height: 1.7; color: #334155; }
.info-body > :first-child { margin-block-start: 0; }
.info-body > :last-child { margin-block-end: 0; }
.info-body h1, .info-body h2, .info-body h3,
.info-body h4, .info-body h5, .info-body h6 {
color: #0f172a; font-weight: 800; letter-spacing: -.2px;
margin-block: 22px 8px; line-height: 1.3;
}
.info-body h1 { font-size: 20px; }
.info-body h2 { font-size: 18px; }
.info-body h3 { font-size: 16px; }
.info-body h4, .info-body h5, .info-body h6 { font-size: 14px; }
.info-body p { margin-block-end: 14px; }
.info-body ul, .info-body ol { margin-block-end: 14px; padding-inline-start: 22px; }
.info-body li { margin-block-end: 6px; }
.info-body img { max-width: 100%; height: auto; border-radius: 12px; }
.info-body blockquote {
margin: 16px 0; padding: 10px 16px;
border-inline-start: 3px solid #dbeafe;
color: #64748b; font-style: italic;
}
.info-body hr { border: 0; border-top: 1px solid #e2e8f0; margin: 20px 0; }
/* Store-authored tables are the #1 source of horizontal page scroll: give the
table its own scroller instead of letting it widen . */
.info-body table {
width: 100%; border-collapse: collapse; font-size: 13px;
display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.info-body th, .info-body td {
border: 1px solid #e2e8f0; padding: 8px 10px; text-align: start;
vertical-align: top;
}
.info-body th { background: #f8fafc; font-weight: 700; color: #0f172a; }
/* ──────────────────────────────────────────────────────────────────────────
3. Fact rows — the store / location details on contact.twig
────────────────────────────────────────────────────────────────────────── */
.info-fact {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 16px; border-bottom: 1px solid #f8fafc;
}
.info-fact:last-child { border-bottom: none; }
.info-fact-icon {
width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 18px; background: #f1f5f9; color: #475569;
}
.info-fact-icon.blue { background: #dbeafe; color: #1d4ed8; }
.info-fact-icon.green { background: #dcfce7; color: #16a34a; }
.info-fact-icon.amber { background: #fef3c7; color: #d97706; }
.info-fact-icon.violet { background: #ede9fe; color: #7c3aed; }
.info-fact-body { flex: 1; min-width: 0; }
.info-fact-label {
font-size: 11px; font-weight: 700; letter-spacing: .3px;
text-transform: uppercase; color: #94a3b8; margin-bottom: 3px;
}
.info-fact-value {
font-size: 13.5px; line-height: 1.55; color: #0f172a; font-weight: 600;
overflow-wrap: anywhere;
}
.info-fact-value address { margin: 0; font-style: normal; }
/* The telephone value is a real tel: link — keep it readable, not primary-blue
shouting, but still obviously actionable on hover/focus. */
.info-fact-value a.info-plain { color: #0f172a; text-decoration: none; }
.info-fact-value a.info-plain:hover,
.info-fact-value a.info-plain:focus-visible { color: #1a56db; text-decoration: underline; }
/* Store photo at the head of the contact card. */
.info-store-photo {
width: 100%; max-height: 190px; object-fit: cover; display: block;
border-bottom: 1px solid #f1f5f9;
}
.info-card-foot { padding: 12px 16px; border-top: 1px solid #f1f5f9; }
/* ──────────────────────────────────────────────────────────────────────────
4. Forms — contact.twig and gdpr.twig
Field-level errors: common.js paints `.is-invalid` on #input- and
`.d-block` on #error-, so the feedback div must be a SIBLING of the
control, outside any .input-group. Both templates are built that way.
────────────────────────────────────────────────────────────────────────── */
.info-form { padding: 16px; }
.info-field { margin-bottom: 16px; }
.info-field:last-of-type { margin-bottom: 0; }
.info-field > .form-label {
font-size: 12px; font-weight: 700; color: #475569;
margin-bottom: 6px; display: block;
}
.info-form .form-control {
border-radius: 12px; border: 1.5px solid #e2e8f0; background: #f8fafc;
font-size: 14px; color: #0f172a; padding: 11px 14px;
}
.info-form .form-control:focus {
background: #fff; border-color: #1a56db;
box-shadow: 0 0 0 3px rgba(26, 86, 219, .12);
}
.info-form .form-control::placeholder { color: #94a3b8; }
.info-form textarea.form-control { min-height: 132px; resize: vertical; }
/* Tabler paints a background SVG on invalid controls; it collides with the
soft field fill, so drop it and let the border + message carry the state. */
.info-form .form-control.is-invalid {
border-color: #dc2626; background-image: none; background-color: #fff;
}
.info-form .form-control.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.info-form .invalid-feedback {
font-size: 11.5px; font-weight: 600; color: #dc2626;
margin-top: 5px; padding-inline-start: 2px;
display: none; /* .d-block from common.js reveals it */
align-items: center; gap: 5px;
}
.info-form .invalid-feedback.d-block { display: flex !important; }
.info-form .invalid-feedback::before {
font-family: 'tabler-icons' !important; /* uix-icons.min.css font family */
content: '\ea05'; /* ti-alert-circle */
font-size: 13px; line-height: 1; flex-shrink: 0;
}
.info-hint { font-size: 11.5px; color: #94a3b8; margin-top: 5px; padding-inline-start: 2px; }
/* Radio / checkbox blocks (gdpr action chooser). */
.info-choice {
display: flex; align-items: flex-start; gap: 12px;
padding: 13px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px;
background: #f8fafc; margin-bottom: 10px; cursor: pointer;
}
.info-choice:last-child { margin-bottom: 0; }
.info-choice:hover { border-color: #cbd5e1; }
.info-choice:has(input:checked) { border-color: #1a56db; background: #eff6ff; }
.info-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(26, 86, 219, .18); }
.info-choice input.form-check-input {
width: 19px; height: 19px; margin: 1px 0 0; flex-shrink: 0;
accent-color: #1a56db;
}
.info-choice .info-choice-body { flex: 1; min-width: 0; }
.info-choice .info-choice-title {
display: block;
font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.35;
}
.info-choice .info-choice-sub { font-size: 12px; color: #64748b; margin-top: 3px; line-height: 1.5; }
/* Action bar under a form. */
.info-actions {
display: flex; align-items: center; justify-content: flex-end;
gap: 10px; flex-wrap: wrap;
padding: 14px 16px; border-top: 1px solid #f1f5f9; background: #fdfdfe;
}
.info-actions .info-actions-start { margin-inline-end: auto; }
.info-actions .btn {
border-radius: 11px; font-weight: 700; font-size: 14px; padding: 10px 20px;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.info-card-foot .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; font-weight: 700; }
/* Warning panel revealed by the "remove my data" choice. */
.info-warning { border-radius: 12px; font-size: 13px; line-height: 1.6; }
.info-warning ul { margin: 8px 0 0; padding-inline-start: 20px; }
.info-warning li { margin-bottom: 5px; }
.info-warning li:last-child { margin-bottom: 0; }
/* ──────────────────────────────────────────────────────────────────────────
5. Link lists — sitemap.twig
────────────────────────────────────────────────────────────────────────── */
.info-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0 16px; align-items: start;
}
/* A column whose card carries no .info-label still has to line up with the
columns that do — reserve exactly the label's height (13px line + 8px gap)
instead of letting that card float 24px higher than its neighbours. */
.info-col-nolabel { padding-top: 24px; }
@media (max-width: 767.98px) { .info-col-nolabel { padding-top: 0; } }
.info-links { list-style: none; margin: 0; padding: 6px 0; }
.info-links li { margin: 0; }
.info-links a {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; font-size: 13.5px; font-weight: 600;
color: #0f172a; text-decoration: none;
}
.info-links a:hover, .info-links a:focus-visible { background: #f1f5f9; color: #1a56db; text-decoration: none; }
.info-links a .ti { font-size: 17px; color: #94a3b8; flex-shrink: 0; }
.info-links a:hover .ti, .info-links a:focus-visible .ti { color: #1a56db; }
/* Nested level: indented, lighter, no icon. */
.info-links ul { list-style: none; margin: 0; padding: 0; }
.info-links ul a {
padding-inline-start: 44px; font-size: 13px; font-weight: 500; color: #475569;
}
.info-links ul ul a { padding-inline-start: 62px; font-size: 12.5px; color: #64748b; }
/* ──────────────────────────────────────────────────────────────────────────
6. Accessibility — visible keyboard focus everywhere on these pages.
The shell only styles focus on bar controls, so content links/buttons here
would otherwise fall back to the UA outline (invisible on the soft cards).
────────────────────────────────────────────────────────────────────────── */
#information-contact :focus-visible,
#information-sitemap :focus-visible,
#information-information :focus-visible,
#account-gdpr :focus-visible {
outline: 2px solid #1a56db;
outline-offset: 2px;
border-radius: 6px;
}
/* Controls that already draw their own focus ring keep it (no double ring). */
#information-contact .form-control:focus-visible,
#account-gdpr .form-control:focus-visible { outline: none; }
/* Skip-to-form affordance is not needed, but the accordion buttons must not
look flat when focused. */
.info-accordion .accordion-button:focus-visible { outline-offset: -2px; }
/* ──────────────────────────────────────────────────────────────────────────
7. Accordion (contact.twig branch list) — Tabler's default is boxed and
heavy; soften it to the card language used above.
────────────────────────────────────────────────────────────────────────── */
.info-accordion { border: none; }
.info-accordion .accordion-item {
border: none; border-radius: var(--app-radius, 16px) !important;
box-shadow: var(--app-shadow, 0 1px 3px rgba(0, 0, 0, .06));
background: #fff; margin-bottom: 10px; overflow: hidden;
}
.info-accordion .accordion-button {
font-size: 14px; font-weight: 700; color: #0f172a;
padding: 14px 16px; background: #fff; box-shadow: none;
}
.info-accordion .accordion-button:not(.collapsed) { background: #eff6ff; color: #1a56db; }
.info-accordion .accordion-body { padding: 0; }
.info-accordion .info-fact:first-child { border-top: 1px solid #f1f5f9; }
/* ──────────────────────────────────────────────────────────────────────────
8. Responsive — the grids above are intrinsic (auto-fill / flex-wrap), so
only the tighter phone insets need stating.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
.info-card-body, .info-form { padding: 14px; }
.info-fact { padding: 11px 14px; gap: 10px; }
.info-fact-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 10px; }
.info-links a { padding: 11px 14px; }
.info-links ul a { padding-inline-start: 40px; }
.info-links ul ul a { padding-inline-start: 56px; }
.info-store-photo { max-height: 150px; }
/* Full-width buttons read better than a right-aligned pair on a phone. */
.info-actions { padding: 12px 14px; }
.info-actions .btn { flex: 1 1 100%; text-align: center; }
.info-actions .info-actions-start { margin-inline-end: 0; order: 2; flex: 1 1 100%; }
}
@media print {
.info-card, .info-accordion .accordion-item { box-shadow: none; border: 1px solid #e2e8f0; }
.info-form, .info-actions { display: none; }
}