/* ==========================================
   RS-Techie Commerce Styling
   Built on the same design tokens/components as style.css
   (var(--primary), .btn, .section-container, glass-card pattern)
   ========================================== */

.commerce-main {
    padding-top: 140px;
    padding-bottom: 100px;
}

.commerce-narrow {
    max-width: 480px;
    margin: 0 auto;
    padding: 80px 24px;
}

/* Cart badge on nav */
.nav-cart-link {
    position: relative;
}

.nav-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 4px;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9999px;
    vertical-align: middle;
}

/* ==========================================
   Trust / Security Strip
   ========================================== */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 48px;
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(30, 86, 49, 0.1), rgba(76, 175, 80, 0.1));
    color: var(--primary-light);
    flex-shrink: 0;
}

.trust-link {
    color: var(--primary-light);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-weight: 700;
}

.trust-link:hover {
    color: var(--primary);
}

/* ==========================================
   Pricing Cards (Products Catalog)
   ========================================== */
.product-block {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 44px 40px;
    margin-bottom: 48px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.product-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}

.product-block-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 32px;
}

.product-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30, 86, 49, 0.1), rgba(76, 175, 80, 0.1));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-eyebrow {
    display: inline-block;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
}

.product-block-header h2 {
    font-size: 1.9rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.product-block-header p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 640px;
}

.product-demo-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-light);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.product-demo-link:hover {
    color: var(--primary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.trial-cta-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(76, 175, 80, 0.06));
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 16px;
    padding: 20px 26px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}

/* Curved shadow: thin ellipse below the card casts an arched shadow.
   z-index:-1 works here because .trial-cta-card has no stacking context. */
.trial-cta-card::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 10%;
    right: 10%;
    height: 6px;
    border-radius: 50%;
    box-shadow: 0 10px 24px 4px rgba(30, 86, 49, 0.16);
    pointer-events: none;
    z-index: -1;
}

.trial-cta-card::before {
    content: '🎁';
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.12);
}

.trial-cta-text {
    color: var(--text-main);
    font-size: 0.92rem;
    max-width: 560px;
    line-height: 1.5;
    flex: 1;
}

.trial-cta-text strong {
    color: var(--primary);
}

.trial-btn {
    flex-shrink: 0;
    white-space: nowrap;
    border: 2px solid var(--primary-light) !important;
    font-weight: 700 !important;
}

/* ==========================================
   Shared WhatsApp Chat Simulator (homepage + Leporis page)
   ========================================== */
.contact-simulator-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-simulator-box .form-title,
.contact-simulator-box .form-desc {
    text-align: center;
}

.contact-simulator-box .simulator-wrapper {
    margin-top: 24px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 36px 28px 32px;
    box-shadow: var(--shadow-md);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    /* Cursor animations: Spotlight + Parallax + Shimmer */
    --mx: 50%;
    --my: 50%;
    isolation: isolate;
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
    border: 2px solid var(--primary);
    box-shadow:
        0 32px 64px -8px rgba(30, 86, 49, 0.18),
        0 12px 24px -4px rgba(76, 175, 80, 0.12),
        0 4px 8px rgba(30, 86, 49, 0.06),
        0 0 0 4px rgba(76, 175, 80, 0.08);
    background: linear-gradient(165deg, #ffffff 0%, rgba(76, 175, 80, 0.04) 100%);
}

.pricing-card.featured:hover {
    transform: translateY(-8px);
}

/* ── Spotlight overlay (::before, z-index:-1 = above bg, below content) ── */
.pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx) var(--my),
        rgba(76, 175, 80, 0.20) 0%,
        rgba(30, 86, 49, 0.05) 40%,
        transparent 68%);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
    z-index: -1;
}
.pricing-card:hover::before { opacity: 1; }

/* ── Shimmer sweep (::after, inset:0 avoids badge-clipping) ── */
.pricing-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 60%,
        transparent 100%);
    background-size: 300% 100%;
    background-position: 100% center; /* shimmer parked off-screen left */
    pointer-events: none;
    z-index: 2;
}
.pricing-card.shimmer-run::after {
    animation: pc-shimmer 0.65s ease-out forwards;
}
@keyframes pc-shimmer {
    from { background-position: 100% center; }
    to   { background-position: 0%   center; }
}

/* ── Parallax layer hints ── */
.pricing-card-name,
.pricing-card-price,
.pricing-features,
.pricing-card .btn {
    will-change: transform;
}

/* Card style variants */
.pricing-card--minimal {
    box-shadow: none;
    border-color: var(--border-color);
    background: #ffffff;
}

.pricing-card--minimal:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.pricing-card--bordered {
    border: 2px solid var(--primary-light);
    box-shadow: none;
}

.pricing-card--bordered:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    transform: translateY(-4px);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    right: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #ffffff;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 9999px;
    box-shadow: 0 6px 14px rgba(30, 86, 49, 0.28);
}

.pricing-card-name {
    font-family: var(--font-outfit);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
}

.pricing-card-tagline {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    line-height: 1.4;
}

.pricing-card-credits {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-light);
    background: rgba(76, 175, 80, 0.1);
    padding: 4px 12px;
    border-radius: 9999px;
    margin-bottom: 22px;
}

.pricing-card-price {
    font-family: var(--font-outfit);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
}

.pricing-card-price small {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}

.pricing-card-savings {
    margin-top: -16px;
    margin-bottom: 22px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
}

.credits-alt-note {
    margin: 18px 0 0;
    padding: 12px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.credits-alt-note a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* Sale chip on pricing card */
.pricing-sale-chip {
    position: absolute;
    top: -14px;
    left: 24px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Strikethrough original + sale price */
.price-original {
    font-family: var(--font-outfit);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-right: 8px;
}
.price-sale {
    font-family: var(--font-outfit);
    font-size: 2.6rem;
    font-weight: 800;
    color: #e53e3e;
    letter-spacing: -0.01em;
}

/* Sale countdown */
.sale-countdown {
    margin-top: -14px;
    margin-bottom: 18px;
    font-size: 0.78rem;
    color: #e53e3e;
    font-weight: 500;
}

/* Pay-what-you-want price input */
.pwyw-price-wrap {
    margin-bottom: 22px;
}
.pwyw-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pwyw-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 6px 12px;
    background: var(--bg-primary);
    transition: border-color 0.2s;
}
.pwyw-input-row:focus-within {
    border-color: var(--primary-light);
}
.pwyw-currency {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-muted);
}
.pwyw-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-outfit);
    color: var(--text-main);
    min-width: 0;
}
.pwyw-input::-webkit-inner-spin-button,
.pwyw-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pwyw-hint {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Product-level badge chip (below product header) */
.product-badge-text {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 20px;
    margin: 0 0 18px 0;
}

/* Bundle includes chips */
.bundle-includes-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.bundle-includes-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}
.bundle-item-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.78rem;
    padding: 3px 12px;
    color: var(--text-main);
}

/* Add-on notice bar */
.addon-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 18px;
}
.addon-notice--warn {
    background: #fff8f0;
    border: 1px solid #f6ad55;
    color: #c05621;
}
.addon-notice--ok {
    background: #f0fff4;
    border: 1px solid #68d391;
    color: #276749;
}

.pricing-features {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    flex-grow: 1;
}

.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--text-main);
    margin-bottom: 10px;
}

.pricing-features .feature-bullet {
    color: var(--primary-light);
    font-weight: bold;
    flex-shrink: 0;
}

.pricing-card .btn {
    width: 100%;
}

.pricing-card .btn .btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    margin-left: 8px;
    animation: buttonSpin 0.8s linear infinite;
    vertical-align: middle;
}

/* ==========================================
   Cart Page
   ========================================== */
.cart-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: flex-start;
}

.cart-items-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cart-line-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--border-color);
}

.cart-line-item:last-child {
    border-bottom: none;
}

.cart-line-info h4 {
    font-size: 1.05rem;
    color: var(--text-main);
    margin-bottom: 4px;
}

.cart-line-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cart-line-controls {
    display: flex;
    align-items: center;
    gap: 18px;
}

.qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    overflow: hidden;
}

.qty-stepper button {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.qty-stepper button:hover {
    background: var(--primary);
    color: #fff;
}

.qty-stepper .qty-value {
    width: 36px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.cart-line-price {
    min-width: 90px;
    text-align: right;
    font-weight: 700;
    color: var(--primary);
}

.cart-remove-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: var(--transition-smooth);
}

.cart-remove-btn:hover {
    color: #ef4444;
}

.order-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    padding: 28px;
    position: sticky;
    top: 110px;
}

.order-summary-card h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.summary-row.total {
    border-top: 1px solid var(--border-color);
    margin-top: 16px;
    padding-top: 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
}

.order-summary-card .btn {
    width: 100%;
    margin-top: 12px;
}

/* Cart: sale price label on line item */
.cart-line-sub .cart-sale-label {
    color: #e53e3e;
    font-weight: 700;
}

/* Cart: discount row in summary */
.summary-row.summary-discount {
    color: #38a169;
    font-weight: 600;
}
.summary-row.summary-discount small {
    font-size: 0.8em;
    color: var(--text-muted);
    font-weight: 400;
}

/* Coupon section */
.coupon-section {
    border-top: 1px solid var(--border-color);
    padding: 18px 0 6px;
    margin-top: 8px;
}
.coupon-input-row {
    display: flex;
    gap: 10px;
}
.coupon-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: var(--font-inter);
    background: var(--bg-primary);
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s;
    letter-spacing: 0.04em;
}
.coupon-input:focus {
    border-color: var(--primary-light);
}
.coupon-apply-btn {
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 0.9rem;
}
.coupon-error {
    margin-top: 8px;
    font-size: 0.82rem;
    color: #e53e3e;
    font-weight: 500;
}
.coupon-applied-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #276749;
    font-size: 0.88rem;
    background: #f0fff4;
    border: 1px solid #68d391;
    border-radius: 10px;
    padding: 10px 14px;
}
.coupon-applied-row svg {
    color: #38a169;
    flex-shrink: 0;
}
.coupon-remove-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.coupon-remove-btn:hover { color: #e53e3e; }

/* Gift toggle */
.gift-toggle-section {
    border-top: 1px solid var(--border-color);
    padding: 16px 0 8px;
    margin-top: 4px;
}
.gift-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.gift-toggle-cb {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}
.gift-toggle-text {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 500;
}

/* Empty states */
.empty-state {
    text-align: center;
    padding: 64px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
}

.empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state h3 {
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* ==========================================
   Checkout Page
   ========================================== */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 32px;
    align-items: flex-start;
}

.checkout-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.checkout-line-item {
    display: flex;
    justify-content: space-between;
    padding: 18px 26px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.checkout-line-item:last-child {
    border-bottom: none;
}

.checkout-pay-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    padding: 28px;
    position: sticky;
    top: 110px;
}

.checkout-pay-card .summary-row.total {
    margin-bottom: 20px;
}

#pay-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.checkout-trust-strip {
    margin-top: 20px;
    padding-top: 0;
}

.checkout-trust-strip .trust-item {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ==========================================
   Account Forms (Signup/Login)
   ========================================== */
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-top: 24px;
}

.auth-card .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.auth-card .form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.auth-card .form-group input,
.auth-card .form-group select,
.auth-card .form-group textarea {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    background: #ffffff;
    border-radius: 8px;
    font-family: var(--font-inter);
    font-size: 0.95rem;
    color: var(--text-main);
    transition: var(--transition-smooth);
    outline: none;
    width: 100%;
}

.auth-card .form-group textarea {
    resize: vertical;
    line-height: 1.6;
}

.auth-card .form-group input:focus,
.auth-card .form-group select:focus,
.auth-card .form-group textarea:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-card .btn {
    width: 100%;
    margin-top: 8px;
    border: none;
}

/* Social login (Google/Facebook) — brand-standard colors/shape on these two
   buttons specifically (not the site's custom glass styling), since
   recognizability of each provider's own button convention matters more than
   custom branding here. */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: var(--font-inter);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
    border: 1px solid var(--border-color);
}

.oauth-btn-google {
    background: #ffffff;
    color: #3c4043;
}

.oauth-btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.oauth-btn-facebook {
    background: #1877f2;
    color: #ffffff;
    border-color: #1877f2;
}

.oauth-btn-facebook:hover {
    background: #166fe0;
}

.oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-switch-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==========================================
   Dashboard
   ========================================== */
.confirmation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12), rgba(30, 86, 49, 0.08));
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: 16px;
    padding: 18px 24px;
    margin-bottom: 32px;
}

.confirmation-banner-text {
    font-weight: 600;
    color: var(--primary);
}

.confirmation-banner-dismiss {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.dashboard-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    padding: 26px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.dashboard-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(30, 86, 49, 0.06);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-stat-value {
    font-family: var(--font-outfit);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.dashboard-stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.dashboard-section {
    margin-bottom: 48px;
}

.dashboard-section h2 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 20px;
}

/* Free-tier usage meter */
.free-tier-meter {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.free-tier-bar-wrap {
    background: var(--bg-secondary);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    width: 120px;
}
.free-tier-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.data-table-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 16px 24px;
    background: var(--bg-secondary);
    font-weight: 700;
}

.data-table td {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    font-size: 0.92rem;
    color: var(--text-main);
}

.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: capitalize;
    /* A pill with border-radius:9999px and long wrapping text balloons into
       an overlapping oval blob instead of staying a clean rounded rectangle
       (hit twice now — the window-status indicator, and the CRM Source
       column). Pills are for short fixed labels; anything with unbounded
       length (like Source) should use its own tag style, not this class. */
    white-space: nowrap;
}

.status-pill.status-green {
    background: rgba(76, 175, 80, 0.12);
    color: var(--primary-light);
}

.status-pill.status-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.status-pill.status-red {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

/* ==========================================
   Shared form error/loading helpers
   ========================================== */
.form-error {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    margin-bottom: 18px;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 900px) {
    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .order-summary-card,
    .checkout-pay-card {
        position: static;
    }
}

@media (max-width: 600px) {
    .commerce-main {
        padding-top: 110px;
    }

    .cart-line-item {
        flex-wrap: wrap;
    }

    .cart-line-controls {
        width: 100%;
        justify-content: space-between;
    }

    .trust-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* WhatsApp Inbox */
.wa-inbox-layout {
    display: flex;
    gap: 24px;
    height: 600px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.wa-contact-list-wrap {
    width: 280px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    /* min-height:0 all the way down this flex chain — without it flex children
       refuse to shrink below their content (min-height:auto), so the inner
       overflow-y:auto panes grow instead of scrolling. */
    min-height: 0;
}

.wa-contact-list {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
}

.wa-contact-search {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}

.wa-contact-search input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-family: var(--font-inter);
}

.wa-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.wa-contact-item:hover {
    background: var(--bg-secondary);
}

.wa-contact-item.active {
    background: rgba(76, 175, 80, 0.1);
    border-left: 3px solid var(--primary);
}

.wa-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.wa-avatar.wa-avatar-lg {
    width: 36px;
    height: 36px;
    font-size: 0.78rem;
}

.wa-contact-info {
    flex-grow: 1;
    min-width: 0;
}

.wa-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wa-contact-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-contact-item.unread .wa-contact-name,
.wa-contact-item.unread .wa-contact-preview {
    font-weight: 700;
    color: var(--text-main);
}

.wa-contact-sub,
.wa-contact-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.wa-contact-preview {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wa-unread-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wa-thread {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.wa-thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.wa-thread-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wa-date-separator {
    align-self: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 4px 14px;
    border-radius: 9999px;
    margin: 6px 0;
}

.wa-thread-messages {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wa-message-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.wa-message-bubble.wa-in {
    align-self: flex-start;
    background: var(--bg-secondary);
    color: var(--text-main);
    border-bottom-left-radius: 4px;
}

.wa-message-bubble.wa-out {
    align-self: flex-end;
    background: var(--primary);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.wa-message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 0.68rem;
    opacity: 0.75;
    margin-top: 4px;
}

.wa-message-bubble.wa-in .wa-message-meta {
    justify-content: flex-start;
}

.wa-ticks {
    font-size: 0.75rem;
    letter-spacing: -1px;
}

.wa-ticks.tick-read {
    color: #53bdeb;
}

.wa-ticks.tick-failed {
    color: #ff8a8a;
}

.wa-ai-toggle {
    cursor: pointer;
    border: none;
    font-family: var(--font-inter);
}

.wa-ai-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.wa-ai-badge {
    font-size: 0.68rem;
    opacity: 0.85;
}

.wa-reply-box {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    align-items: flex-end;
}

.wa-reply-box textarea {
    flex-grow: 1;
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 10px 18px;
    font-family: var(--font-inter);
    font-size: 0.9rem;
}

.wa-reply-box button[type="submit"] {
    border-radius: 9999px;
    padding: 12px 22px;
}

.wa-category-select {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

/* Multi-seat feature (2026-07-27 UI pass) — small controls (Claim/Unassign,
   Resend/Revoke/Remove, role/status/team dropdowns) were shipping with a
   "btn-link" class that was never actually defined anywhere in this
   stylesheet, so they rendered as completely unstyled default browser
   buttons. .wa-btn-link/.wa-select give them the same visual language as
   the rest of this portal (pill chips, .btn-primary) instead. */
.wa-btn-link {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    transition: var(--transition-smooth);
}
.wa-btn-link:hover { background: rgba(30, 86, 49, 0.08); }
.wa-btn-link.wa-btn-danger { color: #b91c1c; }
.wa-btn-link.wa-btn-danger:hover { background: rgba(239, 68, 68, 0.08); }

.wa-select {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.82rem;
    background: #ffffff;
    color: var(--text-main);
    cursor: pointer;
}
.wa-select:focus { outline: 2px solid rgba(30, 86, 49, 0.25); }

/* .btn-sm/.btn-xs already exist but are scoped to .auth-card only (see that
   scoped rule's own comment) -- these bare, unscoped versions give every
   OTHER page (this portal included) the same small-button sizing on top of
   .btn/.btn-primary's existing shadow/hover-lift look, without touching the
   auth page's own behavior (its more specific .auth-card .btn.btn-sm rule
   still wins there). */
.btn.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn.btn-xs { padding: 5px 12px; font-size: 0.78rem; }

/* Outbox: scheduled send + undo send */
.wa-schedule-btn {
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: 9999px;
    padding: 10px 14px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}

.wa-schedule-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.wa-schedule-pop {
    margin: 0 20px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    font-size: 0.85rem;
}

.wa-schedule-pop input[type="datetime-local"] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--font-inter);
    font-size: 0.85rem;
}

.wa-schedule-pop-actions {
    display: flex;
    gap: 8px;
}

/* ─── "When" widget (scheduled-messaging input redesign, 2026-08-02) ─── */
.wa-when-widget { display: flex; flex-direction: column; gap: 10px; }
.wa-when-presets, .wa-when-repeat-row, .wa-when-until-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-when-presets label, .wa-when-until-row label { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; white-space: nowrap; }
.wa-when-weekdays { display: flex; gap: 10px; flex-wrap: wrap; padding-left: 4px; }
.wa-when-weekday-lbl { display: inline-flex; align-items: center; gap: 3px; font-weight: normal; }
.wa-when-widget input[type="date"], .wa-when-widget input[type="time"] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--font-inter);
    font-size: 0.85rem;
}
.wa-when-widget select {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: var(--font-inter);
    font-size: 0.85rem;
}
.wa-when-widget input:disabled { opacity: 0.45; }

/* ─── Standalone "+ Schedule Message" modal (2026-08-02) ─── */
.sm-schedule-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}
.sm-schedule-modal {
    background: var(--card-bg, #fff);
    color: inherit;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.sm-schedule-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
}
.sm-schedule-modal-head h2 { margin: 0; font-size: 1.1rem; }
.sm-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
}
.sm-modal-close:hover { opacity: 1; }
.sm-schedule-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sm-schedule-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}
.sm-mode-toggle { display: flex; gap: 20px; flex-wrap: wrap; }
.sm-mode-toggle label { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; }

.sm-contact-picker { position: relative; }
.sm-contact-picker input[type="text"] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-inter);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.sm-contact-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 10;
    max-height: 220px;
    overflow-y: auto;
}
.sm-contact-option { padding: 8px 12px; cursor: pointer; font-size: 0.88rem; }
.sm-contact-option:hover { background: rgba(0, 0, 0, 0.05); }
.sm-contact-option-empty { cursor: default; }
.sm-contact-option-empty:hover { background: none; }
.sm-contact-pill {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 9999px;
    padding: 6px 8px 6px 14px;
    font-size: 0.88rem;
    width: fit-content;
}
.sm-contact-pill-x {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
}
.sm-contact-pill-x:hover { opacity: 1; }

.sm-char-counter { text-align: right; font-size: 0.75rem; opacity: 0.6; margin-top: 2px; }
.sm-field-error { color: #a12622; font-size: 0.82rem; }
.sm-flow-readonly {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    font-size: 0.88rem;
}
.sm-precheck-warning {
    background: #fff8e1;
    color: #8a6414;
    border: 1px solid #f0d896;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.wa-undo-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #fff;
    padding: 12px 20px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    z-index: 1200;
}

.wa-undo-toast button {
    background: none;
    border: none;
    color: #60a5fa;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: var(--font-inter);
    font-size: 0.85rem;
}

.wa-outbox-bubble {
    max-width: 65%;
    margin: 6px 0 6px auto;
    padding: 10px 14px;
    border-radius: 14px 14px 4px 14px;
    border: 1px dashed #d97706;
    background: rgba(217, 119, 6, 0.07);
    font-size: 0.9rem;
}

.wa-outbox-bubble.wa-outbox-failed {
    border-color: #dc2626;
    background: rgba(220, 38, 38, 0.07);
}

.wa-outbox-meta {
    margin-top: 6px;
    font-size: 0.72rem;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wa-outbox-cancel {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-inter);
    font-size: 0.72rem;
    padding: 0;
}

/* Per-message actions (⋮ → Forward / Delete) */
.wa-message-bubble { position: relative; }

.wa-message-bubble .wa-message-text { padding-right: 14px; white-space: pre-wrap; overflow-wrap: break-word; }

/* Quoted-reply preview (swipe-to-reply on WhatsApp) shown above the reply bubble */
.wa-reply-quote {
    border-left: 3px solid rgba(0,0,0,0.25); background: rgba(0,0,0,0.06);
    border-radius: 6px; padding: 4px 8px; margin-bottom: 4px;
    font-size: 0.8rem; opacity: 0.85; max-height: 2.6em; overflow: hidden;
}
.wa-message-bubble.wa-out .wa-reply-quote { border-left-color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.12); }

.wa-msg-menu-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.wa-message-bubble:hover .wa-msg-menu-btn { opacity: 0.75; }

.wa-msg-actions {
    position: fixed;
    z-index: 1300;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    min-width: 160px;
    overflow: hidden;
}
.wa-msg-actions button {
    background: none;
    border: none;
    text-align: left;
    padding: 11px 16px;
    font-size: 0.88rem;
    font-family: var(--font-inter);
    color: var(--text-main);
    cursor: pointer;
}
.wa-msg-actions button:hover { background: var(--bg-secondary); }
.wa-msg-actions #wa-msg-delete { color: #b91c1c; }

.wa-forward-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.wa-forward-box {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.wa-forward-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}
.wa-forward-head button {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
}
.wa-forward-list {
    overflow-y: auto;
    min-height: 0;
    padding: 6px 0;
}
.wa-forward-target {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-family: var(--font-inter);
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
}
.wa-forward-target:hover { background: var(--bg-secondary); }
.wa-forward-empty {
    padding: 14px 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.wa-convo-delete-btn {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: 8px;
    line-height: 1;
}
.wa-convo-delete-btn:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.06); }

/* Contact management: labels, filter chips, details panel, rename */
.wa-label-filter {
    display: flex;
    gap: 6px;
    padding: 10px 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.wa-filter-chip {
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-inter);
    cursor: pointer;
    white-space: nowrap;
}
.wa-filter-chip[style] { border-color: var(--lc); }
.wa-filter-chip.is-active {
    background: rgba(30, 86, 49, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

.wa-label-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

.wa-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 3px 5px;
    border-radius: 8px;
    line-height: 1;
}
.wa-icon-btn:hover { color: var(--primary); background: var(--bg-secondary); }

.wa-details-panel {
    border-bottom: 1px solid var(--border-color);
    padding: 12px 20px;
    background: var(--bg-secondary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.wa-details-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0;
    flex-wrap: wrap;
}

.wa-details-label {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    min-width: 52px;
    padding-top: 5px;
}

.wa-label-chip {
    border: 1px solid var(--lc, var(--border-color));
    background: transparent;
    color: var(--text-main);
    border-radius: 9999px;
    padding: 3px 11px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-inter);
    cursor: pointer;
    margin: 2px 4px 2px 0;
}
.wa-label-chip.on {
    background: var(--lc, var(--primary));
    color: #ffffff;
}
.wa-label-chip.wa-label-new {
    border-style: dashed;
    color: var(--text-muted);
}

.wa-details-panel textarea {
    flex: 1;
    min-width: 180px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: var(--font-inter);
    font-size: 0.85rem;
    resize: vertical;
}

.wa-notes-save { padding: 6px 16px; font-size: 0.8rem; }

.wa-notify-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0 4px;
    vertical-align: middle;
}

/* Site-styled dialog (replaces native prompt/confirm) — reuses the
   .wa-forward-modal overlay; only the box differs. */
.wa-dialog-box {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 380px;
    padding: 22px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.wa-dialog-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 14px;
    line-height: 1.45;
}

.wa-dialog-input {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-inter);
    font-size: 0.9rem;
    margin-bottom: 16px;
}
.wa-dialog-input:focus {
    outline: none;
    border-color: var(--primary);
}

.wa-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.wa-dialog-actions .btn { padding: 8px 20px; font-size: 0.85rem; }

.wa-chip-x {
    margin-left: 7px;
    font-weight: 700;
    opacity: 0.55;
    cursor: pointer;
}
.wa-chip-x:hover { opacity: 1; color: #b91c1c; }
.wa-label-chip.on .wa-chip-x:hover { color: #ffffff; }

.wa-notes-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.wa-notes-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: var(--font-inter);
    cursor: pointer;
    text-decoration: underline;
}
.wa-notes-clear:hover { color: #b91c1c; }

/* Knowledge Base manager */
.kb-status {
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 0.88rem;
    margin-bottom: 20px;
    line-height: 1.5;
}
.kb-status-good { background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.35); }
.kb-status-warn { background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.35); }

.kb-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
    margin-bottom: 22px;
}
.kb-card h3 { margin: 0 0 14px; font-size: 1.02rem; }

.kb-add-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.kb-add-row input[type="url"],
.kb-add-row input[type="text"] {
    flex: 1;
    min-width: 220px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-inter);
    font-size: 0.88rem;
}
.kb-add-row input[type="file"] { flex: 1; min-width: 220px; font-size: 0.85rem; }
.kb-add-row .btn { padding: 10px 18px; font-size: 0.85rem; white-space: nowrap; }

.kb-hint { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 10px; }

.kb-manual summary { cursor: pointer; font-size: 0.85rem; color: var(--primary); font-weight: 600; margin-bottom: 10px; }
.kb-manual input[type="text"],
.kb-manual textarea {
    display: block;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-inter);
    font-size: 0.88rem;
    margin-bottom: 10px;
}
.kb-manual .btn { padding: 9px 18px; font-size: 0.85rem; }

.kb-result {
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 0.85rem;
    margin-top: 12px;
}
.kb-result-ok { background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.35); }
.kb-result-err { background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.35); }

.kb-source-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-color);
}
.kb-source-row:last-child { border-bottom: none; }
.kb-source-kind { font-size: 1.15rem; flex-shrink: 0; }
.kb-source-info { flex: 1; min-width: 0; }
.kb-source-info strong { display: block; font-size: 0.9rem; }
.kb-source-info small { color: var(--text-muted); font-size: 0.75rem; }
.kb-source-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: 8px;
}
.kb-source-delete:hover { color: #b91c1c; background: rgba(185, 28, 28, 0.06); }

/* ₹299 KB activation — deliberately COMPACT (user requirement): a small
   inline pill inside the status line, never a full commerce button. */
.kb-act-pill-wrap { white-space: nowrap; margin-left: 6px; font-size: 0.8rem; }
.kb-act-pill {
    display: inline-block;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: 9999px;
    padding: 2px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-inter);
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}
.kb-act-pill:hover { background: rgba(30, 86, 49, 0.08); }
.kb-act-pill:disabled { opacity: 0.5; cursor: not-allowed; }

.kb-source-export {
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: 8px;
}
.kb-source-export:hover { color: var(--primary); background: rgba(30, 86, 49, 0.06); }

.kb-progress-track {
    height: 10px;
    border-radius: 9999px;
    background: var(--bg-secondary);
    overflow: hidden;
    margin-bottom: 8px;
}
.kb-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--primary);
    transition: width 0.3s ease;
}

.kb-mini-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-family: var(--font-inter);
    cursor: pointer;
    color: var(--text-muted);
    margin-right: 6px;
}
.kb-mini-btn:hover { color: var(--primary); border-color: var(--primary); }

.kb-review-list {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 0;
}
.kb-review-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.kb-review-row:last-child { border-bottom: none; }
.kb-review-row:hover { background: var(--bg-secondary); }
.kb-review-row input { margin-top: 4px; }
.kb-review-info { min-width: 0; }
.kb-review-info strong { display: block; font-size: 0.85rem; }
.kb-review-info small {
    color: var(--text-muted);
    font-size: 0.72rem;
    word-break: break-all;
}

.kb-test-hit {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 10px;
}
.kb-test-meta { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.kb-test-excerpt { font-size: 0.85rem; white-space: pre-wrap; }

/* Inbox page heading + pieces that only appear on narrow screens */
.wa-inbox-sub {
    margin: 6px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-muted);
}

.wa-mobile-nav { display: none; }

.wa-back-btn { display: none; }

.wa-thread-contact-name { font-size: 0.95rem; }

@media (max-width: 900px) {
    /* Smaller heading, nav strip directly below it */
    .wa-inbox-header .wa-page-title { font-size: 1.35rem; }
    .wa-inbox-sub { font-size: 0.9rem; }
    /* "🔍 Research this contact" is too wide for mobile — icon only there. */
    .wa-btn-label { display: none; }

    .wa-mobile-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 12px 0 4px;
        padding-bottom: 4px;
    }
    .wa-mobile-nav-link {
        flex-shrink: 0;
        padding: 7px 14px;
        border: 1px solid var(--border-color);
        border-radius: 9999px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        background: var(--bg-card, #fff);
        white-space: nowrap;
    }
    .wa-mobile-nav-link.is-active {
        background: rgba(30, 86, 49, 0.08);
        border-color: var(--primary);
        color: var(--primary);
    }

    /* Two-screen flow: full-height conversation list first; the thread pane
       only appears once a conversation is tapped (?contact=N reload adds
       .wa-thread-open server-side). */
    .wa-inbox-layout {
        flex-direction: column;
        height: auto;
    }
    .wa-contact-list-wrap {
        width: 100%;
        border-right: none;
    }
    .wa-thread { display: none; }

    .wa-inbox-layout.wa-thread-open {
        height: calc(100vh - 110px);
        /* dvh accounts for mobile browsers' collapsing URL bar */
        height: calc(100dvh - 110px);
    }
    .wa-inbox-layout.wa-thread-open .wa-contact-list-wrap { display: none; }
    .wa-inbox-layout.wa-thread-open .wa-thread { display: flex; }

    /* Thread view: the contact is the heading (page heading hides itself),
       messages scroll underneath, composer pinned at the bottom. */
    .wa-hide-when-thread { display: none; }
    .wa-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        font-size: 1.2rem;
        color: var(--text-main);
        text-decoration: none;
        flex-shrink: 0;
    }
    .wa-back-btn:active { background: var(--bg-secondary); }
    .wa-thread-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
        position: sticky;
        top: 0;
        background: #ffffff;
        z-index: 5;
    }
    /* 2026-07-27 feedback: the assignment control (Claim/assignee name),
       status dropdown and "also viewing this" banner were getting cut off
       on mobile -- .wa-thread-header itself already wraps (above), but
       .wa-thread-header-info is a single flex item within it with no
       internal wrap, so its own children (avatar, name, icon buttons,
       assignment control, status select) were forced onto one overflowing
       line regardless. */
    .wa-thread-header-info { flex-wrap: wrap; row-gap: 6px; }
    .wa-thread-contact-name { font-size: 1.05rem; }
    .wa-thread-messages { -webkit-overflow-scrolling: touch; }

    .wa-reply-box { padding: 10px 12px; }
    /* 16px stops iOS Safari auto-zooming when the reply box gets focus */
    .wa-reply-box textarea { font-size: 16px; }

    /* No hover on touch screens — keep the ⋮ subtly visible */
    .wa-msg-menu-btn { opacity: 0.45; }
}

/* ==========================================
   WhatsApp Setup Guide (zero-knowledge walkthrough)
   ========================================== */
.guide-glossary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 40px;
}

.guide-glossary h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.guide-glossary div {
    line-height: 1.7;
    margin-bottom: 6px;
    font-size: 0.92rem;
}

.guide-glossary dt {
    font-weight: 700;
    color: var(--primary);
    display: inline;
}

.guide-glossary dd {
    display: inline;
    margin: 0;
    color: var(--text-muted);
}

.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 20px 0 40px;
}

.setup-step {
    display: flex;
    gap: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

.setup-step-number {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.92rem;
}

.setup-step-body h4 {
    margin: 0 0 6px;
    font-size: 1.02rem;
}

.setup-step-body p,
.setup-step-body ul,
.setup-step-body ol {
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.92rem;
    margin: 0;
}

.setup-step-body ul,
.setup-step-body ol {
    padding-left: 18px;
    margin-top: 8px;
}

.setup-step-note {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.path-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 16px;
}

.path-card {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.path-card.path-recommended {
    border-color: var(--primary);
}

.path-card h3 {
    margin-top: 0;
}

.path-card .path-tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .path-tabs {
        grid-template-columns: 1fr;
    }
}

.btn-danger {
    background: transparent;
    color: #b91c1c;
    border: 2px solid rgba(185, 28, 28, 0.25);
}

.btn-danger:hover {
    border-color: #b91c1c;
    background: rgba(185, 28, 28, 0.06);
    transform: translateY(-2px);
}

/* ─── Portal Shell (my.rstechie.in client area + product portals) ───────────
   Deliberately separate chrome from the marketing site's .main-header/.footer —
   see includes/portal_shell.php and whatsapp-subdomain-isolation-plan.md.
   Content inside .portal-main reuses existing .dashboard- and .data-table classes
   unchanged, so this block only styles the sidebar + layout scaffolding. */
.portal-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-secondary);
}

.portal-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--bg-card, #fff);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.portal-sidebar-back {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 18px;
    display: inline-block;
}
.portal-sidebar-back:hover { color: var(--primary); }

.portal-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 6px 8px 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
}
.portal-sidebar-logo { width: 30px; height: 30px; border-radius: 8px; }
.portal-sidebar-brand span {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
}

.portal-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.portal-nav-link:hover { background: var(--bg-secondary); color: var(--text-main); }
.portal-nav-link.is-active {
    background: rgba(30, 86, 49, 0.08);
    color: var(--primary);
    font-weight: 700;
}
.portal-nav-link svg { flex-shrink: 0; }

/* Unseen-ticket-activity badge (2026-07-31) — injected by JS in
   includes/portal_shell.php only onto the Support Tickets link, only when
   the count is nonzero. */
.portal-nav-badge {
    margin-left: auto;
    background: #e53e3e;
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.portal-sidebar-crosslink {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 10px 12px;
    margin: 10px 0;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
}
.portal-sidebar-crosslink:hover { background: rgba(30, 86, 49, 0.06); }

.portal-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 4px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}
.portal-sidebar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    overflow: hidden;
}
.portal-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.portal-sidebar-user-info { min-width: 0; }
.portal-sidebar-username {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portal-sidebar-account-id {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 1px 0 3px;
}
.portal-sidebar-logout {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
}
.portal-sidebar-logout:hover { color: #b91c1c; }

.portal-main {
    flex: 1;
    min-width: 0;
    padding: 36px 44px;
}

/* Portal pages are functional dashboards, not scroll-story marketing pages —
   content shouldn't sit invisible waiting on a scroll-triggered IntersectionObserver
   (main.js's initScrollReveal()) that's tuned for long landing-page scrolling. */
.portal-main.reveal,
.portal-main .reveal {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.portal-hamburger-btn {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1001;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}
.portal-hamburger-btn .bar {
    width: 20px;
    height: 2px;
    background: var(--text-main);
    border-radius: 2px;
}

@media (max-width: 900px) {
    .portal-hamburger-btn { display: flex; }
    .portal-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow-sm);
    }
    .portal-sidebar.is-open { transform: translateX(0); }
    .portal-main { padding: 70px 20px 32px; }
}

/* ─── WhatsApp Inbox "full-bleed app" mode ───────────────────────────────
   Scoped to .wa-fullscreen (added by a small inline script in
   whatsapp/inbox.php only) so no other portal page is affected. Reuses the
   exact off-canvas sidebar mechanism already built for mobile above —
   applied here at every screen width, not just <900px. */
.wa-fullscreen.portal-shell { height: 100vh; overflow: hidden; }
/* Not a hamburger here — a small curved tab hugging the left edge, like a
   drawer handle you'd pull open, rather than a 3-bar icon floating top-right. */
.wa-fullscreen .portal-hamburger-btn {
    display: flex;
    top: 18px;
    left: 0;
    right: auto;
    width: 20px;
    height: 46px;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(135deg, #ffffff, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-left: none;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.15), inset -1px 0 0 rgba(255, 255, 255, 0.7);
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: width 0.15s ease;
}
.wa-fullscreen .portal-hamburger-btn:hover { width: 24px; }
.wa-fullscreen .portal-hamburger-btn .bar { display: none; }
.wa-fullscreen .portal-hamburger-btn::after {
    content: '\203A'; /* › */
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
    transition: transform 0.2s ease;
}
.wa-fullscreen .portal-hamburger-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.wa-fullscreen .portal-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-sm);
}
.wa-fullscreen .portal-sidebar.is-open { transform: translateX(0); }
.wa-fullscreen .portal-main {
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Slim single-row top bar — no page title, no stacked lines. Left = brand +
   number + bell, middle = mobile nav (existing responsive behavior,
   untouched), right = CRM chips + exit link. Wraps only if truly needed on
   very narrow widths, and even then stays compact (small gap, no big
   padding) rather than the old multi-line stacked header. */
.wa-fullscreen .wa-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 16px 8px 56px; /* left space reserved for the hamburger */
    margin: 0 !important;
    flex-shrink: 0;
    min-height: 0;
}
.wa-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.wa-topbar-brand {
    font-family: var(--font-outfit);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--primary);
    white-space: nowrap;
}
.wa-topbar-phone {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.wa-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wa-fullscreen .wa-crm-bar { flex-shrink: 0; margin: 0; }
.wa-fullscreen .wa-inbox-layout {
    flex: 1;
    min-height: 0;
    height: auto;
    margin: 0 20px 20px;
    border-radius: 12px;
}
.wa-exit-fullscreen {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.wa-exit-fullscreen:hover { color: var(--primary); }

/* ─── CRM pipeline summary bar ─────────────────────────────────────────── */
.wa-crm-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wa-crm-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.wa-crm-chip:hover { background: rgba(30, 86, 49, 0.08); }
.wa-crm-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.wa-crm-chip-alert { color: #b45309; border-color: #f59e0b; }

/* ─── Pin/star a conversation ────────────────────────────────────────────
   Button sits at the far right of the row, revealed on hover/focus (or
   always shown once pinned) rather than permanently cluttering every row. */
.wa-contact-item { position: relative; }
.wa-pin-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    font-size: 0.85rem;
    opacity: 0;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    color: var(--text-muted);
}
.wa-contact-item:hover .wa-pin-btn,
.wa-contact-item.wa-pinned .wa-pin-btn { opacity: 0.7; }
.wa-pin-btn:hover { opacity: 1 !important; }
.wa-contact-item.wa-pinned { background: rgba(217, 119, 6, 0.06); }
.wa-pin-mark { font-size: 0.72rem; margin-right: 4px; }

/* ─── 3D LED status indicator ─────────────────────────────────────────────
   Replaces a text status-pill whose long label ("Service window closed
   (template required)") was wrapping into an overlapping circular blob next
   to the AI toggle. A small glossy multi-color dot instead — full message
   on hover via the native title tooltip, so nothing text-heavy sits inline. */
.wa-led {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: default;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.3), inset 2px 2px 2px rgba(255, 255, 255, 0.5), 0 0 7px 1px currentColor;
}
.wa-led-green { background: radial-gradient(circle at 35% 30%, #86efac, #16a34a 55%, #0d5c29 100%); color: #22c55e; }
.wa-led-amber { background: radial-gradient(circle at 35% 30%, #fde68a, #d97706 55%, #7c4a05 100%); color: #f59e0b; }

/* ─── 24h service-window countdown ring (2026-07-31, replaces the plain LED
   dot when a window is open) — a small SVG ring whose arc empties as the
   24h window runs down, green normally, red in the final 10 minutes. Exact
   remaining time is in the native title tooltip, same convention as the LED
   dot it extends rather than replaces (a closed window still just shows a
   plain filled amber ring, matching the dot's old closed-state meaning). */
.wa-window-ring-wrap { display: inline-flex; flex-shrink: 0; cursor: default; }
.wa-window-ring { display: block; transform: rotate(0deg); }
.wa-window-ring-track { stroke: rgba(0, 0, 0, 0.12); }
.wa-window-ring-seg { transition: stroke-dasharray 1s linear, stroke 0.4s ease; }
.wa-window-digits { font-size: 11px; font-variant-numeric: tabular-nums; color: #5c7062; flex-shrink: 0; }
.wa-window-digits-danger { font-size: 13px; font-weight: 700; color: #dc3545; }
@media (prefers-color-scheme: dark) {
    .wa-window-ring-track { stroke: rgba(255, 255, 255, 0.16); }
    .wa-window-digits { color: #9a9ba5; }
}

/* ─── CRM customer-details side panel (2026-07-31) — a 3rd flex column next
   to the contact list and thread, so opening it genuinely splits the
   message width rather than floating over it. Collapsed to a slim always-
   visible vertical tab by default; expands on click. */
.wa-crm-panel-wrap { display: flex; flex-shrink: 0; border-left: 1px solid var(--border-color); }
/* Mobile-only duplicate open-trigger (ticket #32 fix, 2026-08-02) — lives in
   the thread header instead of the side-tab, since the side-tab itself is
   hidden on mobile below (see the @media block further down). Hidden on
   desktop, where the real .wa-crm-panel-toggle side-tab already works. */
.wa-crm-mobile-trigger { display: none; }
.wa-crm-panel-toggle {
    writing-mode: vertical-rl;
    width: 30px;
    flex-shrink: 0;
    border: none;
    border-right: 1px solid var(--border-color);
    background: #f7f9f8;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #5c7062;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
}
.wa-crm-panel-toggle:hover { background: #eef5f0; }
#wa-crm-panel-toggle-arrow { display: inline-block; transition: transform 0.2s ease; }
.wa-crm-panel-wrap.is-open #wa-crm-panel-toggle-arrow { transform: rotate(180deg); }
.wa-crm-panel {
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    transition: width 0.2s ease;
    position: relative;
}
.wa-crm-panel-wrap.is-open .wa-crm-panel { width: 320px; }
/* Drag-to-resize handle (2026-07-31, ticket #23) — desktop only; width is
   set as an inline style by JS and persisted to localStorage, so it's
   remembered on the next visit instead of always reopening at 320px. */
.wa-crm-panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
}
.wa-crm-panel-resize-handle:hover { background: rgba(30, 86, 49, 0.15); }
.wa-crm-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-width: 320px;
}
.wa-crm-panel-body { flex-grow: 1; overflow-y: auto; padding: 4px 14px 14px; min-width: 320px; min-height: 0; }
.wa-crm-section { margin-top: 14px; }
.wa-crm-section:first-child { margin-top: 0; }
.wa-crm-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #5c7062; margin: 0 0 6px; }
.wa-crm-card {
    background: #f7f9f8;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 0.82rem;
}
.wa-crm-card-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wa-crm-card-sub { color: #6b7280; font-size: 0.76rem; margin-top: 2px; }
.wa-crm-empty { font-size: 0.8rem; color: #9aa1a8; margin: 0; }
@media (prefers-color-scheme: dark) {
    .wa-crm-panel-toggle { background: #1e1f26; color: #9a9ba5; }
    .wa-crm-panel-toggle:hover { background: #262832; }
    .wa-crm-panel { background: #1a1b21; }
    .wa-crm-card { background: #1e1f26; border-color: #2a2b33; }
    .wa-crm-card-sub { color: #9a9ba5; }
}
/* Mobile (2026-07-31, ticket #23): a squeezed 3rd column doesn't work at
   this width — the panel becomes a full-screen overlay instead, same
   class-toggle-driven show/hide convention as .wa-thread-open uses for the
   contact-list/thread drawer, and reuses the existing close button. The
   !important on width beats any inline resize-width JS set on desktop. */
@media (max-width: 900px) {
    /* Real bug found live (ticket #32, 2026-08-02): this block only ever
       handled the .is-open (expanded) state -- the collapsed default state
       was never addressed, so .wa-crm-panel-wrap's persistent side-tab
       (built for a 3-column desktop layout) rendered as an extra full-width
       row once .wa-inbox-layout switches to a stacked column layout on
       mobile, sitting below the contact list or eating space inside the
       fixed-height .wa-thread-open thread view. Collapsed state is now
       fully hidden on mobile; opening it is done via the new
       .wa-crm-mobile-trigger button in the thread header instead (see
       inbox.php), which just delegates to the existing toggle's click
       handler, so .is-open below still works exactly as before. */
    .wa-crm-panel-wrap:not(.is-open) { display: none; }
    .wa-crm-mobile-trigger { display: inline-block; }

    .wa-crm-panel-wrap.is-open {
        position: fixed;
        inset: 0;
        z-index: 50;
        border-left: none;
    }
    .wa-crm-panel-wrap.is-open .wa-crm-panel-toggle { display: none; }
    .wa-crm-panel-wrap.is-open .wa-crm-panel {
        width: 100% !important;
        height: 100%;
    }
    .wa-crm-panel-header, .wa-crm-panel-body { min-width: 0; }
    .wa-crm-panel-resize-handle { display: none; }
}

/* ─── 3D AI on/off switch (replaces the "Leporis: ON/OFF" text pill) ────── */
.wa-ai-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
}
.wa-ai-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.wa-ai-switch-track {
    position: relative;
    width: 38px;
    height: 21px;
    border-radius: 9999px;
    background: linear-gradient(180deg, #dc2626, #7f1d1d);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.wa-ai-switch.is-on .wa-ai-switch-track { background: linear-gradient(180deg, #4ade80, #15803d); }
.wa-ai-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #d1d5db 70%, #9ca3af 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transition: left 0.2s ease;
}
.wa-ai-switch.is-on .wa-ai-switch-knob { left: 19px; }
.wa-ai-switch-label { font-size: 0.78rem; font-weight: 700; color: var(--text-main); white-space: nowrap; }
/* Coexistence pause (docs/leporis_whatsapp_coexistence_plan.md) -- an
   overlay on top of is-on/is-off, not a replacement: the knob position still
   previews the state the switch reverts to once the cooldown ends. */
.wa-ai-switch.is-paused .wa-ai-switch-track { background: linear-gradient(180deg, #fbbf24, #b45309); animation: wa-ai-switch-pulse 1.6s ease-in-out infinite; }
@keyframes wa-ai-switch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Real customer photo (RS-Techie's own channel only — see
   waResolveKnownCustomerAvatar()) instead of the generated-initials circle. */
.wa-avatar.wa-avatar-photo { padding: 0; overflow: hidden; }
.wa-avatar.wa-avatar-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ─── Light doodle-pattern chat background ───────────────────────────────
   An original, RS-Techie-owned pattern (not a copy of WhatsApp's own
   wallpaper asset) — faint chat/phone/heart icons tiled on the existing
   background color, same visual "vibe" without lifting Meta's design. */
.wa-thread-messages {
    background-color: #f5f3ef;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d8d2c4' stroke-width='1.5' opacity='0.6'%3E%3Cpath d='M20 24h16a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H26l-5 4v-4h-1a4 4 0 0 1-4-4v-8a4 4 0 0 1 4-4z'/%3E%3Ccircle cx='70' cy='30' r='7'/%3E%3Cpath d='M70 22a8 8 0 0 1 6 13'/%3E%3Cpath d='M95 70l4 4 8-8'/%3E%3Cpath d='M20 80c3-4 9-4 12 0c3-4 9-4 12 0c0 5-6 9-12 13c-6-4-12-8-12-13z'/%3E%3Crect x='65' y='75' width='18' height='14' rx='2'/%3E%3Cpath d='M65 78l9 6 9-6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ─── Print / Save as PDF: a clean transcript, no app chrome ────────────── */
@media print {
    .portal-sidebar, .portal-hamburger-btn, .wa-topbar, .wa-crm-bar,
    .wa-contact-list-wrap, .wa-thread-header, .wa-reply-box, .wa-details-panel,
    .wa-msg-menu-btn, .wa-pin-btn, #wa-notify-toggle, #wa-undo-toast {
        display: none !important;
    }
    .wa-fullscreen.portal-shell, .wa-fullscreen .portal-main { height: auto; overflow: visible; }
    .wa-inbox-layout { display: block !important; height: auto !important; box-shadow: none; border: none; margin: 0 !important; }
    .wa-thread { display: block !important; }
    .wa-thread-messages { background-image: none; overflow: visible !important; height: auto !important; }
    .wa-message-bubble { break-inside: avoid; box-shadow: none; }
}

/* Inbox media (received photos/files) */
.wa-media-img {
    display: block;
    max-width: 260px;
    max-height: 260px;
    border-radius: 10px;
    margin-bottom: 6px;
    object-fit: cover;
}
.wa-attach-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 0.82rem;
    color: inherit;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    word-break: break-all;
}
.wa-message-bubble.wa-in .wa-attach-row {
    border-color: var(--border-color);
    background: rgba(0, 0, 0, 0.04);
}

/* Outbound attachment chip above the composer */
.wa-attach-chip {
    margin: 0 20px 6px;
    padding: 6px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 9999px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}
.wa-attach-chip button {
    background: none;
    border: none;
    cursor: pointer;
    color: #b91c1c;
    font-size: 1rem;
    line-height: 1;
}

/* Global message search + jump highlight */
.wa-search-head {
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.wa-search-head button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    padding: 3px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: var(--font-inter);
}
.wa-msg-highlight {
    animation: waFlash 2.2s ease;
}
@keyframes waFlash {
    0%, 60% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.65); }
    100% { box-shadow: none; }
}

.wa-search-section {
    padding: 8px 14px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg-secondary);
}

/* ─── CRM page redesign ───────────────────────────────────────────────────
   Was reusing generic .auth-card (40px padding, built for login forms) and
   .btn (14px/28px padding, built for marketing CTAs) for a filter bar and
   inline table actions — oversized and inconsistent for that job. Scoped
   replacements below; JS still binds to the original .lead-* classes kept
   alongside these, so nothing behavioral changes. */
.crm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.crm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.crm-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 9999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-smooth);
}
.crm-filter-chip:hover { background: rgba(30, 86, 49, 0.08); }
.crm-filter-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.crm-filter-chip.crm-filter-chip-alert.is-active { background: #d97706; border-color: #d97706; }
.crm-add-lead-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 9999px;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-smooth);
}
.crm-add-lead-btn:hover { background: var(--primary-light); transform: translateY(-1px); }

/* Tighter, denser rows than the default .data-table (built for less
   information-dense pages) — a CRM list reads better compact. */
.crm-table th, .crm-table td { padding: 10px 16px; }
.crm-table td { vertical-align: middle; }

.crm-stage-select, .crm-assigned-input {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--font-inter);
    background: #fff;
    color: var(--text-main);
    max-width: 150px;
}
.crm-stage-select:focus, .crm-assigned-input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Source: unbounded-length freeform text (e.g. a landing-page slug) — a
   fixed-width truncating tag with the full value on hover, instead of a
   pill that balloons when the text wraps. */
.crm-source-tag {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
}
.crm-source-whatsapp { background: rgba(76, 175, 80, 0.12); color: var(--primary-light); }
.crm-source-manual { background: rgba(245, 158, 11, 0.12); color: #b45309; }

.crm-followup-reason { margin-top: 2px; }

.crm-actions-cell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crm-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.crm-action-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(30, 86, 49, 0.04); }
.crm-action-btn-danger:hover { border-color: #b91c1c; color: #b91c1c; background: rgba(239, 68, 68, 0.06); }

.crm-note-add-row { display: flex; gap: 8px; margin-top: 8px; }
.crm-note-add-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: var(--font-inter);
}

@media (max-width: 700px) {
    .crm-filter-bar { flex-direction: column; align-items: stretch; }
    .crm-add-lead-btn { align-self: flex-start; }
}

/* ─── Setup Wizard (docs/leporis_setup_wizard_plan.md) ───────────────────── */
.wa-wizard-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 24px !important;
}
.wa-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: normal;
    cursor: help;
    vertical-align: middle;
}
.wa-info-icon:hover, .wa-info-icon:focus { background: var(--primary); color: #fff; outline: none; }

/* Native <details> used for "Advanced" sections on ai-config.php — scoped to
   .wa-advanced-details specifically since <details>/<summary> are already
   used unstyled elsewhere (admin/dashboard.php, diagnostics.php, kb.php) and
   this shouldn't change their appearance. */
.wa-advanced-details > summary { list-style: none; }
.wa-advanced-details > summary::-webkit-details-marker { display: none; }
.wa-advanced-details > summary::before {
    content: '\25B8'; /* ▸ */
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
    color: var(--text-muted);
}
.wa-advanced-details[open] > summary::before { transform: rotate(90deg); }

/* ─── Guided walkthrough tour bar ─────────────────────────────────────────
   A small floating panel, not a full overlay — the real page (and its Save
   buttons) stay fully visible and usable while this is open. */
.wa-tour-bar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 14px 16px;
}
.wa-tour-bar-top { display: flex; justify-content: space-between; align-items: center; }
.wa-tour-step-count { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.wa-tour-title { display: flex; align-items: center; gap: 6px; margin: 6px 0 12px; font-size: 0.95rem; }
.wa-tour-actions { display: flex; justify-content: space-between; gap: 8px; }
.wa-tour-actions .btn { padding: 6px 14px; font-size: 0.82rem; }

@media (max-width: 640px) {
    .wa-tour-bar { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* The section the tour is currently pointing at — a soft glowing border,
   scoped so it never conflicts with anything else using box-shadow. */
@keyframes waTourPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(30, 86, 49, 0.25); }
    50% { box-shadow: 0 0 0 6px rgba(30, 86, 49, 0.12); }
}
.wa-tour-highlight {
    animation: waTourPulse 1.8s ease-in-out infinite;
    border-radius: 10px;
    scroll-margin: 90px;
}

/* ─── Config page button-sizing utilities (AI Configuration overhaul) ─────
   .auth-card .btn defaults to width:100% (see the .auth-card .btn rule
   above) — correct for a single auth-form CTA like "Sign In", wrong for the
   many small inline actions (×, Edit, Delete, +Add) scattered across the
   WhatsApp portal, which used to each need their own one-off inline
   style="padding:...; font-size:..." override to look right (at least 6
   different ad-hoc combinations existed). These three give a single
   consistent scale instead; .auth-card .btn itself is untouched so every
   other page (login, signup, checkout) keeps its current full-width
   default with zero risk. */
.auth-card .btn.btn-auto { width: auto; }
.auth-card .btn.btn-sm { width: auto; padding: 6px 14px; font-size: 0.8rem; }
.auth-card .btn.btn-xs { width: auto; padding: 4px 10px; font-size: 0.78rem; min-width: 30px; }

/* Form inputs need to read as "fillable boxes" distinctly from the very
   subtle section-divider/fieldset borders (--border-color is only 8%
   opacity — correct for a quiet divider line, too faint to recognize as an
   input outline). A separate, more visible border just for inputs/selects/
   textareas, scoped to .auth-card so nothing sitewide changes — dividers
   and card outlines elsewhere keep using --border-color unchanged; the
   contrast between the two is what makes "this is a filled box" vs "this
   is a section wrapper" obvious at a glance. */
.auth-card .form-group input,
.auth-card .form-group select,
.auth-card .form-group textarea {
    border-color: rgba(30, 86, 49, 0.28);
}

/* ─── Configurations tab bar — folder/ribbon tabs (Configurations v2,
   2026-07-21) ─────────────────────────────────────────────────────────────
   Matches the shape of the reference image the user shared (rounded-top
   folder tabs sitting on a colored ribbon bar) using the site's own green
   palette instead of the image's 5 arbitrary colors — the shape is what
   was asked for, not literal multi-color tabs. Still real <a> links
   (multi-page navigation between the Configurations tab pages), just
   styled to read as a tab strip. */
.wa-config-tabbar {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 0 -1px;
    padding: 0 2px;
}
.wa-config-tab {
    position: relative;
    display: inline-block;
    padding: 12px 22px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #f7f8fa 0%, #e3e6ea 100%);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: none;
    transition: var(--transition-smooth);
    z-index: 1;
}
.wa-config-tab:hover {
    background: linear-gradient(180deg, #eef1f4 0%, #dde1e6 100%);
    color: var(--text-main);
}
.wa-config-tab.is-active {
    background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
    color: var(--text-light);
    box-shadow: 0 -3px 10px rgba(30, 86, 49, 0.18);
    z-index: 2;
}
.wa-config-tabbar-ribbon {
    height: 7px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 5px 14px rgba(30, 86, 49, 0.22);
    margin-bottom: 28px;
}
@media (max-width: 640px) {
    .wa-config-tab { padding: 10px 14px; font-size: 0.75rem; }
}

/* Export/Import — cross-cutting utility link, not a 7th folder tab, pinned
   to the right of the tab row (Settings Export/Import, 2026-07-22). */
.wa-config-io-link {
    margin-left: auto;
    align-self: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    transition: var(--transition-smooth);
    white-space: nowrap;
}
.wa-config-io-link:hover {
    color: var(--primary);
    background: rgba(30, 86, 49, 0.06);
}
.wa-config-io-link.is-active {
    color: var(--primary);
    font-weight: 700;
    background: rgba(30, 86, 49, 0.08);
}

/* Collapsible-section summaries get a small colored accent bar instead of
   plain bold text, matching the tab bar's more designed look — !important
   only to win over the per-section inline `style="padding:...` already on
   every <summary> (see whatsapp/config-*.php), cheaper than rewriting each
   one's inline style just to drop the left value. */
.wa-advanced-details > summary {
    border-left: 3px solid var(--primary-light);
    padding-left: 10px !important;
    margin-left: -3px;
}

/* ─── Small editable-row table (Owner & Staff numbers, Configurations v2
   table UI, 2026-07-21) — a reusable "beautiful table" component for any
   future add/remove-row list, not just this one use. ───────────────────── */
.wa-mini-table-wrap {
    border: 1px solid var(--border-color, #2a2a3a);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}
.wa-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.wa-mini-table thead th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 10px 12px;
    background: rgba(30, 86, 49, 0.05);
    border-bottom: 1px solid var(--border-color, #2a2a3a);
}
.wa-mini-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color, #2a2a3a);
    vertical-align: middle;
}
.wa-mini-table tbody tr:last-child td {
    border-bottom: none;
}
.wa-mini-table tbody tr:hover td {
    background: rgba(30, 86, 49, 0.03);
}
.wa-mini-table input,
.wa-mini-table select {
    width: 100%;
    margin: 0;
    padding: 7px 9px;
    font-size: 0.85rem;
    border-radius: 6px;
}
.wa-mini-table td.wa-mini-table-remove-cell {
    width: 1%;
    padding: 6px 6px 6px 0;
}
.wa-mini-table-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 6px;
    transition: var(--transition-smooth);
}
.wa-mini-table-remove:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}
.wa-mini-table-add-row {
    padding: 10px 12px;
    border-top: 1px dashed var(--border-color, #2a2a3a);
}
@media (max-width: 640px) {
    .wa-mini-table thead { display: none; }
    .wa-mini-table, .wa-mini-table tbody, .wa-mini-table tr, .wa-mini-table td {
        display: block;
        width: 100%;
    }
    .wa-mini-table tbody tr {
        padding: 10px 10px 2px;
        border-bottom: 1px solid var(--border-color, #2a2a3a);
    }
    .wa-mini-table td { border-bottom: none; padding: 4px 2px; }
    .wa-mini-table td.wa-mini-table-remove-cell { text-align: right; width: 100%; }
}