/* =========================================================================
   Aumnia Digital Card platform — DESIGN LIBRARY (premium collection).
   Loaded after templates.css. Every rule targets an axis value that did not
   exist before, so the original Umnia Alkhair card (no data-design) and the
   original nine templates render exactly as they did.
   New axes:  data-logo · data-profile · data-density · data-ornament · data-bgx · data-fonthead
   New values: hero arch/frame/editorial/floating · actions outline/bar ·
               services rows/feature · shape cut · surface glass/outline · heading ornament/bar
   ========================================================================= */
:root { --star8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 5.1 5.4-1.9-1.9 5.4L23 12l-4.9 2.4 1.9 5.4-5.4-1.9L12 23l-2.6-5.1-5.4 1.9 1.9-5.4L1 12l4.9-2.4L4 4.2l5.4 1.9z'/%3E%3C/svg%3E"); }

/* ---------- hero background layers (inline styles come from design-art.js) ---------- */
html[data-bgx] .hero__pattern { -webkit-mask-image: none; mask-image: none; }
html[data-hero="minimal"][data-bgx] .hero__bg { display: block; }
html[data-hero="minimal"][data-bgx] .hero__glow { display: none; }

/* ---------- category icon (decorative; never replaces an uploaded logo) ---------- */
.hero__icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); color: var(--gold-300); flex: none; }
.hero__icon .ic { width: 17px; height: 17px; }
.hero__iconrow { display: flex; justify-content: center; margin-top: 12px; }
html[data-hero="minimal"] .hero__icon { background: var(--cream); border-color: var(--line); color: var(--maroon-600); }
.emblem--icon { color: var(--maroon-600); }
.emblem--icon .ic { width: 54%; height: 54%; stroke-width: 1.3; }
.foot__mark .emblem--icon .ic { width: 60%; height: 60%; }

/* ---------- logo frames ---------- */
html[data-logo="circle"] .hero .emblem, html[data-logo="circle"] .hero .logo-frame { border-radius: 50%; }
html[data-logo="rounded"] .hero .emblem, html[data-logo="rounded"] .hero .logo-frame { border-radius: 26%; }
html[data-logo="square"] .hero .emblem, html[data-logo="square"] .hero .logo-frame { border-radius: 6px; }
html[data-logo="arch"] .hero .emblem, html[data-logo="arch"] .hero .logo-frame { border-radius: 999px 999px 10px 10px / 70% 70% 10px 10px; height: 128px; }
html[data-logo="arch"][data-hero="split"] .hero .emblem, html[data-logo="arch"][data-hero="split"] .hero .logo-frame { height: 100px; }
html[data-logo]:not([data-logo="auto"]) .hero .emblem__star { display: none; }

/* ---------- hero: arch (architectural arch window for the logo, curved base) ---------- */
html[data-hero="arch"] .hero { border-radius: 0 0 50% 50% / 0 0 54px 54px; padding-bottom: 116px; }
html[data-hero="arch"] .hero::after { left: 26%; right: 26%; }
html[data-hero="arch"] .hero__logo { position: relative; padding: 10px; margin-bottom: 20px; }
html[data-hero="arch"] .hero__logo::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--gold-400); border-radius: 999px 999px 14px 14px / 70% 70% 14px 14px; opacity: .8; }
html[data-hero="arch"] .emblem, html[data-hero="arch"] .logo-frame { border-radius: 999px 999px 10px 10px / 70% 70% 10px 10px; width: 108px; height: 124px; }
html[data-hero="arch"] .emblem__star { display: none; }
html[data-hero="arch"] .hero__line { flex-basis: 44px; }

/* ---------- hero: frame (symmetrical framed header) ---------- */
html[data-hero="frame"] .hero { border-radius: 0; padding: calc(14px + env(safe-area-inset-top)) 28px 108px; }
html[data-hero="frame"] .hero::before { content: ""; position: absolute; inset: 10px 10px 56px; border: 1px solid color-mix(in srgb, var(--gold-400) 70%, transparent);
  outline: 1px solid color-mix(in srgb, var(--gold-400) 35%, transparent); outline-offset: 4px; pointer-events: none; z-index: 0; }
html[data-hero="frame"] .hero::after { display: none; }
html[data-hero="frame"] .topbar, html[data-hero="frame"] .hero__logo, html[data-hero="frame"] .hero__name, html[data-hero="frame"] .hero__activity,
html[data-hero="frame"] .hero__locwrap, html[data-hero="frame"] .hero__iconrow { position: relative; z-index: 1; }
html[data-hero="frame"] .topbar { margin: 6px 4px 18px; }
html[data-hero="frame"] .emblem, html[data-hero="frame"] .logo-frame { box-shadow: 0 0 0 2px var(--gold-400), 0 0 0 7px color-mix(in srgb, var(--gold-400) 22%, transparent), 0 18px 40px -12px rgba(0, 0, 0, .55); }
html[data-hero="frame"] .body { margin-top: -44px; }

/* ---------- hero: editorial (typography-led, start-aligned, small logo) ---------- */
html[data-hero="editorial"] .hero { text-align: start; border-radius: 0; padding-bottom: 92px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
html[data-hero="editorial"] .topbar { grid-column: 1 / -1; }
html[data-hero="editorial"] .hero__logo { margin: 0 0 14px; justify-self: start; }
html[data-hero="editorial"] .emblem, html[data-hero="editorial"] .logo-frame { width: 58px; height: 58px; box-shadow: 0 0 0 1.5px var(--gold-400); }
html[data-hero="editorial"] .emblem__star { display: none; }
html[data-hero="editorial"] .emblem__mark { font-size: 28px; }
html[data-hero="editorial"] .hero__name { grid-column: 1 / -1; max-width: none; margin: 0; font-size: clamp(26px, 8vw, 36px); line-height: 1.3; font-weight: 800; }
html[data-hero="editorial"][lang="en"] .hero__name { font-size: clamp(32px, 10vw, 44px); line-height: 1.05; letter-spacing: -.01em; }
html[data-hero="editorial"] .hero__activity { grid-column: 1 / -1; justify-content: flex-start; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .28); }
html[data-hero="editorial"] .hero__line { display: none; }
html[data-hero="editorial"] .hero__locwrap, html[data-hero="editorial"] .hero__iconrow { grid-column: 1 / -1; justify-content: flex-start; }
html[data-hero="editorial"] .hero__loc { padding-inline: 0; text-align: start; }
html[data-hero="editorial"] .hero::after { left: 20px; right: 55%; }
html[data-hero="editorial"][dir="rtl"] .hero::after { left: 55%; right: 20px; }
html[data-hero="editorial"] .body { margin-top: -50px; }

/* ---------- hero: floating (a coloured card floating on the page, logo crossing its edge) ---------- */
html[data-hero="floating"] .hero { margin: 12px 12px 0; border-radius: 26px; padding-bottom: 76px; overflow: visible; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55); }
html[data-hero="floating"] .hero::after { display: none; }
html[data-hero="floating"] .hero__bg { border-radius: 26px; overflow: hidden; }
html[data-hero="floating"] .hero__logo { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); margin: 0; z-index: 3; }
html[data-hero="floating"] .emblem, html[data-hero="floating"] .logo-frame { width: 104px; height: 104px; box-shadow: 0 0 0 5px var(--white), 0 0 0 7px var(--gold-400), 0 18px 34px -12px rgba(0, 0, 0, .5); }
html[data-hero="floating"] .emblem__star { display: none; }
html[data-hero="floating"] .body { margin-top: 72px; }
html[data-hero="floating"] .avatar { margin-top: 18px; }
html[data-hero="floating"] .profile { padding-top: 0; }
html[data-hero="floating"][data-shape="cut"] .hero, html[data-hero="floating"][data-shape="cut"] .hero__bg { border-radius: 6px; }

/* ---------- profile layouts ---------- */
html[data-profile="inline"] .profile:not(.profile--bare) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; text-align: start; padding-top: 18px; }
html[data-profile="inline"] .profile:not(.profile--bare) .avatar { margin: 0; width: 76px; height: 76px; }
html[data-profile="inline"] .profile:not(.profile--bare) .quick { grid-column: 1 / -1; }
html[data-profile="spotlight"] .profile:not(.profile--bare) .avatar { width: 124px; height: 124px; margin-top: -62px;
  box-shadow: 0 0 0 5px var(--white), 0 0 0 7px var(--gold-500), 0 0 0 12px color-mix(in srgb, var(--gold-500) 18%, transparent), var(--shadow); }
html[data-profile="spotlight"][data-hero="floating"] .profile:not(.profile--bare) .avatar, html[data-profile="spotlight"][data-hero="minimal"] .profile:not(.profile--bare) .avatar { margin-top: 20px; }
html[data-profile="spotlight"] .profile__name { font-size: 23px; }
html[data-profile="spotlight"][lang="en"] .profile__name { font-size: 26px; }
html[data-profile="spotlight"] .profile__title { letter-spacing: .06em; }
html[data-profile="compact"] .profile:not(.profile--bare) { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: start; padding-top: 14px; box-shadow: none; }
html[data-profile="compact"] .profile:not(.profile--bare) .avatar { margin: 0; width: 52px; height: 52px; box-shadow: 0 0 0 2px var(--gold-400); }
html[data-profile="compact"] .profile__name { font-size: 17px; }
html[data-profile="compact"] .profile__org { display: none; }
html[data-profile="compact"] .profile:not(.profile--bare) .quick { grid-column: 1 / -1; }

/* ---------- contact buttons: outline & icon bar ---------- */
html[data-actions="outline"] .quick:not(.social):not(.share-row) .qa { background: transparent; border: 1.5px solid color-mix(in srgb, var(--maroon-600) 40%, var(--line)); }
html[data-actions="outline"] .quick:not(.social):not(.share-row) .qa__icon { background: none; box-shadow: none; color: var(--maroon-600); border: 1.5px solid currentColor; width: 40px; height: 40px; }
html[data-actions="outline"][data-surface="dark"] .quick:not(.social):not(.share-row) .qa__icon { color: var(--gold-400); }
html[data-actions="outline"] .quick:not(.social):not(.share-row) .qa:hover { background: var(--cream); }
html[data-actions="bar"] .quick:not(.social):not(.share-row) { display: flex; justify-content: space-around; gap: 4px; padding: 8px 6px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); }
html[data-actions="bar"] .quick:not(.social):not(.share-row) .qa { flex: 1; min-width: 0; padding: 4px 2px; background: none; border: 0; gap: 4px; box-shadow: none; }
html[data-actions="bar"] .quick:not(.social):not(.share-row) .qa:hover { transform: translateY(-2px); background: none; }
html[data-actions="bar"] .quick:not(.social):not(.share-row) .qa__icon { width: 44px; height: 44px; border-radius: 50%; }
html[data-actions="bar"] .quick:not(.social):not(.share-row) .qa__label { font-size: 11.5px; }
html[data-actions="bar"][data-shape="square"] .quick:not(.social):not(.share-row) { border-radius: 4px; }

/* ---------- services: rows & featured ---------- */
html[data-services="rows"] .svc-grid { grid-template-columns: 1fr; gap: 0; }
html[data-services="rows"] .svc { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; padding: 12px 2px; background: none; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none; clip-path: none; }
html[data-services="rows"] .svc:last-child { border-bottom: 0; }
html[data-services="rows"] .svc::before { display: none; }
html[data-services="rows"] .svc__icon { grid-row: span 2; margin: 0; width: 44px; height: 44px; }
html[data-services="rows"] .svc__text { margin-top: 0; }
html[data-services="feature"] .svc:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 18px 16px;
  background: linear-gradient(150deg, var(--maroon-500), var(--maroon-800)); border-color: transparent; }
html[data-services="feature"] .svc:first-child .svc__icon { grid-row: span 2; margin: 0; width: 56px; height: 56px; background: rgba(255, 255, 255, .14); box-shadow: none; }
html[data-services="feature"] .svc:first-child .svc__title { color: #fff; font-size: 16px; }
html[data-services="feature"] .svc:first-child .svc__text { color: rgba(255, 255, 255, .84); }
html[data-services="feature"] .svc:first-child::before { display: none; }

/* ---------- shape: cut (chamfered corners) ---------- */
html[data-shape="cut"] { --radius-lg: 0; --radius: 0; --radius-sm: 0; }
html[data-shape="cut"] .panel, html[data-shape="cut"] .profile { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
html[data-shape="cut"] .qa, html[data-shape="cut"] .svc, html[data-shape="cut"] .row, html[data-shape="cut"] .store, html[data-shape="cut"] .address,
html[data-shape="cut"] .body .btn { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
html[data-shape="cut"] .qa__icon, html[data-shape="cut"] .svc__icon, html[data-shape="cut"] .row__icon, html[data-shape="cut"] .panel__icon { border-radius: 2px; }
html[data-shape="cut"] .hero { border-radius: 0; }
html[data-shape="cut"] .actionbar .btn { border-radius: 4px; }
html[data-shape="cut"][data-actions="bar"] .quick:not(.social):not(.share-row) .qa { clip-path: none; }
@media (min-width: 560px) { html[data-shape="cut"] .card { border-radius: 6px; } }

/* ---------- surface: glass & outline ---------- */
html[data-surface="glass"] body { background:
  radial-gradient(80vw 60vh at 100% 0%, color-mix(in srgb, var(--maroon-600) 26%, transparent), transparent 70%),
  radial-gradient(70vw 60vh at 0% 100%, color-mix(in srgb, var(--gold-500) 30%, transparent), transparent 70%), var(--page); background-attachment: fixed; }
html[data-surface="glass"] .card { background: transparent; }
html[data-surface="glass"] .profile, html[data-surface="glass"] .panel { background: color-mix(in srgb, var(--white) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid color-mix(in srgb, #FFFFFF 60%, transparent); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .45); }
html[data-surface="glass"] .qa, html[data-surface="glass"] .row, html[data-surface="glass"] .address, html[data-surface="glass"] .svc { background: color-mix(in srgb, var(--white) 58%, transparent); }
html[data-surface="outline"] .profile, html[data-surface="outline"] .panel { box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--gold-500) 45%, var(--line)); }
html[data-surface="outline"] .qa, html[data-surface="outline"] .svc { box-shadow: none; }
html[data-surface="outline"] .qa__icon, html[data-surface="outline"] .svc__icon { box-shadow: none; }

/* ---------- headings: ornament & bar ---------- */
html[data-heading="ornament"] .panel__title { justify-content: center; text-align: center; }
html[data-heading="ornament"] .panel__title::after, html[data-heading="ornament"] .panel__title::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin: 0;
  background: var(--gold-500); -webkit-mask: var(--star8) center / contain no-repeat; mask: var(--star8) center / contain no-repeat; }
html[data-heading="ornament"] .panel__icon { display: none; }
html[data-heading="bar"] .panel__title { padding-inline-start: 12px; border-inline-start: 4px solid var(--gold-500); }
html[data-heading="bar"] .panel__title::after { display: none; }
html[data-heading="bar"] .panel__icon { background: none; width: auto; height: auto; color: var(--maroon-600); }
html[data-heading="bar"][data-surface="dark"] .panel__icon { color: var(--gold-400); }

/* ---------- section spacing ---------- */
html[data-density="compact"] .body { gap: 10px; }
html[data-density="compact"] .panel { padding: 16px 14px; }
html[data-density="compact"] .panel__title { margin-bottom: 10px; }
html[data-density="airy"] .body { gap: 24px; }
html[data-density="airy"] .panel { padding: 26px 22px; }
html[data-density="airy"] .panel__title { margin-bottom: 18px; }

/* ---------- ornaments ---------- */
html[data-ornament="corners"] .panel { position: relative; }
html[data-ornament="corners"] .panel::before, html[data-ornament="corners"] .panel::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--gold-500); pointer-events: none; opacity: .8; }
html[data-ornament="corners"] .panel::before { top: 6px; inset-inline-start: 6px; border-inline-end: 0; border-bottom: 0; }
html[data-ornament="corners"] .panel::after { bottom: 6px; inset-inline-end: 6px; border-inline-start: 0; border-top: 0; }
html[data-ornament="star"] .panel + .panel { position: relative; margin-top: 12px; overflow: visible; }
html[data-ornament="star"] .panel + .panel::before { content: ""; position: absolute; top: -22px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: var(--gold-500);
  -webkit-mask: var(--star8) center / contain no-repeat; mask: var(--star8) center / contain no-repeat; }
html[data-ornament="star"][data-shape="cut"] .panel + .panel::before { display: none; }
html[data-ornament="border"] .panel { outline: 1px dashed color-mix(in srgb, var(--gold-500) 55%, transparent); outline-offset: -7px; }
html[data-ornament="arch"] .panel { position: relative; padding-top: 30px; }
html[data-ornament="arch"] .panel::before { content: ""; position: absolute; top: 9px; left: 50%; width: 56px; height: 12px; margin-left: -28px; border: 1.5px solid var(--gold-500); border-bottom: 0; border-radius: 999px 999px 0 0; opacity: .85; }

/* headings use a separate display font when the font pairing defines one */
html[data-fonthead] .hero__name, html[data-fonthead] .profile__name, html[data-fonthead] .panel__title, html[data-fonthead] .svc__title { font-family: var(--font-head); }

@media (max-width: 360px) {
  html[data-actions="bar"] .quick:not(.social):not(.share-row) .qa__label { font-size: 10.5px; }
  html[data-hero="editorial"] .hero__name { font-size: 24px; }
}

/* ---------- safe preview mode: contact actions are simulated, never performed ---------- */
.preview-note { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--bar-h) + 18px); transform: translateX(-50%); width: max-content; max-width: min(92vw, 420px);
  padding: 10px 14px; border-radius: 12px; background: #1F1A17; color: #fff; font: 500 13px/1.5 "Segoe UI", Tahoma, sans-serif; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); text-align: center; }
.preview-note bdi { color: #F2D58E; word-break: break-all; }