/* ========================================
   NOSSA LOJA - CSS PRINCIPAL
   Sistema de Design Profissional com Tema Dark
   ======================================== */

/* ========================================
   VARIÁVEIS CSS - TEMA CLARO
   ======================================== */
:root {
    /* Cores Primárias (Premium Theme) */
    --primary: #3483fa;
    --primary-dark: #1e293b;
    --primary-light: #60a5fa;
    --header-bg: #1e293b;
    /* Deep Navy */
    --text-header: #ffffff;

    /* Cores de Fundo */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;

    /* Cores de Texto */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    /* Bordas */
    --border-color: #e6e6e6;
    --border-radius: 6px;
    /* Bordas mais sutis */
    --border-radius-sm: 4px;

    /* Sombras */
    --shadow-sm: 0 1px 1px 0 rgba(0, 0, 0, .1);
    --shadow: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 7px 16px 0 rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .06);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Cores de Status */
    --success: #00a650;
    /* Verde ML */
    --warning: #ff7733;
    --error: #f23d4f;
    --info: #3483fa;

    /* Transições */
    --transition: all 0.2s ease-out;
}

/* ========================================
   TEMA ESCURO
   ======================================== */
[data-theme="dark"] {
    /* Cores de Fundo */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;

    /* Cores de Texto */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #64748b;

    /* Bordas */
    --border-color: #334155;

    /* Sombras mais sutis no dark */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
}

/* ========================================
   RESET E BASE
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f5f5;
    color: var(--text-primary);
    line-height: 1.6;
    transition: var(--transition);
}

/* Utility Classes */
.bg-light {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
    /* Slightly distinct in dark mode */
}

/* ========================================
   HEADER
   ======================================== */
/* ========================================
   HEADER (Mercado Livre Style)
   ======================================== */
.header {
    background: var(--header-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--text-header);
}

.header .container {
    max-width: 1200px;
    /* ML standard width */
}

/* Row 1: Logo + Search */
.header-main {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 12px;
}

.logo {
    text-decoration: none;
    color: #2d3277;
    line-height: 1;
}

.logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -1px;
    color: #ffffff;
}

.logo-text span {
    color: var(--primary-light);
}

.search-form {
    flex: 1;
    display: flex;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: white;
    overflow: hidden;
    transition: var(--transition);
}

.search-form:focus-within {
    box-shadow: 0 0 0 3px rgba(52, 131, 250, 0.2);
}

.search-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 16px;
    color: #333;
    outline: none;
}

.search-btn {
    background: white;
    border: none;
    padding: 0 20px;
    color: var(--primary);
    cursor: pointer;
    font-size: 1.1rem;
    border-left: 1px solid #f1f5f9;
}

.location-box {
    color: #ffffff;
    transition: var(--transition);
}

.location-box:hover {
    opacity: 0.8;
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.nav-links {
    display: flex;
    gap: 24px;
}

.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    opacity: 0.8;
    transition: var(--transition);
    font-weight: 500;
}

.nav-link:hover {
    opacity: 1;
    color: var(--primary-light);
}

.user-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.quick-links {
    display: flex;
    gap: 15px;
    margin-right: 20px;
}

.quick-link {
    text-decoration: none;
    color: #333;
    font-size: 13px;
}

.user-menu-btn {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #ffffff;
}

.cart-link {
    color: #333;
    font-size: 18px;
    position: relative;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    z-index: 1000;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.dropdown-menu a:hover {
    background: var(--bg-secondary);
    color: var(--primary);
}

.dropdown-menu hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.5rem 0;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--error);
    color: white;
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-weight: 600;
}

/* Theme Toggle Button */
.theme-toggle {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.theme-toggle:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
}

.btn-light {
    background: white;
    color: var(--primary);
    box-shadow: var(--shadow);
}

.btn-light:hover {
    background: var(--bg-secondary);
}

/* ========================================
   MAIN CONTENT
   ======================================== */
.main-content {
    min-height: calc(100vh - 100px - 300px);
}

.container-xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero-banner {
    position: relative;
    margin-bottom: 0;
}

.carousel-item img {
    height: 540px;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 992px) {
    .carousel-item img {
        height: 400px;
    }
}

@media (max-width: 576px) {
    .carousel-item img {
        height: 250px;
    }
}

.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    height: 64px;
    background: rgba(255, 255, 255, 0.9);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 0 4px 4px 0;
}

.carousel-control-next {
    border-radius: 4px 0 0 4px;
}

.hero-banner:hover .carousel-control-prev,
.hero-banner:hover .carousel-control-next {
    opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100) brightness(0);
    width: 20px;
}


.hero-with-bg {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(52, 131, 250, 0.8) 0%, rgba(67, 56, 202, 0.6) 100%);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.btn-outline-light {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.btn-outline-light:hover {
    background: white;
    color: var(--primary);
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: heroFadeIn 0.8s ease-out;
}

/* ========================================
   SECTIONS
   ======================================== */
.section {
    padding: 3rem 0;
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text-primary);
    position: relative;
    padding-left: 1rem;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2rem;
    background: var(--primary);
    border-radius: 2px;
}

/* ========================================
   CATEGORIES
   ======================================== */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
}

.category-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

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

.category-card i {
    font-size: 2rem;
    color: var(--primary);
    background: var(--bg-secondary);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.category-card:hover i {
    background: var(--primary);
    color: white;
}

.category-card h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
}

/* ========================================
   PRODUCT CARDS
   ======================================== */
/* ========================================
   PRODUCT CARDS (ML Style)
   ======================================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 16px;
}

.product-card {
    background: white;
    border: none;
    border-radius: 6px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    overflow: visible;
    /* Allow shadow */
    transition: box-shadow 0.2s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    box-shadow: 0 7px 16px 0 rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .06);
    border-color: transparent;
    z-index: 1;
}

.product-card a {
    text-decoration: none;
    color: inherit;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 1:1 Aspect Ratio */
    background: white;
    overflow: hidden;
    border-bottom: 1px solid #f5f5f5;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the container */
    transition: transform 0.3s ease;
}

/* Gallery Styles for Product Page */
.product-gallery-main {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 Aspect Ratio */
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.product-gallery-main img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Keep contain for main detail to see full product, or cover if preferred. User asked for 'tamanho certo' (correct size) usually meaning filling the box. Let's stick with contain for detail to avoid cropping important details, but ensure the box is fixed size. Actually user said "apareça sempre no tamanho certo ... msm q seja feito upload em outros tamanhos". If I use contain, it might leave whitespace. If I use cover, it crops. Usually cover is better for aesthetic 'grid' layouts, but for detail 'contain' is safer for information. However, the user complained about layout. Let's make the container fixed square and use contain for detail, but cover for valid "grid" look.
    
    Wait, the user said "corrija todo o layout e onde aparece as imagens q apareça sempre no tamanho certo nas paginas msm q seja feito o upload em outros tamanho".
    In the screenshot, the list item image looks okay (square), but maybe they mean the product detail page?
    In the previous turn `products/show.php` had `style="max-height: 500px; object-fit: contain;"`. This can result in jumping layout if height varies.
    I will enforce a square aspect ratio for the main gallery image too.
    */
    object-fit: contain;
}

.gallery-thumbs img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
}

.gallery-thumbs img:hover,
.gallery-thumbs img.active {
    border-color: var(--primary);
}

.product-info {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: none;
}

.product-name {
    font-size: 14px;
    color: #333;
    font-weight: 300;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-rating {
    font-size: 0.9rem;
    color: #fbbf24;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.product-rating span {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 0;
}

.price {
    font-size: 24px;
    font-weight: 400;
    color: #333;
}

.price-old {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.product-seller {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.add-to-cart {
    border-radius: 0;
    width: 100%;
    padding: 1rem;
    opacity: 0;
    transform: translateY(100%);
    position: absolute;
    bottom: 0;
    transition: var(--transition);
}

.product-card:hover .add-to-cart {
    opacity: 1;
    transform: translateY(0);
}

/* Badge */
.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
}

.badge-digital {
    background: rgba(16, 185, 129, 0.9);
    color: white;
    backdrop-filter: blur(4px);
}

/* ========================================
   CTA SECTION
   ======================================== */
.cta-section {
    background: var(--bg-secondary);
    padding: 5rem 0;
    text-align: center;
    margin-top: 4rem;
    border-top: 1px solid var(--border-color);
}

.cta-content h2 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.cta-content p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-left: 4px solid var(--success);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border-left: 4px solid var(--error);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-left: 4px solid var(--warning);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
    border-left: 4px solid var(--info);
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.footer-section p,
.footer-section ul {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--primary);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border-radius: 50%;
    color: var(--text-primary);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
        height: auto;
        padding: 1rem 0;
    }

    .search-form {
        order: 3;
        width: 100%;
        max-width: none;
    }

    .nav {
        gap: 0.75rem;
    }

    .nav-link span {
        display: none;
    }

    .hero {
        padding: 4rem 1rem;
        border-radius: 0 0 1.5rem 1.5rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .product-card:hover .add-to-cart {
        position: static;
        transform: none;
        opacity: 1;
    }

    .add-to-cart {
        position: static;
        opacity: 1;
        transform: none;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
}

/* ========================================
   AUTH PAGES (LOGIN / REGISTER)
   ======================================== */
.auth-page {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
    padding: 2rem 1rem;
}

[data-theme="dark"] .auth-page {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}

.auth-container {
    width: 100%;
    max-width: 450px;
}

/* Register page is wider */
.auth-container-lg {
    max-width: 550px;
}

.auth-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
    padding: 2.5rem;
    color: var(--text-primary);
    transition: var(--transition);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    color: var(--primary);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    transition: var(--transition);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.auth-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

/* Specific adjustment for login options */
.form-options .checkbox {
    margin-bottom: 0;
}

.checkbox input {
    margin-top: 0.25rem;
    cursor: pointer;
    accent-color: var(--primary);
}

.checkbox span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.link:hover {
    text-decoration: underline;
    color: var(--primary-dark);
}

.btn-block {
    width: 100%;
}

.btn-lg {
    padding: 1rem;
    font-size: 1.1rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.auth-footer p {
    color: var(--text-secondary);
    margin: 0;
}

/* Account Type Selector (Register) */
.account-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.type-option {
    cursor: pointer;
}

.type-option input {
    display: none;
}

.type-card {
    padding: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    text-align: center;
    transition: var(--transition);
    background: var(--bg-secondary);
}

.type-option input:checked+.type-card {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

[data-theme="dark"] .type-option input:checked+.type-card {
    background: rgba(99, 102, 241, 0.15);
}

.type-card i {
    font-size: 2rem;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
    display: block;
    transition: var(--transition);
}

.type-option input:checked+.type-card i {
    color: var(--primary);
}

.type-card strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-weight: 600;
}

.type-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}