/*
    Public site design: approved homepage direction A «واضح وموثوق» (Owner, 2026-10-10), applied to every page of
    toa.sa. Brand Identity v1.0 colours and fonts only (site.css loads the fonts and tokens). Loaded after site.css by
    layouts.public and the staff content preview; every rule is scoped to body.pub, so admin screens are untouched.
    Mobile first: one column at 390px, wider grids from 640px / 960px.
*/
.pub {
    --g: #0D3B2E;
    --g2: #053321;
    --gold: #C79A2E;
    --gold-ink: #7E5F17;
    --gold-soft: rgba(199, 154, 46, .14);
    --cream: #F6F3EC;
    --paper: #FBFAF6;
    --mist: #F7F9F8;
    --ink: #14231D;
    --mut: #5E6B65;
    --line: #E3E8E5;
    --line-2: #EEF1EF;
    --bad: #A3302A;
    --bad-bg: #FBE9E7;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(13, 59, 46, .05), 0 8px 24px rgba(13, 59, 46, .06);
    --gutter: 16px;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.75;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.pub > .site-main { flex: 1 0 auto; width: 100%; }
@media (min-width: 640px) { .pub { --gutter: 24px; } }
@media (min-width: 960px) { .pub { --gutter: 32px; } }

.pub h1, .pub h2, .pub h3 { color: var(--g); line-height: 1.4; text-wrap: balance; }
.pub h1 { font-size: 1.85rem; font-weight: 800; margin: 0 0 8px; }
.pub h2 { font-size: 1.35rem; font-weight: 800; }
.pub h3 { font-size: 1.08rem; font-weight: 700; }
@media (min-width: 960px) { .pub h1 { font-size: 2.2rem; } .pub h2 { font-size: 1.55rem; } }
.pub a { color: var(--g); text-underline-offset: 3px; }
.pub a:hover { color: var(--g2); }
.pub :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.pub .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pub .wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.pub .lead { color: var(--mut); font-size: 1.05rem; line-height: 1.9; max-width: 62ch; }
.pub .secondary, .pub .hint { color: var(--mut); }
.pub .hint { font-size: .9rem; }
.pub .key { font-family: var(--toa-font-en); }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 50; background: var(--toa-green); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { top: 8px; }

/* Buttons. */
.pub .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 10px 22px; border-radius: 10px; border: 1.5px solid var(--g);
    background: var(--g); color: #fff; font-weight: 700; line-height: 1.3; text-decoration: none; text-align: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pub .btn:hover { background: var(--g2); border-color: var(--g2); color: #fff; }
.pub .btn-secondary { background: #fff; color: var(--g); }
.pub .btn-secondary:hover { background: var(--mist); color: var(--g2); }
.pub .btn[disabled] { opacity: .5; cursor: not-allowed; }
.pub .link { color: var(--g); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; min-height: 36px; }
.pub .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
@media (max-width: 480px) {
    .pub .btn { width: auto; }
    .pub .cta-row .btn, .pub .form > .btn, .pub .auth .btn { width: 100%; }
}

/* Header: logo, Products / Services / About, Request a Service, Request Cart, account, language. */
.pub .pub-header { position: sticky; top: 0; z-index: 20; padding: 0; background: var(--paper); border-bottom: 1px solid #E6E9E7; box-shadow: 0 2px 10px rgba(13, 59, 46, .06); }
.pub .pub-bar { max-width: 1180px; margin-inline: auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 12px; min-height: 68px; }
.pub .brand-link { display: inline-flex; flex: none; border-radius: 10px; }
.pub .site-logo { height: 46px; width: auto; display: block; }
.pub .pub-links { flex: 1; display: flex; align-items: center; gap: 24px; min-width: 0; }
.pub .pub-links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.pub .pub-links ul a { color: var(--ink); font-weight: 600; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.pub .pub-links ul a:hover, .pub .pub-links ul a.current { color: var(--g); border-bottom-color: var(--gold); }
.pub .pub-util { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; font-size: .93rem; }
.pub .pub-util form { margin: 0; }
.pub .pub-icon-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-weight: 600; min-height: 40px; }
.pub .pub-icon-link:hover { color: var(--g); }
.pub .pub-util .link { font-size: .9rem; color: var(--mut); font-weight: 600; }
.pub .pub-cta { min-height: 40px; padding: 6px 16px; border-radius: 8px; }
.pub .lang-switch { display: inline-flex; align-items: center; min-height: 32px; border: 1px solid #cfd6d2; border-radius: 999px; padding: 2px 12px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--ink); }
.pub .lang-switch:hover { border-color: var(--g); color: var(--g); }
.pub .pub-cta-narrow, .pub .pub-menu-button { display: none; }
.pub .pub-menu-button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--g); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.pub .pub-menu-button .i { width: 22px; height: 22px; }
.pub .pub-menu-button .when-open { display: none; }
.pub .pub-header.nav-open .pub-menu-button .when-open { display: inline-flex; }
.pub .pub-header.nav-open .pub-menu-button .when-closed { display: none; }
@media (max-width: 1023px) {
    .pub .pub-bar { flex-wrap: wrap; gap: 10px; min-height: 64px; }
    .pub .site-logo { height: 38px; }
    .pub .pub-cta-narrow { display: inline-flex; margin-inline-start: auto; }
    .pub .pub-menu-button { display: inline-flex; }
    .pub .pub-links { display: none; order: 5; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 0 12px; border-top: 1px solid var(--line-2); }
    .pub .pub-header.nav-open .pub-links { display: flex; }
    .pub .pub-links ul { flex-direction: column; gap: 0; }
    .pub .pub-links ul a { display: flex; min-height: 48px; align-items: center; border-bottom: 1px solid var(--line-2); font-size: 1.05rem; }
    .pub .pub-links ul a.current { border-bottom-color: var(--line-2); color: var(--g); box-shadow: inset -3px 0 0 var(--gold); padding-inline-start: 10px; }
    .lang-en .pub .pub-links ul a.current { box-shadow: inset 3px 0 0 var(--gold); }
    .pub .pub-util { margin-inline-start: 0; flex-wrap: wrap; gap: 8px 18px; padding-top: 6px; }
    .pub .pub-cta-wide { display: none; }
}
@media (max-width: 360px) { .pub .pub-cta-narrow { padding-inline: 10px; font-size: .9rem; } }

/* Page frame. */
.pub .site-main { max-width: 1180px; margin: 0 auto; padding: 28px var(--gutter) 64px; min-height: 50vh; }
.pub .site-main.home-main { max-width: none; padding: 0; }
.pub .breadcrumb { font-size: .9rem; color: var(--mut); margin: 0 0 12px; }
.pub .breadcrumb a { color: var(--mut); }
.pub .page-intro { padding: 12px 0 8px; margin-bottom: 20px; }
.pub .page-intro h1::before, .pub .legal > h1::before, .pub .page-head h1::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gold); margin-bottom: 14px;
}
.pub .page-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin: 4px 0 18px; }
.pub .page-head h1 { margin: 0; }
.pub .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 16px 0; box-shadow: var(--shadow); }
.pub .card h2 { font-size: 1.15rem; margin: 0 0 10px; }
.pub .card h3 { font-size: 1rem; margin: 16px 0 6px; }

/* Messages. */
.pub .notice, .pub .error { border-radius: 10px; padding: 12px 16px; line-height: 1.8; }
.pub .notice { background: #EEF5F1; border: 1px solid #D3E5DA; color: var(--g); }
.pub .error { background: var(--bad-bg); border: 1px solid #F1CBC6; color: var(--bad); }
.pub .error p { margin: 4px 0; }
.pub .field-error { color: var(--bad); font-size: .9rem; margin: -2px 0 4px; }
.pub .badge { font-size: .8rem; padding: 2px 10px; }

/* Designed empty states: every list says so in a calm framed box, its link as a button. */
.pub p.empty {
    margin: 20px 0; padding: 72px 20px 28px; text-align: center; color: var(--mut); font-size: 1.02rem;
    border: 1.5px dashed #CFD8D3; border-radius: var(--radius);
    background: var(--mist) url("../brand/icons/clipboard-list.svg") no-repeat center 24px / 32px 32px;
}
.pub p.empty a { display: table; margin: 14px auto 0; padding: 9px 20px; border: 1.5px solid var(--g); border-radius: 10px; font-weight: 700; text-decoration: none; background: #fff; }
.pub p.empty a:hover { background: var(--g); color: #fff; }
.pub p.empty + p .btn { display: flex; width: max-content; margin-inline: auto; }

/* Forms. */
.pub .form { gap: 6px; margin: 18px 0; }
.pub .form label { font-weight: 700; color: var(--ink); font-size: .95rem; margin-top: 8px; }
.pub .form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.pub .form select, .pub .form textarea, .pub .filters input, .pub .filters select, .pub .catalog-search input, .pub .catalog-search select {
    font: inherit; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #C9D3CE; border-radius: 10px; background: #fff; color: var(--ink);
}
.pub .form textarea { min-height: 110px; line-height: 1.8; }
.pub .form input:focus, .pub .form select:focus, .pub .form textarea:focus, .pub .filters input:focus, .pub .filters select:focus, .pub .catalog-search input:focus, .pub .catalog-search select:focus {
    outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(199, 154, 46, .35);
}
.pub .form > .btn { margin-top: 14px; justify-self: start; }
.pub .password { gap: 6px; }
.pub .password .link { flex: none; padding-inline: 8px; }
.pub .check { font-weight: 400 !important; align-items: flex-start; gap: 10px; margin-top: 12px; }
.pub .check input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--g); }

/* Sign-in style pages: one centred card. */
.pub .auth {
    max-width: 520px; margin: 12px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 26px 20px; box-shadow: var(--shadow);
}
@media (min-width: 640px) { .pub .auth { padding: 34px 36px; } }
.pub .auth::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gold); margin-bottom: 16px; }
.pub .auth h1 { font-size: 1.6rem; }
.pub .auth h2 { font-size: 1.1rem; margin: 26px 0 6px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pub .auth > p:last-child { margin-bottom: 0; }
.pub .auth.request-form { max-width: 680px; }
.pub .auth.confirmation { max-width: 640px; }
.pub .auth .form + p, .pub .auth .form ~ p { font-size: .95rem; }
.pub .confirmation ol { padding-inline-start: 22px; display: grid; gap: 6px; }
.pub .confirmation .reference { background: var(--mist); border-color: var(--line); }
.pub .confirmation .reference strong { color: var(--g); }
.pub .request-context { background: var(--cream); border: 0; border-radius: 12px; padding: 14px 16px; }
.pub .request-context dt { color: var(--mut); }

/* Home: hero, sections, final call. */
.pub .hero { padding: 40px 0 48px; background: linear-gradient(180deg, var(--paper), var(--mist)); }
.pub .hero-grid { display: grid; gap: 28px; align-items: center; }
.pub .hero h1 { font-size: 2rem; line-height: 1.35; margin: 0 0 12px; }
.pub .hero .lead { font-size: 1.08rem; }
@media (min-width: 960px) {
    .pub .hero { padding: 72px 0; }
    .pub .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; }
    .pub .hero h1 { font-size: 2.65rem; }
}
.pub .hero-visual {
    position: relative; overflow: hidden; background: var(--g); border-radius: 22px; aspect-ratio: 4 / 3;
    display: grid; place-items: center; max-width: 520px; width: 100%; justify-self: center;
}
.pub .hero-visual::after { content: ""; position: absolute; inset-block-end: -70px; inset-inline-end: -50px; width: 230px; height: 230px; border-radius: 50%; background: rgba(199, 154, 46, .35); }
.pub .hero-visual::before { content: ""; position: absolute; inset-block-start: -40px; inset-inline-start: -40px; width: 140px; height: 140px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); }
.pub .hero-card { position: relative; z-index: 1; width: 72%; background: #fff; border-radius: 16px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.pub .hero-card .hero-logo { justify-self: start; height: 52px; width: auto; display: block; }
.pub .hero-card i { display: block; height: 10px; border-radius: 6px; background: #E3E8E5; }
.pub .hero-card i:nth-of-type(1) { width: 55%; background: var(--gold); }
.pub .hero-card i:nth-of-type(3) { width: 80%; }
.pub .hero-card b { display: block; height: 56px; border-radius: 10px; background: #EEF3F0; }
@media (max-width: 959px) { .pub .hero-visual { aspect-ratio: 16 / 9; max-width: none; } .pub .hero-card { width: 64%; padding: 14px; gap: 8px; } .pub .hero-card .hero-logo { height: 40px; } .pub .hero-card b { height: 36px; } }
.pub .hero-placeholder .hero-text::after {
    content: ""; display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--gold); margin-top: 20px;
}

.pub .home-section { padding: 48px 0; border-top: 0; }
@media (min-width: 960px) { .pub .home-section { padding: 64px 0; } }
.pub .home-section.tint { background: var(--cream); }
.pub .section-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.pub .section-head h2 { margin: 0; }
.pub .section-head .lead { margin: 6px 0 0; }
.pub .view-all { color: var(--g); font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.pub .view-all::after { content: "←"; font-family: var(--toa-font-en); }
.lang-en .pub .view-all::after { content: "→"; }
.pub .view-all:hover { text-decoration: underline; }

.pub .why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pub .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pub .why-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
.pub .why-grid li { padding-top: 14px; border-top: 3px solid var(--gold); }
.pub .why-grid h3 { margin: 10px 0 4px; }
.pub .why-grid p { color: var(--mut); line-height: 1.8; }
.pub .icon-box { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(199, 154, 46, .45); flex: none; }
.pub .icon-box img { width: 24px; height: 24px; }
.pub .icon-box-lg { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px; }
.pub .icon-box-lg img { width: 32px; height: 32px; }

.pub .about-band { border-top: 1px solid var(--line-2); }
.pub .home-about { display: grid; gap: 24px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 960px) { .pub .home-about { grid-template-columns: 1.4fr 1fr; gap: 48px; } }
.pub .about-text p { color: var(--mut); line-height: 1.95; max-width: 62ch; }
.pub .founder-card { background: var(--mist); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.pub .founder-card p { color: var(--mut); line-height: 1.85; }
.pub .founder-card .founder-name { color: var(--g); font-size: 1.2rem; }
.pub .eyebrow { color: var(--gold-ink); font-weight: 700; letter-spacing: .02em; }
.pub .external-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.pub .external-link .i { width: 18px; height: 18px; color: var(--gold); }
.pub .external-link:hover { text-decoration: underline; }

.pub .choice { background: var(--g); color: #fff; text-align: center; }
.pub .choice h2 { color: #fff; font-size: 1.7rem; margin: 0 0 6px; }
.pub .choice p { color: #D7E0DB; max-width: 60ch; margin-inline: auto; }
.pub .choice .cta-row { justify-content: center; }
.pub .choice .btn { background: var(--gold); border-color: var(--gold); color: var(--g2); }
.pub .choice .btn:hover { background: #D6AB45; border-color: #D6AB45; }
.pub .choice .btn-secondary { background: transparent; border-color: #fff; color: #fff; }
.pub .choice .btn-secondary:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Catalog cards: products (cover + text + link) and services (icon + text + link). */
.pub .catalog-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pub .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pub .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pub .home-section .catalog-grid:not(.product-grid) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pub .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pub .home-section .product-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.pub .catalog-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; gap: 8px; box-shadow: none; transition: box-shadow .15s ease, border-color .15s ease; }
.pub .catalog-card:hover { box-shadow: var(--shadow); border-color: #D3DBD7; }
.pub .catalog-card h3 { margin: 6px 0 0; font-size: 1.1rem; }
.pub .catalog-card p { color: var(--mut); line-height: 1.8; }
.pub .card-link { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; align-self: flex-start; }
.pub .card-link::after { content: "←"; font-family: var(--toa-font-en); transition: transform .15s ease; }
.lang-en .pub .card-link::after { content: "→"; }
.pub .card-link:hover { text-decoration: underline; }
.pub .catalog-card .card-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pub .catalog-card { position: relative; }
.pub .catalog-card:focus-within { box-shadow: 0 0 0 2px var(--gold); }
.pub .home-section.tint .catalog-card { background: #fff; border-color: #ECE6D8; }

.pub .product-card { padding: 0; overflow: hidden; gap: 0; }
.pub .product-cover {
    aspect-ratio: 16 / 9; border-radius: 0; border-bottom: 1px solid var(--line-2);
    background: linear-gradient(135deg, #E9EFEC, var(--cream)); color: var(--g); font-size: 1.15rem; font-weight: 800; position: relative; overflow: hidden;
}
.pub .product-cover::after { content: ""; position: absolute; inset-block-end: -36px; inset-inline-end: -36px; width: 110px; height: 110px; border-radius: 50%; background: rgba(199, 154, 46, .22); }
.pub .product-cover span { position: relative; z-index: 1; max-width: 85%; }
.pub .product-cover-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #E9EFEC; }
.pub .product-card .product-cover-img { border-bottom: 1px solid var(--line-2); }
.pub .product-head .product-cover-img { border-radius: 18px; border: 1px solid var(--line); }
.pub .product-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.pub .product-gallery li { margin: 0; padding: 0; }
.pub .product-gallery a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.pub .product-gallery a:hover { border-color: var(--g); }
.pub .product-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.pub .product-card .card-body { padding: 16px 18px 0; flex: 1; display: grid; gap: 6px; align-content: start; }
.pub .product-card .card-foot { padding: 6px 18px 14px; }

/* Catalog list pages. */
.pub .catalog-search { margin: 0 0 22px; gap: 10px; }
.pub .catalog-search input[type="search"] { flex: 1 1 240px; width: auto; }
.pub .catalog-search select { flex: 0 1 220px; width: auto; }
.pub .catalog-search .btn { min-height: 48px; }
.pub .pager { justify-content: center; gap: 12px; margin-top: 28px; }
.pub .pager a { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; font-weight: 700; }
.pub .pager a:hover { border-color: var(--g); }
.pub .pager span { color: var(--mut); }
.pub .closing-cta:not(p) { margin-top: 40px; padding: 32px 24px; border-radius: 18px; background: var(--g); text-align: center; border: 0; }
.pub .closing-cta:not(p) h2 { color: #fff; margin-top: 0; }
.pub .closing-cta:not(p) .cta-row { justify-content: center; }
.pub .closing-cta:not(p) .btn { background: var(--gold); border-color: var(--gold); color: var(--g2); }
.pub .home-main .closing-cta:not(p) { margin: 0; border-radius: 0; }

/* Product and Service detail. */
.pub .detail-hero { display: grid; gap: 24px; align-items: center; padding: 8px 0 28px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.pub .detail-hero h1::before { display: none; }
.pub .product-head .product-cover { max-width: none; border-radius: 18px; margin: 0; font-size: 1.5rem; border: 1px solid var(--line); }
@media (min-width: 960px) {
    .pub .detail-hero { grid-template-columns: 1fr 1.1fr; gap: 40px; }
    .pub .detail-hero .product-cover, .pub .detail-hero .product-cover-img { order: 2; }
}
.pub .detail-hero .cta-row { margin-top: 18px; }
.pub .service-head { padding: 24px 20px; border-radius: 18px; background: linear-gradient(180deg, #fff, var(--mist)); border: 1px solid var(--line); }
.pub .service-head h1::before { display: none; }
@media (min-width: 640px) { .pub .service-head { padding: 32px; } }
.pub .price { color: var(--g); font-weight: 800; font-size: 1.1rem; margin: 4px 0; }
.pub .detail-sections { display: grid; gap: 18px; margin-top: 22px; }
.pub .service-section { max-width: none; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.pub .service-section h2 { font-size: 1.2rem; margin: 0 0 10px; }
.pub .service-section .text { color: var(--ink); line-height: 1.95; }
.pub .service-section .text > * { margin: 0 0 10px; }
.pub .service-section .text > :last-child { margin-bottom: 0; }
.pub .service-section .text h3 { font-size: 1.05rem; margin-top: 16px; }
.pub .service-section .text :is(ul, ol) { padding-inline-start: 22px; }
.pub .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .pub .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } }
.pub .check-list li { padding-inline-start: 30px; background: url("../brand/icons/circle-check.svg") no-repeat right 2px top 4px / 20px 20px; line-height: 1.8; }
.lang-en .pub .check-list li { background-position: left 0 top 4px; }
.pub .offer-list { gap: 14px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 640px) { .pub .offer-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.pub .offer-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; gap: 6px; align-content: start; background: var(--mist); }
.pub .offer-list li.selected { background: #fff; }
.pub .offer-list .offer-name { color: var(--g); font-size: 1.08rem; }
.pub .offer-list span:not(.price) { color: var(--mut); }
.pub .offer-list form { margin-top: 8px; }
.pub .offer-list .btn { width: 100%; }
.pub .package-list li, .pub .package-option { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--mist); }
.pub .package-option:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: #fff; }
.pub .package-option input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--g); flex: none; }
.pub .package strong { color: var(--g); }
.pub .package-items { color: var(--mut); font-size: .95rem; }
.pub .package-choice legend { font-weight: 700; margin-bottom: 4px; }
.pub p.closing-cta { margin-top: 26px; }

/* About page. */
.pub .about-page > section { max-width: none; margin-top: 22px; }
.pub .about-page > section:not(.founder-card) { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.pub .about-page section h2 { margin-top: 0; }
.pub .about-page section p { color: var(--mut); line-height: 1.95; }
.pub .about-list { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 640px) { .pub .about-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .pub .about-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pub .about-list li { border-top: 3px solid var(--gold); padding-top: 10px; }
.pub .about-list h3 { margin: 0 0 4px; }
.pub .about-page .founder-card h2 { margin: 0 0 6px; }
.pub .about-business { margin-top: 26px; padding: 20px; border-radius: var(--radius); background: var(--cream); }
.pub .about-business h2 { margin: 0 0 8px; font-size: 1.1rem; }
.pub .about-business .business-details { color: var(--ink); }

/* Legal pages and "being prepared". */
.pub .legal { max-width: 780px; margin-inline: auto; }
.pub .legal-meta { padding: 10px 14px; background: var(--mist); border-radius: 10px; width: fit-content; max-width: 100%; }
.pub .legal-toc { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 16px 0 24px; }
.pub .legal-toc ol { margin: 8px 0 0; padding-inline-start: 22px; display: grid; gap: 4px; }
.pub .legal section { scroll-margin-top: 90px; }
.pub .legal h2 { font-size: 1.2rem; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pub .legal .text { line-height: 2; }
.pub .legal-versions { margin-top: 32px; }
.pub .legal-versions ul { padding-inline-start: 20px; }
.pub .legal > .notice[role="note"]:only-of-type:last-child,
.pub .site-main > .notice[role="note"]:last-child {
    padding: 72px 20px 28px; text-align: center; border: 1.5px dashed #CFD8D3; color: var(--mut);
    background: var(--mist) url("../brand/icons/notebook-pen.svg") no-repeat center 24px / 32px 32px; font-size: 1.02rem;
}
.pub .site-main > h1:first-child::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gold); margin-bottom: 14px; }

/* Request Cart: lines beside the summary on wide screens. */
.pub .cart-form { margin: 8px 0 0; gap: 16px; }
@media (min-width: 960px) {
    .pub .cart-form { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 0 28px; }
    .pub .cart-form > .cart-lines { grid-column: 1; grid-row: 1 / span 6; }
    .pub .cart-form > :not(.cart-lines):not(input) { grid-column: 2; }
    .pub .cart-summary { position: sticky; top: 92px; }
}
.pub .cart-lines { margin: 0; gap: 14px; }
.pub .cart-lines > li.card { margin: 0; display: grid; gap: 6px; }
.pub .cart-lines h2 { font-size: 1.08rem; margin: 0; }
.pub .cart-lines h2 a { text-decoration: none; }
.pub .cart-lines li label { font-weight: 600; font-size: .9rem; }
.pub .cart-lines .link { justify-self: start; color: var(--bad); font-size: .92rem; }
.pub .cart-summary { margin: 0; display: grid; gap: 6px; border-top: 4px solid var(--gold); }
.pub .cart-summary h3 { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pub .cart-summary .btn { margin-top: 12px; width: 100%; }
.pub .card .cart-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.pub .card .cart-lines li .text { flex-basis: 100%; margin: 0; color: var(--mut); }
.pub .card .cart-lines li .price { margin: 0; }
.pub .request-total { color: var(--g); font-size: 1.1rem; }

/* Customer account: tabs, overview, lists, details. */
.pub .account-nav {
    display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: 0 0 24px;
    background: var(--mist); border: 1px solid var(--line); border-radius: 14px;
}
.pub .account-nav::-webkit-scrollbar { display: none; }
.pub .account-nav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 10px; color: var(--mut); font-weight: 700; text-decoration: none; border: 0; white-space: nowrap; }
.pub .account-nav a:hover { color: var(--g); background: #fff; }
.pub .account-nav a.current { background: var(--g); color: #fff; border: 0; }
@media (max-width: 639px) {
    .pub .account-nav { flex-wrap: wrap; }
    .pub .account-nav a { flex: 1 1 auto; justify-content: center; padding: 6px 10px; }
}
.pub .account-welcome { padding: 4px 0 8px; }
.pub .account-welcome h1::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gold); margin-bottom: 14px; }
.pub .overview-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 18px 0 8px; }
@media (min-width: 640px) { .pub .overview-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.pub .stat { margin: 0; display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--g); box-shadow: var(--shadow); }
.pub .stat .i { width: 28px; height: 28px; color: var(--gold); padding: 8px; box-sizing: content-box; border-radius: 10px; background: var(--gold-soft); }
.pub .stat a { text-decoration: none; }
.pub .stat-attention { border-color: var(--gold); }
.pub .filters { gap: 10px; margin: 0 0 18px; padding: 12px; background: var(--mist); border: 1px solid var(--line); border-radius: 14px; }
.pub .filters input { flex: 1 1 240px; width: auto; }
.pub .filters select { flex: 0 1 200px; width: auto; }
.pub .filters .btn { min-height: 48px; }
.pub .ticket-list { display: grid; gap: 12px; }
.pub .ticket-list .card { margin: 0; padding: 16px 18px; transition: border-color .15s ease; }
.pub .ticket-list .card:hover { border-color: #C9D3CE; }
.pub .ticket-list .card p { margin: 2px 0; }
.pub .ticket-list .card h2 { margin: 6px 0; }
.pub .ticket-list .card h2 a { text-decoration: none; }
.pub .ticket-list .card h2 a:hover { text-decoration: underline; }
.pub .detail-head { margin: 4px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); align-items: flex-start; }
.pub .detail-head h1 { margin: 0; font-size: 1.6rem; }
.pub .history { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pub .history li { position: relative; padding: 4px 0 14px; padding-inline-start: 24px; border-inline-start: 2px solid var(--line); margin-inline-start: 6px; }
.pub .history li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); }
.pub .history li:last-child { border-inline-start-color: transparent; }
.pub .facts { gap: 6px 18px; }
.pub .plain-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.pub .plain-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; background: var(--mist); border-radius: 10px; }
.pub .conversation { gap: 14px; }
.pub .message { border-radius: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); max-width: 46rem; }
.pub .message.mine { margin-inline-start: auto; background: #EEF5F1; border-color: #D3E5DA; }
.pub .message .secondary { font-size: .85rem; }
.pub table.list { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.pub table.list th { background: var(--mist); padding: 12px 14px; color: var(--mut); }
.pub table.list td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.pub table.list tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
    .pub table.list { border: 0; background: transparent; }
    .pub table.list tr { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
    .pub table.list td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
    .pub table.list td:last-child { border-bottom: 0; }
    .pub table.stack-table td::before { content: attr(data-label); color: var(--mut); font-size: .9rem; }
}
.pub .inv { border-radius: var(--radius); }
.pub .table-wrap { overflow-x: auto; }

/* Footer: deep green; the logo sits on a light plate (brand rule: never on dark backgrounds). */
.pub .site-footer { display: block; background: var(--g2); color: #D7E0DB; padding: 18px 0 10px; border-top: 0; font-size: .92rem; }
.pub .site-footer a { color: #E7EEEA; text-decoration: none; }
.pub .site-footer a:hover { color: #fff; text-decoration: underline; }
.pub .footer-logo { display: inline-block; }
.pub .footer-logo img { display: block; height: 34px; width: auto; }
/* Owner 2026-10-10, compact layout «أ»: logo, legal pages and contact on one line; nothing the header repeats. */
.pub .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pub .footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pub .footer-links ul { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.pub .footer-links a { display: inline-flex; min-height: 32px; align-items: center; overflow-wrap: anywhere; }
.pub .footer-bottom { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; color: #AFC0B7; font-size: .82rem; }
.pub .footer-bottom .copyright { margin: 0; }
.pub .footer-bottom .business-details { color: #AFC0B7; margin: 0; }

/* Staff content preview keeps its bar above the page. */
.pub .preview-bar { position: relative; z-index: 30; }

@media (prefers-reduced-motion: reduce) { .pub * { transition: none !important; } }
@media print {
    .pub .pub-header, .pub .site-footer, .pub .account-nav { display: none !important; }
    .pub .site-main { padding: 0; }
}

/* Refinements after the screenshot review. */
html[dir="rtl"] .pub .external-link .i { transform: scaleX(-1); }
.pub .founder-card a:not(.btn) { font-weight: 700; }
.pub .service-section ul:not(.check-list):not(.offer-list):not(.package-list):not(.product-gallery) { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pub .service-section ul:not(.check-list):not(.offer-list):not(.package-list):not(.product-gallery) li { position: relative; padding-inline-start: 20px; }
.pub .service-section ul:not(.check-list):not(.offer-list):not(.package-list):not(.product-gallery) li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .75em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
@media (min-width: 760px) {
    .pub .package-choice fieldset { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .pub .package-choice legend { float: inline-start; width: 100%; }
    .pub .package-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.pub .cart-lines textarea { min-height: 72px; }
@media (max-width: 639px) {
    .pub .product-cover { aspect-ratio: 2 / 1; }
}
.pub #conversation + .form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px 20px; box-shadow: var(--shadow); }
.pub #conversation + .form label { margin-top: 0; }

/* Owner 2026-10-10 and 10-11: Arabic is always written right to left, in every field. A right-to-left field keeps
   its direction, so an Arabic text that starts with an English word still runs right to left. A left-to-right field
   (English, an email, a link, a phone) follows its text's own direction, so Arabic typed there runs right to left. */
input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea {
    text-align: start;
}
:is(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea):dir(ltr) {
    unicode-bidi: plaintext;
}

/* Catalog: Service images (decision 6). A Service with a cover shows it like a Product: card image and page hero. */
.pub .service-card.with-cover { padding: 0; overflow: hidden; gap: 0; }
.pub .service-card.with-cover .product-cover-img { border-bottom: 1px solid var(--line-2); }
.pub .service-card.with-cover .card-body { padding: 16px 18px 0; flex: 1; display: grid; gap: 6px; align-content: start; }
.pub .service-card.with-cover .card-foot { padding: 6px 18px 14px; }
.pub .service-head.with-cover { background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 8px 0 28px; }
.pub .service-head.with-cover .product-cover-img { border-radius: 18px; border: 1px solid var(--line); }

/* Customer account in place (Owner: everything from the same page): the Profile's email, password and closure
   forms and «اطلب المساعدة» on a request or order page open in place. */
.pub .account-section { margin-top: 24px; scroll-margin-top: 90px; }
.pub .account-section h2 { margin-bottom: 6px; }
.pub #help { scroll-margin-top: 90px; }
.pub details.inplace { border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; background: #fff; }
.pub details.inplace[open] { padding-bottom: 6px; }
.pub details.inplace > summary { font-weight: 700; color: var(--g); display: flex; align-items: center; }
.pub details.inplace > .form { margin-top: 6px; }