/* AnyTire design system: Bootstrap 5.3 RTL + brand tokens. See docs/ui-design-system.md */
@import url("../fonts/style.css");

:root {
    --at-primary: #8B1A2B;
    --at-primary-dark: #6E1422;
    --at-primary-rgb: 139, 26, 43;
    --at-accent: #C8102E;
    --at-ink: #1F2933;
    --at-muted: #6B7280;
    --at-surface: #FFFFFF;
    --at-bg: #F6F7F9;
    --at-border: #E5E7EB;
    --at-success: #198754;
    --at-warning: #FFC107;
    --at-danger: #DC3545;
    --at-info: #0DCAF0;
    --at-radius: 1rem;
    --at-radius-sm: .75rem;
    --at-shadow: 0 8px 24px rgba(17, 24, 39, .08);
    --at-shadow-lg: 0 16px 40px rgba(17, 24, 39, .14);
    --at-sidebar-w: 270px;

    --bs-primary: #8B1A2B;
    --bs-primary-rgb: 139, 26, 43;
    --bs-link-color: #8B1A2B;
    --bs-link-color-rgb: 139, 26, 43;
    --bs-link-hover-color: #6E1422;
    --bs-link-hover-color-rgb: 110, 20, 34;
    --bs-body-font-family: "AbarMidFaNum", Tahoma, sans-serif;
    --bs-body-color: #1F2933;
    --bs-body-bg: #F6F7F9;
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
    --bs-focus-ring-color: rgba(139, 26, 43, .25);
}

html, body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; }
body { background: var(--at-bg); color: var(--at-ink); }
h1, h2, h3, h4, h5, h6, .btn, .form-control, .form-select { font-family: var(--bs-body-font-family); }
h1:focus { outline: none; }
a { text-decoration: none; }
.text-muted, .text-secondary { color: var(--at-muted) !important; }
.text-primary { color: var(--at-primary) !important; }
.border-primary { border-color: var(--at-primary) !important; }
.ltr { direction: ltr; unicode-bidi: embed; }
.fanum { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { border-radius: var(--at-radius-sm); font-weight: 600; transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: scale(.97); }
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--at-primary);
    --bs-btn-border-color: var(--at-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--at-primary-dark);
    --bs-btn-hover-border-color: var(--at-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--at-primary-dark);
    --bs-btn-active-border-color: var(--at-primary-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--at-primary);
    --bs-btn-disabled-border-color: var(--at-primary);
    --bs-btn-focus-shadow-rgb: 139, 26, 43;
}
.btn-outline-primary {
    --bs-btn-color: var(--at-primary);
    --bs-btn-border-color: var(--at-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--at-primary);
    --bs-btn-hover-border-color: var(--at-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--at-primary-dark);
    --bs-btn-active-border-color: var(--at-primary-dark);
    --bs-btn-disabled-color: var(--at-primary);
    --bs-btn-disabled-border-color: var(--at-primary);
    --bs-btn-focus-shadow-rgb: 139, 26, 43;
}
.btn-soft { background: rgba(var(--at-primary-rgb), .08); color: var(--at-primary); border-color: transparent; }
.btn-soft:hover { background: rgba(var(--at-primary-rgb), .16); color: var(--at-primary-dark); }

/* Forms */
.form-control, .form-select { border-radius: var(--at-radius-sm); border-color: #D1D5DB; padding: .6rem .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--at-primary); box-shadow: 0 0 0 .25rem rgba(var(--at-primary-rgb), .15); }
.form-check-input:checked { background-color: var(--at-primary); border-color: var(--at-primary); }
.form-check-input:focus { border-color: var(--at-primary); box-shadow: 0 0 0 .25rem rgba(var(--at-primary-rgb), .15); }
.form-label { font-weight: 600; font-size: .875rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #198754; }
.invalid { outline: 1px solid var(--at-danger); }
.validation-message { color: var(--at-danger); font-size: .8125rem; margin-top: .25rem; }

/* Cards, tables, misc Bootstrap tuning */
.card { border-radius: var(--at-radius); border: 1px solid var(--at-border); box-shadow: var(--at-shadow); background: var(--at-surface); transition: transform .2s ease, box-shadow .2s ease; }
.card-header { background: transparent; border-bottom: 1px solid var(--at-border); border-radius: var(--at-radius) var(--at-radius) 0 0 !important; }
.card-footer { background: transparent; border-top: 1px solid var(--at-border); }
.modal-content { border-radius: var(--at-radius); border: 0; box-shadow: var(--at-shadow-lg); }
.table > :not(caption) > * > * { padding: .75rem; }
.table thead th { font-weight: 600; color: var(--at-muted); font-size: .8125rem; white-space: nowrap; background: #fafafa; }
.nav-pills .nav-link.active { background-color: var(--at-primary); }
.page-link { color: var(--at-primary); }
.page-item.active .page-link { background-color: var(--at-primary); border-color: var(--at-primary); }
.progress-bar { background-color: var(--at-primary); }
.dropdown-menu { border-radius: var(--at-radius-sm); border-color: var(--at-border); box-shadow: var(--at-shadow); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--at-primary); }

/* Utilities */
.at-radius { border-radius: var(--at-radius); }
.at-shadow { box-shadow: var(--at-shadow); }
.at-shadow-lg { box-shadow: var(--at-shadow-lg); }
.at-clamp-2, .at-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.at-clamp-2 { -webkit-line-clamp: 2; }
.at-clamp-3 { -webkit-line-clamp: 3; }
.at-icon-box { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--at-primary-rgb), .08); color: var(--at-primary); font-size: 1.15rem; flex-shrink: 0; }
.at-icon-box-lg { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; border-radius: 1rem; }
.at-gradient { background: linear-gradient(135deg, var(--at-primary) 0%, var(--at-primary-dark) 60%, #4a0d17 100%); color: #fff; }
.at-section { padding: 2.5rem 0; }
.at-section-title { font-weight: 800; font-size: 1.4rem; margin-bottom: 1.25rem; }
.at-prose { line-height: 2; color: #374151; }
.at-prose h2, .at-prose h3 { margin-top: 1.5rem; font-weight: 700; }
.at-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--at-border); background: #fff; font-size: .875rem; font-weight: 600; color: #374151; cursor: pointer; transition: all .15s ease; }
.at-pill:hover { border-color: var(--at-primary); color: var(--at-primary); }
.at-pill.active { background: var(--at-primary); border-color: var(--at-primary); color: #fff; }

/* Public layout */
.at-navbar { background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--at-border); }
.at-navbar .nav-link { color: #374151; font-weight: 600; border-radius: .6rem; padding: .5rem .85rem; }
.at-navbar .nav-link:hover { color: var(--at-primary); background: rgba(var(--at-primary-rgb), .06); }
.at-navbar .nav-link.active { color: var(--at-primary); background: rgba(var(--at-primary-rgb), .1); }
.at-brand img { height: 42px; width: auto; }
.at-footer { background: linear-gradient(135deg, #5c0f1b 0%, var(--at-primary-dark) 55%, var(--at-primary) 100%); color: #f3e4e7; }
.at-footer a { color: #fff; }
.at-footer a:hover { color: #ffd9de; }
.at-footer .at-footer-title { color: #ffd9de; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: .5rem; margin-bottom: .75rem; }
.at-footer-bottom { background: #fff; color: var(--at-muted); font-size: .875rem; }
.at-totop { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 1030; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: var(--at-primary); color: #fff; box-shadow: var(--at-shadow-lg); display: flex; align-items: center; justify-content: center; }
.at-totop:hover { background: var(--at-primary-dark); }

/* Auth layout */
.at-auth-wrap { max-width: 56rem; }
.at-narrow { max-width: 28rem; }
.at-topbar-logo { height: 34px; width: auto; }
.at-auth-bg { min-height: 100vh; background: radial-gradient(circle at 20% 10%, #fbe9ec 0, transparent 45%), linear-gradient(135deg, #fdf2f4 0%, #f6e3e7 100%); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.at-auth-brand { background: linear-gradient(160deg, var(--at-primary) 0%, var(--at-primary-dark) 70%, #3e0a14 100%); color: #fff; position: relative; overflow: hidden; }
.at-auth-brand::before { content: ""; position: absolute; inset: 0; background: url("../banner/AaniTire.jpg") center/cover; opacity: .12; mix-blend-mode: overlay; }
.at-auth-brand > * { position: relative; }

/* Panel layout */
.at-panel { min-height: 100vh; display: flex; flex-direction: column; background: var(--at-bg); }
.at-topbar { background: #fff; border-bottom: 1px solid var(--at-border); position: sticky; top: 0; z-index: 1020; }
.at-panel-body { display: flex; flex: 1; min-width: 0; }
.at-sidebar { width: var(--at-sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, #4a0d17 0%, var(--at-primary-dark) 100%); color: #fff; }
.at-sidebar-sticky { position: sticky; top: 57px; max-height: calc(100vh - 57px); overflow-y: auto; padding: 1rem .75rem; }
.at-side-title { font-weight: 800; padding: .25rem .5rem; }
.at-side-sub { color: rgba(255, 255, 255, .7); font-size: .8rem; padding: 0 .5rem 1rem; }
.at-side-link { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: .75rem; color: rgba(255, 255, 255, .88); font-size: .925rem; font-weight: 600; width: 100%; background: none; border: 0; text-align: start; transition: background-color .15s ease; }
.at-side-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.at-side-link.active { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset -3px 0 0 #fff; }
.at-side-link > .bi:first-child { font-size: 1.1rem; opacity: .9; }
.at-side-chevron { margin-inline-start: auto; font-size: .8rem; transition: transform .2s ease; }
.at-side-chevron.open { transform: rotate(180deg); }
.at-side-sub-list { margin: .15rem .9rem .35rem 0; padding-inline-start: .6rem; border-inline-start: 2px solid rgba(255, 255, 255, .15); display: flex; flex-direction: column; gap: .1rem; }
.at-side-sub-list .at-side-link { font-size: .85rem; padding: .45rem .65rem; font-weight: 500; }
.at-panel-main { flex: 1; min-width: 0; padding: 1.25rem; }
.at-breadcrumb .breadcrumb { margin-bottom: .75rem; font-size: .85rem; }
.offcanvas.at-sidebar .btn-close { filter: invert(1); }
@media (max-width: 991.98px) {
    .at-panel-main { padding: .9rem; }
    .offcanvas.at-sidebar { width: min(85vw, 300px); }
    .offcanvas.at-sidebar .at-sidebar-sticky { position: static; max-height: none; padding: 1rem .75rem; }
}

/* Stepper */
.at-stepper { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0; }
.at-step { flex: 1 1 0; min-width: 7rem; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--at-radius-sm); background: #fff; border: 1px solid var(--at-border); color: var(--at-muted); font-size: .85rem; font-weight: 600; }
.at-step-no { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef0f3; flex-shrink: 0; font-size: .8rem; }
.at-step.done { color: var(--at-success); border-color: rgba(25, 135, 84, .35); }
.at-step.done .at-step-no { background: var(--at-success); color: #fff; }
.at-step.current { color: var(--at-primary); border-color: var(--at-primary); background: rgba(var(--at-primary-rgb), .05); }
.at-step.current .at-step-no { background: var(--at-primary); color: #fff; }
.at-step.locked { opacity: .55; }

/* File picker */
.at-drop { border: 2px dashed #cbd5e1; border-radius: var(--at-radius-sm); background: #fafafa; padding: 1rem; text-align: center; position: relative; transition: border-color .15s ease, background-color .15s ease; }
.at-drop:hover { border-color: var(--at-primary); background: rgba(var(--at-primary-rgb), .03); }
.at-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.at-file-thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: .6rem; border: 1px solid var(--at-border); }

/* Loading / modal */
.at-skeleton { background: linear-gradient(90deg, #eceff3 25%, #f6f7f9 37%, #eceff3 63%); background-size: 400% 100%; border-radius: .6rem; min-height: 1rem; animation: at-shimmer 1.4s ease infinite; }
@keyframes at-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.at-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 1055; }
.at-modal-wrap { --bs-modal-padding: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-header-border-width: 0; --bs-modal-footer-border-width: 0; --bs-modal-footer-gap: .5rem; --bs-modal-bg: var(--at-surface, #fff); --bs-modal-border-radius: var(--at-radius, 1rem); --bs-modal-inner-border-radius: var(--at-radius, 1rem); --bs-modal-title-line-height: 1.5; position: fixed; inset: 0; z-index: 1056; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.at-modal-wrap .modal-content { background: var(--at-surface, #fff); border: 0; border-radius: var(--at-radius, 1rem); box-shadow: 0 20px 50px rgba(15, 23, 42, .25); animation: at-pop .18s ease-out; }
@keyframes at-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* Table -> cards on mobile */
@media (max-width: 767.98px) {
    .at-table-cards thead { display: none; }
    .at-table-cards tbody tr { display: block; border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); margin-bottom: .75rem; padding: .5rem .75rem; background: #fff; }
    .at-table-cards tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .35rem 0; text-align: end; }
    .at-table-cards tbody td::before { content: attr(data-label); color: var(--at-muted); font-weight: 600; text-align: start; flex-shrink: 0; }
    .at-table-cards tbody td[data-label=""]::before { display: none; }
}

/* Hero & home */
.at-hero { border-radius: 1.5rem; overflow: hidden; box-shadow: var(--at-shadow-lg); position: relative; }
.at-hero .carousel-item { height: 260px; background: #eee; }
@media (min-width: 768px) { .at-hero .carousel-item { height: 380px; } }
@media (min-width: 1200px) { .at-hero .carousel-item { height: 420px; } }
.at-hero .carousel-item > img { width: 100%; height: 100%; object-fit: cover; }
.at-hero .carousel-indicators [data-bs-target] { width: .6rem; height: .6rem; border-radius: 50%; border: 0; }
.at-hero-text { position: absolute; inset: 0; display: flex; align-items: center; padding-inline: clamp(3.5rem, 7vw, 6rem); }
.at-hero .carousel-control-prev, .at-hero .carousel-control-next { width: 3rem; opacity: .65; }
.at-hero-text h2, .at-hero-text p { text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.at-hero-text > div { max-width: min(26rem, 55%); }
.at-tile { display: block; height: 100%; color: var(--at-ink); overflow: hidden; }
.at-tile:hover { color: var(--at-ink); }
.at-tile img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.at-tile.soon { opacity: .85; }
.at-cta { border-radius: 1.5rem; padding: 2rem; position: relative; overflow: hidden; }
.at-cta::after { content: ""; position: absolute; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(255, 255, 255, .08); inset-inline-start: -5rem; top: -7rem; pointer-events: none; }
.at-product-img { aspect-ratio: 4 / 3; background: #f1f3f5; overflow: hidden; border-radius: var(--at-radius) var(--at-radius) 0 0; }
.at-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .at-product-img img { transform: scale(1.04); }

/* Misc */
.install-btn { position: fixed; bottom: 20px; right: 20px; padding: 12px 24px; background: var(--at-accent); color: #fff; border: none; border-radius: 25px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); z-index: 1000; }
.install-btn:hover { background: var(--at-primary-dark); }
#blazor-error-ui { background: #fff3cd; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: #fff; border-radius: var(--at-radius-sm); }
.blazor-error-boundary::after { content: "خطایی رخ داد."; }

/* App loader (index.html) */
.at-loader { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #fdf2f4, #f6e3e7); color: var(--at-ink); font-family: "AbarMidFaNum", sans-serif; transition: opacity .12s ease; }
.at-loader-ring { width: 52px; height: 52px; border-radius: 50%; border: 4px solid rgba(139, 26, 43, .18); border-top-color: #8B1A2B; border-right-color: #C8102E; animation: at-spin .85s linear infinite; }
@keyframes at-spin { to { transform: rotate(360deg); } }

/* Motion (CSS only) */
html.at-js .at-reveal { opacity: 0; }
html.at-js .at-reveal.is-visible { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    html.at-js .at-reveal { transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
    html.at-js .at-reveal.is-visible { transform: none; }
    .at-reveal[data-delay="1"] { transition-delay: .08s; }
    .at-reveal[data-delay="2"] { transition-delay: .16s; }
    .at-reveal[data-delay="3"] { transition-delay: .24s; }
    .card.at-hover:hover, a.card:hover { transform: translateY(-4px); box-shadow: var(--at-shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
    .at-reveal { opacity: 1; transform: none; transition: none; }
    .btn:active { transform: none; }
    .at-skeleton, .at-loader-ring { animation-duration: 3s; }
    * { scroll-behavior: auto !important; }
}

/* Shared UI helpers */
.min-w-0 { min-width: 0; }
.at-preview { max-height: 20rem; object-fit: contain; }
.at-preview-frame { height: 20rem; }
.at-pre-line { white-space: pre-line; }
.at-otp-box { width: 3rem; height: 3.4rem; padding: 0; font-size: 1.25rem; }
.at-card-title { min-height: 2.9em; }
.at-zoom { cursor: zoom-in; }
.at-lightbox-backdrop { background: rgba(0, 0, 0, .8); }
.at-lightbox { outline: none; }
.at-lightbox-img { max-height: 90vh; max-width: 100%; object-fit: contain; }
.at-wide { max-width: 56rem; }
.at-bar { width: .25rem; height: 1.25rem; display: inline-block; }
.at-narrow-lg { max-width: 36rem; }

/* Hero on phones: readable text over the artwork */
@media (max-width: 767.98px) {
  .at-hero .carousel-control-prev, .at-hero .carousel-control-next { display: none; }
  .at-hero-text { padding-inline: 1.25rem; align-items: flex-end; padding-bottom: 2.25rem;
    background: linear-gradient(to top, rgba(20, 6, 10, .78) 0%, rgba(20, 6, 10, .35) 55%, rgba(20, 6, 10, 0) 100%); }
  .at-hero-text > div { max-width: 100%; }
  .at-hero-text h2 { font-size: 1.25rem; }
  .at-hero-text .btn { padding: .35rem 1rem; font-size: .875rem; }
}

/* user-pages agent */
.at-seg { display: flex; border: 1px solid var(--at-border); border-radius: .6rem; background: #f8f9fa; padding: 2px; gap: 2px; }
.at-seg-btn { flex: 1 1 0; min-width: 0; border: 0; background: transparent; padding: .4rem .5rem; font-size: .78rem; font-weight: 600; border-radius: .45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s ease; }
.at-seg-btn.text-muted:hover { background: #fff; color: var(--at-ink) !important; }
.at-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--at-primary); display: inline-block; }
.at-thumb { width: 5rem; height: 5rem; }
@media (min-width: 576px) { .at-thumb { width: 6rem; height: 6rem; } }
.at-stepper-sm .at-step { min-width: 5rem; flex-direction: column; text-align: center; font-size: .72rem; gap: .25rem; padding: .4rem .3rem; }
.at-wiz-item.locked { background: #f8f9fa; cursor: not-allowed; }
.at-wiz-done { background: rgba(25, 135, 84, .06); }
.at-badge-xs { font-size: .68rem; font-weight: 600; }
.at-card-thumb { height: 5.5rem; overflow: hidden; }
.at-grid-2 { display: grid; grid-template-columns: 1fr; gap: .5rem 1rem; }
@media (min-width: 576px) { .at-grid-2 { grid-template-columns: 1fr 1fr; } .at-span-2 { grid-column: span 2; } }
.at-preview-sm { max-height: 12rem; max-width: 100%; object-fit: contain; }
.at-grid-btn2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* admin agent */
.at-adm-x { width: 1.5rem; height: 1.5rem; line-height: 1; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; }
.at-adm-close { font-size: .6rem; }
.at-adm-thumb { width: 100%; height: 5rem; object-fit: cover; }

/* admin agent */
.at-adm-note { max-width: 12rem; }
@media (max-width: 767.98px) { .at-adm-note { max-width: none; } }
.at-chat { max-height: 55vh; overflow-y: auto; }
.at-bubble { max-width: 85%; border-radius: 1rem; padding: .65rem 1rem; font-size: .925rem; }
.at-bubble-admin { background: #f1f3f5; color: var(--at-ink); }
.at-bubble-me { background: var(--at-primary); color: #fff; }

/* admin agent */
.at-adm-trunc { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-adm-logo { width: 7rem; height: 7rem; border-radius: var(--at-radius); border: 1px solid var(--at-border); background: #f8f9fa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.at-adm-chat { max-height: 45vh; overflow-y: auto; }
.at-adm-bubble { max-width: 85%; }
.at-adm-banner { height: 9rem; }
.at-adm-order { width: 4.5rem; }
.at-adm-x { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767.98px) { .at-adm-trunc { max-width: none; white-space: normal; } }

/* blog-prereg agent */
.at-article { max-width: 760px; font-size: 1.05rem; line-height: 2; color: var(--at-ink); }
.at-article h1, .at-article h2, .at-article h3 { line-height: 1.6; }
.at-article .content-block { margin-bottom: 1.25rem; text-align: justify; overflow-wrap: anywhere; }
.at-article .content-block img, .at-article .content-block video, .at-article .content-block iframe { max-width: 100%; height: auto; border-radius: .75rem; }
.at-article .content-block table { display: block; max-width: 100%; overflow-x: auto; }
.at-article .content-block a { color: var(--at-primary); text-decoration: underline; }
.at-article .content-block ul, .at-article .content-block ol { padding-inline-start: 1.5rem; }
.at-article .content-block blockquote { border-inline-start: 4px solid var(--at-primary); padding: .25rem 1rem; color: var(--at-muted); background: rgba(var(--at-primary-rgb), .04); border-radius: .5rem; }
.at-article-lead { background: rgba(var(--at-primary-rgb), .06); border-inline-start: 4px solid var(--at-primary); border-radius: .75rem; padding: 1rem 1.25rem; line-height: 1.9; font-size: 1rem; }
.at-blog-hero { position: relative; aspect-ratio: 16 / 9; max-height: 26rem; width: 100%; background: #f1f3f5; overflow: hidden; border-radius: var(--at-radius) var(--at-radius) 0 0; }
.at-blog-hero img { width: 100%; height: 100%; object-fit: cover; }
.at-blog-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.at-blog-nav:hover { background: rgba(0, 0, 0, .55); }
.at-blog-nav-prev { right: .75rem; }
.at-blog-nav-next { left: .75rem; }
.at-blog-dots { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; }
.at-blog-dots button { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .6); transition: width .2s ease; }
.at-blog-dots button.active { width: 1.6rem; background: #fff; }
.at-avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--at-primary); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.at-click { cursor: pointer; }
@media (min-width: 992px) { .at-sticky-side { position: sticky; top: 5.5rem; } }
.at-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .3rem 0; }
.at-kv dt { font-weight: 400; color: var(--at-muted); }
.at-kv dd { margin: 0; font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.at-dashed { border: 2px dashed rgba(var(--at-primary-rgb), .35); }
.at-scroll-box { max-height: 18rem; overflow-y: auto; padding-inline-end: .5rem; }
.at-invoice-total { max-width: 22rem; }
.at-invoice-head { border-radius: var(--at-radius) var(--at-radius) 0 0; }
@media print {
    .at-navbar, .at-footer, .at-footer-bottom, .navbar, header.sticky-top, footer, .no-print, .toast-container, .btn { display: none !important; }
    body { background: #fff !important; }
    main.container { max-width: none !important; padding: 0 !important; }
    .at-invoice-page { max-width: none !important; }
    .at-invoice { box-shadow: none !important; border: 1px solid #ccc !important; border-radius: 0 !important; }
    .at-invoice-head { background: #fff !important; color: #000 !important; border-bottom: 1px solid #ccc; border-radius: 0 !important; }
    .at-invoice-head .opacity-75 { opacity: 1 !important; }
    .at-reveal { opacity: 1 !important; transform: none !important; }
}

/* dashboard agent */
.at-modal-scroll { max-height: calc(100vh - 12rem); overflow-y: auto; }
.at-modal-img { max-height: 10rem; max-width: 100%; object-fit: contain; }
.at-intro-art { width: 6.5rem; height: auto; flex-shrink: 0; }
@media print {
  header.at-navbar, footer, .at-footer, .at-no-print, .btn { display: none !important; }
  body { background: #fff !important; }
  main.container { max-width: 100% !important; padding: 0 !important; }
  .at-invoice .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  .at-invoice .at-gradient { background: #fff !important; color: #000 !important; border-bottom: 1px solid #ccc; }
}

/* installments agent */
.at-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.at-line > span:last-child { text-align: end; min-width: 0; overflow-wrap: anywhere; }
.at-strip { height: .375rem; }
.at-result-min { min-height: 60vh; }
.at-prod-box { width: 100%; max-width: 15rem; aspect-ratio: 1 / 1; }
.at-prod-img { width: 100%; height: 100%; object-fit: contain; }
.at-thumb-fill { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (min-width: 576px) { .w-sm-auto { width: auto !important; } }

/* OTP: one field that looks like digit slots; accepts paste and SMS autofill */
.at-otp-input { max-width: 15rem; margin-inline: auto; font-size: 1.75rem; letter-spacing: .9rem; padding-inline-start: 1.6rem; font-variant-numeric: tabular-nums; }
.at-otp-input::placeholder { letter-spacing: .6rem; color: var(--bs-secondary-color); }

/* map picker */
.at-map-picker .at-map-canvas { width: 100%; z-index: 0; position: relative; }
.at-map-picker .at-map-results { max-height: 12rem; overflow-y: auto; }
.at-map-picker .leaflet-container { font-family: inherit; border-radius: inherit; }
@media (max-width: 575.98px) { .at-map-picker .at-map-canvas { min-height: 260px; } }

/* product section */
.at-cat-icon { display: inline-block; flex: 0 0 auto; object-fit: contain; }
.at-cat-icon-sm { width: 1.25rem; height: 1.25rem; }
.at-cat-icon-md { width: 2.75rem; height: 2.75rem; }
.at-cat-icon-lg { width: 4rem; height: 4rem; }
.at-cat-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; background: rgba(var(--at-primary-rgb), .1); color: var(--at-primary); }
.at-cat-icon-md.at-cat-fallback { font-size: 1.25rem; }

.at-filter-side { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; border-radius: var(--at-radius); box-shadow: var(--at-shadow); }
.at-cat-tile { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .75rem; border: 1.5px solid var(--at-border); border-radius: var(--at-radius-sm); background: #fff; color: var(--at-ink); text-align: start; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.at-cat-tile:hover { border-color: rgba(var(--at-primary-rgb), .5); }
.at-cat-tile.active { border-color: var(--at-primary); background: rgba(var(--at-primary-rgb), .07); box-shadow: 0 0 0 .15rem rgba(var(--at-primary-rgb), .12); }
.at-cat-tile-label { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.at-cat-check { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--at-primary); color: #fff; font-size: .8rem; flex: 0 0 auto; }

.at-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .25rem .35rem .25rem .75rem; border-radius: 999px; background: rgba(var(--at-primary-rgb), .08); border: 1px solid rgba(var(--at-primary-rgb), .25); color: var(--at-primary-dark); font-size: .8125rem; font-weight: 600; }
.at-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border: 0; border-radius: 50%; background: rgba(var(--at-primary-rgb), .15); color: inherit; font-size: .65rem; padding: 0; }
.at-chip-x:hover { background: var(--at-primary); color: #fff; }

.at-filter-sheet.offcanvas-bottom { height: 85vh; max-height: 85vh; border-radius: 1.25rem 1.25rem 0 0; }
.at-sheet-handle { width: 2.75rem; height: .3rem; border-radius: 999px; background: #d1d5db; margin: .6rem auto 0; flex: 0 0 auto; }
.at-sheet-footer { display: flex; gap: .5rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--at-border); background: #fff; flex: 0 0 auto; }
@media (min-width: 992px) { .at-filter-sheet.offcanvas { display: none !important; } .offcanvas-backdrop { display: none; } }

.at-pcard { border: 1px solid var(--at-border); border-radius: var(--at-radius); box-shadow: 0 2px 10px rgba(17, 24, 39, .06); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.at-pcard:hover { box-shadow: var(--at-shadow-lg); }
@media (prefers-reduced-motion: no-preference) { .at-pcard:hover { transform: translateY(-4px); } }
.at-pcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff 0%, #f1f3f5 75%); }
.at-pcard-imgbtn { display: block; width: 100%; height: 100%; padding: .75rem; border: 0; background: transparent; cursor: zoom-in; }
.at-pcard-imgbtn img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.at-pcard:hover .at-pcard-imgbtn img { transform: scale(1.06); }
.at-pcard-badges { position: absolute; top: .6rem; inset-inline-start: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; pointer-events: none; max-width: calc(100% - 1.2rem); }
.at-pcard-title { min-height: 2.9em; line-height: 1.45; }
.at-price { font-size: 1.4rem; font-weight: 800; color: var(--at-primary); line-height: 1.2; }
.at-pcard-actions { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: .75rem 1rem 1rem; background: transparent; border-top: 0; }
@media (min-width: 400px) { .at-pcard-actions { grid-template-columns: 1fr 1fr; } }
.at-pcard-actions .btn { padding-inline: .5rem; font-size: .875rem; white-space: nowrap; }
.at-map-picker .leaflet-container img, .at-map-picker .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; }

/* detail pages */
.at-icon-box-sm { width: 2rem; height: 2rem; font-size: .95rem; border-radius: .6rem; }
.at-detail-header { border-inline-start: 4px solid var(--at-primary); }
.at-detail-stats { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 576px) { .at-detail-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .at-detail-stats { grid-template-columns: repeat(4, 1fr); } }
.at-stat-chip { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); background: #fafbfc; min-width: 0; }
.at-ds { border: 1px solid #d5d9e0; box-shadow: 0 2px 8px rgba(17, 24, 39, .05); overflow: hidden; }
.at-ds-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; background: rgba(var(--at-primary-rgb), .06); border-bottom: 1px solid #d5d9e0; }
.at-ds-body { padding: 1rem; }
.at-ds-danger { border-inline-start: 4px solid var(--at-danger); }
.at-ds-danger .at-ds-head { background: rgba(220, 53, 69, .08); }
.at-ds-success { border-inline-start: 4px solid var(--at-success); }
.at-ds-success .at-ds-head { background: rgba(25, 135, 84, .08); }
.at-ds-warning { border-inline-start: 4px solid #e0a800; }
.at-ds-warning .at-ds-head { background: rgba(255, 193, 7, .14); }
.at-ds-info { border-inline-start: 4px solid #0aa2c0; }
.at-ds-info .at-ds-head { background: rgba(13, 202, 240, .1); }
@media (max-width: 991.98px) { .at-ds-collapsed { display: none; } }
.at-kv { display: grid; grid-template-columns: 1fr; gap: .85rem 1.5rem; }
@media (min-width: 576px) { .at-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.at-kv-item { min-width: 0; padding-bottom: .6rem; border-bottom: 1px dashed #e5e7eb; }
.at-kv-item dt { font-size: .8rem; font-weight: 400; color: var(--at-muted); margin-bottom: .15rem; }
.at-kv-item dd { margin: 0; font-weight: 600; }
@media (min-width: 576px) { .at-kv-wide { grid-column: 1 / -1; } }
.at-detail-aside { }
@media (min-width: 992px) { .at-detail-aside { position: sticky; top: 4.75rem; } }
.at-detail-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--at-border); box-shadow: 0 -6px 18px rgba(17, 24, 39, .1); }
@media (max-width: 991.98px) { .at-detail { padding-bottom: 5rem; } }
.at-timeline { position: relative; }
.at-tl-step { position: relative; display: flex; gap: .75rem; padding-bottom: 1.1rem; }
.at-tl-step:last-child { padding-bottom: 0; }
.at-tl-step:not(:last-child)::before { content: ""; position: absolute; top: 1.5rem; bottom: 0; inset-inline-start: .72rem; width: 2px; background: #e5e7eb; }
.at-tl-step.done:not(:last-child)::before { background: var(--at-success); }
.at-tl-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #eef0f3; color: #fff; font-size: .8rem; border: 2px solid #d1d5db; }
.at-tl-step.done .at-tl-dot { background: var(--at-success); border-color: var(--at-success); }
.at-tl-step.current .at-tl-dot { background: #fff; border-color: var(--at-primary); box-shadow: 0 0 0 4px rgba(var(--at-primary-rgb), .15); }
.at-tl-step.rejected .at-tl-dot { background: var(--at-danger); border-color: var(--at-danger); }
.at-tl-step.pending { color: var(--at-muted); }
.at-tl-step.current .at-tl-text { color: var(--at-primary); }
@media (prefers-reduced-motion: no-preference) { .at-tl-step.current .at-tl-dot { animation: at-tl-pulse 1.8s ease-in-out infinite; } }
@keyframes at-tl-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--at-primary-rgb), .15); } 50% { box-shadow: 0 0 0 7px rgba(var(--at-primary-rgb), .05); } }
.at-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; }
.at-gallery-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: .5rem; border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); background: #fff; color: var(--at-ink); cursor: zoom-in; min-width: 0; overflow: hidden; }
.at-gallery-item:hover { border-color: var(--at-primary); }
.at-gallery-item img { width: 100%; height: 7rem; object-fit: contain; background: #f6f7f9; border-radius: .5rem; }
.at-gallery-cap { max-width: 100%; color: var(--at-muted); }
.at-gallery-pdf { min-height: 8rem; cursor: pointer; color: var(--at-primary); }
.at-gallery-lb { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1rem; }
@media print {
    .at-detail-aside, .at-detail-bar, .at-actions, .d-print-none { display: none !important; }
    .at-detail .col-lg-8 { width: 100% !important; flex: 0 0 100% !important; }
    .at-ds { box-shadow: none; break-inside: avoid; }
    .at-ds-collapsed { display: block !important; }
}

.at-wiz-item .accordion-header { font-size: 1rem; margin: 0; }

/* rbac */
.at-rbac { padding-bottom: 1rem; }
.at-rbac-search { max-width: 22rem; }
.at-rbac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.at-rbac-page { padding: .75rem; border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); background: #fff; min-width: 0; }
.at-rbac-page.on { border-color: rgba(var(--at-primary-rgb), .45); background: rgba(var(--at-primary-rgb), .03); }
.at-rbac-key { font-size: .7rem; margin-top: .15rem; }
.at-rbac-actions { display: grid; gap: .4rem; margin-top: .6rem; padding-top: .6rem; padding-inline-start: 1.1rem; border-top: 1px dashed var(--at-border); }
.at-rbac-bar { position: sticky; bottom: 0; z-index: 1020; margin-top: 1rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: #fff; border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); box-shadow: 0 -6px 18px rgba(17, 24, 39, .1); }

/* product card v2 */
.at-pcard-media { background: #f1f3f5; }
.at-pslider, .at-pslider-empty { position: absolute; inset: 0; }
.at-pslider-empty { display: flex; align-items: center; justify-content: center; }
.at-pcard-imgbtn { padding: 0; }
.at-pcard-imgbtn img { object-fit: cover; user-select: none; -webkit-user-drag: none; }
.at-pcard-badges { top: .6rem; inset-inline-start: .6rem; inset-inline-end: auto; flex-wrap: nowrap; z-index: 2; }
.at-pcard-badges .badge { white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
@media (max-width: 575.98px) { .at-pcard-badges { flex-wrap: wrap; } }
.at-pslider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #212529; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s; }
.at-pslider-prev { inset-inline-start: .5rem; }
.at-pslider-next { inset-inline-end: .5rem; }
.at-pslider:hover .at-pslider-nav, .at-pslider-nav:focus-visible { opacity: 1; }
@media (hover: none) { .at-pslider-nav { opacity: .9; } }
.at-pslider-dots { position: absolute; bottom: .5rem; inset-inline: 0; z-index: 3; display: flex; justify-content: center; gap: .3rem; pointer-events: none; }
.at-pslider-dot { pointer-events: auto; width: .55rem; height: .55rem; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(0,0,0,.35); }
.at-pslider-dot.active { background: #fff; transform: scale(1.2); }
.at-pcard-more { font-size: .8rem; text-decoration: none; }
.at-lightbox-gallery { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.at-lightbox-stage { display: flex; align-items: center; gap: .75rem; max-width: 100%; }
.at-lightbox-stage .at-lightbox-img { max-height: 75vh; min-width: 0; flex: 1 1 auto; }
.at-lightbox-nav { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; padding: 0; }
.at-lightbox-thumbs { display: flex; gap: .5rem; max-width: 100%; overflow-x: auto; padding: .25rem; }
.at-lightbox-thumb { flex: 0 0 auto; width: 4rem; height: 3rem; padding: 0; border: 2px solid transparent; border-radius: .4rem; overflow: hidden; background: #000; opacity: .7; }
.at-lightbox-thumb.active { border-color: #fff; opacity: 1; }
.at-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* mobile menu: backdrop-filter makes the header a containing block, which collapsed the fixed offcanvas to the header height */
@media (max-width: 991.98px) { .at-navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } #atNavOffcanvas .offcanvas-body { overflow-y: auto; } }
.at-lightbox-stage .at-lightbox-img { flex: 0 1 auto; min-width: 0; width: auto; max-width: min(80vw, 900px); background: #fff; border-radius: .5rem; }
.at-lightbox-thumb { background: #fff; }