/* StoreWe launch-readiness patch layer
   Loads after page-specific styles to normalize responsiveness, branding,
   dark mode, and interaction states across public/auth/dashboard surfaces. */

:root {
    --sw-brand-green: #2E7D32;
    --sw-brand-green-dark: #1B5E20;
    --sw-brand-red: #C62828;
    --sw-focus-ring: 0 0 0 3px rgba(46, 125, 50, 0.18);
    --sw-auth-surface: rgba(255, 255, 255, 0.95);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    overflow-wrap: break-word;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

.sw-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.sw-brand-logo--auth {
    width: min(180px, 52vw);
    margin: 0 auto 1rem;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}

.sw-footer .sw-brand-logo {
    filter: brightness(0) invert(1);
}

:focus-visible {
    outline: 2px solid var(--sw-brand-green);
    outline-offset: 2px;
    box-shadow: var(--sw-focus-ring);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus,
.btn:focus-visible {
    border-color: var(--sw-brand-green);
    box-shadow: var(--sw-focus-ring);
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
    margin-bottom: 0;
}

.modal-dialog {
    margin: 1rem;
}

.product-card:hover,
.product-card:focus-within {
    box-shadow: 0 20px 40px rgba(46, 125, 50, 0.14);
}

.chat-widget {
    max-width: min(100vw - 1.5rem, 360px);
}

.chat-box {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
}

.chat-status {
    min-height: 1rem;
}

.chat-message-shell {
    display: inline-block;
    max-width: min(100%, 260px);
}

.chat-message-shell--bot {
    background: rgba(15, 23, 42, 0.05);
}

.chat-message-shell--user {
    background: var(--sw-gradient, linear-gradient(135deg, #2E7D32, #1B5E20));
    color: #fff;
}

.chat-message-shell--error {
    background: rgba(198, 40, 40, 0.08);
    color: var(--sw-brand-red);
}

.chat-message-shell--loading {
    color: #475569;
}

.chat-typing-dots {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.chat-typing-dots span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
    animation: sw-chat-pulse 1.1s ease-in-out infinite;
}

.chat-typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.chat-typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes sw-chat-pulse {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

.auth-page {
    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.auth-container {
    width: min(100%, 1280px);
    max-height: calc(100dvh - 2rem);
}

.auth-left,
.auth-right,
.auth-form-container,
.vendor-content,
.admin-content {
    min-width: 0;
}

.auth-logo-lockup {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-page .form-control,
.auth-page .form-select,
.auth-page .input-group-text,
.auth-page .btn,
.auth-page button,
.auth-page a.btn {
    min-height: 48px;
}

.auth-container {
    background: var(--sw-auth-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

#shopFiltersCollapse .card {
    border: 1px solid rgba(46, 125, 50, 0.12);
    border-radius: 24px;
    overflow: hidden;
}

#shopFiltersCollapse .card-header {
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%) !important;
}

#filtersForm .list-group-item {
    border-radius: 14px;
    margin-bottom: 0.35rem;
    color: #334155;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#filtersForm .list-group-item:hover,
#filtersForm .list-group-item:focus-visible {
    background: rgba(46, 125, 50, 0.08);
    color: var(--sw-brand-green-dark);
    transform: translateX(2px);
}

#filtersForm .list-group-item.active {
    background: rgba(46, 125, 50, 0.12);
    color: var(--sw-brand-green-dark);
    font-weight: 700;
}

#filtersForm .form-control {
    min-height: 44px;
    border-radius: 14px;
}

#filterChips:empty {
    display: none;
}

@media (max-width: 991.98px) {
    .auth-container {
        max-height: none;
        height: auto !important;
    }
}

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.75rem;
    }

    .auth-page {
        padding: 0.75rem;
    }

    .auth-container {
        flex-direction: column !important;
        border-radius: 20px !important;
    }

    .auth-left,
    .auth-right {
        padding: 1.5rem 1rem !important;
    }

    .auth-right {
        overflow: visible !important;
    }

    .admin-navbar,
    .vendor-topbar {
        padding-inline: 0.75rem !important;
    }

    .table-responsive > .table {
        min-width: 640px;
    }

    .chat-widget {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        max-width: none;
    }

    .chat-box {
        position: fixed !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 4.75rem !important;
        width: 100% !important;
        max-width: none !important;
    }

    .back-to-top,
    .btn-back-top {
        right: 0.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .auth-page .form-control,
    .auth-page .form-select {
        font-size: 16px !important;
    }

    .admin-navbar .brand img,
    .vendor-topbar .navbar-brand img,
    .navbar-brand .sw-brand-logo {
        max-width: 110px !important;
        height: 30px !important;
    }

    .user-btn,
    .vendor-topbar .dropdown-toggle {
        max-width: 148px;
    }

    .auth-logo-lockup {
        margin-bottom: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-typing-dots span {
        animation: none;
        opacity: 0.8;
    }
}

/* Shared shell polish */
.sw-site {
    background: var(--sw-bg, #f8fafc);
}

.sw-main-content {
    padding-bottom: 1rem;
}

.sw-shell-footer {
    margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}

.sw-dashboard-topbar {
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.sw-dashboard-main {
    padding-bottom: 1.25rem;
}

/* Glassmorphic commerce rebuild (Dribbble-inspired) */
.sw-glass-commerce {
    position: relative;
}

.sw-glass-commerce::before {
    content: "";
    position: absolute;
    inset: -30px -20px auto -20px;
    height: 240px;
    background: radial-gradient(circle at 20% 40%, rgba(46,125,50,.18), transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(21,101,192,.14), transparent 52%);
    pointer-events: none;
    z-index: 0;
    filter: blur(2px);
}

.sw-glass-commerce > * {
    position: relative;
    z-index: 1;
}

.sw-glass-commerce .card,
.sw-glass-commerce .payment-method-card,
.sw-glass-commerce .payment-subpanel,
.sw-glass-commerce .payment-trust-strip,
.sw-glass-commerce .trust-bar {
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10) !important;
}

.sw-glass-commerce .payment-method-card.selected {
    border-color: rgba(46,125,50,.45) !important;
    box-shadow: 0 16px 36px rgba(46,125,50,.18) !important;
}

.sw-glass-commerce .card-header {
    background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.45)) !important;
}

.sw-krasiv-cart-actions {
    display: inline-flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.sw-payment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sw-payment-chips .chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(46,125,50,.12);
    color: #1b5e20;
    border: 1px solid rgba(46,125,50,.16);
}

.sw-polish-checkout .checkout-step .step-bubble {
    box-shadow: 0 10px 20px rgba(46,125,50,.22);
}

@media (max-width: 767.98px) {
    .sw-glass-commerce .card,
    .sw-glass-commerce .payment-method-card {
        backdrop-filter: blur(10px);
    }
}

/* Public commerce visual polish */
.sw-polish-hero .btn {
    border-radius: .9rem !important;
}

.sw-polish-shop .card,
.sw-polish-cart .card,
.sw-polish-checkout .card,
.sw-polish-orders .card,
.sw-polish-product .card {
    border-radius: 1rem !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05) !important;
}

.sw-polish-shop .sw-sort-pill {
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .1);
    background: var(--sw-surface);
}

.sw-polish-shop .sw-sort-pill.active {
    background: var(--sw-gradient);
    color: #fff;
    border-color: transparent;
}

.sw-polish-checkout .payment-method-card,
.sw-polish-checkout .payment-subpanel {
    border-radius: 1rem !important;
}

.sw-polish-checkout .payment-trust-strip,
.sw-polish-checkout .trust-bar {
    border-radius: .9rem;
    border: 1px solid rgba(15, 23, 42, .08);
}

.sw-polish-orders .card-header .badge,
.sw-polish-orders .card-footer .badge {
    font-size: .72rem;
}

/* Auth/account/blog/legal/shared-content normalization */
.auth-page .auth-container,
.auth-page .card,
.account-page .card,
.blog-page .card,
.legal-page .card {
    border-radius: 1rem !important;
}

.auth-page h1,
.account-page h1,
.blog-page h1,
.legal-page h1 {
    letter-spacing: -.01em;
}

/* Dashboard/table visual coherence */
.admin-content .card,
.vendor-content .card {
    border-radius: 1rem !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
}

.admin-content .table thead th,
.vendor-content .table thead th {
    background: color-mix(in srgb, var(--sw-surface) 92%, var(--sw-primary) 8%);
    white-space: nowrap;
}

/* Messaging responsiveness hardening */
#chatMessages,
#sessionList,
#messageThread {
    min-height: 220px;
}

@media (max-width: 991.98px) {
    .sw-polish-shop .row > [class*="col-"] {
        margin-bottom: .25rem;
    }

    .sw-polish-orders .card-header .row > [class*="col-"] {
        margin-bottom: .5rem;
    }
}

@media (max-width: 767.98px) {
    .sw-polish-cart .row.align-items-center > [class*="col-"] {
        margin-bottom: .5rem;
    }

    .sw-polish-checkout .step-nav {
        flex-direction: column;
    }

    .sw-polish-checkout #payNowBtn {
        width: 100%;
    }

    .sw-admin-chat-layout,
    .sw-vendor-messages-shell {
        min-height: 70vh !important;
    }

    .sw-admin-chat-sessions-col,
    .sw-vendor-conversation-list {
        max-height: 34vh;
    }

    .sw-admin-chat-panel-col,
    .sw-vendor-thread-pane {
        min-height: 44vh;
    }
}

/* Admin/vendor dense pages */
.admin-content .table-responsive > .table,
.vendor-content .table-responsive > .table {
    min-width: 720px;
}

/* Messaging surfaces */
.sw-admin-chat-layout .card,
.sw-vendor-messages-shell {
    background: var(--sw-surface);
}

@media (max-width: 991.98px) {
    #sessionList,
    #chatMessages {
        max-height: 42vh !important;
    }
}

/* Global mismatch cleanup and professional consistency */
.sw-surface-card,
.card {
    border-radius: 1rem;
}

.btn,
.form-control,
.form-select {
    border-radius: 0.75rem;
}

.table-responsive {
    border-radius: 0.9rem;
}

/* Auth pages: neutralize rigid vh heights from inline page styles */
.auth-page-shell .auth-container {
    height: auto !important;
    min-height: min(720px, calc(100dvh - 2rem)) !important;
}

@media (max-width: 991.98px) {
    .auth-page-shell .auth-container {
        min-height: auto !important;
        max-height: none !important;
    }
}

/* Home hero / mosaic responsiveness */
.sw-polish-hero {
    min-height: clamp(420px, 72vh, 620px) !important;
}

.sw-polish-hero .sw-hero-mosaic {
    height: min(420px, 54vh) !important;
}

/* Product details visual rhythm */
.sw-polish-product #sw-review-form-container,
.sw-polish-product #sw-review-loginprompt,
.sw-polish-product #sw-review-already {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: var(--sw-surface);
}

/* Chat widget safe mobile behavior */
@media (max-width: 575.98px) {
    .chat-box {
        bottom: 4.2rem !important;
        max-height: 72dvh !important;
        display: flex;
        flex-direction: column;
    }

    .chat-box .chat-messages {
        height: auto !important;
        min-height: 220px;
        max-height: 48dvh !important;
    }
}

/* ============================================================
   Crookeries-inspired storefront rebuild (index/shop/product)
   ============================================================ */
.sw-polish-hero,
.sw-polish-shop,
.sw-polish-product {
    --sw-crook-radius: 1.25rem;
    --sw-crook-shadow: 0 18px 44px rgba(15, 23, 42, .1);
    --sw-crook-shadow-sm: 0 10px 24px rgba(15, 23, 42, .08);
    --sw-crook-title: clamp(1.95rem, 3vw, 3.15rem);
    --sw-crook-h2: clamp(1.15rem, 2vw, 1.65rem);
}

.sw-polish-hero {
    border-radius: 0 0 2rem 2rem;
}

.sw-polish-hero .sw-section-eyebrow {
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.sw-polish-hero h1 {
    font-size: var(--sw-crook-title) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08 !important;
}

.sw-polish-hero .sw-hero-mosaic {
    border-radius: var(--sw-crook-radius);
    overflow: hidden;
    background: rgba(255,255,255,.06);
    box-shadow: var(--sw-crook-shadow);
    border: 1px solid rgba(255,255,255,.22);
}

.sw-polish-hero .sw-hero-mosaic-item {
    border-radius: .95rem;
    overflow: hidden;
}

.sw-crook-hero .sw-crook-hero-cta .btn {
    min-height: 48px;
    border-radius: .95rem !important;
    font-weight: 700;
    letter-spacing: .01em;
}

.sw-polish-hero .sw-hero-stats > div {
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .9rem;
    padding: .65rem .85rem;
    min-width: 92px;
}

.sw-polish-section,
.sw-polish-hero + .sw-trust-ribbon,
.sw-polish-hero ~ section {
    position: relative;
}

.sw-polish-shop .sw-card,
.sw-polish-product .card,
.sw-polish-shop .card {
    border-radius: var(--sw-crook-radius) !important;
    border: 1px solid rgba(15, 23, 42, .08) !important;
    box-shadow: var(--sw-crook-shadow-sm) !important;
}

.sw-polish-shop .sw-card {
    overflow: hidden;
}

.sw-polish-shop .sw-card-img {
    aspect-ratio: 1 / 1;
    background: #f7faf8;
}

.sw-polish-shop .sw-card-title,
.sw-polish-hero .sw-card-title {
    font-weight: 700;
    line-height: 1.35;
    font-size: .98rem;
}

.sw-polish-shop .sw-card-price-current {
    font-size: 1.08rem;
    font-weight: 800;
}

.sw-polish-shop .sw-sort-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .3rem;
    border-radius: 999px;
    background: #eef3ef;
}

.sw-polish-shop .sw-sort-pill {
    padding: .45rem .75rem;
    font-size: .78rem;
    font-weight: 700;
}

.sw-polish-shop #shopFiltersCollapse .card {
    border-radius: var(--sw-crook-radius) !important;
    overflow: hidden;
}

.sw-crook-catalog .sw-crook-catalog-head .h4 {
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    letter-spacing: -.01em;
}

.sw-polish-shop #shopFiltersCollapse .card-header {
    border-bottom: 0;
}

.sw-polish-product .product-images .main-image-container {
    border-radius: var(--sw-crook-radius) !important;
    min-height: 460px;
    box-shadow: var(--sw-crook-shadow-sm);
}

.sw-polish-product .product-info h1 {
    font-size: clamp(1.45rem, 2.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.sw-crook-product .sw-crook-product-info {
    padding: .25rem 0;
}

.sw-polish-product .price-section .h3 {
    font-size: clamp(1.35rem, 2vw, 1.95rem);
}

.sw-polish-product .vendor-info,
.sw-polish-product .feature-item,
.sw-polish-product #sw-review-form-container,
.sw-polish-product #sw-review-loginprompt,
.sw-polish-product #sw-review-already {
    border-radius: 1rem !important;
    border: 1px solid rgba(15, 23, 42, .08);
}

.sw-polish-product .related-products .card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 1280px) {
    .sw-polish-hero .sw-hero-mosaic {
        height: min(400px, 50vh) !important;
    }
}

@media (max-width: 1024px) {
    .sw-polish-shop .sw-sort-pills {
        border-radius: 1rem;
    }
}

@media (max-width: 768px) {
    .sw-polish-hero {
        border-radius: 0 0 1.15rem 1.15rem;
    }

    .sw-polish-hero .sw-hero-stats {
        gap: .6rem;
    }

    .sw-polish-shop .sw-sort-pills {
        width: 100%;
    }

    .sw-polish-product .product-images .main-image-container {
        min-height: 300px;
    }
}

@media (max-width: 390px) {
    .sw-polish-shop .sw-sort-pill {
        font-size: .72rem;
        padding: .4rem .62rem;
    }
}
