/* ndize.al — client area, sign-in/up and legal pages.
   Loaded by the Ndize addon (modules/Addons/Ndize/hooks.php, ClientAreaHeadOutput).
   Colours come from theme.json (--theme-*); this file adds the type and the
   few rules the core layout hard-codes. */

:root {
    --bg: var(--theme-body-bg, #f5f9fd);
    --card: var(--theme-card-bg, #ffffff);
    --radius: 16px;
    --radius-sm: 10px;
    --nd-cloud: #38a8f0;
    --nd-on-cloud: #04121f;
    --nd-fire: #ffc21a;
    --nd-on-fire: #1a1405;
}
[data-theme="dark"] {
    --nd-cloud: #5bb8f5;
}

body {
    font-family: "Inter", system-ui, sans-serif !important;
    background: var(--bg) !important;
    color: var(--theme-text-color, #0e2233);
}
h1, h2, h3, h4,
.pn-page-title, .pn-card-title, .pn-section-title, .pn-stat-val,
.login-logo h1 {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: -0.01em;
}
code, kbd, pre, .pn-code, .font-monospace {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

/* Brand: wordmark in Space Grotesk, the dot is fire */
.pn-brand { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--theme-text-color, #0e2233) !important; }
.pn-brand-dot { background: var(--nd-fire) !important; }

/* Primary buttons: cloud fill, dark text (white fails contrast on cloud) */
.btn-primary, .btn.btn-primary {
    background: var(--nd-cloud) !important;
    border-color: var(--nd-cloud) !important;
    color: var(--nd-on-cloud) !important;
    border-radius: 10px;
}
.btn-primary:hover, .btn.btn-primary:hover {
    filter: brightness(1.06);
    color: var(--nd-on-cloud) !important;
}
.btn { border-radius: 10px; }

/* Most-popular / highlight */
.pn-popular { border-color: var(--nd-fire) !important; }

/* Cards */
.pn-card, .pn-product-card, .pn-stat { border-radius: 16px; }

/* Form controls: strong border + cloud-strong focus ring */
.pn-input, .form-control, .form-input, .form-select, input[type="text"], input[type="email"], input[type="password"], select, textarea {
    border-color: var(--theme-input-border, #6f879c);
    border-radius: 6px;
}
:focus-visible {
    outline: 2px solid var(--theme-link-color, #0a6aa8);
    outline-offset: 2px;
}

/* Links */
a { color: var(--theme-link-color, #0a6aa8); }

/* =====================================================================
   CLIENT NAVBAR — PNLCS's own items, ndize.al design
   (icon chips that ignite, dark active pill, cropped logo, fire CTA)
   ===================================================================== */
.pn-navbar {
    background: rgba(255,255,255,.86) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid #d5e2ee !important;
    box-shadow: 0 12px 32px -22px rgba(14,34,51,.35) !important;
}
[data-theme="dark"] .pn-navbar { background: rgba(11,22,34,.86) !important; border-bottom-color: #23384a !important; }
.pn-navbar-inner { height: 76px !important; max-width: 1440px !important; gap: 10px !important; }
.pn-brand img { max-height: 36px !important; height: 36px; width: auto; display: block; }
.pn-brand-dot { background: #ffc21a !important; }

.pn-nav { gap: 2px !important; padding: 0 8px !important; }
.pn-nav > .pn-nav-item > .pn-nav-link {
    position: relative;
    height: 44px; padding: 0 12px 0 42px !important;
    border-radius: 999px !important;
    font: 600 14px "Inter", system-ui, sans-serif !important;
    color: var(--theme-text-color, #0e2233) !important;
    background: transparent !important;
}
/* chip */
.pn-nav > .pn-nav-item > .pn-nav-link::before {
    content: ""; position: absolute; left: 6px; top: 50%;
    width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
    background: #d9eefc;
    transition: background-color .25s, transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .25s;
}
/* icon (drawn with a mask so it can change colour) */
.pn-nav > .pn-nav-item > .pn-nav-link::after {
    content: ""; position: absolute; left: 14px; top: 50%;
    width: 16px; height: 16px; margin-top: -8px;
    background: #0a6aa8;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
    transition: background-color .25s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.pn-nav > .pn-nav-item:hover > .pn-nav-link::before,
.pn-nav > .pn-nav-item > .pn-nav-link:focus-visible::before {
    background: #ffc21a; transform: rotate(-12deg) scale(1.08);
    box-shadow: 0 0 0 4px rgba(255,194,26,.22), 0 6px 16px -4px rgba(217,96,12,.55);
}
.pn-nav > .pn-nav-item:hover > .pn-nav-link::after,
.pn-nav > .pn-nav-item > .pn-nav-link:focus-visible::after { background: #1a1405; transform: rotate(-12deg); }
/* active page: dark pill */
.pn-nav > .pn-nav-item > .pn-nav-link.active { background: #0b1622 !important; color: #ffffff !important; }
.pn-nav > .pn-nav-item > .pn-nav-link.active::before { background: #ffc21a; }
.pn-nav > .pn-nav-item > .pn-nav-link.active::after { background: #1a1405; }
[data-theme="dark"] .pn-nav > .pn-nav-item > .pn-nav-link { color: #e8f1f8 !important; }
[data-theme="dark"] .pn-nav > .pn-nav-item > .pn-nav-link::before { background: #133049; }
[data-theme="dark"] .pn-nav > .pn-nav-item > .pn-nav-link::after { background: #7cc8f8; }
[data-theme="dark"] .pn-nav > .pn-nav-item > .pn-nav-link.active { background: #ffc21a !important; color: #1a1405 !important; }
.pn-nav > .pn-nav-item > .pn-nav-link > svg:not(.pn-chevron) { display: none; }   /* SSL's own icon: the chip replaces it */
/* top-level arrows take room the bar does not have; dropdowns still open on hover / tap */
.pn-nav > .pn-nav-item > .pn-nav-link > .pn-chevron { display: none !important; }
.pn-chevron { width: 13px !important; height: 13px !important; opacity: .7; }
/* language: globe + code only */
.pn-nav-right .pn-lang-name { display: none !important; }

/* below 1440px: same items without chips, so everything stays in the bar */
@media (max-width: 1439px) {
    .pn-nav > .pn-nav-item > .pn-nav-link { padding: 0 12px !important; }
    .pn-nav > .pn-nav-item > .pn-nav-link::before,
    .pn-nav > .pn-nav-item > .pn-nav-link::after { display: none; }
    .pn-nav > .pn-nav-item > .pn-nav-link:hover { background: #d9eefc !important; }
    .pn-nav > .pn-nav-item > .pn-nav-link.active:hover { background: #0b1622 !important; }
}

/* the seven items, in PNLCS's order */
.pn-nav > .pn-nav-item:nth-child(1) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E"); }
.pn-nav > .pn-nav-item:nth-child(2) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM4 13h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zM6 7h.01M6 17h.01'/%3E%3C/svg%3E"); }
.pn-nav > .pn-nav-item:nth-child(3) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.pn-nav > .pn-nav-item:nth-child(4) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2zM7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.pn-nav > .pn-nav-item:nth-child(5) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2zM9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.pn-nav > .pn-nav-item:nth-child(6) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zM8 8h8M8 12h5'/%3E%3C/svg%3E"); }
.pn-nav > .pn-nav-item:nth-child(7) > .pn-nav-link { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }

/* dropdowns */
.pn-dropdown {
    top: calc(100% + 8px) !important; min-width: 230px !important;
    padding: 8px !important; border-radius: 18px !important;
    border: 1px solid #d5e2ee !important;
    box-shadow: 0 30px 60px -20px rgba(4,18,31,.4) !important;
}
.pn-dropdown::before { top: -14px !important; height: 14px !important; }
.pn-dropdown a { padding: 10px 12px !important; border-radius: 12px !important; font-size: 14px !important; gap: 10px !important; }
.pn-dropdown a svg { color: #0a6aa8; transition: color .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.pn-dropdown a:hover { background: #f5f9fd !important; color: #0e2233 !important; }
.pn-dropdown a:hover svg { color: #d9600c; transform: rotate(-10deg); }
[data-theme="dark"] .pn-dropdown { border-color: #23384a !important; }
[data-theme="dark"] .pn-dropdown a:hover { background: #133049 !important; color: #e8f1f8 !important; }

/* right side: user pill, guest buttons */
.pn-user-btn { border-radius: 999px !important; padding: 5px 14px 5px 5px !important; background: #f5f9fd !important; color: #0e2233 !important; border: 1px solid #d5e2ee !important; }
.pn-user-btn:hover { background: #ffffff !important; border-color: #ffc21a !important; }
.pn-avatar { background: #ffc21a !important; color: #1a1405 !important; width: 32px !important; height: 32px !important; font-size: 13px !important; }
.pn-nav-right .pn-guest-btn { border-radius: 999px !important; height: 42px; padding: 0 18px !important; font-size: 14px !important; font-weight: 700 !important; }
.pn-nav-right .btn-outline.pn-guest-btn { background: transparent !important; border: 1px solid #6f879c !important; color: #0e2233 !important; }
.pn-nav-right .btn-primary.pn-guest-btn { background: #ffc21a !important; border-color: #ffc21a !important; color: #1a1405 !important; box-shadow: 0 8px 24px -10px rgba(217,96,12,.8); }

/* mobile menu */
.pn-hamburger { border-radius: 12px !important; padding: 10px 11px !important; }
.pn-mobile-menu {
    padding: 8px 16px 18px !important;
    max-height: calc(100vh - 76px); overflow-y: auto;
    border-top: 1px solid #d5e2ee !important;
}
.pn-mobile-menu a {
    display: block; margin: 1px 0; border-radius: 12px;
    padding: 11px 14px !important; font-size: 15px !important; font-weight: 500 !important;
}
.pn-mobile-menu a[style*="padding-left"] { padding-left: 28px !important; }   /* sub-items stay indented */
.pn-mobile-menu a:hover { background: #f5f9fd !important; color: #0e2233 !important; }
.pn-mobile-sec {
    margin-top: 10px !important; padding: 12px 14px 6px !important;
    border-top: 1px solid #e3edf5;
    font: 700 11.5px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .08em !important;
    color: #d9600c !important;
}
.pn-mobile-guest { padding: 8px 0 6px !important; gap: 8px !important; }
.pn-mobile-guest .btn { border-radius: 999px !important; min-height: 46px; font-weight: 700 !important; }
.pn-mobile-guest .btn-primary { background: #ffc21a !important; border-color: #ffc21a !important; color: #1a1405 !important; }
[data-theme="dark"] .pn-mobile-menu { border-top-color: #23384a !important; }
[data-theme="dark"] .pn-mobile-menu a:hover { background: #133049 !important; color: #e8f1f8 !important; }
[data-theme="dark"] .pn-mobile-sec { border-top-color: #23384a; }

/* footer */
.pn-footer { border-top: 1px solid #d5e2ee !important; }

/* =====================================================================
   CONTACT PAGE (.ndc-*)
   ===================================================================== */
.ndc-head { max-width: 760px; margin: 12px 0 36px; }
.ndc-eyebrow { font: 500 13px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #0a6aa8; }
.ndc-title { margin: 10px 0 12px; font: 700 clamp(38px, 5vw, 60px)/1.02 "Space Grotesk", system-ui, sans-serif !important; letter-spacing: -0.035em !important; color: var(--theme-text-color, #0e2233); }
.ndc-title em { font-style: normal; color: #d9600c; }
.ndc-lead { font-size: 17px; line-height: 27px; color: var(--theme-muted-color, #4a5d6e); }

.ndc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ndc-side { display: flex; flex-direction: column; gap: 18px; }

.ndc-card {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 26px; border-radius: 24px;
    background: var(--theme-card-bg, #ffffff); border: 1px solid #d5e2ee;
    color: var(--theme-text-color, #0e2233); text-decoration: none;
    box-shadow: 0 20px 50px -36px rgba(14,34,51,.35);
}
a.ndc-card { transition: transform .3s cubic-bezier(.2,.9,.2,1), border-color .2s, box-shadow .3s; }
a.ndc-card:hover { transform: translateY(-3px); border-color: #ffc21a; color: var(--theme-text-color, #0e2233); box-shadow: 0 30px 60px -30px rgba(14,34,51,.4); }
.ndc-form-card { padding: 32px; }
.ndc-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ndc-card__title { font: 700 22px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: -0.015em; }
.ndc-card__sub, .ndc-card__text { font-size: 14.5px; line-height: 22px; color: var(--theme-muted-color, #4a5d6e); }

.ndc-chip {
    flex: none; width: 46px; height: 46px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d9eefc; color: #0a6aa8;
    transition: background-color .25s, color .25s, transform .35s cubic-bezier(.3,1.6,.5,1);
}
.ndc-chip--sm { width: 32px; height: 32px; border-radius: 10px; }
.ndc-chip--dark { background: #0b1622; color: #ffc21a; }
a.ndc-card:hover .ndc-chip { background: #ffc21a; color: #1a1405; transform: rotate(-10deg); }
a.ndc-card--fire:hover .ndc-chip { background: #0b1622; color: #ffc21a; }

.ndc-card--fire { background: #ffc21a; border-color: #ffc21a; color: #1a1405; }
.ndc-card--fire .ndc-card__text { color: #3a2e0c; }
a.ndc-card--fire:hover { color: #1a1405; border-color: #d9600c; }
.ndc-more { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: #0a6aa8; text-decoration: none; }
.ndc-card--fire .ndc-more { color: #1a1405; }
.ndc-more svg { transition: transform .2s; }
.ndc-card:hover .ndc-more svg, .ndc-more:hover svg { transform: translateX(4px); }

.ndc-info { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; line-height: 21px; }
.ndc-info li { display: flex; gap: 12px; align-items: flex-start; }
.ndc-info li > span:last-child { padding-top: 5px; }

/* form */
.ndc-form { display: flex; flex-direction: column; gap: 18px; }
.ndc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ndc-field { display: flex; flex-direction: column; gap: 8px; }
.ndc-field label { font-weight: 600; font-size: 14px; color: var(--theme-text-color, #0e2233); }
.ndc-req { color: #b42318; }
.ndc-field input, .ndc-field select, .ndc-field textarea {
    width: 100%; min-height: 50px; padding: 12px 16px;
    border: 1px solid #6f879c !important; border-radius: 12px !important;
    background: var(--theme-input-bg, #ffffff); color: var(--theme-text-color, #0e2233);
    font: 400 15.5px "Inter", system-ui, sans-serif;
    transition: border-color .2s, box-shadow .2s;
}
.ndc-field textarea { min-height: 170px; resize: vertical; line-height: 24px; }
.ndc-field input:focus, .ndc-field select:focus, .ndc-field textarea:focus {
    outline: none; border-color: #0a6aa8 !important; box-shadow: 0 0 0 4px rgba(56,168,240,.2);
}
.ndc-submit {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
    background: #ffc21a; color: #1a1405; font: 700 16px "Inter", system-ui, sans-serif;
    box-shadow: 0 14px 34px -14px rgba(217,96,12,.9);
    transition: transform .2s, box-shadow .2s;
}
.ndc-submit:hover { transform: translateY(-2px); }
.ndc-submit svg { transition: transform .2s; }
.ndc-submit:hover svg { transform: translateX(4px); }
.ndc-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ndc-alert { padding: 14px 18px; border-radius: 14px; font-weight: 500; margin-bottom: 18px; }
.ndc-alert ul { margin: 0; padding-left: 18px; }
.ndc-alert--ok { background: rgba(17,115,74,.08); border: 1px solid rgba(17,115,74,.35); color: #11734a; }
.ndc-alert--err { background: rgba(180,35,24,.06); border: 1px solid rgba(180,35,24,.35); color: #b42318; }

[data-theme="dark"] .ndc-card { border-color: #23384a; }
[data-theme="dark"] .ndc-card--fire { border-color: #ffcc3d; background: #ffcc3d; }
[data-theme="dark"] .ndc-chip:not(.ndc-chip--dark) { background: #133049; color: #7cc8f8; }
[data-theme="dark"] .ndc-eyebrow, [data-theme="dark"] .ndc-more:not(.ndc-card--fire .ndc-more) { color: #7cc8f8; }
[data-theme="dark"] .ndc-title em { color: #ffcc3d; }

@media (max-width: 960px) {
    .ndc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ndc-row { grid-template-columns: 1fr; }
    .ndc-form-card { padding: 22px; }
    .ndc-submit { width: 100%; justify-content: center; }
}

/* =====================================================================
   SMOOTH DROPDOWNS — fade/slide instead of an instant display toggle,
   a short grace period on leave, keyboard (focus-within) support
   ===================================================================== */
.pn-navbar .pn-nav-item > .pn-dropdown {
    display: block !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(8px) scale(.98); transform-origin: top left;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.2,1), visibility 0s linear .22s;
    transition-delay: .12s, .12s, .34s;          /* grace period before closing */
}
.pn-navbar .pn-nav-item:hover > .pn-dropdown,
.pn-navbar .pn-nav-item.open > .pn-dropdown,
.pn-navbar .pn-nav-item:focus-within > .pn-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition-delay: 0s;
}
.pn-navbar .pn-nav-right .pn-dropdown { transform-origin: top right; }
/* the invisible bridge between item and panel, so moving the mouse down never closes it */
.pn-navbar .pn-dropdown::before { top: -16px !important; height: 16px !important; }
.pn-nav > .pn-nav-item > .pn-nav-link,
.pn-nav > .pn-nav-item > .pn-nav-link::before,
.pn-nav > .pn-nav-item > .pn-nav-link::after { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .pn-navbar .pn-nav-item > .pn-dropdown { transition: none; transform: none; }
}

/* ---- hover fix: the bridge must not be clipped, the gap is smaller, and the panel
        keeps taking the mouse during the grace period (visibility, not pointer-events) ---- */
.pn-navbar .pn-nav-item > .pn-dropdown {
    overflow: visible !important;
    top: calc(100% + 6px) !important;
    pointer-events: auto;
}
.pn-navbar .pn-dropdown::before { top: -14px !important; height: 14px !important; left: -8px !important; right: -8px !important; }
.pn-navbar .pn-dropdown > * { position: relative; }   /* keep items above the bridge */

/* ---- no underlines on hover (PNLCS's base CSS underlines every link) ---- */
.pn-navbar a, .pn-navbar a:hover,
.pn-mobile-menu a:hover, .pn-dropdown a:hover,
.pn-footer a:hover, .btn:hover, a.btn:hover,
.pn-table a:hover, .pn-back:hover, .pn-card a:hover { text-decoration: none !important; }
body a:hover { text-decoration: none; }

/* =====================================================================
   CLIENT AREA SKIN — the shared PNLCS components in the ndize.al design,
   so every client page (dashboard, services, invoices, tickets, domains,
   account…) follows it without copying its template.
   ===================================================================== */
.pn-main { max-width: 1280px !important; padding: 40px 32px 64px !important; }
@media (max-width: 600px) { .pn-main { padding: 24px 16px 48px !important; } }

/* page header */
.pn-page-header { margin-bottom: 28px !important; align-items: flex-end !important; }
.pn-page-title {
    position: relative; padding-top: 14px;
    font: 700 clamp(26px, 3vw, 34px)/1.1 "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: -0.025em !important; color: var(--text) !important;
}
.pn-page-title::before {
    content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #38a8f0, #ffc21a);
}
.pn-page-subtitle { font-size: 15px !important; margin-top: 6px !important; color: var(--muted) !important; }
.pn-section-title { font: 700 20px "Space Grotesk", system-ui, sans-serif !important; letter-spacing: -0.01em; }

/* cards */
.pn-card {
    border-radius: 20px !important; border: 1px solid var(--border) !important;
    box-shadow: 0 18px 44px -34px rgba(14,34,51,.4) !important; overflow: hidden;
}
.pn-card-header { padding: 18px 24px !important; background: transparent; }
.pn-card-title { font: 700 17px "Space Grotesk", system-ui, sans-serif !important; letter-spacing: -0.01em; color: var(--text) !important; }
.pn-card-body { padding: 24px 28px !important; }
@media (max-width: 600px) { .pn-card-body { padding: 20px !important; } }

/* buttons */
.btn {
    border-radius: 999px !important; padding: 11px 20px !important;
    font: 600 14px "Inter", system-ui, sans-serif !important; gap: 8px !important;
    transition: transform .15s, filter .15s, background-color .15s, border-color .15s !important;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 8px 14px !important; font-size: 13px !important; }
.btn-xs { padding: 5px 11px !important; font-size: 12px !important; }
.btn-accent { background: #ffc21a !important; color: #1a1405 !important; box-shadow: 0 10px 24px -12px rgba(217,96,12,.8); }
.btn-accent:hover { filter: brightness(1.04); color: #1a1405 !important; }
.btn-outline, .btn-default {
    background: transparent !important; color: var(--text) !important;
    border: 1px solid #6f879c !important;
}
.btn-outline:hover, .btn-default:hover { border-color: #ffc21a !important; background: rgba(255,194,26,.08) !important; color: var(--text) !important; }
.btn-danger { background: #b42318 !important; color: #ffffff !important; }
.btn-success { background: #11734a !important; color: #ffffff !important; }
.btn.submitting { opacity: .7; }

/* forms */
.form-control, .pn-input, .form-select {
    min-height: 46px; padding: 11px 15px !important;
    border: 1px solid #6f879c !important; border-radius: 12px !important;
    font-size: 15px !important; background: var(--card);
}
textarea.form-control, textarea.pn-input { min-height: 140px; }
.form-control:focus, .pn-input:focus, .form-select:focus {
    outline: none; border-color: #0a6aa8 !important; box-shadow: 0 0 0 4px rgba(56,168,240,.2) !important;
}
.form-label, .pn-label { font-size: 14px !important; margin-bottom: 7px !important; }
.form-hint { font-size: 13px !important; }
input[type="checkbox"], input[type="radio"] { accent-color: #0a6aa8; }

/* status badges: pill with a dot, brand colours */
.badge {
    gap: 6px; padding: 4px 11px !important; font-size: 12px !important; font-weight: 600 !important;
    background: #eef3f8; color: #4a5d6e;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-active, .badge-paid, .badge-yes, .badge-low, .badge-completed, .badge-accepted { background: rgba(17,115,74,.11) !important; color: #11734a !important; }
.badge-pending, .badge-payment_pending, .badge-on-hold, .badge-draft { background: rgba(255,194,26,.2) !important; color: #7a5300 !important; }
.badge-unpaid, .badge-medium, .badge-customer-reply { background: rgba(217,96,12,.12) !important; color: #a8470a !important; }
.badge-overdue, .badge-high, .badge-fraud, .badge-urgent { background: rgba(180,35,24,.1) !important; color: #b42318 !important; }
.badge-open, .badge-answered, .badge-in-progress, .badge-sent { background: #d9eefc !important; color: #0a6aa8 !important; }
.badge-suspended, .badge-terminated, .badge-cancelled, .badge-closed, .badge-no, .badge-expired { background: #eef3f8 !important; color: #4a5d6e !important; }

/* tables */
.pn-table th {
    padding: 13px 18px !important; background: #f5f9fd !important;
    font: 500 11.5px "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .07em !important; color: #4a5d6e !important;
}
.pn-table td { padding: 15px 18px !important; font-size: 14px !important; }
.pn-table tbody tr { transition: background-color .15s; }
.pn-table tbody tr:hover td { background: #f5f9fd !important; }
.pn-table a { color: #0a6aa8 !important; font-weight: 600 !important; }

/* alerts */
.pn-alert { border-radius: 14px !important; padding: 14px 18px !important; font-size: 14px !important; }
.pn-alert-success { background: rgba(17,115,74,.08) !important; border-color: rgba(17,115,74,.3) !important; color: #11734a !important; }
.pn-alert-error, .pn-alert-danger { background: rgba(180,35,24,.06) !important; border-color: rgba(180,35,24,.3) !important; color: #b42318 !important; }
.pn-alert-info { background: #eaf4fc !important; border-color: #b9dcf4 !important; color: #0a6aa8 !important; }
.pn-alert-warning { background: rgba(255,194,26,.14) !important; border-color: rgba(217,96,12,.35) !important; color: #7a4100 !important; }

/* dashboard: welcome banner + stats */
.pn-welcome {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: 24px !important; padding: 30px 32px !important;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(10,106,168,.55), transparent 65%),
        radial-gradient(50% 90% at 0% 100%, rgba(217,96,12,.3), transparent 65%),
        #0b1622 !important;
}
.pn-welcome-text h2 { font: 700 26px "Space Grotesk", system-ui, sans-serif !important; letter-spacing: -0.02em !important; }
.pn-welcome .btn-outline, .pn-welcome .btn-default { color: #ffffff !important; border-color: rgba(255,255,255,.35) !important; }
.pn-stat-grid { gap: 18px !important; }
.pn-stat { border-radius: 20px !important; transition: transform .25s, box-shadow .25s, border-color .25s !important; }
.pn-stat:hover { transform: translateY(-3px); border-color: #ffc21a !important; }
.pn-stat-icon { border-radius: 14px !important; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.pn-stat:hover .pn-stat-icon { transform: rotate(-10deg); }
.pn-stat-val { font: 700 32px "Space Grotesk", system-ui, sans-serif !important; letter-spacing: -0.03em !important; }
.pn-stat-icon-blue { background: #d9eefc !important; color: #0a6aa8 !important; }
.pn-stat-icon-green { background: rgba(17,115,74,.12) !important; color: #11734a !important; }
.pn-stat-icon-orange { background: rgba(255,194,26,.25) !important; color: #a8470a !important; }
.pn-stat-icon-red { background: rgba(180,35,24,.1) !important; color: #b42318 !important; }
.pn-aff-val { font-family: "Space Grotesk", system-ui, sans-serif !important; color: #d9600c !important; }
.pn-progress-wrap { background: #d9eefc !important; }
.pn-progress-fill { background: linear-gradient(90deg, #38a8f0, #ffc21a) !important; }

/* detail lists, back links */
.pn-detail-list li { padding: 12px 0 !important; font-size: 14px !important; }
.pn-back { font-weight: 600 !important; color: #0a6aa8 !important; }

/* ticket conversation */
.pn-msg { border-radius: 18px !important; }
.pn-msg.staff { border-left: 1px solid var(--border) !important; box-shadow: inset 4px 0 0 #ffc21a; }
.pn-msg.staff .pn-msg-head { background: #eaf4fc !important; }
.pn-msg.staff .pn-msg-author { color: #0a6aa8 !important; }
.pn-msg-body { font-size: 14.5px !important; }

/* payment choices, amount buttons, gateway tabs */
.pn-pay-option, .pn-amount-btn { border-radius: 14px !important; border-width: 1px !important; }
.pn-pay-option:hover, .pn-amount-btn:hover { border-color: #38a8f0 !important; background: #f5f9fd !important; }
.pn-pay-option.selected, .pn-amount-btn.selected { border-color: #ffc21a !important; background: rgba(255,194,26,.1) !important; color: var(--text) !important; }
.gw-tab { border-radius: 999px !important; border-width: 1px !important; }
.gw-tab.active { background: #0b1622 !important; border-color: #0b1622 !important; color: #ffffff !important; }
.gw-form-box { border-radius: 16px !important; }

/* store cards (core product grid, where still used) */
.pn-product-card { border-radius: 20px !important; }
.pn-product-card.featured { border: 2px solid #ffc21a !important; }
.pn-product-price { font-family: "Space Grotesk", system-ui, sans-serif !important; }
.pn-popular { background: #ffc21a !important; color: #1a1405 !important; }

/* empty states: brand flame instead of an emoji */
.pn-empty { padding: 56px 24px !important; }
.pn-empty-icon { font-size: 0 !important; opacity: 1 !important; margin-bottom: 16px !important; }
.pn-empty-icon::before {
    content: ""; display: inline-block; width: 60px; height: 60px; border-radius: 18px;
    background: #0b1622 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c1.3 4.5 7.8 7.4 7.8 14.6a7.8 7.8 0 0 1-15.6 0c0-3.3 1.6-5.6 3.3-7.2 0 3.1 1.4 4.8 3.1 4.8 0-4.7-1.4-7.9 1.4-12.2z' fill='%23ffc21a'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.pn-empty p { font-size: 15px !important; }

/* footer */
.pn-footer { padding: 24px !important; font-size: 13.5px !important; background: transparent !important; }
.pn-footer a { color: #0a6aa8 !important; font-weight: 500; }

/* dark theme touch-ups */
[data-theme="dark"] .pn-table th, [data-theme="dark"] .pn-table tbody tr:hover td { background: #12212f !important; color: #9fb3c4 !important; }
[data-theme="dark"] .pn-msg.staff .pn-msg-head { background: #133049 !important; }
[data-theme="dark"] .pn-stat-icon-blue, [data-theme="dark"] .badge-open, [data-theme="dark"] .badge-answered { background: #133049 !important; color: #7cc8f8 !important; }
[data-theme="dark"] .form-control, [data-theme="dark"] .pn-input { border-color: #4e6a82 !important; }

/* iOS Safari zooms into any form field under 16px when it is tapped, and the
   zoomed page then scrolls sideways. Fields stay at 16px on phones and tablets. */
@media (max-width: 1024px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not(#nd-nozoom),
    select:not(#nd-nozoom), textarea:not(#nd-nozoom) { font-size: 16px !important; }
}