/* ==========================================================================
   WooCommerce Styles - DIY Beyond 3D Theme
   Optimized for compact, user-friendly product display
   ========================================================================== */

/* ==========================================================================
   Shop Page Layout
   ========================================================================== */

.woocommerce-page .site-main {
    padding-top: calc(72px + var(--space-8));
    padding-bottom: var(--space-16);
}

/* Shop Header */
.woocommerce-products-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--surface-border);
}

.woocommerce-products-header__title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
}

/* Result Count & Ordering */
.woocommerce-result-count,
.woocommerce-ordering {
    margin-bottom: var(--space-6);
}

.woocommerce-result-count {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.woocommerce-ordering select {
    padding: var(--space-2) var(--space-4);
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* ==========================================================================
   Product Grid - COMPACT VERSION
   Key fix: Smaller cards for better overview
   ========================================================================== */

ul.products {
    display: grid;
    /* Mobile: 2 columns, min 140px */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Tablet: 3 columns */
@media (min-width: 640px) {
    ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

/* Desktop: 4 columns */
@media (min-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }
}

/* Large Desktop: 5 columns for maximum density */
@media (min-width: 1440px) {
    ul.products {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================================================
   Product Card - COMPACT & CLEAN
   Gestalt: Proximity & Similarity principles
   ========================================================================== */

ul.products li.product {
    margin: 0;
    padding: 0;
}

/* Card Container - using our custom product cards */
.product-card,
ul.products li.product .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Override default card styles for compact layout */
.product-card .card__image,
ul.products .card__image {
    /* Landscape ratio - thinner cards */
    aspect-ratio: 4 / 3;
}

/* Reduced padding for compact cards */
.product-card .card__content,
ul.products .card__content {
    padding: var(--space-3);
    flex: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .product-card .card__content,
    ul.products .card__content {
        padding: var(--space-4);
    }
}

/* Category - smaller text */
.product-card .card__category,
ul.products .card__category {
    font-size: 0.65rem;
    margin-bottom: var(--space-1);
    opacity: 0.8;
}

/* Title - constrained height */
.product-card .card__title,
ul.products .card__title {
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-2);
    /* Limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 640px) {
    .product-card .card__title,
    ul.products .card__title {
        font-size: var(--text-base);
    }
}

/* Meta section - price & badge */
.product-card .card__meta,
ul.products .card__meta {
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--surface-border);
}

/* Price - prominent */
.product-card .card__price,
ul.products .card__price {
    font-size: var(--text-base);
    font-weight: 700;
}

@media (min-width: 640px) {
    .product-card .card__price,
    ul.products .card__price {
        font-size: var(--text-lg);
    }
}

/* Badge - smaller */
.product-card .badge,
ul.products .badge {
    font-size: 0.6rem;
    padding: 2px 6px;
}

/* ==========================================================================
   Product Card Hover States
   Fitts's Law: Clear interactive feedback
   ========================================================================== */

.product-card:hover,
ul.products .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.15);
}

/* Quick view overlay on hover - optional enhancement */
.product-card .card__image::after,
ul.products .card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.product-card:hover .card__image::after,
ul.products .card:hover .card__image::after {
    opacity: 1;
}

/* ==========================================================================
   Featured Products Section (Homepage)
   ========================================================================== */

.featured-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .featured-products__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .featured-products__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }
}

/* ==========================================================================
   Single Product Page
   ========================================================================== */

.single-product .site-main {
    padding-top: calc(72px + var(--space-8));
}

.single-product .product {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .single-product .product {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }
}

/* Product Gallery */
.woocommerce-product-gallery {
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
}

/* Product Summary */
.summary.entry-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.summary .product_title {
    font-size: var(--text-2xl);
    margin: 0;
}

.summary .price {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-primary-500);
}

.summary .price del {
    font-size: var(--text-lg);
    color: var(--text-muted);
    margin-right: var(--space-2);
}

.summary .woocommerce-product-details__short-description {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Add to Cart Button */
.summary .single_add_to_cart_button {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-primary-500);
    color: white;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.summary .single_add_to_cart_button:hover {
    background-color: var(--color-primary-600);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* Product Meta */
.product_meta {
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-border);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.product_meta > span {
    display: block;
    margin-bottom: var(--space-2);
}

.product_meta a {
    color: var(--color-primary-500);
    text-decoration: none;
}

/* ==========================================================================
   Product Tabs
   ========================================================================== */

.woocommerce-tabs {
    margin-top: var(--space-12);
}

.woocommerce-tabs ul.tabs {
    display: flex;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    border-bottom: 1px solid var(--surface-border);
}

.woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--space-3) var(--space-5);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.woocommerce-tabs ul.tabs li a:hover {
    color: var(--text-primary);
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
}

.woocommerce-tabs .panel {
    padding: var(--space-6);
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   Related Products
   ========================================================================== */

.related.products,
.upsells.products {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    border-top: 1px solid var(--surface-border);
}

.related.products > h2,
.upsells.products > h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-8);
}

/* ==========================================================================
   Cart Page
   ========================================================================== */

.woocommerce-cart-form {
    margin-bottom: var(--space-8);
}

.woocommerce-cart-form table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-cart-form th,
.woocommerce-cart-form td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--surface-border);
    text-align: left;
}

.woocommerce-cart-form th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}

.woocommerce-cart-form .product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.woocommerce-cart-form .product-name a {
    color: var(--text-primary);
    text-decoration: none;
}

.woocommerce-cart-form .product-name a:hover {
    color: var(--color-primary-500);
}

/* ==========================================================================
   Cart Totals
   ========================================================================== */

.cart_totals {
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.cart_totals h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

.cart_totals table {
    width: 100%;
}

.cart_totals th,
.cart_totals td {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--surface-border);
}

.cart_totals .order-total th,
.cart_totals .order-total td {
    font-size: var(--text-lg);
    font-weight: 700;
    border-bottom: none;
}

.cart_totals .order-total .amount {
    color: var(--color-primary-500);
}

/* Checkout Button */
.wc-proceed-to-checkout .checkout-button {
    display: block;
    width: 100%;
    padding: var(--space-4);
    background-color: var(--color-primary-500);
    color: white;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.wc-proceed-to-checkout .checkout-button:hover {
    background-color: var(--color-primary-600);
}

/* ==========================================================================
   Messages & Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid;
}

.woocommerce-message {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.woocommerce-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: var(--color-info);
    color: var(--color-info);
}

.woocommerce-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

.woocommerce-error li {
    list-style: none;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.woocommerce-breadcrumb {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.woocommerce-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--color-primary-500);
}

/* ==========================================================================
   Empty States
   ========================================================================== */

.woocommerce-info.wc-empty-cart-message,
.woocommerce .cart-empty {
    text-align: center;
    padding: var(--space-16);
}

.return-to-shop .button {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-primary-500);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.return-to-shop .button:hover {
    background-color: var(--color-primary-600);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.woocommerce-pagination {
    margin-top: var(--space-12);
    text-align: center;
}

.woocommerce-pagination ul {
    display: inline-flex;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.woocommerce-pagination ul li a:hover {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

.woocommerce-pagination ul li span.current {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: white;
}

/* ==========================================================================
   My Account Page
   ========================================================================== */

.woocommerce-MyAccount-navigation {
    margin-bottom: var(--space-8);
}

.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--space-2) var(--space-4);
    background-color: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
}

@media (min-width: 768px) {
    .woocommerce-MyAccount-navigation {
        float: left;
        width: 200px;
        margin-right: var(--space-8);
        margin-bottom: 0;
    }

    .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }

    .woocommerce-MyAccount-content {
        overflow: hidden;
    }
}

/* ==========================================================================
   Login / Register Forms
   ========================================================================== */

.woocommerce #customer_login {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .woocommerce #customer_login {
        grid-template-columns: 1fr 1fr;
    }
}

.woocommerce #customer_login .u-column1,
.woocommerce #customer_login .u-column2,
.woocommerce #customer_login .col-1,
.woocommerce #customer_login .col-2 {
    width: 100% !important;
    float: none !important;
    padding: var(--space-6);
    background-color: var(--color-neutral-900);
    border: 1px solid var(--color-neutral-800);
    border-radius: var(--radius-lg);
}

.woocommerce #customer_login h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-neutral-50);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-primary-500);
}

.woocommerce .woocommerce-form-login,
.woocommerce .woocommerce-form-register {
    margin: 0;
}

.woocommerce .woocommerce-form-row,
.woocommerce .form-row {
    margin-bottom: var(--space-4);
    padding: 0 !important;
}

.woocommerce .woocommerce-form-row label,
.woocommerce .form-row label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-neutral-300);
    line-height: 1.5;
}

.woocommerce .woocommerce-form-row label .required,
.woocommerce .form-row label .required {
    color: var(--color-primary-500);
}

.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"] {
    width: 100% !important;
    padding: var(--space-3) var(--space-4) !important;
    background-color: var(--color-neutral-900) !important;
    border: 1px solid var(--color-neutral-700) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-neutral-50) !important;
    font-size: var(--text-base) !important;
    transition: all var(--transition-fast);
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus {
    outline: none !important;
    border-color: var(--color-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15) !important;
}

.woocommerce .woocommerce-form-login__rememberme,
.woocommerce .form-row.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

.woocommerce input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--color-primary-500);
}

.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.woocommerce .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-6) !important;
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-neutral-950) !important;
    font-family: var(--font-display);
    font-size: var(--text-sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-base);
}

.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.3);
}

.woocommerce .woocommerce-LostPassword {
    margin-top: var(--space-4);
}

.woocommerce .woocommerce-LostPassword a {
    font-size: var(--text-sm);
    color: var(--color-primary-400);
    text-decoration: none;
}

.woocommerce .woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

/* Privacy Policy Text */
.woocommerce .woocommerce-privacy-policy-text {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background-color: var(--color-neutral-950);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-neutral-400);
}

.woocommerce .woocommerce-privacy-policy-text p {
    margin: 0;
    color: var(--color-neutral-400);
}

.woocommerce .woocommerce-privacy-policy-text a {
    color: var(--color-primary-400);
}

/* ==========================================================================
   My Account Dashboard
   ========================================================================== */

.woocommerce-MyAccount-content p {
    color: var(--color-neutral-300);
    line-height: 1.7;
}

.woocommerce-MyAccount-content a {
    color: var(--color-primary-400);
}

.woocommerce-MyAccount-content a:hover {
    color: var(--color-primary-300);
}

/* Orders Table */
.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-4);
}

.woocommerce-orders-table th,
.woocommerce-orders-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-800);
}

.woocommerce-orders-table th {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.woocommerce-orders-table td {
    font-size: var(--text-sm);
    color: var(--color-neutral-300);
}

.woocommerce-orders-table .woocommerce-button {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-neutral-800);
    border-radius: var(--radius-md);
    color: var(--color-neutral-200);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.woocommerce-orders-table .woocommerce-button:hover {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-950);
}

/* Downloads Table */
.woocommerce-table--order-downloads {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-table--order-downloads th,
.woocommerce-table--order-downloads td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-neutral-800);
}

/* Edit Account Form */
.woocommerce-EditAccountForm fieldset {
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    background-color: var(--color-neutral-900);
    border: 1px solid var(--color-neutral-800);
    border-radius: var(--radius-lg);
}

.woocommerce-EditAccountForm legend {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-neutral-50);
    padding: 0 var(--space-2);
}

/* No Orders Message */
.woocommerce-message--info,
.woocommerce-info {
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-neutral-900);
    border: 1px solid var(--color-neutral-700);
    border-left: 4px solid var(--color-primary-500);
    border-radius: var(--radius-md);
    color: var(--color-neutral-300);
    font-size: var(--text-sm);
}

/* ==========================================================================
   Account Forms - Simplified UX (Login Primary, Register Secondary)
   ========================================================================== */

.account-forms {
    max-width: 480px;
    margin: 0 auto;
}

.account-forms__login,
.account-forms__register {
    padding: var(--space-8);
    background-color: var(--color-neutral-900);
    border: 1px solid var(--color-neutral-800);
    border-radius: var(--radius-xl);
}

.account-forms h2 {
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-neutral-50);
    margin: 0 0 var(--space-2);
    text-align: center;
}

.account-forms__subtitle {
    text-align: center;
    color: var(--color-neutral-400);
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
    line-height: 1.5;
}

/* Form Row Flex - Remember Me + Forgot Password */
.account-forms .form-row-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.account-forms .woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    margin: 0 !important;
}

.account-forms .woocommerce-form-login__rememberme span {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}

.account-forms .woocommerce-LostPassword {
    margin: 0 !important;
}

.account-forms .woocommerce-LostPassword a {
    font-size: var(--text-sm);
    color: var(--color-primary-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.account-forms .woocommerce-LostPassword a:hover {
    color: var(--color-primary-300);
    text-decoration: underline;
}

/* Submit Button Full Width */
.account-forms .woocommerce-form-login__submit,
.account-forms .woocommerce-form-register__submit {
    width: 100%;
    padding: var(--space-4) var(--space-6) !important;
    font-size: var(--text-base) !important;
    margin-top: var(--space-2);
}

/* Register CTA - Below Login Form */
.account-forms__register-cta {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-neutral-800);
    text-align: center;
}

.account-forms__register-cta p {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    margin: 0 0 var(--space-3);
}

.account-forms__register-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-400);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.account-forms__register-link:hover {
    color: var(--color-primary-300);
    gap: var(--space-3);
}

.account-forms__register-link svg {
    transition: transform var(--transition-fast);
}

.account-forms__register-link:hover svg {
    transform: translateX(4px);
}

/* Login CTA - Below Register Form */
.account-forms__login-cta {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-neutral-800);
    text-align: center;
}

.account-forms__login-cta p {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    margin: 0 0 var(--space-3);
}

.account-forms__login-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary-400);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.account-forms__login-link:hover {
    color: var(--color-primary-300);
}

.account-forms__login-link svg {
    transition: transform var(--transition-fast);
}

.account-forms__login-link:hover svg {
    transform: translateX(-4px);
}

/* Note text for auto-generated password */
.account-forms__note {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    font-style: italic;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background-color: var(--color-neutral-950);
    border-radius: var(--radius-md);
}

/* Animation for form toggle */
.account-forms__login,
.account-forms__register {
    animation: fadeIn 0.3s ease-out;
}

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