/* The owner panel's face, carried over from HAYA.CMS.
   ==================================================================
   Source of every value below:
     ControlPanel/wwwroot/assets/areas/owner/ownerStyles.css   (palette, body)
     ControlPanel/Areas/Owner/Shared/OwnerMainLayout.razor.css (shell)
     ControlPanel/Areas/Owner/Pages/Websites/Index.razor.css   (site cards)
     ControlPanel/Areas/Owner/Pages/Websites/Create.razor.css  (wizard)
     ControlPanel/Areas/Owner/Pages/Billing/Index.razor.css    (ledger table)
     ControlPanel/Areas/Owner/Pages/Billing/BillingDetail.razor.css (invoice)

   Two deliberate differences from the source, and only two.

   Everything is nested under .cms-owner-panel. The old panel had one
   stylesheet per page through Blazor's CSS isolation, so it could afford
   selectors like .header, .sidebar, .content and .slider; this product serves
   the operator's dashboard from the same document root, and an unscoped
   .sidebar here would restyle that. The class names inside are the old ones,
   unchanged, so any rule can still be diffed against its source.

   The palette variables stay on :root, because that is where the old panel
   put them and because they are additive: this product's own tokens are
   --haya-* and --cms-*, and none of the names below collide.

   And every direction-sensitive rule is written with logical properties —
   inline-start rather than right, padding-inline rather than padding-left.
   The source only ever ran in Persian, so it said "right" and meant "the side
   the reader starts on"; spelling that out is what lets the same stylesheet
   serve an English panel with nothing mirrored by hand. */

@font-face {
    font-family: 'IRANYekanXVF';
    font-weight: 100 1000;
    font-style: normal;
    src: url('../fonts/IRANYekanXVF.woff2') format('woff2'),
         url('../fonts/IRANYekanXVF.woff') format('woff');
    font-display: swap;
}

:root {
    --white-background: #FFFFFF;
    --primary-blue-color: #2EA5F5;
    --lightmode-border-color: #EFF0F4;
    --lightmode-text-color: #60627F;
    --light-background: #F4F7FE;
    --charade-50: rgba(245, 245, 248, 1);
    --charade-100: rgba(235, 234, 239, 1);
    --charade-200: rgba(208, 208, 220, 1);
    --charade-300: rgba(170, 171, 190, 1);
    --charade-400: rgba(126, 128, 156, 1);
    --charade-500: rgba(96, 98, 127, 1);
    --charade-600: rgba(75, 75, 103, 1);
    --charade-700: rgba(61, 63, 82, 1);
    --charade-800: rgba(53, 53, 70, 1);
    --charade-900: rgba(41, 41, 51, 1);
    --charade-950: rgba(32, 32, 40, 1);
    --blue-50: rgba(238, 247, 255, 1);
    --blue-100: rgba(220, 238, 253, 1);
    --blue-200: rgba(178, 222, 252, 1);
    --blue-300: rgba(115, 197, 251, 1);
    --blue-400: rgba(46, 165, 245, 1);
    /* The design system's blue/500 (Figma, owner-ds.css): #097DEA, a step
       deeper than the old panel's #1B8FE5, which sat at 3.4:1 on white. */
    --blue-500: rgba(9, 125, 234, 1);
    --blue-600: rgba(18, 111, 190, 1);
    --blue-700: rgba(15, 87, 150, 1);
    --blue-800: rgba(16, 73, 120, 1);
    --blue-900: rgba(17, 60, 98, 1);
    --blue-950: rgba(13, 38, 64, 1);
    --accessibility-background: rgba(243, 245, 251, 1);
    --accessibility-white: rgba(255, 255, 255, 1);
    --green-50: rgba(239, 251, 241, 1);
    --green-100: rgba(220, 246, 224, 1);
    --green-200: rgba(195, 239, 201, 1);
    --green-300: rgba(138, 222, 151, 1);
    --green-400: rgba(86, 197, 102, 1);
    --green-500: rgba(53, 168, 70, 1);
    --green-600: rgba(41, 135, 54, 1);
    --green-700: rgba(35, 104, 45, 1);
    --green-800: rgba(31, 81, 39, 1);
    --orange-50: rgba(254, 248, 234, 1);
    --orange-100: rgba(249, 235, 198, 1);
    --orange-200: rgba(243, 212, 141, 1);
    --orange-300: rgba(234, 181, 80, 1);
    --orange-400: rgba(230, 162, 60, 1);
    --orange-500: rgba(222, 130, 42, 1);
    --orange-600: rgba(192, 96, 33, 1);
    --orange-700: rgba(155, 67, 29, 1);
    --orange-800: rgba(123, 52, 27, 1);
    --red-50: rgba(252, 242, 241, 1);
    --red-100: rgba(251, 226, 224, 1);
    --red-200: rgba(249, 202, 199, 1);
    --red-300: rgba(244, 166, 161, 1);
    --red-400: rgba(236, 131, 124, 1);
    --red-500: rgba(221, 81, 72, 1);
    --red-600: rgba(200, 54, 47, 1);
    --red-700: rgba(163, 44, 37, 1);
    --red-800: rgba(132, 39, 34, 1);
}

/* Dark (user request, 2026-11-03). The panel was light-only like the old one;
   it now follows the viewer's choice the dashboard already stores
   (haya-admin-scheme), which haya-admin-boot.js stamps on the document as
   data-haya-scheme before the first paint — so one choice covers both panels,
   picked from either one's theme menu (OwnerThemeMenu here).

   The scales are turned over rather than every component recoloured: the
   neutral one end for end (a hover fill becomes a dark step, ink becomes the
   light end), the colours' pale tints become dark ones and their deep text
   shades light ones, while the middle steps — the fills buttons and badges
   are painted in — stay as they are. On the panel, not on :root: these names
   are this panel's, and the dashboard's own palette must not move with them. */
:root[data-haya-scheme="dark"] .cms-owner-panel {
    color-scheme: dark;
    background: var(--light-background);

    --white-background: #1a1b22;
    --accessibility-white: #1a1b22;
    --light-background: #111218;
    --accessibility-background: #111218;
    --lightmode-border-color: #2b2c36;
    --lightmode-text-color: #9a9cb4;

    --charade-50: #22232b;
    --charade-100: #2b2c36;
    --charade-200: #393a46;
    --charade-300: #4f5162;
    --charade-400: #767891;
    --charade-500: #9a9cb4;
    --charade-600: #b3b5c9;
    --charade-700: #cfd0de;
    --charade-800: #dfe0ea;
    --charade-900: #ebebf1;
    --charade-950: #f4f4f8;

    --blue-50: #13243a;
    --blue-100: #172d49;
    --blue-200: #1e3d62;
    --blue-300: #2a5a8c;
    --blue-700: #6db3f2;
    --blue-800: #95c7f6;
    --blue-900: #bfdcfa;
    --blue-950: #deedfd;

    --red-50: #2b1716;
    --red-100: #3b1d1b;
    --red-200: #57261f;
    --red-300: #7b3129;
    --red-700: #f19a93;
    --red-800: #f6bfba;

    --green-50: #102318;
    --green-100: #142e20;
    --green-200: #1a412b;
    --green-300: #235d3c;
    --green-600: #5fc36f;
    --green-700: #8ad697;
    --green-800: #b4e6bc;

    --orange-50: #2a1f0f;
    --orange-100: #392a12;
    --orange-200: #523b17;
    --orange-300: #77541f;
    --orange-600: #e6994f;
    --orange-700: #f0b77d;
    --orange-800: #f6d3a9;

    /* The primary fill turns light, so what is written on it turns dark. */
    --ow-on-ink: #111218;
}

/* The body belongs to the panel, not to the document: an operator's dashboard
   served from the same host must keep its own canvas. */
.cms-owner-panel {
    /* "Haya Emoji" first: its unicode-range confines it to emoji. */
    font-family: "Haya Emoji", 'IRANYekanXVF';
    font-weight: 310;
    font-variation-settings: "dots" 1;
    background: #F4F7FE;
    color: var(--charade-500);
    min-block-size: 100vh;
    /* Its own formatting context, so .owner-container's 88px margin stays
       inside it. Without this the margin collapses through and the panel
       starts 88px down the page, leaving a band of whatever the document
       root happens to paint — which on a machine set to dark is black. */
    display: flow-root;
    /* This panel is light-only, like the old one. Saying so keeps form
       controls and scrollbars light on a machine set to dark. */
    color-scheme: light;
    /* Which way "forward" points, for the few places a logical property cannot
       reach: transform and translate take physical axes, so a sliding chevron
       or a toggle knob has to be told. Everything else uses inline-start,
       inline-end and text-align: start instead. */
    --cms-owner-flip: 1;
}

[dir="rtl"] .cms-owner-panel {
    --cms-owner-flip: -1;
}

.cms-owner-panel *,
.cms-owner-panel *::before,
.cms-owner-panel *::after {
    box-sizing: border-box;
    list-style: none;
}

.cms-owner-panel a {
    text-decoration: none;
    color: inherit;
}

.cms-owner-panel .owner-container {
    max-width: 1368px;
    margin: 88px auto;
    transition: all 0.5s ease-in-out;
    padding: 0 24px;
}

.cms-owner-panel .light-text-color {
    color: var(--charade-500);
}

.cms-owner-panel .weight-500 {
    font-variation-settings: "wght" 500, "dots" 1;
}

.cms-owner-panel .font-size-14 {
    font-size: 0.875rem;
}

.cms-owner-panel .icons-spec {
    font-size: 20px;
}


/* ── Shell: header ───────────────────────────────────────────────────── */

.cms-owner-panel .header {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 24px;
    backdrop-filter: blur(12px);
    position: fixed;
    top: 0;
    z-index: 80;
    background-color: color-mix(in srgb, var(--white-background) 80%, transparent);
    border-bottom: 0.5px solid var(--lightmode-border-color);
}

/* The two class names are the old panel's and are kept so a rule can still be
   traced to its source; what they mean now is "sidebar pinned" and "sidebar
   collapsed", on whichever side the reader starts. */
.cms-owner-panel .header-open-rtl {
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    width: calc(100% - 254px);
    margin-inline-start: 254px;
}

.cms-owner-panel .header-close-rtl {
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    width: calc(100% - 76px);
    margin-inline-start: 76px;
}

.cms-owner-panel .header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cms-owner-panel .header-breadcrumb-subttitle-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cms-owner-panel .header-breadcrumb-subtittle-icon {
    font-size: 20px;
    color: var(--charade-400);
}

.cms-owner-panel .header-breadcrumb-subtittle {
    color: var(--charade-600);
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

.cms-owner-panel .header-breadcrumb-icon {
    font-size: 18px;
    color: var(--charade-300);
}

.cms-owner-panel .header .items {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The language picker. On the sign-in and sign-up screens it is a row of
   links (no circuit there); in the header it is a dropdown menu whose
   trigger is styled here. Either way the choice is a cookie the culture
   endpoint writes, and the page reloads under it. */
.cms-owner-panel .languages {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The header's controls, in the admin shell's manner (its .haya-topbar-control):
   a 32px bordered pill on the surface colour, text or an icon alone, that
   darkens its border on hover and while its menu is open. */
.cms-owner-panel .header-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--charade-100);
    border-radius: 8px;
    background: var(--accessibility-white);
    font-size: 13px;
    font-variation-settings: "wght" 500, "dots" 1;
    line-height: 1;
    white-space: nowrap;
    color: var(--charade-700);
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.cms-owner-panel .header-control:hover,
.cms-owner-panel .header-control[data-state="open"] {
    border-color: var(--charade-300);
    background: var(--charade-50);
}

.cms-owner-panel .header-control:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

.cms-owner-panel .header-control--icon {
    width: 32px;
    padding: 0;
    justify-content: center;
}

.cms-owner-panel .header-control > .ow-icon {
    color: var(--charade-500);
}

.cms-owner-panel .header-control__chevron {
    --ow-icon-size: 14px;
    color: var(--charade-400);
}

.cms-owner-panel .language {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--charade-400);
}

.cms-owner-panel .language:hover {
    background: var(--charade-50);
    color: var(--charade-600);
}

.cms-owner-panel .language--current {
    background: var(--blue-50);
    color: var(--blue-600);
}

.cms-owner-panel .header .icons {
    display: flex;
    align-items: center;
    gap: 32px;
    color: #AAABBE;
}

.cms-owner-panel .header .profile {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-owner-panel .profile-detail {
    font-size: 14px;
}

/* ── Shell: sidebar ──────────────────────────────────────────────────── */

/* The sidebar's colours, in one place. Monochrome, in the create-site
   dialog's language (owner-ds.css): ink for "you are here", neutral fills for
   hover and selection, no accent. The current section never relies on colour
   alone — it gets the bold glyph, a heavier label, a filled row and the edge
   marker. Icon on white is charade-500 (6:1); ink on the selected fill is
   well past AA. */
.cms-owner-panel {
    --ow-nav-icon: var(--charade-500);
    --ow-nav-text: var(--charade-500);
    --ow-nav-ink: var(--ow-ink);
    --ow-nav-hover-fill: var(--charade-50);
    --ow-nav-active-fill: var(--charade-100);
    --ow-nav-panel-fill: var(--charade-50);
    --ow-nav-marker: var(--ow-ink);
}

.cms-owner-panel .psudo-element {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: block;
}

.cms-owner-panel .psudo-element.hide {
    display: none;
}

.cms-owner-panel .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100vh;
    overflow: hidden;
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    border-inline-end: 0.5px solid var(--lightmode-border-color);
    z-index: 1000;
    background-color: var(--white-background);
}

.cms-owner-panel .sidebar.open {
    width: 254px;
}

.cms-owner-panel .sidebar.close {
    width: 76px;
}

.cms-owner-panel .sidebar-logo {
    position: relative;
    display: flex;
    padding: 40px 24px 20px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-bottom: 0.5px solid var(--lightmode-border-color);
}

.cms-owner-panel .sidebar-logo img {
    max-inline-size: 100%;
}

.cms-owner-panel .toggle-sidebar-section {
    position: absolute;
    top: 0;
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    border-color: var(--lightmode-border-color);
    background-color: var(--white-background);
    display: flex;
    padding: 13.5px;
    align-items: center;
    cursor: pointer;
    border-style: solid;
    border-width: 0;
    font: inherit;
}

.cms-owner-panel .toggle-sidebar-section:focus-visible,
.cms-owner-panel .sidebar-accordion-tittle:focus-visible,
.cms-owner-panel .items-tittle:focus-visible,
.cms-owner-panel .mobile-menu-item:focus-visible {
    outline: 2px solid var(--blue-600, #126fbe);
    outline-offset: 2px;
    border-radius: 8px;
}

.cms-owner-panel .toggle-sidebar-btn {
    font-size: 20px;
    color: var(--ow-nav-icon);
}

.cms-owner-panel .toggle-sidebar-section:hover .toggle-sidebar-btn {
    color: var(--ow-nav-ink);
}

/* Pinned: tucked into the corner of the logo band that faces the page, with
   that one corner rounded. */
.cms-owner-panel .open-btn-sidebar {
    inset-inline-end: 0;
    border-end-start-radius: 8px;
    border-inline-start: 1px solid var(--charade-50);
    border-bottom: 1px solid var(--charade-50);
}

/* Collapsed: centred under the mark, rounded on both bottom corners.
   Centred with auto margins between both inline edges rather than
   inset-inline-start: 50% + translateX(-50%): the inset flips with the
   writing direction and the transform does not, so in Persian the button
   sat half its width off-centre (the --cms-owner-flip trap, met again). */
.cms-owner-panel .close-btn-sidebar {
    inset-inline: 0;
    inline-size: fit-content;
    margin-inline: auto;
    border-radius: 0 0 8px 8px;
    border-inline: 1px solid var(--charade-50);
    border-bottom: 1px solid var(--charade-50);
}

.cms-owner-panel .sidebar-items {
    padding: 24px 16px;
}

.cms-owner-panel .sidebar-group + .sidebar-group {
    margin-top: 12px;
}

.cms-owner-panel .sidebar-accordion-tittle {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    padding: 10px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    border-radius: 8px;
}

.cms-owner-panel .sidebar-accordion-tittle:hover {
    background: var(--ow-nav-hover-fill);
}

.cms-owner-panel .sidebar-accordion-tittle:focus-visible,
.cms-owner-panel .items-tittle:focus-visible {
    outline: 2px solid var(--ow-nav-ink);
    outline-offset: 2px;
}

.cms-owner-panel .sidebar-accordion-tittle.is-open {
    background: var(--ow-nav-active-fill);
}

.cms-owner-panel .sidebar-icon {
    color: var(--ow-nav-icon);
}

.cms-owner-panel .sidebar-accordion-tittle:hover .sidebar-icon,
.cms-owner-panel .sidebar-icon.is-active {
    color: var(--ow-nav-ink);
}

.cms-owner-panel .sidebar-accordion-content {
    border-radius: 12px;
    background: var(--ow-nav-panel-fill);
    padding: 8px 16px;
    margin-top: 6px;
}

.cms-owner-panel .show-items {
    transform: none;
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    opacity: 1;
}

/* Slides out towards the panel's own start edge, so it leaves the same way in
   both directions. */
.cms-owner-panel .hide-items {
    translate: calc(-40px * var(--cms-owner-flip, 1));
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    opacity: 0;
}

.cms-owner-panel .active-border {
    position: relative;
}

/* The marker rides the sidebar's own outer edge — the padding of
   .sidebar-items is 16px, hence the offset. Only the current section has
   one; drawn on every row, it marked nothing. */
.cms-owner-panel .active-border.is-open::before {
    content: "";
    width: 3px;
    height: 40px;
    position: absolute;
    inset-inline-start: -16px;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
    background-color: var(--ow-nav-marker);
}

.cms-owner-panel .sidebar-accordion-tittle .light-text-color {
    color: var(--ow-nav-text);
}

.cms-owner-panel .sidebar-accordion-tittle:hover .light-text-color,
.cms-owner-panel .sidebar-accordion-tittle .active-tittle {
    color: var(--ow-nav-ink);
}

.cms-owner-panel .sidebar-accordion-tittle .active-tittle {
    font-variation-settings: "wght" 650, "dots" 1;
}

.cms-owner-panel .sidebar-chevron {
    margin-inline-start: auto;
    font-size: 18px;
    color: var(--ow-nav-icon);
    transition: transform 260ms ease;
}

.cms-owner-panel .sidebar-chevron.is-open {
    transform: rotate(180deg);
}

.cms-owner-panel .items-tittle {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ow-nav-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 0;
    background: none;
    border: none;
    width: 100%;
    text-align: start;
    font-family: inherit;
}

.cms-owner-panel .items-tittle-icon {
    font-size: 18px;
    color: inherit;
}

.cms-owner-panel .items-tittle:hover,
.cms-owner-panel .items-tittle-active {
    color: var(--ow-nav-ink);
}

.cms-owner-panel .items-tittle-active {
    font-size: 12px;
    font-weight: 600;
    font-variation-settings: "wght" 650, "dots" 1;
}

/* The content follows the sidebar, and does so in CSS because the two are on
   opposite sides of a render-mode boundary — the chrome is an interactive
   island, the layout around it is static, and they cannot share a field.
   The rule is the old panel's: pinning the sidebar open moves the page across,
   hovering it does not (the hover expansion floats over the page instead). */
.cms-owner-panel .content {
    transition: all 260ms cubic-bezier(0.35, 0.27, 0.18, 0.92);
    margin-inline-start: 76px;
}

.cms-owner-panel:has(.header-open-rtl) .content {
    margin-inline-start: 254px;
}

/* While the circuit draws the page, the box holds only comment markers. It
   used to show one loading line on an empty canvas, which read as the page
   disappearing (user report, 2026-11-03); now it holds the page's shape —
   a title bar and a card where every owner page puts them, at the
   container's own width and drop — so the frame stays and only the content
   fills in. The title bar still says it is loading, for anyone who reads
   rather than sees. A short beat first, so a page that is ready at once does
   not blink a placeholder. */
.cms-owner-panel .content:empty::before,
.cms-owner-panel .content:empty::after {
    display: block;
    box-sizing: border-box;
    inline-size: calc(100% - 48px);
    max-inline-size: calc(1368px - 48px);
    margin-inline: auto;
    border: 1px solid var(--charade-100);
    border-radius: 16px;
    background-color: var(--accessibility-white);
    background-image: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--charade-100) 55%, transparent) 50%,
        transparent 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation:
        cms-owner-loading-in 200ms ease 120ms forwards,
        cms-owner-loading-sweep 1.4s ease-in-out 320ms infinite;
}

.cms-owner-panel .content:empty::before {
    content: attr(data-loading);
    margin-block-start: 88px;
    block-size: 64px;
    padding-inline: 24px;
    color: var(--charade-400);
    font-size: 14px;
    font-weight: 500;
    line-height: 62px;
    text-align: start;
}

.cms-owner-panel .content:empty::after {
    content: "";
    margin-block-start: 24px;
    block-size: 320px;
}

@keyframes cms-owner-loading-in {
    to { opacity: 1; }
}

/* The highlight crosses the card the way the reader reads. With the image
   twice the box's width, position p puts its centre at (1 - p) of the box,
   so 150% → -50% sweeps left to right and the reverse sweeps right to left:
   50% ± 100%, swapped by the reading direction. */
@keyframes cms-owner-loading-sweep {
    from { background-position: calc(50% + 100% * var(--cms-owner-flip, 1)) 0; }
    to { background-position: calc(50% - 100% * var(--cms-owner-flip, 1)) 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cms-owner-panel .content:empty::before,
    .cms-owner-panel .content:empty::after {
        animation: none;
        opacity: 1;
        background-image: none;
    }
}

/* ── Shell: mobile bar ───────────────────────────────────────────────── */

.cms-owner-panel .mobile-menu-section {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 4px 8px 12px 8px;
    display: none;
    z-index: 999;
}

.cms-owner-panel .mobile-menu-content {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 28px;
    border: 1px solid var(--charade-50);
    background: color-mix(in srgb, var(--white-background) 80%, transparent);
    box-shadow: 0 4px 6px -2px rgba(96, 98, 127, 0.12), 0 4px 12px -8px rgba(96, 98, 127, 0.20), 0 8px 24px -12px rgba(96, 98, 127, 0.16);
    backdrop-filter: blur(8px);
}

.cms-owner-panel .mobile-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
}

.cms-owner-panel .mobile-menu-item-icon {
    font-size: 28px;
    color: var(--ow-nav-icon);
}

.cms-owner-panel .mobile-menu-item-icon.selected {
    color: var(--ow-nav-ink);
}

.cms-owner-panel .mobile-menu-item-title {
    color: var(--charade-500);
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .cms-owner-panel .header {
        width: 100%;
        margin: 0;
    }

    .cms-owner-panel .psudo-element {
        display: none;
    }

    .cms-owner-panel .mobile-menu-section {
        display: block;
    }

    .cms-owner-panel .sidebar {
        width: 100% !important;
        inset-inline-start: -100%;
    }

    .cms-owner-panel .sidebar.mobile-menu {
        inset-inline-start: 0;
    }

    .cms-owner-panel .toggle-sidebar-section {
        display: none;
    }

    .cms-owner-panel .content,
    .cms-owner-panel:has(.header-open-rtl) .content {
        margin: 0;
    }

    /* A phone has no room for two gutters and a 128px drop before the first
       card; and the floating bar at the bottom must not cover the last one. */
    .cms-owner-panel .owner-container {
        margin: 64px auto 120px;
        padding: 0 16px;
    }
}

/* ── Sites: the card grid ────────────────────────────────────────────── */

.cms-owner-panel .websites-section {
    padding: 40px 24px;
}

/* After the rule above, not in the phone block before it: same specificity,
   so the later one wins. */
@media (max-width: 767px) {
    .cms-owner-panel .websites-section {
        padding: 16px 0;
    }
}

.cms-owner-panel .websites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-radius: 12px;
    gap: 8px 4px;
    background: var(--accessibility-white);
}

.cms-owner-panel .websites-header-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cms-owner-panel .websites-header-tittle {
    margin: 0;
    color: var(--charade-700);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.cms-owner-panel .websites-content {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* A message in place of the cards takes the whole row; in one cell of the
   four-column grid it sat indented under the first card's place. */
.cms-owner-panel .websites-content-wide,
.cms-owner-panel .websites-empty {
    grid-column: 1 / -1;
}

/* No sites yet: the one thing to do next, centred in a card of its own. */
.cms-owner-panel .websites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 24px;
    border-radius: 12px;
    background: var(--accessibility-white);
    text-align: center;
}

.cms-owner-panel .websites-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
    border-radius: 16px;
    background: var(--charade-50);
    color: var(--charade-500);
    font-size: 28px;
}

.cms-owner-panel .websites-empty-title {
    margin: 0;
    color: var(--charade-800);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.cms-owner-panel .websites-empty-body {
    max-width: 44ch;
    margin: 0 0 8px;
    color: var(--charade-500);
    font-size: 14px;
    line-height: 1.8;
}

.cms-owner-panel .websites-empty--filtered {
    padding: 32px 24px;
}

.cms-owner-panel .websites-empty--filtered .websites-empty-title {
    font-size: 15px;
    font-weight: 500;
}

.cms-owner-panel .website-card {
    border-radius: 12px;
    background: var(--accessibility-white);
    box-shadow: 0 4px 8px -2px rgba(53, 53, 70, 0.10), 0 8px 12px -4px rgba(53, 53, 70, 0.08);
    transition: all 0.3s ease-in-out;
}

.cms-owner-panel .website-card-img {
    position: relative;
    aspect-ratio: 266.50 / 152.00;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: var(--charade-100);
}

/* The cover: the first letter of the site's name on the site's own colour
   (OwnerMonogram), filling the frame, with a soft light from the corner so
   it reads as a surface and not a swatch. */
/* Selector carries the frame too: the design system's own .ow-monogram rule
   (40px, in owner-ds.css, loaded after this sheet) would otherwise win the
   tie and leave a 40px tile in the corner of a grey cover. */
.cms-owner-panel .website-card-img .ow-monogram.website-card-monogram {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 0;
    font-size: 56px;
}

.cms-owner-panel .website-card-img .ow-monogram.website-card-monogram::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 15% 100%, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

.cms-owner-panel .image-items {
    width: 100%;
    padding-inline: 12px;
    position: absolute;
    top: 12px;
    inset-inline-start: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The trigger of the card's More menu (OwnerDropdownMenu): a real button,
   so the old pill's look on a button's reset. */
.cms-owner-panel .image-more-item {
    border-radius: 999px;
    border: 0;
    background: rgba(32, 32, 40, 0.90);
    display: flex;
    align-items: center;
    padding: 4px 12px;
    gap: 4px;
    color: #FFF;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 0.15s ease;
    --ow-icon-size: 16px;
}

.cms-owner-panel .image-more-item:hover,
.cms-owner-panel .image-more-item[data-state="open"] {
    background: rgba(32, 32, 40, 1);
}

.cms-owner-panel .image-more-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.cms-owner-panel .image-more-item-title {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.cms-owner-panel .image-more-item-icon {
    font-size: 16px;
}

.cms-owner-panel .image-status-item {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.cms-owner-panel .pending-status {
    color: var(--orange-600);
    background: color-mix(in srgb, var(--orange-100) 90%, transparent);
}

.cms-owner-panel .active-status {
    background: color-mix(in srgb, var(--green-200) 90%, transparent);
    color: var(--green-600);
}

.cms-owner-panel .expired-status {
    background: rgba(251, 226, 224, 0.90);
    color: var(--red-600);
}

.cms-owner-panel .default-class {
    background: rgba(5, 24, 53, 0.76);
    color: var(--ow-on-fill);
}

.cms-owner-panel .image-domain-link {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 87, 150, 0.34) 0%, rgba(15, 87, 150, 0.80) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 12px 0 0;
    transition: all 0.4s ease-in-out;
    opacity: 0;
}

.cms-owner-panel .website-card:hover .image-domain-link {
    opacity: 1;
}

.cms-owner-panel .image-domain-link-btn {
    border-radius: 12px;
    background: rgba(5, 24, 53, 0.76);
    padding: 10px 12px;
    justify-content: center;
    color: var(--ow-on-fill);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cms-owner-panel .image-domain-link-tittle {
    font-size: 12px;
}

.cms-owner-panel .image-domain-link-icon {
    font-size: 18px;
}

.cms-owner-panel .website-card-content-tittle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 12px 0 12px;
}

.cms-owner-panel .website-card-content-tittle-primary {
    color: var(--charade-800);
    font-size: 16px;
    font-weight: 600;
    height: 20px;
    overflow: hidden;
    margin: 0;
}

.cms-owner-panel .website-card-content-tittle-second {
    color: var(--charade-400);
    font-size: 14px;
    font-weight: 600;
}

/* The chips wrap: a site with credit and a long plan name gets two rows
   rather than a row that overflows the card. Each chip is an icon and a
   value; what it means is in its title. */
.cms-owner-panel .website-card-content-items {
    padding: 12px 12px 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    gap: var(--card-chip-gap);
    /* Room for three rows of chips, whether a card has one row or three: the
       button below sits at the same height on every card of the grid, so a
       row of cards reads as one row of buttons. Three is the most any site
       has (certificate, plan, one credit meter and change). */
    --card-chip-gap: 6px;
    --card-chip-height: 26px;
    --card-chip-rows: 3;
    block-size: calc(12px + var(--card-chip-rows) * var(--card-chip-height) + (var(--card-chip-rows) - 1) * var(--card-chip-gap));
    overflow: hidden;
}

.cms-owner-panel .card-item {
    display: inline-flex;
    box-sizing: border-box;
    block-size: var(--card-chip-height, 26px);
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    --ow-icon-size: 14px;
}

.cms-owner-panel .card-item-credit {
    color: var(--blue-500);
    border-color: var(--blue-100);
}

.cms-owner-panel .card-item-active {
    border: 1px solid var(--green-200);
    color: var(--green-600);
}

.cms-owner-panel .card-item-notactive {
    border: 1px solid var(--red-300);
    color: var(--red-600);
}

.cms-owner-panel .website-card-content-feature {
    gap: 10px;
    border: 1px solid var(--charade-100);
    color: var(--charade-400);
    font-size: 12px;
    font-weight: 600;
}

.cms-owner-panel .website-card-content-btns {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 12px 12px 12px;
}

.cms-owner-panel .website-card-btn {
    height: 16px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-owner-panel .card-btn {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 8px;
    display: flex;
    min-height: 36px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
    background: none;
    border: 1px solid transparent;
    box-shadow: 0 1px 1px rgba(32, 32, 40, 0.05);
}

.cms-owner-panel .card-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(9, 125, 234, 0.18);
}

.cms-owner-panel .card-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cms-owner-panel .website-card-gray-btn {
    background-color: var(--accessibility-white);
    border-color: var(--charade-100);
    color: var(--charade-950);
}

.cms-owner-panel a.website-card-gray-btn:hover,
.cms-owner-panel button.website-card-gray-btn:hover:not(:disabled) {
    background-color: var(--charade-50);
    border-color: var(--charade-200);
}

.cms-owner-panel .website-card-orange-btn {
    background-color: var(--accessibility-white);
    border-color: var(--orange-300);
    color: var(--orange-600);
}

.cms-owner-panel a.website-card-orange-btn:hover,
.cms-owner-panel button.website-card-orange-btn:hover:not(:disabled) {
    background-color: var(--orange-50);
}

.cms-owner-panel .website-card-background-blue-btn {
    color: var(--ow-on-ink);
    border-color: var(--charade-950);
    background-color: var(--charade-950);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
    box-shadow:
        0 1px 2px 0 rgba(32, 32, 40, 0.05),
        inset 0 -1px 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 1px rgba(255, 255, 255, 0.25),
        inset 0 6px 8px -1px rgba(255, 255, 255, 0.12);
}

.cms-owner-panel .website-card-background-blue-btn:hover {
    background-color: var(--charade-700);
}

@media (max-width: 1200px) {
    .cms-owner-panel .websites-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .cms-owner-panel .websites-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .cms-owner-panel .websites-header {
        flex-direction: column;
    }

    .cms-owner-panel .websites-header-menu {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 460px) {
    .cms-owner-panel .websites-content {
        grid-template-columns: repeat(1, 1fr);
    }

    .cms-owner-panel .website-card-content-btns {
        flex-direction: column;
    }

    .cms-owner-panel .card-btn {
        width: 100%;
    }
}

/* ── Billing: the ledger ─────────────────────────────────────────────── */

.cms-owner-panel .billing-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .billing-header {
    margin: 0;
    color: var(--charade-700);
    font-size: 24px;
    font-weight: 600;
    padding: 0 12px;
}

/* The design system's Input (owner-ds.css): 40px, a hairline border, a
   charcoal one on focus. */
.cms-owner-panel .billing-search-input {
    width: 100%;
    height: var(--ow-control-height, 40px);
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--charade-100);
    background-color: var(--accessibility-white);
    box-shadow: 0 1px 1px rgba(32, 32, 40, 0.05);
    color: var(--charade-950);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .billing-search-input:hover:not(:focus) {
    border-color: var(--charade-200);
}

.cms-owner-panel .billing-search-input:focus {
    outline: none;
    border-color: var(--charade-950);
    box-shadow: 0 1px 1px rgba(32, 32, 40, 0.05), 0 0 0 3px rgba(9, 125, 234, 0.18);
}

.cms-owner-panel .billing-search-input::placeholder {
    color: var(--charade-400);
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
}

.cms-owner-panel .data-table {
    border-radius: 12px;
    padding: 0 24px;
    border: 1px solid color-mix(in srgb, var(--charade-100) 70%, transparent);
    background: var(--accessibility-white);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

.cms-owner-panel .data-table-header {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Wide enough for its own placeholder, which a content-sized box cut off. */
.cms-owner-panel .billing-search {
    flex: 0 1 360px;
    min-width: 0;
}

.cms-owner-panel .data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    overflow: hidden;
}

.cms-owner-panel .data-table thead {
    background-color: var(--accessibility-background);
    border-bottom: 1px solid var(--white-background);
}

.cms-owner-panel .data-table thead th {
    color: var(--charade-400);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    padding: 10px 12px;
    text-align: start;
}

.cms-owner-panel .data-table thead th:first-child {
    border-start-start-radius: 12px;
    border-end-start-radius: 12px;
}

.cms-owner-panel .data-table thead th:last-child {
    border-start-end-radius: 12px;
    border-end-end-radius: 12px;
}

.cms-owner-panel .data-table tbody tr {
    border-bottom: 1px solid var(--lightmode-border-color);
}

.cms-owner-panel .data-table tbody td {
    padding: 0 12px;
}

.cms-owner-panel .data-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--blue-50) 35%, var(--white-background));
    transition: background 0.3s ease;
}

.cms-owner-panel .data-table-icon {
    padding: 8px;
    border-radius: 12px;
    background: var(--ow-border);
    color: var(--ow-ink);
    display: inline-flex;
    transition: background-color 150ms ease, color 150ms ease;
}

/* Monochrome, like the rest of the panel: a grey chip with an ink glyph,
   inverting to ink on hover. */
.cms-owner-panel a:hover > .data-table-icon,
.cms-owner-panel a:focus-visible > .data-table-icon {
    background: var(--ow-ink);
    color: var(--ow-on-ink);
}

.cms-owner-panel .data-table-item {
    padding: 14px 0;
}

/* Left to right whatever the panel's direction: an invoice number is a code,
   and WO-00001 reads the same way in Persian. */
.cms-owner-panel .invoice-number {
    color: var(--charade-500);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    direction: ltr;
    text-align: start;
}

.cms-owner-panel .invoice-title {
    display: flex;
    gap: 4px;
    color: var(--charade-700);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.cms-owner-panel .invoice-amount {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cms-owner-panel .invoice-amount-title {
    color: var(--charade-700);
    font-size: 14px;
    font-weight: 600;
}

.cms-owner-panel .invoice-amount-unit {
    color: var(--charade-400);
    font-size: 12px;
    font-weight: 700;
}

.cms-owner-panel .invoice-date {
    color: var(--charade-400);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.cms-owner-panel .invoice-status {
    padding: 4px 12px;
    border-radius: 999px;
    max-width: 124px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.cms-owner-panel .data-table-item-status {
    padding: 12px 0;
}

.cms-owner-panel .data-table-item-actions {
    display: flex;
    padding: 8px 0;
}

.cms-owner-panel .invoice-status.pending {
    background: var(--orange-100);
    color: var(--orange-600);
}

.cms-owner-panel .invoice-status.paid {
    color: var(--green-600);
    background: var(--green-200);
}

.cms-owner-panel .invoice-status.canceled {
    background: var(--red-100);
    color: var(--red-600);
}

.cms-owner-panel .loading,
.cms-owner-panel .empty-list {
    text-align: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--charade-500);
}

/* ── Billing: one invoice ────────────────────────────────────────────── */

.cms-owner-panel .invoice-detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
}

.cms-owner-panel .invoice-detail-tabs {
    display: flex;
    gap: 12px;
    padding: 0 8px;
}

.cms-owner-panel .invoice-detail-tab {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    border-radius: 999px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    color: var(--charade-500);
}

.cms-owner-panel .invoice-detail-tab.active {
    color: var(--blue-500);
    background: var(--white-background);
}

.cms-owner-panel .tab-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.cms-owner-panel .invoice-sections {
    width: calc(100% - 315px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .invoice-tab {
    flex: 1;
    background-color: var(--white-background);
    border-radius: 12px;
}

.cms-owner-panel .invoice-tab-header {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--charade-100);
}

.cms-owner-panel .invoice-tab-header-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--charade-500);
    font-size: 18px;
    font-weight: 700;
}

.cms-owner-panel .invoice-tab-header-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--charade-400);
    font-size: 14px;
    font-weight: 500;
}

.cms-owner-panel .invoice-tab-content {
    padding: 36px 24px 24px 24px;
    display: flex;
    flex-direction: column;
}

.cms-owner-panel .invoice-tab-content-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 24px;
}

.cms-owner-panel .invoice-tab-content-section-title {
    color: var(--charade-500);
    font-size: 14px;
    font-weight: 400;
    width: 140px;
}

.cms-owner-panel .invoice-tab-content-section-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--charade-700);
    font-size: 18px;
    font-weight: 700;
}

.cms-owner-panel .invoice-tab-website-detail {
    border-radius: 12px;
    box-shadow: 0 0 0 1.5px var(--charade-50);
    padding: 12px;
}

.cms-owner-panel .invoice-tab-website-detail-item {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cms-owner-panel .invoice-tab-website-detail-item-key {
    color: var(--charade-400);
    font-size: 14px;
    font-weight: 400;
    width: 146px;
}

.cms-owner-panel .invoice-tab-website-detail-item-value {
    color: var(--charade-700);
    font-size: 14px;
    font-weight: 700;
}

.cms-owner-panel .total-price-item-lists {
    padding: 12px;
}

.cms-owner-panel .total-price-item-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--charade-50);
}

.cms-owner-panel .total-price-item-list-key {
    color: var(--charade-500);
    text-align: start;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    padding: 8px;
}

.cms-owner-panel .total-price-item-list-value {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px;
}

.cms-owner-panel .total-price-item-list-value-title {
    color: var(--charade-500);
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
}

.cms-owner-panel .total-price-item-list-value-unit {
    color: var(--charade-500);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.cms-owner-panel .total-price-item {
    padding: 8px;
    border-radius: 8px;
    border: 1.5px solid var(--charade-50);
    background: var(--charade-100);
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cms-owner-panel .total-price-item-key {
    width: 124px;
    padding: 8px;
    border-radius: 8px;
    background: var(--accessibility-white);
    color: var(--charade-500);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.cms-owner-panel .total-price-item-value {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    background: var(--accessibility-white);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cms-owner-panel .total-price-item-value-title {
    color: var(--charade-900);
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
}

.cms-owner-panel .total-price-item-value-unit {
    color: var(--charade-900);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

/* The payment card, cut like a ticket: two notches and a dashed tear line. */
.cms-owner-panel .payment-section {
    width: 315px;
}

.cms-owner-panel .payment-card {
    position: sticky;
    top: 60px;
    display: flex;
    flex-direction: column;
    background-color: var(--white-background);
    border-radius: 12px;
}

.cms-owner-panel .payment-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 12px;
}

.cms-owner-panel .payment-status-pending {
    background: radial-gradient(66.64% 72.47% at 100% 0%, color-mix(in srgb, var(--orange-300) 30%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
}

.cms-owner-panel .payment-status-paid {
    background: radial-gradient(66.64% 72.47% at 100% 0%, color-mix(in srgb, var(--green-500) 30%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
}

.cms-owner-panel .payment-status-canceled {
    background: radial-gradient(66.64% 72.47% at 100% 0%, color-mix(in srgb, var(--red-400) 30%, transparent) 0%, rgba(255, 255, 255, 0) 100%);
}

.cms-owner-panel .payment-status-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cms-owner-panel .payment-status-content-title {
    color: var(--charade-500);
    font-size: 14px;
    font-weight: 400;
}

.cms-owner-panel .payment-status-icon {
    border-radius: 12px;
    padding: 8px;
    font-size: 36px;
}

.cms-owner-panel .payment-status-pending .payment-status-icon {
    color: var(--orange-500);
    background: linear-gradient(225deg, color-mix(in srgb, var(--orange-100) 60%, transparent) 0%, color-mix(in srgb, var(--orange-400) 60%, transparent) 100%);
}

.cms-owner-panel .payment-status-paid .payment-status-icon {
    color: var(--green-500);
    background: linear-gradient(225deg, color-mix(in srgb, var(--green-100) 50%, transparent) 0%, color-mix(in srgb, var(--green-400) 50%, transparent) 100%);
}

.cms-owner-panel .payment-status-canceled .payment-status-icon {
    color: var(--red-500);
    background: linear-gradient(225deg, color-mix(in srgb, var(--red-100) 50%, transparent) 0%, color-mix(in srgb, var(--red-400) 50%, transparent) 100%);
}

.cms-owner-panel .payment-status-content-dec {
    color: var(--charade-700);
    font-size: 18px;
    font-weight: 700;
}

.cms-owner-panel .payment-underline-section {
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
}

.cms-owner-panel .payment-underline {
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right, var(--charade-100) 0 4px, transparent 4px 12px);
    background-position: bottom;
    background-size: 8px 4px;
}

.cms-owner-panel .payment-circle {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background-color: var(--light-background);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* The two notches sit on the card's own edges, so they are named for the
   sides of the box rather than for a direction. */
.cms-owner-panel .circle-left {
    inset-inline-start: -10px;
}

.cms-owner-panel .circle-right {
    inset-inline-end: -10px;
}

.cms-owner-panel .finish-payment {
    padding: 12px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .finish-payment-items {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.cms-owner-panel .finish-payment-title {
    color: var(--charade-500);
    font-size: 14px;
    font-weight: 400;
}

.cms-owner-panel .finish-payment-price {
    display: flex;
    align-items: center;
    gap: 2px;
}

.cms-owner-panel .finish-payment-price-title {
    color: var(--charade-700);
    font-size: 24px;
    font-weight: 600;
}

.cms-owner-panel .finish-payment-price-unit {
    color: var(--charade-400);
    font-size: 18px;
    font-weight: 700;
}

/* The one button on the ticket card. The old panel's "pay" button sat here and
   looked like this; what changed is behind it, not on it. Full width because
   the card is 315px and a centred pill in a column of centred text reads as
   decoration rather than the action. */
.cms-owner-panel .pay-online {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 45px;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background: var(--blue-400);
    color: var(--ow-on-fill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cms-owner-panel .pay-online:hover {
    background: var(--blue-500);
}

.cms-owner-panel .pay-online:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--blue-400);
}

.cms-owner-panel .payment-instructions {
    color: var(--charade-500);
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}

.cms-owner-panel .payment-reference {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: var(--charade-50);
    color: var(--charade-700);
    font-size: 14px;
    font-weight: 700;
    direction: ltr;
}

/* ── Wizard ──────────────────────────────────────────────────────────── */

.cms-owner-panel .site-creation-section {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 24px;
}

.cms-owner-panel .site-creation-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: var(--accessibility-white);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--charade-100) 70%, transparent);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

.cms-owner-panel .site-creation-progress-bar {
    position: sticky;
    top: 50px;
    width: clamp(266px, 100%, 266px);
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .vertical-progress-bar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.cms-owner-panel .progress-bar-step-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
}

.cms-owner-panel .progress-bar-step-label {
    font-size: 14px;
    color: #777;
    transition: color 0.3s ease, font-weight 0.3s;
}

.cms-owner-panel .progress-bar-step-label.step-active {
    color: var(--blue-600);
}

.cms-owner-panel .progress-bar-step-title {
    font-size: 12px;
    font-weight: 600;
}

.cms-owner-panel .progress-bar-step-desc {
    font-size: 16px;
    font-weight: 600;
}

.cms-owner-panel .progress-bar-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline-start: 10px;
    position: relative;
}

.cms-owner-panel .progress-bar-step-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    transition: all 0.3s ease;
    border-radius: 999px;
    background-color: var(--charade-200);
    box-shadow: 0 0 0 6px var(--accessibility-background);
    color: var(--ow-on-fill);
    font-size: 16px;
    font-weight: 719;
}

.cms-owner-panel .progress-bar-step-circle.step-active {
    background-color: var(--blue-500);
}

.cms-owner-panel .progress-bar-step-circle.step-done {
    background-color: var(--green-400);
    border: 2px solid var(--green-500);
    box-shadow: 0 0 0 4px var(--accessibility-background);
}

.cms-owner-panel .progress-bar-step-line {
    position: absolute;
    top: 46px;
    width: 2px;
    height: 40px;
    background-color: var(--charade-200);
    transition: background-color 0.3s ease;
}

.cms-owner-panel .progress-bar-step-line.step-active {
    background: linear-gradient(to bottom, var(--blue-500) 30%, #1B8FE5 40%, var(--charade-200) 90%);
}

.cms-owner-panel .progress-bar-step-line.step-done {
    background-color: var(--green-400);
}

.cms-owner-panel .mini-factor-and-step-btn {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms-owner-panel .website-label-form {
    color: var(--charade-600);
    font-size: 14px;
    font-weight: 600;
}

.cms-owner-panel .form-section-error .website-label-form {
    color: var(--red-500);
}

/* The design system's Input (owner-ds.css): 40px, a hairline border, a
   charcoal one on focus, red when the field is in error. */
.cms-owner-panel .website-form-input {
    width: 100%;
    height: var(--ow-control-height, 40px);
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--charade-100);
    background-color: var(--accessibility-white);
    box-shadow: 0 1px 1px rgba(32, 32, 40, 0.05);
    color: var(--charade-950);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cms-owner-panel .website-form-input:hover:not(:focus) {
    border-color: var(--charade-200);
}

.cms-owner-panel .website-form-input:focus {
    outline: none;
    border-color: var(--charade-950);
    box-shadow: 0 1px 1px rgba(32, 32, 40, 0.05), 0 0 0 3px rgba(9, 125, 234, 0.18);
}

.cms-owner-panel .form-section-error .website-form-input {
    border-color: var(--red-300);
}

.cms-owner-panel .form-section-error .website-form-input:focus {
    border-color: var(--red-500);
    box-shadow: 0 1px 1px rgba(32, 32, 40, 0.05), 0 0 0 3px rgba(221, 81, 72, 0.16);
}

.cms-owner-panel .website-form-input::placeholder {
    color: var(--charade-400);
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
}

.cms-owner-panel .required-star {
    color: red;
    margin: 2px;
}

.cms-owner-panel .error-form-message {
    color: var(--red-500);
    font-size: 12px;
    font-weight: 400;
    display: none;
}

.cms-owner-panel .form-section-error .error-form-message {
    display: block;
}

.cms-owner-panel .owner-information-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .owner-information-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--charade-50);
}

.cms-owner-panel .owner-information-tittle {
    color: var(--charade-500);
    font-size: 18px;
    font-weight: 700;
}

.cms-owner-panel .owner-information-desc {
    color: var(--charade-400);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.cms-owner-panel .owner-information-fullname-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms-owner-panel .owner-information-fullname {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Every cell of a two-field row takes half, whatever its content: sizing on
   content made the mobile/user-name row split 189/209 under rows split
   199/199, so the columns of the form did not line up. */
.cms-owner-panel .owner-information-fullname > .form-section {
    flex: 1 1 0;
    min-width: 0;
}

/* CMS-L31-8: the number and its country code read left to right in every
   language, so the pair is laid out left to right too — the code first, the
   number after it. The input was already `direction: ltr` (below) while its
   room for the chip was reserved on its inline-end, and the chip sat at the
   page's inline-end: in Persian that is the left, where an LTR input starts
   its text. The digits were typed under the chip and a click on that side hit
   the chip — "I cannot type the number". In English the two ends happened to
   agree, which is why the bug only showed in RTL. */
.cms-owner-panel .country-code-section {
    position: relative;
    display: flex;
    direction: ltr;
}

.cms-owner-panel .country-code-section input {
    padding-inline-start: 110px;
}

.cms-owner-panel .country-item {
    position: absolute;
    top: 50%;
    inset-inline-start: 6px;
    transform: translateY(-50%);
    display: flex;
    /* Flag, code, caret — the order the old panel showed on the left. */
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    padding: 6px;
    background: var(--charade-100);
}

.cms-owner-panel .country-item-flag {
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 100%;
    background-color: var(--charade-100);
    /* The old panel pulled this from flagcdn.com. A panel that reaches the
       public internet to draw a flag is a panel that leaks who is using it,
       so the three bands are drawn here instead. */
    background-image: linear-gradient(180deg, #239F40 0 33%, #FFFFFF 33% 66%, #DA0000 66% 100%);
}

.cms-owner-panel .country-item-code {
    color: var(--charade-500);
    direction: ltr;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

.cms-owner-panel .country-item-icon {
    font-size: 18px;
    color: var(--charade-300);
}

.cms-owner-panel .email-section input,
.cms-owner-panel .phonenumber-section input {
    direction: ltr;
}

.cms-owner-panel .contract-header {
    display: flex;
    padding: 24px 0 12px 0;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--charade-100);
}

.cms-owner-panel .contract-header-title {
    color: var(--charade-400);
    font-size: 18px;
    font-weight: 700;
}

.cms-owner-panel .contract-content-section {
    position: relative;
}

.cms-owner-panel .contract-content {
    height: 338px;
    overflow-y: auto;
    border-radius: 8px;
    padding: 28px 24px;
    border: 1.5px solid var(--charade-100);
    background: var(--white-background);
    color: var(--charade-500);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cms-owner-panel .contract-content-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms-owner-panel .contract-content-fader-top {
    position: absolute;
    top: 1px;
    inset-inline-start: 8px;
    width: calc(100% - 16px);
    height: 28px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--white-background) 100%);
}

.cms-owner-panel .contract-content-fader-bottom {
    position: absolute;
    bottom: 2px;
    inset-inline-start: 8px;
    width: calc(100% - 16px);
    height: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white-background) 100%);
}

.cms-owner-panel .content-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
    list-style-type: none;
    counter-reset: list-counter;
}

.cms-owner-panel .content-items li {
    counter-increment: list-counter;
}

/* Persian digits for a Persian reader, ordinary ones otherwise — the numeral
   system is part of the language, not of the direction. */
.cms-owner-panel .content-items li::before {
    content: counter(list-counter, decimal) ". ";
    padding-inline-end: 6px;
}

[dir="rtl"] .cms-owner-panel .content-items li::before {
    content: counter(list-counter, arabic-indic);
}

.cms-owner-panel .decide-contract-section {
    margin-top: 12px;
    padding: 12px 0;
}

.cms-owner-panel .switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
    flex: none;
}

.cms-owner-panel .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cms-owner-panel .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    transition: 0.4s;
    border-radius: 34px;
    box-shadow: 0 4px 6px 0 rgba(96, 98, 127, 0.12) inset, 0 1px 1px 0 rgba(96, 98, 127, 0.25) inset, 0 0 0 1.5px color-mix(in srgb, var(--charade-200) 80%, transparent);
}

.cms-owner-panel .slider::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 0;
    content: "";
    height: 16px;
    width: 16px;
    background: linear-gradient(180deg, var(--charade-300) 0%, var(--charade-400) 100%);
    box-shadow: 0 1px 4px 0 rgba(36, 36, 50, 0.29), 0 2px 6px -2px rgba(53, 53, 70, 0.65);
    transition: 0.4s;
    border-radius: 50%;
}

.cms-owner-panel input:checked + .slider {
    background: var(--blue-100);
    box-shadow: 0 4px 6px 0 rgba(96, 98, 127, 0.12) inset, 0 1px 1px 0 rgba(96, 98, 127, 0.25) inset, 0 0 0 1.5px rgba(46, 165, 245, 0.60);
}

.cms-owner-panel input:checked + .slider::before {
    transform: translate(calc(16px * var(--cms-owner-flip, 1)), -50%);
    background: linear-gradient(180deg, var(--blue-300) 0%, var(--blue-500) 100%);
    box-shadow: 0 1px 4px 0 rgba(27, 143, 229, 0.30), 0 2px 6px -2px rgba(27, 143, 229, 0.65);
}

.cms-owner-panel .switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--charade-800);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.cms-owner-panel .note-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms-owner-panel .note-section label {
    color: var(--charade-600);
    font-size: 14px;
    font-weight: 600;
}

.cms-owner-panel .note-section textarea {
    width: 100%;
    min-height: 100px;
    max-height: 300px;
    padding: 12px;
    border-radius: 8px;
    border: 1.5px solid var(--charade-100);
    background: var(--accessibility-white);
    resize: vertical;
    color: var(--charade-600);
    font-size: 14px;
    font-weight: 480;
    font-family: inherit;
}

.cms-owner-panel .note-section textarea:focus {
    outline: none;
    border: 1.5px solid var(--charade-300);
}

.cms-owner-panel .plans-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.cms-owner-panel .plan-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    text-align: start;
    border-radius: 12px;
    border: 1.5px solid var(--charade-100);
    background: var(--accessibility-white);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.cms-owner-panel .plan-card:hover {
    border-color: var(--blue-200);
}

.cms-owner-panel .plan-card.plan-card-chosen {
    border-color: var(--blue-400);
    box-shadow: 0 0 0 1.5px var(--blue-400);
}

.cms-owner-panel .plan-card-title {
    color: var(--charade-700);
    font-size: 16px;
    font-weight: 700;
}

.cms-owner-panel .plan-card-price {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--blue-500);
    font-size: 20px;
    font-weight: 800;
}

.cms-owner-panel .plan-card-price-unit {
    color: var(--charade-400);
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .plan-card-term,
.cms-owner-panel .plan-card-desc {
    color: var(--charade-400);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

/* The old wizard's duration chips: one chip per term length, the plan cards
   below filtered to the chosen chip. Values from the old panel's
   Create.razor.css (.plans-time-selection / .time-item). */
.cms-owner-panel .plans-time-selection {
    display: flex;
    flex-wrap: wrap;
    padding: 6px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    background: var(--accessibility-background);
}

.cms-owner-panel .time-item {
    cursor: pointer;
    min-height: 36px;
    min-width: 98px;
    padding: 6px;
    border: none;
    border-radius: 8px;
    background: var(--accessibility-white);
    color: var(--charade-500);
    text-align: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.cms-owner-panel .time-item-selected {
    border: 1.5px solid var(--blue-400);
    background: var(--blue-50);
    color: var(--blue-500);
}

/* Theme cards, in the shape the old panel's picker gave them. The cover is
   the same gradient placeholder the site cards use, for the same reason:
   nothing takes theme screenshots yet. */
.cms-owner-panel .theme-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.cms-owner-panel .theme-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    text-align: start;
    border-radius: 12px;
    border: 1.5px solid var(--charade-100);
    background: var(--accessibility-white);
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    transition: all 0.2s ease;
}

.cms-owner-panel .theme-card:hover {
    border-color: var(--blue-200);
}

.cms-owner-panel .theme-card.theme-card-chosen {
    border-color: var(--blue-400);
    box-shadow: 0 0 0 1.5px var(--blue-400);
}

.cms-owner-panel .theme-card-img {
    display: block;
    aspect-ratio: 266.50 / 152.00;
    background: linear-gradient(135deg, var(--blue-200) 0%, var(--blue-500) 100%);
}

.cms-owner-panel .theme-card-none .theme-card-img {
    background: linear-gradient(135deg, var(--charade-100) 0%, var(--charade-300) 100%);
}

.cms-owner-panel .theme-card-title {
    padding-inline: 12px;
    color: var(--charade-700);
    font-size: 15px;
    font-weight: 700;
}

.cms-owner-panel .theme-card-price {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-inline: 12px;
    color: var(--blue-500);
    font-size: 16px;
    font-weight: 800;
}

.cms-owner-panel .theme-card-price-unit {
    color: var(--charade-400);
    font-size: 12px;
    font-weight: 600;
}

.cms-owner-panel .theme-card-btn {
    margin: auto 12px 12px;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--blue-500);
    background: var(--blue-50);
    color: var(--blue-500);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
}

.cms-owner-panel .theme-card-btn-selected {
    background: var(--blue-500);
    color: var(--ow-on-fill);
}

/* The mini invoice: under the step rail while choosing, and above the
   contract as the old panel's «ریز فاکتور». */
.cms-owner-panel .factor-title {
    color: var(--charade-700);
    font-size: 16px;
    font-weight: 700;
}

.cms-owner-panel .mini-factor {
    border-radius: 8px;
    border: 1px solid var(--charade-100);
    overflow: hidden;
}

.cms-owner-panel .mini-factor-detail {
    display: flex;
    padding: 12px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--charade-100) 60%, transparent);
    color: var(--charade-400);
    font-size: 12px;
    font-weight: 700;
}

.cms-owner-panel .mini-factor-price {
    display: flex;
    padding: 12px;
    justify-content: space-between;
    align-items: center;
    background: var(--accessibility-white);
    color: var(--charade-400);
    font-size: 12px;
    font-weight: 700;
}

.cms-owner-panel .previous-step {
    display: flex;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--charade-100);
    cursor: pointer;
    border: none;
    color: var(--charade-600);
    font-size: 18px;
}

.cms-owner-panel .form-navigation {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.cms-owner-panel .form-error {
    color: var(--red-500);
    font-size: 13px;
    font-weight: 500;
}

/* ── Auth: sign in and sign up ───────────────────────────────────────── */

.cms-owner-panel .owner-auth {
    min-block-size: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    padding: 24px;
}

.cms-owner-panel .owner-auth-card {
    inline-size: min(100%, 460px);
    background: var(--accessibility-white);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--charade-100) 70%, transparent);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The card's head: the logo at the start of the line, the language dropdown
   at the end — right and left in Persian, mirrored in English, by the flex
   row's own direction rather than by physical sides. */
.cms-owner-panel .owner-auth-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.cms-owner-panel .owner-auth-logo {
    height: 40px;
}

/* The heading reads from the start of the line like the fields under it. */
.cms-owner-panel .owner-auth-title {
    color: var(--charade-700);
    font-size: 20px;
    font-weight: 700;
    text-align: start;
    margin: 0;
}

.cms-owner-panel .owner-auth-subtitle {
    color: var(--charade-400);
    font-size: 13px;
    font-weight: 500;
    text-align: start;
    margin: -8px 0 0;
}

.cms-owner-panel .owner-auth-error {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--red-50);
    color: var(--red-600);
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .owner-auth-notice {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--green-50);
    color: var(--green-700);
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .owner-auth-submit {
    width: 100%;
    justify-content: center;
}

.cms-owner-panel .owner-auth-footer {
    color: var(--charade-400);
    font-size: 13px;
    text-align: center;
}

.cms-owner-panel .owner-auth-footer a {
    color: var(--blue-500);
    font-weight: 600;
}

/* The sign-in screen is one door (sign-up was /owner/register): a mobile
   number, then the code texted to it. Each step is its own form; the screen
   renders only the one it is on. */

.cms-owner-panel .owner-auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The logo, and on the code step the way back to the number before it. */
.cms-owner-panel .owner-auth-brand {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Language and theme, side by side as in the header (.items). */
.cms-owner-panel .owner-auth-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A bare arrow, as tall as the logo beside it so the two share one line. */
.cms-owner-panel .owner-auth-back {
    display: inline-grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 8px;
    color: var(--charade-600);
    transition: background-color 120ms ease, color 120ms ease;
}

.cms-owner-panel .owner-auth-back:hover {
    background: var(--charade-50);
    color: var(--charade-800);
}

.cms-owner-panel .owner-auth-back:focus-visible {
    outline: none;
    box-shadow: var(--ow-focus-ring);
}

/* The number inside the code step's sentence. */
.cms-owner-panel .owner-auth-number {
    color: var(--charade-700);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cms-owner-panel .owner-auth-link {
    color: var(--blue-500);
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .owner-auth-link:hover {
    color: var(--blue-600);
}

/* The wait before another code may be asked for; the clock keeps a fixed
   width so the sentence does not shift each second. */
.cms-owner-panel .owner-auth-countdown {
    margin: 0;
    color: var(--charade-400);
    font-size: 13px;
    text-align: center;
}

.cms-owner-panel .owner-auth-countdown__clock {
    display: inline-block;
    min-inline-size: 3.2em;
    color: var(--charade-600);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* "Didn't get it? Send again": its own form under the code, so asking again
   never posts a half-typed code. */
.cms-owner-panel .owner-auth-resend {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    color: var(--charade-400);
    font-size: 13px;
}

/* The display above would otherwise beat the hidden attribute, and "send
   again" would show through the countdown. */
.cms-owner-panel .owner-auth-resend[hidden],
.cms-owner-panel .owner-auth-countdown[hidden] {
    display: none;
}

.cms-owner-panel .owner-auth-link {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

/* ---- A site's domains (CMS-L2-14) ------------------------------------------
   One row per name the site answers on: the name, where it stands, and — for
   a domain still waiting on its owner — the records to create. Names are
   Latin and read left to right in either panel; the row keeps the panel's own
   direction around them. */

.cms-owner-panel .owner-domain-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cms-owner-panel .owner-domain-row {
    border-radius: 12px;
    box-shadow: 0 0 0 1.5px var(--charade-50);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cms-owner-panel .owner-domain-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cms-owner-panel .owner-domain-host {
    color: var(--charade-700);
    font-size: 15px;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
    min-width: 0;
}

.cms-owner-panel .owner-domain-host:hover {
    color: var(--blue-500);
}

.cms-owner-panel .owner-domain-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cms-owner-panel .owner-domain-pending {
    border: 1px solid var(--orange-200);
    color: var(--orange-500);
}

.cms-owner-panel .owner-domain-note {
    color: var(--charade-400);
    font-size: 13px;
    margin: 0;
}

.cms-owner-panel .owner-domain-problem {
    color: var(--red-600);
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .owner-domain-how {
    background: var(--blue-50);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--charade-600);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-owner-panel .owner-domain-how p {
    margin: 0;
}

.cms-owner-panel .owner-domain-how-title {
    color: var(--charade-700);
    font-weight: 700;
}

.cms-owner-panel .owner-domain-how code {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px;
    color: var(--charade-800);
    overflow-wrap: anywhere;
}

.cms-owner-panel .owner-domain-ns {
    margin: 0;
    padding-inline-start: 18px;
}

.cms-owner-panel .owner-domain-records {
    width: 100%;
    border-collapse: collapse;
    background: var(--white-background);
    border-radius: 8px;
    overflow: hidden;
}

.cms-owner-panel .owner-domain-records th,
.cms-owner-panel .owner-domain-records td {
    padding: 8px 10px;
    text-align: start;
    border-bottom: 1px solid var(--charade-50);
    vertical-align: top;
}

.cms-owner-panel .owner-domain-records th {
    color: var(--charade-400);
    font-weight: 600;
    font-size: 12px;
}

.cms-owner-panel .owner-domain-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cms-owner-panel .owner-domain-confirm {
    color: var(--charade-600);
    font-size: 13px;
    font-weight: 600;
}

.cms-owner-panel .owner-domain-btn {
    border: 1px solid var(--charade-100);
    background: var(--white-background);
    color: var(--charade-600);
    border-radius: 8px;
    padding: 6px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cms-owner-panel .owner-domain-btn:hover:not(:disabled) {
    border-color: var(--blue-400);
    color: var(--blue-500);
}

.cms-owner-panel .owner-domain-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.cms-owner-panel .owner-domain-btn-danger {
    color: var(--red-600);
    border-color: var(--red-300);
}

.cms-owner-panel .owner-domain-btn-danger:hover:not(:disabled) {
    color: var(--red-600);
    border-color: var(--red-500);
}

.cms-owner-panel .owner-domain-connect {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.cms-owner-panel .owner-domain-input {
    flex: 1 1 260px;
    min-width: 0;
    text-align: left;
}

.cms-owner-panel .owner-domain-refresh {
    margin-top: 8px;
}