/* dc26 panel skin 2026-08-12 — App Panel design. Previous: account.css.bak-dcpanel-20260812 */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Public+Sans:wght@400;500;600;700&display=swap');
/* ===============================================================
   Shoppi Cloud - Account Dashboard CSS
   All rules scoped under .account-dashboard-wrapper to prevent
   conflicts with the global shoppi.cloud style.css
   =============================================================== */

/* -- Reset box-sizing -- */
.account-dashboard-wrapper *,
.account-dashboard-wrapper *::before,
.account-dashboard-wrapper *::after {
    box-sizing: border-box;
}

/* -- Page wrapper -- */
.account-dashboard-wrapper {
    background: #f4f3f8;
    min-height: 80vh;
    padding: 28px 0 80px;
    /* Inherited font only — never a `* { font-family }` override, which
       would clobber Font Awesome's own class rules (signup lesson). */
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333249;
}

/* -- Container -- */
.account-dashboard-wrapper > .container {
    width: 100%;
    max-width: 1064px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Headings and heavy numbers use the display face, per the dc26 design. */
.account-dashboard-wrapper h1,
.account-dashboard-wrapper h2,
.account-dashboard-wrapper h3,
.account-dashboard-wrapper h4,
.account-dashboard-wrapper h5,
.account-dashboard-wrapper .fw-800,
.account-dashboard-wrapper .modal-title,
#dashboard-modals-container .modal-title,
#dashboard-modals-container .fw-800 {
    font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif;
}
/* But not FA icons that happen to sit inside a bold element. */
.account-dashboard-wrapper .fw-800 .fas,
.account-dashboard-wrapper .fw-800 .fab,
#dashboard-modals-container .fw-800 .fas,
#dashboard-modals-container .fw-800 .fab {
    font-family: 'Font Awesome 6 Free';
}
#dashboard-modals-container .fw-800 .fab,
.account-dashboard-wrapper .fw-800 .fab {
    font-family: 'Font Awesome 6 Brands';
}
#dashboard-modals-container {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #333249;
}

/* The design is flat: hairline borders carry the structure, not shadows. */
.account-dashboard-wrapper .shadow-sm { box-shadow: none !important; }

/* ---------------------------------------------
   FLEX UTILITIES
   --------------------------------------------- */
.account-dashboard-wrapper .d-flex { display: flex !important; }
.account-dashboard-wrapper .d-block { display: block !important; }
.account-dashboard-wrapper .d-inline-flex { display: inline-flex !important; }
.account-dashboard-wrapper .d-none { display: none !important; }
.account-dashboard-wrapper .flex-grow-1 { flex-grow: 1 !important; }
.account-dashboard-wrapper .flex-shrink-0 { flex-shrink: 0 !important; }
.account-dashboard-wrapper .align-items-center { align-items: center !important; }
.account-dashboard-wrapper .align-items-start { align-items: flex-start !important; }
.account-dashboard-wrapper .justify-content-between { justify-content: space-between !important; }
.account-dashboard-wrapper .justify-content-end { justify-content: flex-end !important; }
.account-dashboard-wrapper .justify-content-center { justify-content: center !important; }
.account-dashboard-wrapper .gap-2 { gap: 0.5rem !important; }
.account-dashboard-wrapper .gap-3 { gap: 1rem !important; }
.account-dashboard-wrapper .gap-4 { gap: 1.5rem !important; }

/* ---------------------------------------------
   SPACING UTILITIES
   --------------------------------------------- */
.account-dashboard-wrapper .mb-0 { margin-bottom: 0 !important; }
.account-dashboard-wrapper .mb-1 { margin-bottom: 0.25rem !important; }
.account-dashboard-wrapper .mb-2 { margin-bottom: 0.5rem !important; }
.account-dashboard-wrapper .mb-3 { margin-bottom: 1rem !important; }
.account-dashboard-wrapper .mb-4 { margin-bottom: 1.5rem !important; }
.account-dashboard-wrapper .mb-5 { margin-bottom: 3rem !important; }
.account-dashboard-wrapper .mt-2 { margin-top: 0.5rem !important; }
.account-dashboard-wrapper .mt-3 { margin-top: 1rem !important; }
.account-dashboard-wrapper .mt-md-0 { margin-top: 0; }
.account-dashboard-wrapper .ms-1 { margin-left: 0.25rem !important; }
.account-dashboard-wrapper .ms-2 { margin-left: 0.5rem !important; }
.account-dashboard-wrapper .me-1 { margin-right: 0.25rem !important; }
.account-dashboard-wrapper .me-2 { margin-right: 0.5rem !important; }
.account-dashboard-wrapper .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.account-dashboard-wrapper .p-0 { padding: 0 !important; }
.account-dashboard-wrapper .p-3 { padding: 1rem !important; }
.account-dashboard-wrapper .p-4 { padding: 1.5rem !important; }
.account-dashboard-wrapper .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.account-dashboard-wrapper .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.account-dashboard-wrapper .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.account-dashboard-wrapper .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.account-dashboard-wrapper .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.account-dashboard-wrapper .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.account-dashboard-wrapper .ps-3 { padding-left: 1rem !important; }
.account-dashboard-wrapper .ps-0 { padding-left: 0 !important; }
.account-dashboard-wrapper .pt-4 { padding-top: 1.5rem !important; }
.account-dashboard-wrapper .pb-0 { padding-bottom: 0 !important; }

/* ---------------------------------------------
   TEXT UTILITIES
   --------------------------------------------- */
.account-dashboard-wrapper .text-center { text-align: center !important; }
.account-dashboard-wrapper .text-muted { color: #8b8aa0 !important; }
.account-dashboard-wrapper .text-dark { color: #333249 !important; }
.account-dashboard-wrapper .text-primary { color: #f23329 !important; }
.account-dashboard-wrapper .text-success { color: #1b9e4b !important; }
.account-dashboard-wrapper .text-warning { color: #b06e00 !important; }
.account-dashboard-wrapper .text-capitalize { text-transform: capitalize !important; }
.account-dashboard-wrapper .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dashboard-wrapper .text-uppercase { text-transform: uppercase !important; }
.account-dashboard-wrapper .text-decoration-none { text-decoration: none !important; }
.account-dashboard-wrapper .small { font-size: 0.875em !important; }
.account-dashboard-wrapper .fw-bold { font-weight: 700 !important; }
.account-dashboard-wrapper .fw-700 { font-weight: 700 !important; }
.account-dashboard-wrapper .fw-800 { font-weight: 800 !important; }

/* ---------------------------------------------
   BACKGROUND & BORDER UTILITIES
   --------------------------------------------- */
.account-dashboard-wrapper .bg-light { background-color: #fdfcfa !important; }
.account-dashboard-wrapper .bg-white { background-color: #fff !important; }
.account-dashboard-wrapper .bg-success { background-color: #1b9e4b !important; }
.account-dashboard-wrapper .bg-primary { background-color: #f23329 !important; }
.account-dashboard-wrapper .bg-primary.bg-opacity-10 { background-color: rgba(242,51,41,0.1) !important; }
.account-dashboard-wrapper .bg-success.bg-opacity-10 { background-color: rgba(25,135,84,0.1) !important; }
.account-dashboard-wrapper .border { border: 1px solid #ebeaf0 !important; }
.account-dashboard-wrapper .border-0 { border: 0 !important; }
.account-dashboard-wrapper .border-start { border-left: 1px solid #ebeaf0 !important; }
.account-dashboard-wrapper .border-end-0 { border-right: 0 !important; }
.account-dashboard-wrapper .border-start-0 { border-left: 0 !important; }
.account-dashboard-wrapper .border-primary { border-color: #f23329 !important; }
.account-dashboard-wrapper .rounded-3 { border-radius: 0.5rem !important; }
.account-dashboard-wrapper .rounded-4 { border-radius: 1rem !important; }
.account-dashboard-wrapper .rounded-circle { border-radius: 50% !important; }
.account-dashboard-wrapper .rounded-pill { border-radius: 50rem !important; }
.account-dashboard-wrapper .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important; }
.account-dashboard-wrapper .shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important; }
.account-dashboard-wrapper .h-100 { height: 100% !important; }
.account-dashboard-wrapper .w-100 { width: 100% !important; }
.account-dashboard-wrapper .opacity-50 { opacity: 0.5 !important; }

/* ---------------------------------------------
   BUTTONS - fully scoped overrides
   --------------------------------------------- */
.account-dashboard-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease;
    white-space: nowrap;
    min-width: unset !important;
}

/* Primary action per the dc26 design: ink pill that turns red on hover
   ("+ Create New Brand", modal saves). Scoped so the global site button
   styles never leak in. */
.account-dashboard-wrapper .btn-primary,
#dashboard-modals-container .btn-primary {
    background: #333249 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50rem !important;
    padding: 0.55rem 1.5rem !important;
    min-width: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    transform: none !important;
}
.account-dashboard-wrapper .btn-primary:hover,
.account-dashboard-wrapper .btn-primary:focus,
#dashboard-modals-container .btn-primary:hover,
#dashboard-modals-container .btn-primary:focus {
    background: #f23329 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}
.account-dashboard-wrapper .btn-primary *,
#dashboard-modals-container .btn-primary * {
    color: #ffffff !important;
}

.account-dashboard-wrapper .btn-dark {
    background-color: #333249 !important;
    color: #fff !important;
    border-color: #333249 !important;
    border-radius: 50rem !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    min-width: unset !important;
}
.account-dashboard-wrapper .btn-dark:hover {
    background-color: #f23329 !important;
    border-color: #f23329 !important;
    transform: translateY(-1px);
}

/* "Edit Info" style: white pill, hairline border, quiet text. */
.account-dashboard-wrapper .btn-outline-secondary,
#dashboard-modals-container .btn-outline-secondary {
    background-color: #fff !important;
    color: #5d5c74 !important;
    border: 1px solid #ebeaf0 !important;
    border-radius: 50rem !important;
    padding: 0.5rem 1.1rem !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    min-width: unset !important;
}
.account-dashboard-wrapper .btn-outline-secondary:hover,
#dashboard-modals-container .btn-outline-secondary:hover {
    background-color: #fff !important;
    color: #333249 !important;
    border-color: #333249 !important;
}

/* Disconnect: soft red border that fills red on hover, as in the design. */
.account-dashboard-wrapper .btn-outline-danger {
    color: #f23329 !important;
    border: 1.5px solid #fbc6c2 !important;
    background: transparent !important;
    border-radius: 50rem !important;
    padding: 0.5rem 1.25rem !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    min-width: unset !important;
}
.account-dashboard-wrapper .btn-outline-danger:hover {
    background: #f23329 !important;
    border-color: #f23329 !important;
    color: #fff !important;
}

.account-dashboard-wrapper .btn-link {
    font-weight: 600;
    color: #f23329 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    min-width: unset !important;
    display: inline-flex;
    align-items: center;
}
.account-dashboard-wrapper .btn-link:hover {
    color: #d92a20 !important;
    text-decoration: underline !important;
}

/* ---------------------------------------------
   dc26 HOOK-CLASS ACCENTS
   The design gives technical actions (domain, WebDAV, Stripe dashboard)
   a blue accent and keeps red for money/CTAs. Selectors target the JS
   hook classes so account_v2.js needs no markup changes.
   --------------------------------------------- */
/* Generic outline-primary fallback (DNS verify, etc.): white pill. */
.account-dashboard-wrapper .btn-outline-primary,
#dashboard-modals-container .btn-outline-primary {
    background: #fff !important;
    color: #333249 !important;
    border: 1px solid #ebeaf0 !important;
    border-radius: 50rem !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    min-width: unset !important;
}
.account-dashboard-wrapper .btn-outline-primary:hover,
#dashboard-modals-container .btn-outline-primary:hover {
    border-color: #fda401 !important;
    color: #333249 !important;
    background: #fff !important;
}
/* Cloud Drive: borderless blue text button. */
.account-dashboard-wrapper .show_webdav_modal {
    background: none !important;
    border: none !important;
    color: #4655d4 !important;
    padding: 0.5rem 0.5rem !important;
    font-weight: 700 !important;
}
.account-dashboard-wrapper .show_webdav_modal:hover {
    color: #333249 !important;
    background: none !important;
}
/* "+ Add Touchpoint" in the brand header: borderless red text button. */
.account-dashboard-wrapper .brand-section .btn-outline-primary.create_new_store {
    background: none !important;
    border: none !important;
    color: #f23329 !important;
    font-weight: 700 !important;
    padding: 0.4rem 0.5rem !important;
}
.account-dashboard-wrapper .brand-section .btn-outline-primary.create_new_store:hover {
    color: #d92a20 !important;
}
/* Configure Domain + Stripe Dashboard links: blue accent. */
.account-dashboard-wrapper .btn-link.connect_domain,
.account-dashboard-wrapper .btn-link.open_stripe_dashboard {
    color: #4655d4 !important;
}
.account-dashboard-wrapper .btn-link.connect_domain:hover,
.account-dashboard-wrapper .btn-link.open_stripe_dashboard:hover {
    color: #333249 !important;
}
/* Pinned state: gold pill with ink text (design), unpinned stays quiet. */
.account-dashboard-wrapper .js-toggle-pin.btn-warning {
    background: #fda401 !important;
    border: none !important;
    color: #333249 !important;
    border-radius: 50rem !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
}
.account-dashboard-wrapper .js-toggle-pin.btn-warning:hover {
    background: #f09a00 !important;
    color: #333249 !important;
}

.account-dashboard-wrapper .btn-close {
    box-sizing: content-box;
    width: 1em; height: 1em;
    padding: 0.25em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
    cursor: pointer;
    min-width: unset !important;
}

/* ---------------------------------------------
   BADGE
   --------------------------------------------- */
.account-dashboard-wrapper .badge {
    display: inline-block;
    padding: 0.35em 0.7em;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    /* dc26 chips are squared-off, 6px, even when marked rounded-pill. */
    border-radius: 6px;
}
.account-dashboard-wrapper .badge.rounded-pill {
    border-radius: 6px !important;
}
.account-dashboard-wrapper .badge.bg-success {
    background-color: #e7f6ec !important;
    color: #1b9e4b !important;
}
/* Payments states straight from the design: green on / amber setup. */
.account-dashboard-wrapper .badge.bg-success.bg-opacity-10 {
    background-color: #e7f6ec !important;
    color: #1b9e4b !important;
    border-color: transparent !important;
}
.account-dashboard-wrapper .badge.bg-warning.bg-opacity-10,
.account-dashboard-wrapper .badge.bg-warning {
    background-color: #fff7e8 !important;
    color: #b06e00 !important;
    border-color: #fce3ae !important;
}
/* Touchpoint type chip ("Sito E-Commerce"): neutral ink on lavender grey. */
.account-dashboard-wrapper .brand-card .badge.bg-light.text-primary {
    background-color: #ecebf2 !important;
    color: #333249 !important;
    border-color: transparent !important;
}
.account-dashboard-wrapper .brand-card .badge.bg-light.text-primary .fas {
    color: #333249 !important;
}
/* Country chip: white with hairline border, mono. */
.account-dashboard-wrapper .badge.bg-light.text-dark {
    background-color: #fff !important;
    color: #8b8aa0 !important;
    border-color: #ebeaf0 !important;
}
/* Plan cell chip: amber like the design's plan column. */
.account-dashboard-wrapper .badge.js-manage-plan {
    background-color: #fff7e8 !important;
    color: #b06e00 !important;
}

/* ---------------------------------------------
   SPINNER
   --------------------------------------------- */
.account-dashboard-wrapper .spinner-border {
    display: inline-block;
    width: 2.5rem; height: 2.5rem;
    vertical-align: -0.125em;
    border: 0.25em solid rgba(242,51,41,0.25);
    border-right-color: #f23329;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}
@keyframes spinner-border { to { transform: rotate(360deg); } }
.account-dashboard-wrapper .visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.account-dashboard-wrapper .text-primary.spinner-border {
    border-color: rgba(242,51,41,0.2);
    border-right-color: #f23329;
}

/* ---------------------------------------------
   FORM CONTROLS
   --------------------------------------------- */
.account-dashboard-wrapper .form-control,
.account-dashboard-wrapper .form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333249;
    background-color: #fff;
    background-clip: padding-box;
    border: 1.5px solid #e4e3ec;
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: auto;
}
.account-dashboard-wrapper .form-control:focus,
.account-dashboard-wrapper .form-select:focus {
    /* Gold focus ring, like every other dc26 form on the site. */
    border-color: #fda401;
    box-shadow: 0 0 0 3px rgba(253,164,1,0.15);
    outline: none;
}

/* Search + filter toolbar: pills with hairline borders (design "SEARCH"). */
.account-dashboard-wrapper #tp-search,
.account-dashboard-wrapper #tp-filter {
    border: 1.5px solid #ebeaf0;
    background: #fff;
    font-size: 0.9rem;
}
.account-dashboard-wrapper #tp-search:focus,
.account-dashboard-wrapper #tp-filter:focus {
    border-color: #fda401;
    box-shadow: none;
}
.account-dashboard-wrapper #tp-search::placeholder {
    color: #b3b2c4;
}
.account-dashboard-wrapper .input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.account-dashboard-wrapper .input-group .form-control {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.account-dashboard-wrapper .input-group-text {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: #8b8aa0;
    text-align: center;
    white-space: nowrap;
    background-color: #f7f6fa;
    border: 1.5px solid #e4e3ec;
    border-radius: 0.5rem;
}
.account-dashboard-wrapper .form-label { margin-bottom: 0.4rem; display: inline-block; font-weight: 600; font-size: 0.88rem; color: #374151; }
.account-dashboard-wrapper .form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; margin-bottom: 0.125rem; }
.account-dashboard-wrapper .form-check-input { width: 1em; height: 1em; margin-top: 0.25em; vertical-align: top; cursor: pointer; }
.account-dashboard-wrapper .form-check-label { cursor: pointer; }
.account-dashboard-wrapper .form-switch { padding-left: 2.5em; }
.account-dashboard-wrapper .form-switch .form-check-input { width: 2em; border-radius: 2em; }
.account-dashboard-wrapper .rounded-start-3 { border-radius: 0.5rem 0 0 0.5rem; }

/* ---------------------------------------------
   MODAL - scoped
   --------------------------------------------- */
.account-dashboard-wrapper .modal,
#dashboard-modals-container .modal {
    position: fixed;
    top: 0; left: 0;
    z-index: 10055;
    display: none;
    width: 100%; height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgba(0,0,0,0.5);
}
.account-dashboard-wrapper .modal.show,
#dashboard-modals-container .modal.show {
    display: block;
}
#dashboard-modals-container .modal-dialog,
.account-dashboard-wrapper .modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    pointer-events: none;
}
#dashboard-modals-container .modal-dialog-centered,
.account-dashboard-wrapper .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
    justify-content: center;
}
#dashboard-modals-container .modal-content,
.account-dashboard-wrapper .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    outline: 0;
}
#dashboard-modals-container .modal-header,
.account-dashboard-wrapper .modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0;
    border-bottom: none;
}
#dashboard-modals-container .modal-body,
.account-dashboard-wrapper .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem 1.5rem;
}
#dashboard-modals-container .modal-title,
.account-dashboard-wrapper .modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.1rem;
    font-weight: 800;
    color: #333249;
}
.modal-backdrop {
    position: fixed; top: 0; left: 0; z-index: 10050;
    width: 100vw; height: 100vh;
    /* Ink-tinted scrim, per the design's modal overlay. */
    background-color: #333249;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.5; }

/* ---------------------------------------------
   WEBDAV MODAL — dark "Shoppi Go Desktop" band from the design
   --------------------------------------------- */
#dashboard-modals-container .bg-dark,
.account-dashboard-wrapper .bg-dark {
    background-color: #333249 !important;
    border-radius: 16px !important;
    border: none !important;
}
#dashboard-modals-container .bg-dark .text-white-50 {
    color: #b6b5c8 !important;
}
/* macOS button inside the dark band: design blue, gold on hover. */
#dashboard-modals-container .bg-dark .btn-primary {
    background: #4655d4 !important;
}
#dashboard-modals-container .bg-dark .btn-primary:hover {
    background: #fda401 !important;
    color: #333249 !important;
}
#dashboard-modals-container .bg-dark .btn-primary:hover * {
    color: #333249 !important;
}
#dashboard-modals-container .bg-dark .btn-outline-light {
    border: 1px solid #4c4b68 !important;
    color: #f4f3f8 !important;
    background: none !important;
    border-radius: 50rem !important;
    font-weight: 700 !important;
}
#dashboard-modals-container .bg-dark .btn-outline-light:hover {
    border-color: #fda401 !important;
    color: #fda401 !important;
}
/* WebDAV terminal glyph + tip box accents in blue. */
#dashboard-modals-container #webdavModal .modal-title .fa-terminal {
    color: #4655d4 !important;
}
#dashboard-modals-container #webdavModal .bg-primary.bg-opacity-10 {
    background-color: #eef0fb !important;
    border-color: #d7dbf4 !important;
}
#dashboard-modals-container #webdavModal .bg-primary.bg-opacity-10 .text-primary {
    color: #4655d4 !important;
}
/* Rotate-token action: blue text like the design's "Generate new token". */
#dashboard-modals-container .rotate_webdav_token {
    background: none !important;
    border: none !important;
    color: #4655d4 !important;
    font-weight: 700 !important;
}
#dashboard-modals-container .rotate_webdav_token:hover {
    color: #333249 !important;
}
/* Credential fields: parchment mono boxes. */
#dashboard-modals-container #webdavModal .form-control.bg-light {
    background: #fdfcfa !important;
    border: 1.5px solid #ebeaf0;
    border-radius: 10px;
    font-size: 0.85rem;
}
/* DNS wizard code accents. */
#dashboard-modals-container code {
    color: #333249;
}
#dashboard-modals-container #dns-cname-target {
    color: #4655d4 !important;
}

/* ---------------------------------------------
   ALERTS
   --------------------------------------------- */
.account-dashboard-wrapper .alert {
    position: relative;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}
.account-dashboard-wrapper .alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.account-dashboard-wrapper .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; }

/* ---------------------------------------------
   ICON SIZES
   --------------------------------------------- */
.account-dashboard-wrapper .fa-3x { font-size: 3em; }
.account-dashboard-wrapper .fs-4 { font-size: 1.5rem !important; }

/* ---------------------------------------------
   PROFILE HEADER — user card from the design
   --------------------------------------------- */
.account-dashboard-wrapper .dashboard-profile-header {
    background: #fff;
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: none;
    border: 1px solid #ebeaf0;
    margin-bottom: 2rem !important;
}
.account-dashboard-wrapper .dashboard-profile-header h2 {
    font-size: 1.25rem;
    margin-bottom: 0 !important;
}
.account-dashboard-wrapper .dashboard-profile-header #profile-email-sub {
    font-size: 0.82rem;
}

/* 48px gold disc; initials by default, photo when the profile has one. */
.account-dashboard-wrapper .profile-avatar-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    background: #fda401;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-dashboard-wrapper #profile-avatar-initials {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: #333249;
    line-height: 1;
}
.account-dashboard-wrapper .profile-avatar-wrapper .user_profile_pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------
   SELLER DASHBOARD VIEW
   --------------------------------------------- */
.account-dashboard-wrapper .seller-dashboard-view {
    margin-top: 2rem;
}

.account-dashboard-wrapper .dashboard-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.4rem !important;
}
.account-dashboard-wrapper .dashboard-header-row h3 {
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}
.account-dashboard-wrapper .dashboard-header-row p {
    font-size: 0.9rem;
}

/* Revenue summary bar: flat white card, 16px radius (design "STATS"). */
.account-dashboard-wrapper .seller-dashboard-view > .rounded-4.bg-white.border {
    border: 1px solid #ebeaf0 !important;
    border-radius: 16px !important;
}
.account-dashboard-wrapper .revenue-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff7e8;
    border: 1px solid #fce3ae;
    color: #b06e00;
    flex-shrink: 0;
}
.account-dashboard-wrapper .revenue-icon-box .fas {
    color: #b06e00;
}

/* ---------------------------------------------
   BRAND CARDS
   --------------------------------------------- */
/* Brand section: the outer white card, 18px radius, hairline border. */
.account-dashboard-wrapper .brand-section {
    background: #fff;
    border: 1px solid #ebeaf0 !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    margin-bottom: 18px !important;
}
.account-dashboard-wrapper .brand-section > .d-flex:first-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 1rem !important;
}
.account-dashboard-wrapper .brand-section h4 {
    font-size: 1.1rem;
}

/* Brand icon: 38px lavender-grey square, ink glyph (design 💼 box). */
.account-dashboard-wrapper .brand-badge-box {
    width: 38px !important;
    height: 38px !important;
    background: #ecebf2 !important;
    border-radius: 12px !important;
    color: #333249 !important;
    padding: 0 !important;
}
.account-dashboard-wrapper .brand-badge-box .fas {
    color: #333249 !important;
    font-size: 1.05rem !important;
}

/* Touchpoint card: nested flat card, 14px radius, faint border. */
.account-dashboard-wrapper .brand-card {
    background: #fff;
    border: 1px solid #f2f1f6 !important;
    border-radius: 14px !important;
    transition: border-color 0.2s ease;
    overflow: hidden;
    height: 100%;
    box-shadow: none !important;
}
.account-dashboard-wrapper .brand-card:hover {
    transform: none;
    box-shadow: none;
    border-color: #ebeaf0 !important;
}
.account-dashboard-wrapper .brand-card .card-body {
    padding: 16px 18px;
}
.account-dashboard-wrapper .brand-card h5 {
    font-size: 1rem;
}

.account-dashboard-wrapper .brand-icon-box {
    width: 38px !important;
    height: 38px !important;
    background: #ecebf2 !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 !important;
}
.account-dashboard-wrapper .brand-icon-box .fas {
    color: #333249 !important;
    font-size: 1rem !important;
}

/* Domain line: mono, muted ink (design). */
.account-dashboard-wrapper .brand-card a.font-monospace {
    color: #5d5c74 !important;
    font-size: 0.82rem;
}
.account-dashboard-wrapper .brand-card a.font-monospace:hover {
    color: #f23329 !important;
}

.account-dashboard-wrapper .stats-row {
    background: #fdfcfa !important;
    border: 1px solid #f2f1f6 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.82rem;
    gap: 0;
}
.account-dashboard-wrapper .stats-row .border-start {
    border-left: 1px solid #f2f1f6 !important;
}

/* ---------------------------------------------
   DOMAIN WIZARD OPTIONS
   --------------------------------------------- */
.option-card {
    border: 2px solid #ebeaf0;
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #fdfcfa;
}
.option-card:hover, .option-card.border-primary {
    border-color: #fda401 !important;
    background: #fff7e8 !important;
}

/* ---------------------------------------------
   ANIMATIONS
   --------------------------------------------- */
.animate__animated.animate__fadeIn {
    animation: accountFadeIn 0.4s ease-out;
}
@keyframes accountFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------
   RESPONSIVE
   --------------------------------------------- */
@media (max-width: 768px) {
    .account-dashboard-wrapper .dashboard-profile-header {
        padding: 1.25rem 1rem;
    }
    .account-dashboard-wrapper .dashboard-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }
    /* "Crea Brand" is the primary action: full width beats a stray pill. */
    .account-dashboard-wrapper .dashboard-header-row .create_new_brand {
        width: 100%;
        justify-content: center;
    }
    .account-dashboard-wrapper .brand-card .card-body {
        padding: 1rem;
    }

    /* --- Search + filter toolbar ---
       min-width 220px (search) + 170px (filter) = 390px, which overflows a
       360px viewport. Stack them instead. Explicit classes rather than :has(),
       which older mobile Safari/Firefox do not support. */
    .account-dashboard-wrapper .tp-search-box {
        min-width: 0 !important;
        max-width: none !important;
        width: 100%;
    }
    .account-dashboard-wrapper #tp-filter {
        width: 100% !important;
        min-width: 0 !important;
    }
    /* The counter sits on its own line rather than being squeezed by ms-auto. */
    .account-dashboard-wrapper .tp-counter {
        margin-left: 0 !important;
        width: 100%;
    }

    /* --- Revenue summary --- */
    .account-dashboard-wrapper #revenue-total,
    .account-dashboard-wrapper #revenue-active {
        font-size: 1rem !important;
    }
    .account-dashboard-wrapper #revenue-hint {
        margin-left: 0 !important;
        width: 100%;
        padding-top: .25rem;
    }

    /* --- Brand header: title block and its action buttons --- */
    .account-dashboard-wrapper .brand-section {
        padding: 1rem !important;
    }
    .account-dashboard-wrapper .brand-section > .d-flex:first-child {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }
    .account-dashboard-wrapper .brand-section > .d-flex:first-child > .d-flex:last-child {
        width: 100%;
        flex-wrap: wrap;
    }
    .account-dashboard-wrapper .brand-section h4 {
        font-size: 1.15rem;
    }

    /* --- Touchpoint card: stop the button row from overflowing --- */
    .account-dashboard-wrapper .brand-card .d-flex.align-items-start {
        flex-direction: column;
    }
    .account-dashboard-wrapper .brand-card .btn {
        flex: 1 1 auto;
    }
    /* Long domains must wrap instead of widening the card. */
    .account-dashboard-wrapper .brand-card a[href^="http"],
    .account-dashboard-wrapper .brand-card code {
        word-break: break-all;
    }

    /* --- Modals ---
       Bootstrap centres a fixed-width dialog, which wastes the little width a
       phone has and leaves the inline max-width styles sticking out. */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem) !important;
    }
    .modal-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .modal-body .table-responsive table {
        font-size: .75rem;
    }
    #domainWizardModal .modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }
    #domainWizardModal .modal-footer .btn {
        flex: 1 1 auto;
    }

    /* --- WebDAV / credentials modal: inputs and copy buttons --- */
    #webdavModal .input-group {
        flex-wrap: wrap;
    }
    #webdavModal .input-group > .form-control {
        width: 100%;
        border-radius: .375rem !important;
        margin-bottom: .35rem;
    }
    #webdavModal .input-group > .btn {
        border-radius: .375rem !important;
    }
}

/* Very narrow phones: badges under a touchpoint title are the first thing
   to overflow, since several can sit on one line. */
@media (max-width: 420px) {
    .account-dashboard-wrapper .brand-card .badge {
        font-size: .68rem !important;
    }
    .account-dashboard-wrapper .brand-icon-box {
        width: 40px !important;
        height: 40px !important;
    }
    .account-dashboard-wrapper .brand-badge-box {
        width: 40px !important;
        height: 40px !important;
    }
    .account-dashboard-wrapper .brand-section h4 {
        font-size: 1.05rem;
    }
    /* Pagination arrows and page counter stay on one row. */
    .account-dashboard-wrapper .js-page-nav {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}