/* Combined Styles - All CSS files merged */

/* ===== styles.css ===== */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Luxury Monochrome Palette */
    --primary-color: #ffffff; /* Pure White */
    --primary-hover: #e5e5e5; /* Light Gray */
    --primary-accent: #f5f5f5; /* Very Light Gray */
    --primary-dark: #cccccc; /* Medium Gray */
    --secondary-color: #999999; /* Muted Gray */
    --accent-color: #666666; /* Dark Gray */

    /* Dark Sophisticated Background System */
    --background-color: #000000; /* Pure Black */
    --surface-color: #0a0a0a; /* Deep Black */
    --surface-elevated: #111111; /* Elevated Black */
    --surface-dark: #050505; /* Darker Black */

    /* Text Hierarchy */
    --text-primary: #ffffff; /* Pure White */
    --text-secondary: #cccccc; /* Light Gray */
    --text-muted: #999999; /* Muted Gray */
    --text-light: #666666; /* Dark Gray */

    /* Border System */
    --border-color: #333333; /* Dark Border */
    --border-light: #222222; /* Light Border */
    --border-dark: #444444; /* Darker Border */

    /* Monochrome Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
    --shadow-primary: 0 0 15px rgba(255, 255, 255, 0.05);

    /* Unified Design System */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Unified simple transitions */
    --transition-all: 0.15s ease;
    --transition-fast: 0.1s ease;
    --transition-normal: 0.15s ease;
    --transition-slow: 0.2s ease;
    --transition-instant: 0s;

    /* Unified hover effect */
    --hover-transform: translateY(-2px);
    --hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* Gold accent for highlights */
:root {
    --accent-gold: #d4af37;
}

/* Base Styles */
body {
    font-family: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans JP', sans-serif;
    background: url('images/fashion-store-background.jpg') center/cover fixed;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    background-attachment: fixed;
}

/* Container */
.complete-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    animation: fadeIn 1s ease-out;
    position: relative;
}

/* Common Layout Classes */
.common-grid {
    display: grid;
    gap: var(--spacing-md);
}

.common-grid-2col {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.common-grid-3col {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.common-grid-4col {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.common-card {
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all var(--transition-all);
    cursor: pointer;
}

.common-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-color);
}

.common-card.selected {
    border-color: white;
    background: rgba(255, 255, 255, 0.05);
}

.common-section {
    margin-bottom: var(--spacing-xl);
}

.common-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.common-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

/* Photo Upload Section */
#photo-upload-section {
    margin-bottom: 48px;
}

/* Item Evaluation Columns - 3 Column Layout for GOOD & BAD */
.item-evaluation-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.evaluation-column {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}

.column-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.evaluation-container {
    min-height: 300px;
}

.evaluation-items-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

.evaluation-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    transition: all var(--transition-all);
}

.evaluation-item:hover {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.evaluation-item-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.evaluation-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 12px;
    text-align: center;
}

.item-good-bad-section {
    margin-bottom: 20px;
}

.good-bad-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    display: block;
}

.good-items {
    border: 2px solid #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.bad-items {
    border: 2px solid #f44336;
    background: rgba(244, 67, 54, 0.1);
    border-radius: 8px;
    padding: 15px;
}

.item-selection-grid {
    display: grid;
    gap: 10px;
}

.item-option {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.item-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.item-option img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
}

.item-option label {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
}

.item-option input[type="checkbox"] {
    margin-right: 10px;
}

/* Gender Switch Styles */
.gender-switch-container {
    margin-bottom: 30px;
    display: block !important;
}

.gender-switch-container.prominent {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 40px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.gender-switch-container.standalone {
    background: var(--surface-color);
    margin: 30px 0;
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

.female-form .gender-switch-container.prominent {
    /* background: linear-gradient(135deg, rgba(184, 160, 106, 0.05) 0%, rgba(184, 160, 106, 0.02) 100%); */
    border: 1px solid rgba(184, 160, 106, 0.15);
}

.gender-switch-container .radio-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    justify-content: center;
}

.gender-switch-container .radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px 30px;
    border: 2px solid var(--border-color);
    border-radius: 30px;
    transition: all 0.2s ease;
    background: var(--surface-color);
    font-weight: 500;
    min-width: 120px;
    justify-content: center;
}

.gender-switch-container .radio-label:hover {
    border-color: var(--primary-color);
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.gender-switch-container input[type="radio"] {
    display: none;
}

.gender-switch-container input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--primary-color);
}

.gender-switch-container input[type="radio"]:checked ~ span {
    color: var(--primary-color);
}

.gender-switch-container .radio-label:has(input[type="radio"]:checked) {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Female form gender switch styles */
.female-form .gender-switch-container .radio-label {
    border-color: #e0e0e0;
    background: #ffffff;
    color: #333333;
}

.female-form .gender-switch-container .radio-label:hover {
    border-color: var(--accent-light-gold);
    background: rgba(233, 30, 99, 0.05);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.15);
}

.female-form .gender-switch-container input[type="radio"]:checked + span {
    color: var(--accent-light-gold);
}

.female-form .gender-switch-container .radio-label:has(input[type="radio"]:checked) {
    /* background: rgba(233, 30, 99, 0.08); */
    border-color: var(--accent-light-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .item-evaluation-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.photo-upload-container {
    margin-top: 32px;
}

.photo-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 200px;
}

.photo-single-upload {
    max-width: 400px;
    margin: 0 auto 40px;
}

.photo-upload-item-single {
    text-align: center;
}

.photo-upload-item-single .photo-upload-box {
    aspect-ratio: 1;
    max-width: 300px;
    margin: 0 auto;
}

.photo-upload-item {
    text-align: center;
}

.photo-type-title {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.photo-upload-box {
    position: relative;
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    aspect-ratio: 4/5;
}

.photo-upload-box:hover {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.photo-input {
    display: none;
}

.photo-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}

.photo-placeholder {
    text-align: center;
    padding: 40px 20px;
}

.upload-icon {
    font-size: 3rem;
    color: var(--accent-gold);
    margin-bottom: 16px;
    font-weight: 200;
    line-height: 1;
}

.photo-placeholder p {
    color: var(--text-secondary);
    margin: 8px 0;
    font-size: 0.9rem;
}

.file-hint {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    opacity: 0.8;
}

.photo-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-upload-box.has-image {
    border-style: solid;
    border-color: var(--accent-gold);
}

.photo-upload-box.has-image .photo-placeholder {
    display: none;
}

.photo-upload-box.drag-over {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
    transform: scale(1.02);
}

/* Change photo button */
.change-photo-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 1px solid var(--accent-gold);
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.change-photo-btn:hover {
    color: black;
    transform: translateY(-2px);
}

body.female-form .photo-upload-box {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e0e0e0;
}

body.female-form .photo-upload-box.drag-over {
    border-color: var(--accent-light-gold);
    background: rgba(184, 160, 106, 0.1);
}

/* Photo Upload Notes */
.photo-upload-notes {
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
}

.photo-upload-notes h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 16px;
    font-weight: 400;
}

.photo-upload-notes ul {
    list-style: none;
    padding: 0;
}

.photo-upload-notes li {
    color: var(--text-secondary);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    font-size: 0.95rem;
}

.photo-upload-notes li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    font-size: 1.2rem;
}

/* Female form specific photo upload styles */
body.female-form .photo-upload-box:hover {
    border-color: var(--accent-light-gold);
    background: rgba(184, 160, 106, 0.05);
}

body.female-form .upload-icon {
    color: var(--accent-light-gold);
}

body.female-form .photo-upload-box.has-image {
    border-color: var(--accent-light-gold);
}

body.female-form .photo-upload-notes {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
}

body.female-form .photo-upload-notes h4 {
    color: #333333;
}

body.female-form .photo-upload-notes li {
    color: #666666;
}

body.female-form .photo-upload-notes li::before {
    color: var(--accent-light-gold);
}

/* Photo Session Note */
.photo-session-note {
    max-width: 600px;
    margin: 0 auto;
}

.photo-session-note .note-content {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
}

.photo-session-note h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.photo-session-note p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.8;
}

.photo-session-note ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.photo-session-note li {
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
    font-size: 0.95rem;
}

.photo-session-note li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    font-size: 1.2rem;
}

.note-highlight {
    color: var(--text-primary) !important;
    font-weight: 400;
    margin-top: 24px !important;
    padding: 16px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.female-form .photo-session-note li::before {
    color: var(--accent-light-gold);
}

.female-form .note-highlight {
    background: rgba(184, 160, 106, 0.1);
    border-color: rgba(184, 160, 106, 0.2);
}

/* Gender transition animation */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.gender-transitioning * {
    transition: all 0.2s ease;
}

/* Gender Selector */
.gender-selector {
    max-width: 500px;
    margin: 0 auto 40px;
    padding: 30px;
    background: var(--surface-elevated);
    border-radius: 20px;
    border: 1px solid var(--border-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gender-title {
    text-align: center;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.gender-toggle-container {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.gender-toggle-container input[type="radio"] {
    display: none;
}

.gender-option {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 50px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 180px;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gender-option:hover {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.gender-toggle-container input[type="radio"]:checked + .gender-option {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

/* Gender icons removed */

.gender-label {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: 1px;
}

/* Form variations based on gender - Female Subtle Luxury Theme */
body.female-form {
    /* Subtle muted gold palette */
    --primary-color: #d4c5a0;    /* Softer beige-gold */
    --primary-hover: #e0d5b8;    /* Lighter beige */
    --accent-gold: #d4c5a0;      /* Softer beige-gold */
    --accent-gold-light: #e8dfc7; /* Very soft champagne */
    --accent-gold-dark: #a08856;  /* Deeper muted gold */
    --accent-pearl: #fdfcfa;     /* Pearl white */
    --accent-cream: #fcf9f3;     /* Soft cream */
    --palace-ivory: #fefdfb;
    --palace-cream: #fcfaf6;
    --palace-champagne: #faf7f0;
    --palace-marble: #f8f8f8;
    --palace-shadow: rgba(201, 169, 97, 0.08);
    --text-dark: #3a3a3a;
    --text-medium: #5a5a5a;
    --text-light: #757575;
    --border-soft: #ede8df;
    --border-ornate: #d9cdb9;    /* Soft gold border */

    /* Subtle gray-tinted theme */
    --background-color: #f5f5f5 !important;
    --surface-color: #f8f8f8 !important;
    --surface-elevated: #fafafa !important;
    --surface-dark: #f0f0f0 !important;
    --text-primary: #3a3a3a !important;
    --text-secondary: #5a5a5a !important;
    --text-muted: #757575 !important;
    --text-light: #909090 !important;
    --border-color: #e8e4dc !important;
    --border-light: #f0ebe3 !important;
    --border-dark: #ded8cc !important;

    /* Subtle shadows with reduced opacity */
    --shadow-sm: 0 2px 4px rgba(201, 169, 97, 0.03) !important;
    --shadow-md: 0 4px 8px rgba(201, 169, 97, 0.04) !important;
    --shadow-lg: 0 8px 16px rgba(201, 169, 97, 0.05) !important;
    --shadow-glow: 0 0 20px rgba(201, 169, 97, 0.06) !important;
    --shadow-primary: 0 0 15px rgba(201, 169, 97, 0.05) !important;

    /* Light accent colors */
    /* --accent-light-gold: #e91e63; */
    --accent-light-gold: #c8b896;  /* Muted champagne */
}

/* Female form luxury background with subtle overlay */
body.female-form {
    position: relative;
    animation: fadeIn 1s ease-out;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Ensure all containers are transparent to show background in female form */
body.female-form .complete-form-container {
    background: transparent;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    animation: fadeIn 1s ease-out;
    position: relative;
}

/* Form sections subtle gray-white with muted accents */
body.female-form .form-section {
    background: rgba(248, 248, 248, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    border-radius: 16px;
    padding: 48px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

body.female-form .section-header {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-soft);
}

/* Form header subtle design */
body.female-form .form-header {
    background: rgba(248, 248, 248, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    padding: 60px 48px;
    text-align: center;
    margin-bottom: 48px;
    border-radius: 16px;
    position: relative;
}

body.female-form .form-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--border-soft) 20%,
        var(--accent-gold-light) 50%,
        var(--border-soft) 80%,
        transparent);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    animation: fadeInDown 0.8s ease-out;
}

/* Remove ornate decorations for clean modern look */
body.female-form .form-header::before,
body.female-form .form-header::after {
    display: none;
}

body.female-form .main-title {
    color: var(--text-dark);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.025);
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    letter-spacing: 2px;
    animation: slideInDown 0.8s ease-out;
    position: relative;
    display: inline-block;
}

body.female-form .main-subtitle {
    color: var(--text-medium);
    animation: fadeInUp 0.8s ease-out 0.2s both;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Remove duplicate form-section styling (already defined above) */

/* Simplify section decorations */
body.female-form .form-section::before,
body.female-form .form-section::after {
    display: none;
}

body.female-form .section-number {
    color: #333333;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    font-weight: 500;
}

body.female-form .section-title {
    color: var(--text-dark);
}


/* Text and form elements */
body.female-form label,
body.female-form .form-group label,
body.female-form .group-label,
body.female-form .sub-label,
body.female-form p,
body.female-form span,
body.female-form h1,
body.female-form h2,
body.female-form h3,
body.female-form h4,
body.female-form .section-subtitle,
body.female-form .hint,
body.female-form .form-hint,
body.female-form .required {
    color: var(--text-medium) !important;
}

body.female-form .form-input,
body.female-form .form-textarea,
body.female-form select {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--border-soft);
    color: var(--text-dark);
}

body.female-form .form-input:focus,
body.female-form .form-textarea:focus,
body.female-form select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Radio and checkbox options */
body.female-form .radio-option,
body.female-form .checkbox-option {
    background: var(--surface-elevated) !important;
    border-color: var(--border-soft) !important;
}

body.female-form .radio-option:hover,
body.female-form .checkbox-option:hover {
    border-color: var(--accent-gold-light) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Override dark backgrounds */
body.female-form .lifestyle-group,
body.female-form .form-group,
body.female-form .sub-options,
body.female-form .chip-group,
body.female-form .chip-option,
body.female-form .budget-range-option,
body.female-form .budget-card,
body.female-form .style-option,
body.female-form .avoid-option,
body.female-form .brand-tag,
body.female-form .frequency-card,
body.female-form .expectation-card,
body.female-form .daily-card,
body.female-form .weekend-card,
body.female-form .scene-card {
    /* background: var(--palace-ivory) !important; */
    /* border-color: var(--border-soft) !important; */
    color: var(--text-medium) !important;
}

/* Palace-themed image cards */
body.female-form .style-option img,
body.female-form .avoid-option img,
body.female-form .radio-option img,
body.female-form .checkbox-option img {
    border: 2px solid var(--border-soft);
    filter: sepia(0.1) brightness(0.95);
}

body.female-form .style-option:hover img,
body.female-form .avoid-option:hover img,
body.female-form .radio-option:hover img,
body.female-form .checkbox-option:hover img {
    border-color: var(--accent-gold-light);
    filter: sepia(0) brightness(1);
}

body.female-form .radio-option:has(input:checked),
body.female-form .checkbox-option:has(input:checked) {
    border-color: var(--accent-gold);
    border-width: 2px;
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
    transform: scale(1.02);
}

body.female-form .radio-option:has(input:checked) span,
body.female-form .checkbox-option:has(input:checked) span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Gender selector - same dark style for both forms */
body.female-form .gender-selector {
    background: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid #222222 !important;
    padding: 32px;
    margin-bottom: 48px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

body.female-form .gender-title {
    color: #ffffff !important;
    font-weight: 400;
    letter-spacing: 0.5px;
}

body.female-form .gender-option {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.female-form .gender-option:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
}

body.female-form .gender-option .gender-label {
    color: #ffffff !important;
}

body.female-form input[type="radio"]:checked + .gender-option {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: #d4af37 !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2) !important;
}

body.female-form .gender-icon {
    filter: grayscale(1);
    opacity: 0.8;
}

body.female-form input[type="radio"]:checked + .gender-option .gender-icon {
    filter: grayscale(0);
    opacity: 1;
}

/* Submit button with subtle elegance */
body.female-form .submit-btn {
    color: white;
    border: 1px solid var(--accent-gold-dark);
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.075);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

body.female-form .submit-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 6px 16px rgba(201, 169, 97, 0.1);
    transform: translateY(-2px);
}

/* Remove all animations */
body.female-form * {
    animation: none !important;
}

/* Additional overrides for palace theme */
body.female-form .info-input-group {
    background: var(--palace-marble) !important;
    border-color: var(--border-soft) !important;
    box-shadow:
        0 2px 10px rgba(74, 69, 63, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

body.female-form .group-icon {
    color: var(--accent-gold) !important;
}

body.female-form .date-select,
body.female-form .location-select,
body.female-form select,
body.female-form input[type="text"],
body.female-form input[type="email"],
body.female-form input[type="tel"],
body.female-form textarea {
    background: #ffffff !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: inset 0 1px 3px rgba(212, 175, 55, 0.05) !important;
}

body.female-form .date-select:focus,
body.female-form .location-select:focus,
body.female-form select:focus,
body.female-form input[type="text"]:focus,
body.female-form input[type="email"]:focus,
body.female-form input[type="tel"]:focus,
body.female-form textarea:focus {
    border-color: var(--accent-gold) !important;
    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.15),
        inset 0 1px 3px rgba(212, 175, 55, 0.05) !important;
    outline: none !important;
}

body.female-form .style-evaluation-item {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: var(--border-soft) !important;
}

body.female-form .scale-option input[type="radio"] + label {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-light) !important;
}

body.female-form .scale-option input[type="radio"]:checked + label {
    background: rgba(212, 175, 55, 0.2) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-gold) !important;
}

body.female-form .gradient-bar {
    background: linear-gradient(to right, #f0eeeb 0%, var(--accent-gold-light) 100%) !important;
}

body.female-form .weekly-overview-table th {
    background: var(--palace-cream) !important;
    color: var(--text-dark) !important;
}

body.female-form .weekly-overview-table td {
    background: white !important;
    border-color: var(--border-soft) !important;
}

body.female-form .service-option {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: var(--accent-gold-light) !important;
}

body.female-form .service-option:hover {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 8px 24px rgba(184, 160, 106, 0.15) !important;
}

body.female-form .service-header {
    background: rgba(184, 160, 106, 0.05) !important;
    border-bottom-color: var(--accent-gold-light) !important;
}

body.female-form .service-image {
    filter: sepia(0.1) brightness(1.05);
}

body.female-form .brand-section {
    background: transparent !important;
}

body.female-form .brand-category {
    color: var(--text-dark) !important;
    border-color: var(--accent-gold) !important;
}

body.female-form .selected-brand-item {
    background: var(--accent-gold-light) !important;
    color: var(--text-dark) !important;
}

body.female-form .day-option-card input[type="radio"] + label {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--border-soft) !important;
}

body.female-form .day-option-card input[type="radio"]:checked + label {
    background: var(--accent-gold-light) !important;
    border-color: var(--accent-gold) !important;
}

/* Form Header */
.form-header {
    text-align: center;
    padding: 80px 40px;
    background:
        linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(26, 26, 26, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    margin-bottom: 60px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.form-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

.main-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
    animation: slideInDown 0.8s ease-out;
}

.main-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    animation: slideInUp 0.8s ease-out 0.2s both;
}

/* Form Sections */
.form-section {
    background: var(--surface-color);
    padding: calc(var(--spacing-xl) + 16px);
    border-radius: var(--radius-lg);
    margin-bottom: calc(var(--spacing-lg) + 20px);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    animation: fadeInUp 0.3s ease-out;
}

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

.section-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--border-light);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.form-section:hover .section-header::after {
    width: 200px;
}

.section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 300;
    flex-shrink: 0;
    animation: rotateIn 0.6s ease-out;
    transition: all 0.15s ease;
}

.section-number:hover {
    transform: rotate(360deg) scale(1.1);
    box-shadow: var(--shadow-glow);
}

.section-title {
    font-size: 1.75rem;
    font-weight: 300;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 1px;
}

/* Form Groups */
.form-group {
    margin-bottom: 36px;
    animation: fadeIn 0.4s ease-out;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-weight: 400;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.form-group h3 {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 0.5px;
    height: 60px;
}

/* Form Controls */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--border-light);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-primary);
    transition: all 0.15s ease;
    backdrop-filter: blur(10px);
}

/* Address Fields Layout */
.address-fields {
    margin-top: var(--spacing-md);
}

.address-row {
    margin-bottom: var(--spacing-md);
}

.address-row:last-child {
    margin-bottom: 0;
}

.postal-code-group label,
.prefecture-group label,
.city-group label,
.street-group label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.postal-code-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.postal-code-input {
    width: 80px !important;
    text-align: center;
}

.postal-code-separator {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

/* Adjust for female form */
body.female-form .postal-code-group label,
body.female-form .prefecture-group label,
body.female-form .city-group label,
body.female-form .street-group label {
    color: var(--text-dark-secondary);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.form-textarea {
    min-height: 140px;
    resize: vertical;
}

/* Select styling fix */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 48px;
}

/* Date Selector */
.date-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.date-selector select {
    flex: 1;
    min-width: 120px;
    background: var(--surface-elevated);
    color: var(--text-primary);
    border: 2px solid var(--border-light);
}

.date-selector select:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}

.date-selector select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.date-selector select option {
    background: var(--surface-elevated);
    color: var(--text-primary);
}

/* Age Display */
.age-display {
    display: inline-block;
    margin-left: 20px;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 500;
    padding: 8px 16px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    transition: all 0.15s ease;
}

.age-display:empty {
    display: none;
}

/* Enhanced Basic Information UI */
.info-input-groups {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.info-input-group {
    display: flex;
    gap: 24px;
    background: var(--surface-elevated);
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    transition: all 0.15s ease;
}

.info-input-group:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

.group-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-primary);
}

.group-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.group-content {
    flex: 1;
}

.group-label {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.sub-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 300;
}

/* Enhanced Date Selector */
.enhanced-date-selector {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.date-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-select {
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.15s ease;
    cursor: pointer;
}

.year-select {
    width: 120px;
}

.month-select,
.day-select {
    width: 80px;
}

.date-select:hover {
    border-color: var(--primary-color);
}

.date-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.date-separator {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.age-display-enhanced {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 500;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    transition: all 0.15s ease;
}

.age-display-enhanced:empty {
    display: none;
}

/* Enhanced Postal Code Input */
.postal-input-group {
    margin-bottom: 24px;
}

.postal-code-container-enhanced {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.postal-input {
    flex: 1;
    max-width: 200px;
}

.address-lookup-btn-enhanced {
    background: var(--primary-color);
    color: var(--bg-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.address-lookup-btn-enhanced:hover {
    background: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.address-lookup-btn-enhanced svg {
    width: 16px;
    height: 16px;
}

.form-hint-enhanced {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Address Details Grid */
.address-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.address-field {
    display: flex;
    flex-direction: column;
}

.address-field.full-width {
    grid-column: 1 / -1;
}

.address-input {
    width: 100%;
}

/* Enhanced Phone Input */
.phone-input-enhanced {
    max-width: 300px;
}

/* Responsive Design for Basic Info */
@media (max-width: 768px) {
    .info-input-group {
        flex-direction: column;
        gap: 16px;
    }

    .group-icon {
        width: 40px;
        height: 40px;
    }

    .enhanced-date-selector {
        flex-direction: column;
        align-items: flex-start;
    }

    .age-display-enhanced {
        margin-left: 0;
        margin-top: 12px;
    }

    .address-details-grid {
        grid-template-columns: 1fr;
    }

    .postal-code-container-enhanced {
        flex-direction: column;
    }

    .postal-input {
        max-width: 100%;
    }
}

/* Item Evaluation Cards */
.item-evaluation-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.15s ease;
}

.item-evaluation-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.03);
}

.item-eval-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.item-eval-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.item-eval-image:hover {
    transform: scale(1.05);
}

/* Multiple Style Evaluation Sections */
.style-evaluation-section {
    background: var(--surface-elevated);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    border: 1px solid var(--border-light);
}

.style-evaluation-title {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 24px;
    text-align: center;
    letter-spacing: 1px;
}

.style-evaluation-content {
    margin-top: 24px;
}

.style-items-evaluation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.item-evaluation-card-enhanced {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.15s ease;
}

.item-evaluation-card-enhanced:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.item-evaluation-card-enhanced .item-eval-image {
    margin: 0 auto 16px;
    display: block;
}

.item-evaluation-card-enhanced .item-eval-name {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* Category Evaluation Sections */
.category-evaluation-section {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.02);
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.category-title {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 1px;
}

.category-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

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

.item-eval-name {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
}

.good-bad-selection {
    display: flex;
    gap: 20px;
}

.good-bad-option {
    flex: 1;
    position: relative;
}

.good-bad-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.good-bad-option span {
    display: block;
    padding: 12px 20px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.good-label {
    color: #4ade80;
}

.bad-label {
    color: #f87171;
}

.good-bad-option input:checked + .good-label {
    background: rgba(74, 222, 128, 0.1);
    border-color: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
}

.good-bad-option input:checked + .bad-label {
    background: rgba(248, 113, 113, 0.1);
    border-color: #f87171;
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}

.reason-selection {
    background: rgba(255, 255, 255, 0.02);
}

/* Good & Bad Items Grid - New Implementation */
.good-bad-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.good-bad-item {
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-light);
    transition: all 0.15s ease;
}

.good-bad-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.good-bad-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
}

.good-bad-item .item-name {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center;
    color: var(--text-primary);
}

.good-option input:checked + span {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4CAF50;
    color: #4CAF50;
}

.bad-option input:checked + span {
    background: rgba(244, 67, 54, 0.1);
    border-color: #F44336;
    color: #F44336;
}

.evaluation-reasons {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.reason-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.reason-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.reason-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

.reason-options input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    margin-right: 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reason-options input[type="checkbox"]:checked {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    position: relative;
}

.reason-options input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--background-color);
    font-weight: bold;
    font-size: 14px;
}

.reason-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
}

.reason-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.reason-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.reason-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
}

.reason-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.reason-checkbox span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.reason-other-input {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.selected-items-evaluation-grid {
    display: grid;
    gap: 20px;
}

/* Radio Groups */
.radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Basic Knowledge Details */
.basic-knowledge-details {
    margin-top: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    animation: fadeIn 0.3s ease;
}

.basic-knowledge-details .sub-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: block;
}

/* Validation Styles */
.error {
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.error-message {
    display: block;
    color: #ff6b6b;
    font-size: 0.65rem;
    margin-top: 4px;
    font-weight: 500;
}

.group-error {
    margin-top: 8px;
}

.validation-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 48px 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    animation: slideIn 0.3s ease;
    max-width: 400px;
}

.validation-notification.info {
    background-color: rgba(66, 165, 245, 0.95);
    color: #ffffff;
    border-left: 4px solid #1976d2;
}

.validation-notification.success {
    background-color: rgba(76, 175, 80, 0.95);
    color: #ffffff;
    border-left: 4px solid #388e3c;
}

.validation-notification.error {
    background-color: rgba(244, 67, 54, 0.95);
    color: #ffffff;
    border-left: 4px solid #d32f2f;
}

.notification-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-close:hover {
    opacity: 1;
}

.validation-notification.fade-out {
    animation: slideOut 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.radio-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 18px 24px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.radio-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: width 0.6s ease;
}

.radio-option:hover::before {
    width: 100%;
}

.radio-option:hover {
    border-color: var(--accent-gold);
    transform: var(--hover-transform);
    box-shadow: var(--hover-shadow);
}

.radio-option input[type="radio"] {
    margin-right: 16px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.radio-option span {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.radio-option:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

/* Checkbox Groups */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.checkbox-option {
    position: relative;
    display: block;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
    padding: 0;
}

.checkbox-option:hover {
    border-color: var(--accent-gold);
    transform: var(--hover-transform);
    box-shadow: var(--hover-shadow);
}

.checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.checkbox-option img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--surface-dark);
}

.checkbox-option span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
    margin: auto 0;
}

.checkbox-option:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.checkbox-option:has(input:checked) span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Text-only checkbox options */
.checkbox-option.text-only {
    padding: 18px 24px;
}

.checkbox-option.text-only span {
    padding: 0;
}

/* Chip-style checkbox options */
.chip-option {
    /* padding: 16px 24px; */
}

.chip-option span {
    padding: 0;
    font-size: 0.95rem;
}

/* Address Input Styles */
.address-input-group {
    margin-top: 20px;
    padding: 30px;
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.address-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.address-row:last-child {
    margin-bottom: 0;
}

.address-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.postal-code-input {
    display: flex;
    gap: 12px;
    align-items: center;
}

.postal-input {
    max-width: 200px;
}

.btn-address-lookup {
    padding: 14px 24px;
    background: var(--primary-color);
    color: #000;
    border: none;
    border-radius: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-address-lookup:hover {
    background: var(--primary-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.btn-address-lookup:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.location-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.location-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.location-checkbox:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}

.location-checkbox input {
    margin-right: 12px;
}

.location-checkbox:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

.location-details {
    margin-top: 20px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    animation: slideDown 0.4s ease-out;
}

/* Lifestyle Selection - Clean Card Layout */
.lifestyle-group {
    margin-bottom: 40px;
}

.group-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 1px;
}

.lifestyle-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.lifestyle-option-group {
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    transition: all 0.15s ease;
    overflow: hidden;
}

.lifestyle-option-group:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.lifestyle-option-group .checkbox-option {
    padding: 24px;
    background: none;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.lifestyle-option-group .checkbox-option:hover {
    background: rgba(255, 255, 255, 0.02);
    transform: none;
}

.lifestyle-option-group .checkbox-option input[type="checkbox"] {
    margin: 0;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    flex-shrink: 0;
    margin-top: 2px;
}

.lifestyle-option-group .checkbox-option img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--surface-dark);
}

.lifestyle-option-group .checkbox-option span {
    flex: 1;
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.lifestyle-option-group:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.lifestyle-option-group:has(input:checked) .checkbox-option span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Sub Options */
.sub-options {
    padding: 24px;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-light);
    animation: slideDown 0.3s ease-out;
}

.sub-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-weight: 400;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-option {
    position: relative;
    cursor: pointer;
}

.chip-option input {
    position: absolute;
    opacity: 0;
}

.chip-option span {
    display: inline-block;
    padding: 6px 12px;
    /* background: var(--surface-elevated);
    border: 1px solid var(--border-light); */
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    cursor: pointer;
}

.chip-option:hover span {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

.chip-option:has(input:checked) span {
    background: var(--primary-color);
    /* color: #000; */
    border-color: var(--primary-color);
    font-weight: 500;
}

.sub-input {
    margin-top: 16px;
}

/* Weekly Overview Table */
.weekly-overview-table {
    margin-top: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) transparent;
}

.weekly-overview-table::-webkit-scrollbar {
    height: 8px;
}

.weekly-overview-table::-webkit-scrollbar-track {
    background: transparent;
}

.weekly-overview-table::-webkit-scrollbar-thumb {
    background-color: var(--border-light);
    border-radius: 4px;
}

.weekly-overview-table::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

.weekly-style-table {
    width: 100%;
    background: var(--surface-elevated);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    border-collapse: separate;
    border-spacing: 0;
}

.weekly-style-table th,
.weekly-style-table td {
    padding: 16px;
    text-align: center;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.weekly-style-table th:last-child,
.weekly-style-table td:last-child {
    border-right: none;
}

.weekly-style-table tr:last-child td {
    border-bottom: none;
}

.weekly-style-table thead th {
    background: var(--surface-dark);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.weekly-style-table .date-display {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.weekly-style-table .row-label {
    background: var(--surface-dark);
    color: var(--text-primary);
    font-weight: 500;
    text-align: left;
    min-width: 100px;
}

.day-selection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-radio-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.day-radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.day-option-label {
    display: block;
    padding: 8px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
    width: 100%;
    text-align: center;
}

.day-radio-option:hover .day-option-label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.day-radio-option input:checked + .day-option-label {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    font-weight: 500;
}

/* Female form weekly overview enhanced visibility */
.female-form .day-radio-option .day-option-label {
    background: rgba(184, 160, 106, 0.05);
    border: 2px solid rgba(184, 160, 106, 0.2);
    color: var(--text-primary);
    font-weight: 400;
}

.female-form .day-radio-option:hover .day-option-label {
    border-color: var(--accent-light-gold);
    background: rgba(184, 160, 106, 0.1);
    transform: scale(1.05);
}

.female-form .day-radio-option input:checked + .day-option-label {
    background: var(--accent-light-gold);
    color: var(--bg-primary);
    border-color: var(--accent-light-gold);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(184, 160, 106, 0.2);
    transform: scale(1.05);
}

.female-form .weekly-style-table {
    border: 2px solid rgba(184, 160, 106, 0.2);
}

.female-form .weekly-style-table thead th {
    background: rgba(184, 160, 106, 0.1);
    color: var(--accent-light-gold);
}

.female-form .ratio-item.work-ratio .ratio-value {
    color: var(--accent-light-gold);
}

.female-form .ratio-bar-fill {
    background: var(--accent-light-gold);
}

/* Animation for ratio value updates */
.ratio-value.updated {
    animation: pulseUpdate 0.3s ease;
}

@keyframes pulseUpdate {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
    }
    50% {
        transform: scale(1.1);
        text-shadow: 0 0 10px currentColor;
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
    }
}

/* Female form specific ratio enhancements */
.female-form .ratio-item {
    transition: all 0.15s ease;
}

.female-form .rest-ratio .ratio-value {
    color: #FFB6C1;
}

.female-form .no-boundary-ratio .ratio-value {
    color: #FFC0CB;
}

/* Weekly Ratio Display */
.weekly-ratio-display {
    margin-top: 24px;
    padding: 24px;
    background: var(--surface-dark);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

/* Animation for updated values */
.ratio-value.updated {
    animation: pulseUpdate 0.3s ease;
    color: var(--accent-gold);
}

@keyframes pulseUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.ratio-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
}

.ratio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    position: relative;
}

.ratio-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.ratio-value {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.work-ratio .ratio-value {
    color: var(--primary-color);
}

.rest-ratio .ratio-value {
    color: rgba(255, 255, 255, 0.8);
}

.no-boundary-ratio .ratio-value {
    color: rgba(212, 175, 55, 0.7);
}

/* Ratio Progress Bars */
.ratio-bar {
    width: 100px;
    height: 6px;
    background: white;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
    position: relative;
}

.ratio-bar-fill {
    height: 100%;
    background: currentColor;
    transition: width 0.5s ease;
    border-radius: 2px;
}

.work-ratio .ratio-bar-fill {
    background: rgba(212, 175, 55, 0.6);
}

.rest-ratio .ratio-bar-fill {
    background: rgba(212, 175, 55, 0.6);
}

.no-boundary-ratio .ratio-bar-fill {
    background: rgba(212, 175, 55, 0.6);
}

/* Weekly Coordinate Container */
.weekly-coordinate-container {
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-light);
}

.weekly-overview {
    margin-bottom: 30px;
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}

.weekly-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.weekly-summary {
    padding: 16px;
    background: var(--surface-dark);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.summary-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Daily Schedule Grid */
.daily-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.daily-card {
    background: var(--surface-dark);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
}

.daily-card:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.day-header {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-light);
}

.day-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.day-coordinate-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    min-height: 16px;
}

.day-options {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.day-option-card {
    position: relative;
    cursor: pointer;
    display: block;
}

.day-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.option-content {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.day-option-card:hover .option-content {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(2px);
}

.day-option-card input:checked + .option-content {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.option-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.option-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.day-option-card input:checked + .option-content .option-label {
    color: var(--text-primary);
}

.day-option-card input:checked + .option-content .option-desc {
    color: var(--text-secondary);
}

/* Daily Details Section */
.daily-details-section {
    margin-top: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    animation: slideDown 0.4s ease-out;
}

.daily-details-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.daily-details-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.daily-details-grid {
    display: grid;
    gap: 24px;
}

.daily-detail-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
}

.daily-detail-header {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-light);
}

.daily-detail-day {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.daily-detail-type {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.daily-detail-content {
    padding: 20px;
}

.detail-section {
    margin-bottom: 24px;
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-section-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.detail-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.detail-option-card {
    position: relative;
    cursor: pointer;
}

.detail-option-card input {
    position: absolute;
    opacity: 0;
}

.detail-option-card label {
    display: block;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
}

.detail-option-card:hover label {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.detail-option-card input:checked + label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

.detail-option-card img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    background: var(--surface-dark);
}

.detail-option-card span {
    display: block;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
}

.detail-option-card input:checked + label span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Legacy Weekly Schedule Styles (for compatibility) */
.weekly-schedule {
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-light);
}

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

.schedule-row {
    display: table-row;
    border-bottom: 1px solid var(--border-light);
}

.schedule-row:last-child {
    border-bottom: none;
}

.day-label {
    display: table-cell;
    padding: 20px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 1.1rem;
    width: 150px;
    vertical-align: middle;
    border-right: 1px solid var(--border-light);
}

.schedule-options {
    display: table-cell;
    padding: 20px;
    vertical-align: middle;
}

.schedule-options-inner {
    display: flex;
    gap: 20px;
    align-items: center;
}

.schedule-radio {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px 24px;
    background: var(--surface-dark);
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.15s ease;
}

.schedule-radio:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.schedule-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.schedule-radio input[type="radio"] + span {
    position: relative;
    padding-left: 30px;
    color: var(--text-secondary);
}

.schedule-radio input[type="radio"] + span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background: var(--surface-color);
    transition: all 0.15s ease;
}

.schedule-radio input[type="radio"]:checked + span::before {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.schedule-radio input[type="radio"]:checked + span::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}

.schedule-radio input[type="radio"]:checked + span {
    color: var(--text-primary);
}

.schedule-radio input[type="radio"]:checked ~ .schedule-radio {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

/* Scene Categories */
.scene-category {
    margin-bottom: 40px;
}

.scene-category-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 1px;
}

.scene-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.scene-card {
    position: relative;
    cursor: pointer;
}

.scene-card input {
    position: absolute;
    opacity: 0;
}

.scene-card label {
    display: block;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
}

.scene-card:hover label {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.scene-card input:checked + label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

/* Scene card with "Other" text input */
.scene-card-other {
    cursor: default;
}

.scene-card-other label {
    padding: 24px;
}

.scene-card-other span {
    display: block;
    font-weight: 500;
    margin-bottom: 12px;
}

.scene-card-other .scene-other-input {
    width: 100%;
    margin-top: 12px;
}

.scene-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: var(--border-dark);
}

.scene-card span {
    display: block;
    padding: 16px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
}

.scene-card input:checked + label span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Dress Regulation Grid */
.dress-regulation-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.dress-regulation-card {
    position: relative;
    cursor: pointer;
}

.dress-regulation-card input {
    position: absolute;
    opacity: 0;
}

.dress-regulation-card label {
    display: block;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
    height: 100%;
}

.dress-regulation-card:hover label {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.dress-regulation-card input:checked + label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.regulation-image {
    position: relative;
    overflow: hidden;
}

.regulation-image img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: var(--border-dark);
    transition: transform 0.3s ease;
}

.dress-regulation-card:hover .regulation-image img {
    transform: scale(1.05);
}

.regulation-content {
    padding: 10px;
}

.regulation-title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: block;
    letter-spacing: 0.5px;
}

.regulation-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
    display: block;
}


.dress-regulation-card input:checked + label .regulation-title {
    color: var(--primary-color);
}

.dress-regulation-card input:checked + label .regulation-desc {
    color: var(--text-primary);
}


/* Scene Frequency */
.scene-frequency-grid {
    display: grid;
    gap: 24px;
}

.scene-item {
    background: var(--surface-elevated);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: all 0.15s ease;
}

.scene-item:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.scene-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.scene-item-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.scene-item:hover .scene-item-image {
    transform: scale(1.05);
}

.scene-checkbox {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    cursor: pointer;
    color: var(--text-primary);
    flex: 1;
}

.scene-checkbox input {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.frequency-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.frequency-selector .frequency-card {
    position: relative;
    cursor: pointer;
}

.frequency-selector input {
    position: absolute;
    opacity: 0;
}

.frequency-selector label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 20px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    transition: all 0.15s ease;
    text-align: center;
    height: 100%;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.frequency-selector label:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.03);
}

.frequency-selector input:checked + label {
    border-color: white;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-weight: 500;
}

/* Enhanced Clothing Items Grid */
.clothing-items-enhanced-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.clothing-item-enhanced {
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    position: relative;
}

.clothing-item-enhanced:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.clothing-item-checkbox {
    display: block;
    cursor: pointer;
    padding: 20px;
    position: relative;
}

.clothing-item-checkbox::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.clothing-item-enhanced:has(.item-checkbox-main:checked) .clothing-item-checkbox::after {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.clothing-item-enhanced:has(.item-checkbox-main:checked) .clothing-item-checkbox::after {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--background-color);
    font-weight: bold;
}

.item-content-enhanced {
    display: flex;
    align-items: center;
}

.item-image-placeholder {
    width: 80px;
    height: 80px;
    background: var(--surface-dark);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
}

.item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.clothing-item-enhanced:hover .item-image {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.item-name {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 400;
    transition: all 0.15s ease;
    display: block;
    text-align: left;
}

.item-checkbox-main {
    position: absolute;
    opacity: 0;
}

.item-checkbox-main:checked ~ .item-content-enhanced .item-name {
    color: var(--text-primary);
    font-weight: 500;
}

.clothing-item-enhanced:has(.item-checkbox-main:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.clothing-item-enhanced .item-budget-selector {
    display: block !important;
}

/* Female form adjustments */
.female-form .clothing-item-enhanced {
    border-color: var(--border-light-gold);
}

.female-form .clothing-item-enhanced:hover {
    border-color: var(--accent-light-gold);
    box-shadow: 0 4px 20px rgba(201, 169, 97, 0.075);
}

.female-form .clothing-item-enhanced:has(.item-checkbox-main:checked) {
    border-color: var(--accent-gold);
    background: rgba(201, 169, 97, 0.025);
}

.female-form .item-image {
    border-color: var(--border-light-gold);
}

.female-form .clothing-item-checkbox::after {
    border-color: var(--border-light-gold);
}

.female-form .clothing-item-enhanced:has(.item-checkbox-main:checked) .clothing-item-checkbox::after {
    border-color: var(--accent-gold);
}

/* Responsive design for clothing items grid */
@media (max-width: 768px) {
    .clothing-items-enhanced-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .clothing-items-enhanced-grid {
        gap: 16px;
        padding: 16px 0;
    }

    .item-content-enhanced {
        gap: 12px;
    }

    .item-image {
        width: 60px;
        height: 60px;
    }

    .item-name {
        font-size: 1rem;
    }
}

/* Budget Selector Inline */
.item-budget-selector {
    padding: 20px;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-light);
    animation: slideDown 0.3s ease-out;
}

.budget-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-weight: 400;
}

.budget-options-inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.budget-option-inline {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.budget-option-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: width 0.4s ease;
}

.budget-option-inline:hover::before {
    width: 100%;
}

.budget-option-inline:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(2px);
}

.budget-option-inline input {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.budget-option-inline span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
    position: relative;
    z-index: 1;
}

.budget-option-inline:has(input:checked) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.budget-option-inline:has(input:checked) span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Legacy Clothing Items Grid (for existing code compatibility) */
.clothing-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.clothing-item {
    position: relative;
    cursor: pointer;
}

.clothing-item input {
    position: absolute;
    opacity: 0;
}

.item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.15s ease;
    height: 100%;
}

.clothing-item:hover .item-content {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.clothing-item input:checked ~ .item-content {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.clothing-item span {
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
}

.clothing-item input:checked ~ .item-content span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Budget Grid */
.item-budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.budget-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.budget-item label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Style Preference Grid */
.style-preference-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 16px;
}

/* Hide any content until JavaScript loads */
.style-preference-grid:empty {
    background: transparent;
}

/* Pattern Selection Summary */
.pattern-selection-summary {
    margin-top: 40px;
    padding: 24px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 2px solid var(--accent-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.summary-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.pattern-summary-section {
    margin-bottom: 32px;
}

.pattern-summary-section:last-child {
    margin-bottom: 0;
}

.summary-subtitle {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-subtitle::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid currentColor;
}

#goodPatternSummary .summary-subtitle {
    color: #4caf50;
}

#badPatternSummary .summary-subtitle {
    color: #f44336;
}

.selected-patterns-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pattern-reason-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--surface-dark);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.pattern-reason-image {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.pattern-reason-content {
    flex: 1;
}

.pattern-reason-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pattern-reason-selection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reason-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reason-checkbox:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.reason-checkbox input[type="checkbox"] {
    display: none;
}

.reason-checkbox:has(input[type="checkbox"]:checked) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--background-color);
}

.reason-checkbox:has(input[type="checkbox"]:checked) span {
    color: var(--background-color);
}

.style-preference-card {
    position: relative;
}

.style-preference-card input {
    position: absolute;
    opacity: 0;
}

.style-preference-card label {
    display: block;
    background: transparent;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.style-preference-card label:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.style-preference-card input:checked + label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.style-preference-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px 8px 0 0;
    background: transparent;
}

.style-preference-card span {
    font-weight: 400;
    color: var(--text-secondary);
    display: block;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.style-preference-card input:checked + label span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Style Variations Section */
.style-variations {
    margin-top: 40px;
    padding: 30px;
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    animation: slideDown 0.4s ease-out;
}

.variation-header {
    margin-bottom: 24px;
}

.variation-title-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.variation-toggle {
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variation-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color);
}

.toggle-icon {
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.variation-toggle.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

.variation-content {
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    max-height: 1000px;
}

.variation-content.collapsed {
    max-height: 0;
}

.variation-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.variation-card {
    position: relative;
    cursor: pointer;
}

.variation-card input {
    position: absolute;
    opacity: 0;
}

.variation-label {
    display: block;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
    position: relative;
}

.variation-card:hover .variation-label {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.variation-card input:checked + .variation-label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.variation-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    background: var(--surface-dark);
}

.variation-number {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.variation-name {
    display: block;
    padding: 12px 8px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
}

.variation-card input:checked + .variation-label .variation-name {
    color: var(--text-primary);
    font-weight: 500;
}

/* Avoid Items Section */
.avoid-categories {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.avoid-category {
    background: var(--surface-elevated);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--border-light);
}

.avoid-category h4 {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 0.5px;
}

.avoid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.avoid-item {
    position: relative;
    cursor: pointer;
}

.avoid-item input {
    position: absolute;
    opacity: 0;
}

.avoid-item-label {
    display: block;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
}

.avoid-item:hover .avoid-item-label {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.avoid-item input:checked + .avoid-item-label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.avoid-item-label img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--border-dark);
}

.avoid-item-label span {
    display: block;
    padding: 16px;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.avoid-item input:checked + .avoid-item-label span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Brand Selection Section */
.brand-search-section {
    margin-bottom: 40px;
}

.brand-search-container {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.brand-search-input {
    flex: 1;
}

.add-brand-btn {
    padding: 16px 24px;
    background: var(--primary-color);
    color: #000;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.add-brand-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.brand-search-suggestions {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 8px;
}

.brand-suggestion {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--border-light);
}

.brand-suggestion:last-child {
    border-bottom: none;
}

.brand-suggestion:hover {
    background: rgba(255, 255, 255, 0.02);
}

.brand-section {
    margin-bottom: 32px;
}

/* Photo Upload Section */
.photo-upload-section {
    margin-bottom: 60px;
    padding: 40px 0;
}

.photo-upload-section .section-description {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.photo-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 30px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.photo-upload-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.photo-type-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.photo-type-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    max-width: 280px;
    line-height: 1.5;
}

.photo-upload-container {
    position: relative;
    width: 250px;
    min-width: 250px;
}

/* Face Photo Upload Section - Legacy support */
.face-photo-section {
    max-width: 200px;
    margin: 30px auto;
    padding: 80px;
    background: var(--surface-elevated);
    border-radius: 16px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.photo-section-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.photo-section-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.photo-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.photo-preview {
    width: 250px;
    height: 250px;
    min-width: 250px;
    min-height: 250px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--border-light);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

.photo-preview.clickable {
    cursor: pointer;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    position: relative;
    gap: 12px;
    padding: 30px;
    box-sizing: border-box;
}

.photo-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 4px;
}

.photo-placeholder-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
    word-wrap: break-word;
    max-width: 100%;
}

.photo-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

.photo-upload-btn {
    padding: 10px 24px;
    background: var(--surface-accent);
    color: white;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.photo-upload-btn:hover {
    background: var(--surface-accent-hover);
    transform: translateY(-1px);
}

.photo-remove-btn {
    padding: 8px 24px;
    background: rgba(255, 59, 48, 0.05);
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 500;
}

.photo-remove-btn:hover {
    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 59, 48, 0.2);
}

/* Female form adjustments */


.female-form .photo-preview {
    border-color: rgba(184, 160, 106, 0.3);
}


.female-form .face-photo-section {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(184, 160, 106, 0.2);
}

.female-form .photo-preview {
    border-color: rgba(184, 160, 106, 0.3);
}

.female-form .photo-upload-btn {
    background: #c8b896;
}

.female-form .photo-upload-btn:hover {
    background: #d4c5a0;
}

.brand-category {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
}

.brand-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: width 0.4s ease;
}

.brand-tag:hover::before {
    width: 100%;
}

.brand-tag:hover {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.brand-tag.selected {
    background: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
    font-weight: 500;
}

.brand-tag.selected:hover {
    background: var(--primary-hover);
}

/* Brand Search Improvements */
.brand-search-container {
    position: relative;
    margin-bottom: 20px;
}

.brand-search-input {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    transition: all 0.15s ease;
}

.brand-search-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: var(--surface-color);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.brand-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.brand-search-result-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--border-light);
}

.brand-search-result-item:last-child {
    border-bottom: none;
}

.brand-search-result-item:hover {
    background: rgba(212, 175, 55, 0.1);
}

.selected-brands-display {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.selected-brands-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-right: 12px;
}

.selected-brands-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--background-color);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.selected-brand-chip .remove-btn {
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.selected-brand-chip .remove-btn:hover {
    opacity: 1;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.brand-logo .brand-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.brand-logo img[style*="display: none"] + .brand-initial {
    position: static;
    transform: none;
    z-index: 1;
}

.brand-tag.selected .brand-logo {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

.brand-tag.selected .brand-logo img {
    opacity: 1;
}

/* Ensure brand logos are properly sized in selected chips */
.selected-brand-chip .brand-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Selected Brands Display */
.selected-brands {
    margin-top: 30px;
    padding: 24px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.selected-brands-label {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.selected-brands-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.no-brands-message {
    color: var(--text-muted);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

.selected-brand-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--primary-color);
    color: #000;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.remove-brand {
    background: none;
    border: none;
    color: #000;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    transition: opacity 0.2s ease;
}

.remove-brand:hover {
    opacity: 0.7;
}

/* Item Evaluation Placeholder */
.item-evaluation-placeholder {
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    padding: 40px;
    text-align: center;
}

.item-evaluation-placeholder p {
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

/* Style Items Section */
.style-items-section {
    margin-top: 40px;
    padding: 30px;
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.section-header-items {
    text-align: center;
    margin-bottom: 30px;
}

.style-section-title {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.style-section-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.style-items-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.item-selection-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
}

.item-selection-label {
    display: block;
    cursor: pointer;
}

.item-checkbox {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.item-card-content {
    position: relative;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
}

.item-card-content:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.item-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--surface-dark);
    transition: transform 0.3s ease;
}

.item-card-content:hover .item-card-image {
    transform: scale(1.05);
}

.item-card-name {
    padding: 16px;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

.item-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.selection-indicator {
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    letter-spacing: 1px;
}

.item-checkbox:checked ~ .item-card-content {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.item-checkbox:checked ~ .item-card-content .item-card-overlay {
    opacity: 1;
}

.item-checkbox:checked ~ .item-card-content .item-card-name {
    color: var(--text-primary);
    font-weight: 500;
}

.item-checkbox:disabled ~ .item-card-content {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Weekend Activities */
.activity-category {
    margin-bottom: 40px;
}

.category-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: 1px;
}

.weekend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.weekday-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .weekend-grid,
    .weekday-grid {
        grid-template-columns: 1fr;
    }
}

.weekend-card,
.weekday-card {
    position: relative;
    cursor: pointer;
}

.weekend-card input,
.weekday-card input {
    position: absolute;
    opacity: 0;
}

.weekend-card label,
.weekday-card label {
    display: block;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
}

.weekend-card:hover label,
.weekday-card:hover label {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.weekend-card input:checked + label,
.weekday-card input:checked + label {
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.02);
}

.weekend-card img,
.weekday-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: var(--border-dark);
}

.weekend-card span,
.weekday-card span {
    display: block;
    padding: 10px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
}

.weekend-card input:checked + label span,
.weekday-card input:checked + label span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Weekday card sub-options */
.weekday-card .sub-options {
    padding: 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    margin-top: 12px;
    transition: all var(--transition-all);
}

.weekday-card .sub-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
}

.weekday-card .chip-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.weekday-card .chip-option {
    display: grid;
}

/* Smaller chip options specifically for weekday sub-options */
.weekday-card .chip-option span {
    /* padding: 5px 10px; */
    font-size: 0.75rem;
    border-radius: 16px;
}

.weekday-card .chip-option input {
    position: absolute;
    opacity: 0;
}

.weekday-card .chip-option span {
    display: block;
    /* padding: 16px; */
    /* background: var(--surface-base);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md); */
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-all);
    text-align: center;
}

.weekday-card .chip-option input:checked + span {
    background: initial;
    /* border-color: var(--primary-color);
    color: var(--text-primary);
    font-weight: 500;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md); */
}

.weekday-card .chip-option:hover span {
    border-color: var(--primary-hover);
    background: var(--surface-elevated);
    transform: translateY(-1px);
}

/* Selected Items Evaluation */
.selected-items-section {
    margin-top: 40px;
    padding: 30px;
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.selected-items-evaluation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* Item Evaluation - Luxury Style */
#itemEvaluationContainer {
    margin-top: 40px;
}

.item-evaluation {
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface-color) 100%);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.15s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.item-evaluation:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.item-content {
    padding: 32px;
}

.item-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
    background: var(--surface-dark);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.item-name {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
}

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

.evaluation-option {
    position: relative;
}

.evaluation-option input {
    position: absolute;
    opacity: 0;
}

.evaluation-option span {
    display: block;
    padding: 18px;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

.evaluation-option span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.evaluation-option:hover span::before {
    transform: translateX(100%);
}

.evaluation-option.good span {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.evaluation-option.bad span {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-color: var(--border-dark);
    color: var(--text-secondary);
}

.evaluation-option input:checked ~ span {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.evaluation-option.good input:checked ~ span {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: #000;
    border-color: var(--primary-color);
}

.evaluation-option.bad input:checked ~ span {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.reason-selection {
    background: var(--surface-dark);
    padding: 24px;
    border-radius: 12px;
    margin-top: 16px;
    animation: slideDown 0.3s ease-out;
}

.good-reasons {
    border-left: 4px solid #27ae60;
}

.bad-reasons {
    border-left: 4px solid #e74c3c;
}

.reason-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-weight: 400;
}

.reason-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.reason-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.reason-checkbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: width 0.4s ease;
}

.reason-checkbox:hover::before {
    width: 100%;
}

.reason-checkbox:hover {
    border-color: var(--primary-color);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.reason-checkbox input {
    margin-right: 12px;
    accent-color: var(--primary-color);
}

.reason-checkbox span {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.reason-checkbox:has(input:checked) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.reason-checkbox:has(input:checked) span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Reason Radio Styles (Single Selection) */
.reason-radio {
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.reason-radio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: width 0.4s ease;
}

.reason-radio:hover::before {
    width: 100%;
}

.reason-radio:hover {
    border-color: var(--primary-color);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.reason-radio input {
    margin-right: 12px;
    accent-color: var(--primary-color);
}

.reason-radio span {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 400;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

.reason-radio:has(input:checked) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.reason-radio:has(input:checked) span {
    color: var(--text-primary);
    font-weight: 500;
}

.reason-other-input {
    margin-top: 16px;
}

/* Service Visualization */
/* Service Usage Request Section - Enhanced Box Format */
.service-visual-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.service-option {
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    position: relative;
}

.service-header {
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-light);
}

.service-question {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.service-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.service-subtitle {
    font-size: 0.55rem;
    color: var(--text-muted);
    font-style: italic;
}

.service-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background: var(--surface-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.service-options {
    padding: 24px;
}

/* Coordination Cards - Enhanced Design */
.coordination-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

/* Two-tier coordination layout */
.coordination-grid.two-tier {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.coordination-row {
    display: grid;
    gap: 20px;
}

.coordination-row.recommended-row {
    grid-template-columns: repeat(2, 1fr);
}

/* Make recommended cards more prominent */
.recommended-row .coordination-card .coordination-content {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-width: 2px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.recommended-row .coordination-card:hover .coordination-content {
    box-shadow: 0 16px 40px rgba(212, 175, 55, 0.25);
}

.coordination-row.other-options {
    grid-template-columns: repeat(4, 1fr);
    opacity: 0.85;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

/* Smaller cards for other options */
.other-options .coordination-content {
    min-height: 140px;
    padding: 24px 16px;
}

.other-options .coordination-content .count {
    font-size: 2.5rem;
}

.other-options .coordination-content .unit {
    font-size: 1rem;
}

.other-options .coordination-content .description {
    font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .coordination-row.recommended-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .coordination-row.other-options {
        grid-template-columns: repeat(2, 1fr);
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .coordination-grid.two-tier {
        gap: 30px;
    }

    .coordination-row.recommended-row,
    .coordination-row.other-options {
        grid-template-columns: 1fr;
    }

    .coordination-row.other-options {
        opacity: 1;
        transform: scale(1);
    }

    .other-options .coordination-content {
        min-height: 180px;
        padding: 32px 24px;
    }

    .other-options .coordination-content .count {
        font-size: 3rem;
    }

    .other-options .coordination-content .unit {
        font-size: 1.1rem;
    }

    .other-options .coordination-content .description {
        font-size: 0.9rem;
    }
}

.coordination-card {
    position: relative;
    display: block;
    cursor: pointer;
    transition: all 0.15s ease;
}

.coordination-card input {
    position: absolute;
    opacity: 0;
}

.coordination-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px solid var(--border-light);
    border-radius: 20px;
    transition: all 0.15s ease;
    text-align: center;
    position: relative;
    min-height: 180px;
    justify-content: center;
}

.coordination-card:hover .coordination-content {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.coordination-card input:checked + .coordination-content {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.2);
}

.coordination-card.recommended .coordination-content {
    border-color: var(--border-color);
    position: relative;
}

.coordination-card.recommended input[type="radio"]:checked ~ .coordination-content {
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
}

.recommended-badge {
    position: absolute;
    top: -12px;
    right: 16px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #F0E68C 100%);
    color: #000;
    padding: 6px 16px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.coordination-image {
  max-width: 250px;
  margin-top: 30px;
}

.coordination-content .count {
    font-size: 3rem;
    font-weight: 200;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -2px;
    transition: all 0.15s ease;
}

.coordination-card:hover .count {
    color: var(--primary-color);
    transform: scale(1.05);
}

.coordination-content .unit {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.coordination-content .description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 250px;
}

/* Urgency Options - Enhanced Design */
.urgency-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 32px;
}

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

.urgency-option {
    position: relative;
    display: block;
    cursor: pointer;
    transition: all 0.15s ease;
}

.urgency-option input {
    position: absolute;
    opacity: 0;
}

.urgency-content {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    transition: all 0.15s ease;
    min-height: 100px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.urgency-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--border-light);
    transition: all 0.15s ease;
}

.urgency-option:hover .urgency-content {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.urgency-option:hover .urgency-content::before {
    background: var(--primary-color);
}

.urgency-option input:checked + .urgency-content {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.15);
}

.urgency-option input:checked + .urgency-content::before {
    width: 6px;
    background: var(--primary-color);
}

.urgency-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
}

.urgency-option:hover .urgency-title,
.urgency-option input:checked + .urgency-content .urgency-title {
    color: var(--primary-color);
}

.urgency-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.urgency-date {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    transition: all 0.15s ease;
}

.urgency-date .form-input {
    background: var(--surface-color);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

/* Wanted Items */
.wanted-items-detail {
    margin-top: 20px;
    padding: 24px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.wanted-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.item-request {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-color);
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

/* Ensure quantity inputs in wanted items are visible and usable */
.wanted-items-grid .quantity-input {
    width: 80px !important;
    padding: 8px 12px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: text !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Style number input spinners */
.wanted-items-grid .quantity-input::-webkit-inner-spin-button,
.wanted-items-grid .quantity-input::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* Firefox */
.wanted-items-grid .quantity-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.wanted-items-grid .quantity-input[type="number"]:hover,
.wanted-items-grid .quantity-input[type="number"]:focus {
    -moz-appearance: number-input;
    appearance: auto;
}

.item-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
}

.item-checkbox input {
    margin-right: 8px;
    accent-color: var(--primary-color);
}

.quantity-input {
    width: 80px;
    padding: 8px 12px;
    background: var(--surface-color);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.15s ease;
}

.quantity-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.quantity-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Investment Preference Section */
.investment-preference-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.investment-category {
    padding: 24px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.investment-category h4 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.investment-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.investment-item {
    display: block;
    cursor: pointer;
}

.investment-item input {
    position: absolute;
    opacity: 0;
}

.investment-item-content {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    transition: all 0.15s ease;
}

.investment-item:hover .investment-item-content {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.investment-item input:checked + .investment-item-content {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.investment-item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.investment-item-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.investment-item-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Age Demographics Grid */
.age-demographics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

/* Revenue Grid */
.revenue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.revenue-option {
    display: block;
    cursor: pointer;
}

.revenue-option input {
    margin-right: 8px;
    accent-color: var(--primary-color);
}

.revenue-option span {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* Form Section Spacing Fix */
.form-section {
    background: var(--surface-color);
    padding: 50px;
    border-radius: 16px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: fadeInUp 0.3s ease-out;
}

.form-section .form-group {
    margin-bottom: 36px;
}

.form-section .form-group:last-child {
    margin-bottom: 0;
}

/* Radio Group Spacing */
.radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.service-option {
    text-align: center;
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: var(--surface-dark);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    margin: 0 auto 24px;
    box-shadow: var(--shadow-glow);
    transition: all 0.15s ease;
}

.service-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

.service-icon svg {
    width: 56px;
    height: 56px;
    stroke: var(--primary-color);
}

.service-question {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.service-description {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.7;
}

.service-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

.conditional-options {
    margin-top: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    animation: slideDown 0.4s ease-out;
}

.sub-question {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-weight: 400;
}

/* Frequency Cards */
.frequency-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 120px;
    text-align: center;
}

.frequency-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

.frequency-option input:checked + .frequency-card {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.frequency-card span {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.95rem;
}

.frequency-option input:checked + .frequency-card span {
    color: var(--text-primary);
    font-weight: 500;
}


/* Expectations Grid */
.expectations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.expectation-card {
    position: relative;
    cursor: pointer;
}

.expectation-card input {
    position: absolute;
    opacity: 0;
}

.expectation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 5px;
    border-radius: 16px;
    transition: all 0.15s ease;
    text-align: center;
    height: 100%;
}

.expectation-content:hover {
    border-color: var(--border-color);
}

.expectation-icon {
    font-size: 40px;
}

.expectation-content span:last-child {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.expectation-card input:checked + .expectation-content span:last-child {
    color: var(--text-primary);
}

/* Travel Options */
/* Travel Destinations - Box Format */
.travel-destinations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
}

.travel-destination-card:hover {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.travel-destination-label {
    display: block;
    cursor: pointer;
}

.travel-destination-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.travel-card-content {
    position: relative;
}

.travel-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--surface-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.travel-name {
    padding: 16px;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    transition: all 0.15s ease;
}

.travel-destination-label input:checked ~ .travel-card-content .travel-name {
    color: var(--text-primary);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.03);
}

.travel-destination-card:has(input:checked) {
    border-color: var(--primary-color);
    /* background: rgba(255, 255, 255, 0.02); */
}

.clothing-specifications {
    padding: 20px;
    border-top: 1px solid var(--border-light);
    animation: slideDown 0.3s ease-out;
}

.spec-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.spec-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spec-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.spec-option:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.04);
}

.spec-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

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

.spec-option:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
}

.spec-option:has(input:checked) span {
    color: var(--text-primary);
}

/* Female form travel styles */
body.female-form .travel-destination-card {
    border-color: var(--accent-gold-light);
}

body.female-form .travel-destination-card:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 8px 24px rgba(184, 160, 106, 0.15);
}

body.female-form .travel-destination-card:has(input:checked) {
    border-color: var(--accent-gold);
    background: rgba(184, 160, 106, 0.05);
}

body.female-form .spec-option:has(input:checked) {
    border-color: var(--accent-gold);
}

.travel-category {
    margin-bottom: 36px;
}

.travel-category-title {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
    letter-spacing: 0.5px;
}

/* Legacy travel styles */
.travel-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.travel-option-group {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.15s ease;
}

.travel-option-group:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.travel-option-group .checkbox-option {
    padding: 0;
    background: none;
    border: none;
    margin-bottom: 16px;
}

.travel-option-group .checkbox-option span {
    font-weight: 400;
}

.travel-option-group .sub-options {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid var(--border-light);
}

/* Revenue Grid */
.revenue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.revenue-option {
    display: flex;
    align-items: center;
    padding: 18px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.revenue-option:hover {
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    transform: translateX(4px);
}

.revenue-option input {
    margin-right: 12px;
}

.revenue-option:has(input:checked) {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

/* Utility Classes */
.required {
    color: var(--primary-color);
    font-weight: normal;
}

.hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: normal;
}

.form-hint {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    line-height: 1.6;
}

.sub-input {
    margin-top: 20px;
}

.sub-options {
    margin-top: 20px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.sub-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-weight: 400;
}

/* Body Concerns Section Styles */
.body-concerns-section {
    margin-bottom: 60px;
}

.body-concerns-category {
    margin-bottom: 40px;
    padding: 25px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.body-concerns-category[data-gender="male"] {
    display: none;
}

.body-concerns-category[data-gender="female"] {
    display: none;
}

/* Show/hide based on selected gender */
body[data-gender="male"] .body-concerns-category[data-gender="male"],
.complete-form-container[data-gender="male"] .body-concerns-category[data-gender="male"] {
    display: block !important;
}

body[data-gender="female"] .body-concerns-category[data-gender="female"],
.complete-form-container[data-gender="female"] .body-concerns-category[data-gender="female"] {
    display: block !important;
}

.category-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-gold);
    margin-bottom: 25px;
    text-align: center;
}

.concern-group {
    margin-bottom: 30px;
}

.concern-group:last-child {
    margin-bottom: 0;
}

.concern-group-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.concern-group .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .concern-group .checkbox-group {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.concern-group .checkbox-option {
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.concern-group .checkbox-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.concern-group .checkbox-option input:checked + span {
    color: var(--accent-gold);
    font-weight: 500;
}

/* Common Concerns Section */
.body-concerns-common {
    margin-top: 50px;
    padding: 30px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.concern-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    line-height: 1.5;
    font-style: italic;
}

/* Body Measurements Styles */
.body-measurements {
    margin-bottom: 30px;
}

.measurement-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.measurement-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measurement-item label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: normal;
}

.measurement-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.measurement-input {
    flex: 1;
    max-width: 120px;
}

.measurement-unit {
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Submit Button */
.form-submit {
    text-align: center;
    margin-top: 100px;
    padding: 80px 0;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.03) 100%);
    position: relative;
}

.form-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%);
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 80px;
    background: linear-gradient(135deg, #D4AF37 0%, #F0E68C 50%, #D4AF37 100%);
    color: #000;
    border: none;
    border-radius: 80px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 320px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}


.btn-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-submit:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 15px 40px rgba(212, 175, 55, 0.4),
        0 10px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    letter-spacing: 4px;
}

.btn-submit:hover::before {
    width: 400px;
    height: 400px;
}

.btn-submit:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 8px 20px rgba(212, 175, 55, 0.3),
        0 5px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Female form button styling */
body.female-form .btn-submit:hover {
    box-shadow:
        0 15px 40px rgba(233, 30, 99, 0.4),
        0 10px 25px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.female-form .btn-submit:active {
    box-shadow:
        0 8px 20px rgba(233, 30, 99, 0.3),
        0 5px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid transparent;
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Completion Screen */
.completion-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.completion-content {
    background: var(--surface-color);
    padding: 80px;
    border-radius: 24px;
    text-align: center;
    max-width: 600px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--primary-color);
    animation: fadeInUp 0.3s ease-out;
}

.completion-icon {
    font-size: 100px;
    color: var(--primary-color);
    margin-bottom: 32px;
    animation: pulse 2s ease-in-out infinite;
}

.completion-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.completion-message {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
}

.completion-info {
    padding: 24px;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

/* Save Notification */
.save-notification {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: var(--primary-color);
    color: #000;
    padding: 20px 32px;
    border-radius: 60px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    font-weight: 600;
    letter-spacing: 1px;
}

.save-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .clothing-items-enhanced-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .complete-form-container {
        padding: 30px 15px;
    }

    .form-header {
        padding: 60px 30px;
    }

    .main-title {
        font-size: 2.2rem;
    }

    .form-section {
        padding: 36px 24px;
    }

    .section-header {
        flex-direction: column;
        text-align: center;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .radio-group,
    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .lifestyle-options {
        grid-template-columns: 1fr;
    }

    .lifestyle-option-group .checkbox-option {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .lifestyle-option-group .checkbox-option img {
        width: 100%;
        height: 120px;
        align-self: center;
    }

    .chip-group {
        justify-content: center;
    }

    .schedule-table {
        display: block;
    }

    .schedule-row {
        display: block;
        border-bottom: 1px solid var(--border-light);
        padding: 15px 0;
    }

    /* Weekly overview table responsive styles */
    .weekly-overview-table {
        margin-top: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .weekly-style-table {
        min-width: 600px;
        font-size: 0.85rem;
    }

    .weekly-style-table th,
    .weekly-style-table td {
        padding: 10px 8px;
        font-size: 0.8rem;
    }

    .date-display {
        font-size: 0.7rem;
    }

    .day-radio-option {
        padding: 4px 8px;
    }

    .day-option-label {
        font-size: 0.75rem;
    }

    /* Weekly ratio display responsive */
    .weekly-ratio-display {
        padding: 16px;
    }

    .ratio-summary {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ratio-item {
        min-width: 80px;
    }

    .ratio-value {
        font-size: 1.2rem;
    }

    .ratio-label {
        font-size: 0.8rem;
    }

    .day-label {
        display: block;
        padding: 0 0 10px 0;
        border-right: none;
        width: auto;
        text-align: left;
        font-size: 1rem;
    }

    .schedule-options {
        display: block;
        padding: 0;
    }

    .schedule-options-inner {
        flex-direction: column;
        gap: 10px;
    }

    .address-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .address-label {
        margin-bottom: 5px;
    }

    .postal-code-input {
        flex-direction: column;
        gap: 10px;
    }

    .btn-address-lookup {
        align-self: flex-start;
    }

    .clothing-items-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }


    .clothing-items-enhanced-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px 0;
    }

    .budget-options-inline {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .item-budget-grid {
        grid-template-columns: 1fr;
    }

    .style-preference-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .variation-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    #itemEvaluationContainer {
        grid-template-columns: 1fr;
    }

    .expectations-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .frequency-selector {
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-submit {
        width: 100%;
        padding: 18px 40px;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.8rem;
    }

    .section-number {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 1.3rem;
    }

    .lifestyle-option-group {
        flex: 0 0 220px;
    }

    .clothing-items-grid,
    .expectations-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .reason-options {
        grid-template-columns: 1fr;
    }

    .style-items-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .style-preference-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .variation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Weekly table mobile styles */
    .weekly-style-table {
        min-width: 500px;
        font-size: 0.75rem;
    }

    .weekly-style-table th,
    .weekly-style-table td {
        padding: 8px 4px;
        font-size: 0.7rem;
    }

    .day-option-label {
        font-size: 0.65rem;
    }

    .ratio-item {
        min-width: 70px;
    }

    .ratio-value {
        font-size: 1rem;
    }

    .ratio-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .style-items-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .item-card-image {
        height: 140px;
    }

    .item-card-name {
        font-size: 0.9rem;
        padding: 12px;
    }
}

/* Style Preference Evaluation - Enhanced UI */
.style-preference-evaluation {
    margin-top: 40px;
}

/* Style Pattern Selection */
.style-pattern-selection {
    margin: 20px 0;
}

.pattern-selections {
    background: var(--background-surface);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    animation: fadeIn 0.5s ease-out;
}

.pattern-label {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-align: center;
}

.style-pattern-container {
    margin-bottom: 40px;
    padding: 25px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.style-pattern-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.style-pattern-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

.style-pattern-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary);
}

.pattern-variations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .pattern-variations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .pattern-variations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pattern-variation-card {
    position: relative;
}

.pattern-variation-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pattern-variation-card label {
    display: block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pattern-variation-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;
}

.pattern-variation-name {
    text-align: center;
    font-size: 0.85rem;
    margin-top: 8px;
    color: var(--text-secondary);
}

.pattern-variation-card input[type="radio"]:checked + label img {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.pattern-variation-card:hover img {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pattern-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.pattern-option {
    position: relative;
    cursor: pointer;
}

.pattern-option input {
    position: absolute;
    opacity: 0;
}

.pattern-option img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.pattern-option span {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.pattern-option:hover img {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.pattern-option input:checked + img {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.pattern-option input:checked ~ span {
    color: var(--text-primary);
    font-weight: 500;
}

.style-evaluation-item {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    transition: all 0.15s ease;
}

.style-evaluation-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.style-evaluation-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.style-evaluation-item h4 {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 1px;
    margin: 0;
    flex: 1;
}

.style-evaluation-image {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 16px;
    background: var(--surface-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.style-evaluation-image:hover {
    transform: scale(1.05);
}

.evaluation-content {
    display: grid;
    gap: 32px;
}

/* Gradient Scale */
.gradient-scale {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 24px;
}

.scale-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.5px;
}

.scale-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 8px;
}

.scale-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.scale-option input {
    display: none;
}

.scale-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 8px;
    transition: all 0.15s ease;
}

.scale-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    transition: all 0.15s ease;
}

.scale-option:hover .scale-number {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.scale-option input:checked ~ .scale-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
    font-weight: 400;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.scale-option input:checked ~ .scale-text {
    color: var(--text-primary);
    font-weight: 500;
}

.gradient-bar {
    height: 8px;
    background: linear-gradient(to right,
        rgba(255, 100, 100, 0.3) 0%,
        rgba(255, 255, 100, 0.3) 50%,
        rgba(100, 255, 100, 0.3) 100%);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.gradient-fill {
    position: absolute;
    height: 100%;
    background: var(--primary-color);
    width: 0;
    transition: width 0.5s ease;
    border-radius: 4px;
}

/* Good/Bad Selection */
.good-bad-selection {
    border-radius: 16px;
    text-align: center;
}

.selection-label {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.good-bad-options {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.good-bad-option {
    flex: 1;
    max-width: 200px;
}

.good-bad-option input {
    display: none;
}

.good-bad-option span {
    display: block;
    padding: 16px 32px;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    letter-spacing: 1px;
}

.good-bad-option:hover span {
    border-color: var(--border-color);
    transform: translateY(-2px);
}

.good-bad-option input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Reason Input */
.reason-input {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 24px;
}

.reason-input label {
    display: block;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.reason-input .form-textarea {
    background: var(--surface-color);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.15s ease;
}

.reason-input .form-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Mobile Responsive for Style Evaluation */
@media (max-width: 768px) {
    .style-evaluation-item {
        padding: 24px 16px;
    }

    .scale-options {
        gap: 4px;
    }

    .scale-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .scale-text {
        font-size: 0.75rem;
    }

    .good-bad-options {
        flex-direction: column;
        gap: 12px;
    }

    .good-bad-option {
        max-width: none;
    }
}

/* Investment Preference Grid - Same UI as Weekend Activities */
.investment-preference-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

/* Employee Toggle UI */
.employee-toggle-container {
    margin-top: 20px;
}

.employee-toggle-wrapper {
    display: flex;
    gap: 0;
    background: var(--surface-elevated);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--border-light);
    margin-bottom: 20px;
}

.employee-toggle-btn {
    flex: 1;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.employee-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.employee-toggle-btn.active {
    background: var(--primary-color);
    color: #000;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.employee-toggle-btn .size-label {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.employee-toggle-btn .size-range {
    font-size: 0.85rem;
    opacity: 0.8;
}

.employee-toggle-btn.active .size-label {
    font-weight: 600;
}

.employee-detail-selector {
    background: var(--surface-elevated);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--border-light);
}

.detail-options {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.detail-options.active {
    display: grid;
}

.detail-option {
    position: relative;
    cursor: pointer;
}

.detail-option input {
    position: absolute;
    opacity: 0;
}

.detail-option span {
    display: block;
    padding: 12px 20px;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    text-align: center;
    transition: all 0.15s ease;
    font-size: 0.95rem;
}

.detail-option:hover span {
    border-color: var(--border-color);
    transform: translateY(-2px);
}

.detail-option input:checked + span {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
}

.investment-item {
    position: relative;
}

.investment-item input {
    position: absolute;
    opacity: 0;
}

.investment-label {
    display: block;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.15s ease;
    cursor: pointer;
}

.investment-item:hover .investment-label {
    border-color: var(--border-color);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.investment-item input:checked + .investment-label {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.02);
}

.investment-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: var(--surface-dark);
}

.investment-label span {
    display: block;
    padding: 16px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    text-align: center;
    transition: color 0.3s ease;
}

.investment-item input:checked + .investment-label span {
    color: var(--text-primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .investment-preference-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .investment-image {
        height: 140px;
    }
}

/* Gift Service Cards */
.gift-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.gift-service-card {
    position: relative;
}

.gift-service-card input {
    position: absolute;
    opacity: 0;
}

.gift-service-card label {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gift-service-card:hover label {
    border-color: var(--border-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.gift-service-card input:checked + label {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
}

.gift-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-color);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.gift-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gift-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gift-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.gift-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.gift-service-card input:checked + label .gift-title {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .gift-service-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gift-service-card label {
        padding: 20px 16px;
    }

    .gift-icon {
        width: 56px;
        height: 56px;
    }
}

/* 2-Tier Coordination Count Styles */
.coordination-tier-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tier-section {
    background: var(--surface-elevated);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.tier-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.main-tier {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
}

.recommended-badge {
    display: inline-block;
    color: var(--background-color);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 8px;
}

/* Season Budget Grid */
.budget-seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.season-budget-item {
    background: var(--surface-elevated);
    padding: 24px;
    border-radius: 16px;
    border: 2px solid var(--border-light);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.season-budget-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-gold) 0%, rgba(212, 175, 55, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.season-budget-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-gold);
}

.season-budget-item:hover::before {
    opacity: 1;
}

.season-budget-item h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Add season icons */
.season-budget-item[data-season="spring"] h4::before {
    content: '🌸';
    font-size: 1.4rem;
}

.season-budget-item[data-season="summer"] h4::before {
    content: '☀️';
    font-size: 1.4rem;
}

.season-budget-item[data-season="autumn"] h4::before {
    content: '🍁';
    font-size: 1.4rem;
}

.season-budget-item[data-season="winter"] h4::before {
    content: '❄️';
    font-size: 1.4rem;
}

.season-budget-item .form-select {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.season-budget-item .form-select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    outline: none;
}

/* Avoid Expense Items */
.avoid-expense-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.avoid-expense-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.avoid-expense-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-gold);
}

.avoid-expense-item input[type="checkbox"] {
    margin-right: 12px;
}

/* Radio Options Vertical */
.radio-options-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    padding: 10px 16px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.radio-option:hover {
    border-color: var(--accent-gold);
    transform: var(--hover-transform);
    box-shadow: var(--hover-shadow);
}

.radio-option input[type="radio"] {
    margin-right: 12px;
    margin-top: 2px;
}

/* Conditional Sections */
.conditional-section {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 8px 8px 0;
}

.sub-question {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.indent {
    margin-left: 20px;
}

/* Service Usage Request Section Styles */
.service-usage-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 32px;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}

.service-usage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-gold) 0%, rgba(212, 175, 55, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-usage-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

.service-usage-card:hover::before {
    opacity: 1;
}

.service-card-icon {
    position: absolute;
    top: 32px;
    right: 40px;
    width: 80px;
    height: 80px;
    opacity: 0.15;
}

.service-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    filter: grayscale(100%);
}

.service-usage-card:hover .service-card-icon {
    opacity: 0.25;
}

.service-usage-card .form-group {
    margin-bottom: 0;
}

.service-section-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.service-usage-card .form-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-left: 44px; /* Align with section number */
}

.service-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent-gold) 0%, rgba(212, 175, 55, 0.8) 100%);
    color: var(--background-color);
    border-radius: 50%;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Service Expectations Grid */
.service-expectations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.expectation-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.expectation-item:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-1px);
}

.expectation-item input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expectation-item input[type="checkbox"]:checked {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    position: relative;
}

.expectation-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--background-color);
    font-weight: bold;
    font-size: 14px;
}

.expectation-item span {
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.expectation-item:hover span {
    color: var(--text-primary);
}

/* Enhanced Radio Options for Service Usage */
.service-radio-group {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.service-radio-option {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.service-radio-option:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.service-radio-option input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.service-radio-option input[type="radio"]:checked {
    border-color: var(--accent-gold);
    position: relative;
}

.service-radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--background-color);
    border-radius: 50%;
}

.service-radio-option span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.service-radio-option:hover span,
.service-radio-option:has(input:checked) span {
    color: var(--text-primary);
}

.service-radio-option:has(input:checked) {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-gold);
}

/* Conditional Sub-sections */
.conditional-section {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.conditional-section .sub-question {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 16px;
    padding-left: 8px;
}

.conditional-section .radio-options-vertical {
    padding-left: 16px;
}

/* Fashion Literacy Grid */
.fashion-literacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.literacy-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.literacy-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-secondary);
}

.literacy-item input[type="checkbox"] {
    margin-right: 12px;
}

/* Travel Section */
.travel-frequency-visual {
    margin: 20px 0;
    border-radius: 16px;
    overflow: hidden;
    height: 200px;
    position: relative;
}

.travel-header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

/* Travel Destinations */
.travel-destinations {
    margin-top: 16px;
}

.destination-item {
    margin-bottom: 16px;
    background: var(--surface-elevated);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
}

.destination-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.destination-header input[type="checkbox"] {
    margin-right: 12px;
}

.destination-details {
    margin-top: 16px;
    padding-left: 28px;
}

.sub-option {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.sub-option input[type="checkbox"] {
    margin-right: 8px;
}

/* Updated Scene Selection UI (without checkboxes) */
.scene-frequency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.scene-item {
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all 0.15s ease;
}

.scene-item:hover {
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.scene-content {
    padding: 20px;
    text-align: center;
}

.scene-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.scene-item:hover .scene-image {
    transform: scale(1.02);
}

.scene-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.scene-frequency {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.freq-button {
    padding: 10px 16px;
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.freq-button:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.freq-button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #000;
    font-weight: 500;
}

.scene-item-other .scene-content {
    padding: 24px;
}

.scene-other-input {
    margin-top: 12px;
    width: 100%;
}

/* Improved GOOD & BAD Section Layout */
.good-bad-container {
    background: var(--surface-elevated);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--border-light);
    margin-top: 20px;
}

.item-evaluation-placeholder {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 2px solid var(--border-light);
}

.item-evaluation-placeholder p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Style evaluation sections */
.style-evaluation-section {
    margin-bottom: 48px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.style-evaluation-title {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--primary-color);
    letter-spacing: 1px;
}

/* Category sections within style evaluation */
.category-evaluation-section {
    margin-bottom: 32px;
}

.category-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.category-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Enhanced item evaluation cards */
.item-evaluation-card-enhanced {
    background: var(--surface-dark);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-light);
    transition: all 0.15s ease;
    position: relative;
}

.item-evaluation-card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.item-eval-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
    background: var(--surface-elevated);
}

.item-eval-name {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}

/* Good/Bad selection styling */
.good-bad-selection {
    display: flex;
    gap: 12px;
}

.good-bad-option {
    flex: 1;
    position: relative;
}

.good-bad-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.good-label,
.bad-label {
    display: block;
    padding: 10px;
    text-align: center;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.good-label {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.05);
}

.bad-label {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.05);
}

.good-label:hover {
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.5);
}

.bad-label:hover {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.5);
}

.good-bad-option input:checked + .good-label {
    background: rgba(74, 222, 128, 0.2);
    border-color: #4ade80;
    box-shadow: 0 0 0 1px #4ade80;
}

.good-bad-option input:checked + .bad-label {
    background: rgba(248, 113, 113, 0.2);
    border-color: #f87171;
    box-shadow: 0 0 0 1px #f87171;
}

/* Reason selection styling */
.reason-selection {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    margin-top: 16px;
}

.reason-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.reason-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.reason-checkbox {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
}

.reason-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}

.reason-checkbox input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--primary-color);
}

.reason-checkbox:has(input:checked) {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--primary-color);
}

.reason-other-input {
    margin-top: 12px;
    font-size: 0.9rem;
    padding: 10px 14px;
}

/* Style preference item selection */
.style-item-selection {
    margin-top: 24px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    display: none;
}

.style-item-selection.fade-in {
    animation: fadeIn 0.5s ease-out;
}

.item-selection-header h5 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.item-selection-hint {
    font-size: 0.85rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.style-items-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.style-item-option {
    position: relative;
    cursor: pointer;
    display: block;
}

.style-item-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.item-option-content {
    background: var(--surface-dark);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    transition: all 0.15s ease;
}

.item-option-content img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.item-option-content span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.style-item-option:hover .item-option-content {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.style-item-option input:checked + .item-option-content {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.style-item-option input:checked + .item-option-content span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Corporate Information Section */
.corporate-info-notice {
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notice-text {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

.corporate-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 20px;
    background: var(--surface-lighter);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.corporate-toggle:hover {
    background: rgba(212, 175, 55, 0.1);
}

.corporate-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--accent-gold);
}

.toggle-label {
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
}

.corporate-info-content {
    animation: fadeIn 0.3s ease;
}

.corporate-basic-info,
.corporate-position-info,
.corporate-company-info,
.corporate-industry-info {
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 24px;
}

.subsection-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Female form adjustments for corporate section */
.female-form .corporate-toggle {
    background: rgba(184, 160, 106, 0.05);
}

.female-form .corporate-toggle:hover {
    background: rgba(184, 160, 106, 0.1);
}

.female-form .corporate-toggle input[type="checkbox"] {
    accent-color: var(--accent-light-gold);
}

.female-form .subsection-title {
    color: var(--accent-light-gold);
}

/* Gender Switch Animation */
body {
    transition: none;
}

body.gender-transitioning {
    transition: background-color 0.6s ease, color 0.6s ease;
}

body.gender-transitioning * {
    transition: background-color 0.6s ease,
                border-color 0.6s ease,
                color 0.6s ease,
                box-shadow 0.6s ease,
                transform 0.6s ease !important;
}

/* Smooth transitions for color changes */
body.gender-transitioning .section-header,
body.gender-transitioning .form-input,
body.gender-transitioning .form-select,
body.gender-transitioning .form-textarea,
body.gender-transitioning .checkbox-item,
body.gender-transitioning .radio-option,
body.gender-transitioning .button,
body.gender-transitioning .accent-gold,
body.gender-transitioning .accent-rose {
    transition: all 0.6s ease !important;
}

/* Prevent layout shift during transition */
body.gender-transitioning .form-section {
    overflow: hidden;
}

/* Birth Date Selector New Design */
.birthdate-container {
    position: relative;
}

/* New separated birth date inputs */
.birthdate-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.birthdate-select {
    flex: 1;
    padding: 12px 16px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.birthdate-select:hover {
    border-color: var(--accent-gold);
    background-color: var(--surface-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.birthdate-select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.date-separator {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
}

.age-display {
    color: var(--accent-gold);
    font-weight: 500;
    margin-left: 12px;
    white-space: nowrap;
}

/* Female form adjustments for new inputs */
.female-form .birthdate-select:hover {
    border-color: var(--accent-light-gold);
}

.female-form .birthdate-select:focus {
    border-color: var(--accent-light-gold);
    box-shadow: 0 0 0 3px rgba(200, 184, 150, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.female-form .age-display {
    color: var(--accent-light-gold);
}

.birthdate-display {
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 14px;
    padding: 18px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    font-weight: 500;
}

.birthdate-display:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.08);
    transform: translateY(-2px);
    background: var(--surface-color);
}

.birthdate-placeholder {
    color: var(--text-secondary);
    font-size: 1rem;
}

.birthdate-display.has-value .birthdate-placeholder {
    color: var(--text-primary);
    font-weight: 500;
}

.age-display-inline {
    font-size: 0.9rem;
    color: var(--accent-gold);
    font-weight: 500;
    margin-left: 12px;
}

.birthdate-toggle {
    position: relative;
}

.birthdate-toggle.active .birthdate-display {
    border-color: var(--accent-gold);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.toggle-icon {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    margin-left: auto;
}

.birthdate-selector-dropdown {
    margin-top: 10px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideDown 0.3s ease;
}

.date-selector-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    height: 320px;
    border-bottom: 1px solid var(--border-light);
}

.date-column {
    padding: 20px;
    border-right: 1px solid var(--border-light);
}

.date-column:last-child {
    border-right: none;
}

.date-column h4 {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.year-scroll-container {
    height: 250px;
    overflow-y: auto;
    padding-right: 10px;
}

.year-scroll-container::-webkit-scrollbar {
    width: 4px;
}

.year-scroll-container::-webkit-scrollbar-track {
    background: var(--surface-dark);
    border-radius: 2px;
}

.year-scroll-container::-webkit-scrollbar-thumb {
    border-radius: 2px;
}

.year-item {
    padding: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 4px;
}

.year-item:hover {
    background: var(--surface-dark);
}

.year-item.selected {
    background: rgba(212, 175, 55, 0.2);
    color: var(--accent-gold);
    font-weight: 500;
}

.month-grid, .day-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    height: 250px;
    overflow-y: auto;
    align-content: start;
}

.month-grid {
    grid-template-columns: repeat(3, 1fr);
}

.day-grid {
    grid-template-columns: repeat(7, 1fr);
}

.month-item, .day-item {
    padding: 8px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.month-item:hover, .day-item:hover {
    background: var(--surface-dark);
    border-color: var(--border-light);
}

.month-item.selected, .day-item.selected {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    font-weight: 500;
}

.day-item.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.day-item.disabled:hover {
    background: transparent;
    border-color: transparent;
}

.date-selector-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    justify-content: flex-end;
}

.date-cancel-btn, .date-confirm-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}

.date-cancel-btn {
    background: var(--surface-dark);
    color: var(--text-secondary);
}

.date-cancel-btn:hover {
    background: var(--surface-lighter);
}

.date-confirm-btn {
    color: var(--bg-primary);
}

.date-confirm-btn:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-1px);
}

.date-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Female form adjustments */
.female-form .birthdate-display:hover {
    border-color: var(--accent-light-gold);
    box-shadow: 0 4px 12px rgba(184, 160, 106, 0.2);
}

.female-form .age-display-inline {
    color: var(--accent-light-gold);
}

.female-form .year-item.selected,
.female-form .month-item.selected,
.female-form .day-item.selected {
    background: rgba(184, 160, 106, 0.2);
    border-color: var(--accent-light-gold);
    color: var(--accent-light-gold);
}

.female-form .date-confirm-btn {
    background: var(--accent-light-gold);
}

.female-form .year-scroll-container::-webkit-scrollbar-thumb {
    background: var(--accent-light-gold);
}

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

/* Wanted Items Enhanced Design */
.wanted-items-enhanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.wanted-item-card {
    background: var(--surface-dark);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.15s ease;
    position: relative;
}

.wanted-item-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.wanted-item-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wanted-item-label {
    display: block;
    cursor: pointer;
    text-align: center;
}

.wanted-item-image {
    width: 100%;
    height: 120px;
    background: var(--surface-lighter);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
}

.wanted-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.wanted-item-card:hover .wanted-item-image img {
    transform: scale(1.05);
}

.wanted-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(212, 175, 55, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wanted-item-card input[type="checkbox"]:checked ~ .wanted-item-label .wanted-item-overlay {
    opacity: 1;
}

.checkmark {
    font-size: 3rem;
    color: var(--bg-primary);
    font-weight: bold;
}

.wanted-item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    display: block;
    margin-bottom: 12px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-light);
    background: var(--surface-darker);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    outline: none;
}

.qty-btn:hover {
    color: var(--bg-primary);
    border-color: var(--accent-gold);
}

.quantity-selector .quantity-input {
    width: 50px;
    height: 28px;
    text-align: center;
    background: var(--surface-darker);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text-primary);
    font-weight: 500;
}

.wanted-item-card input[type="checkbox"]:checked ~ .quantity-selector .quantity-input {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

/* Female form adjustments */
.female-form .wanted-item-card:hover {
    border-color: var(--accent-light-gold);
}

.female-form .wanted-item-overlay {
    background: rgba(184, 160, 106, 0.9);
}

.female-form .qty-btn:hover {
    background: var(--accent-light-gold);
}

.female-form .wanted-item-card input[type="checkbox"]:checked ~ .quantity-selector .quantity-input {
    border-color: var(--accent-light-gold);
    background: rgba(184, 160, 106, 0.1);
}

/* Weekly Schedule Card Layout */
.weekday-lifestyle-card {
    position: relative;
}

.weekday-lifestyle-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.weekday-lifestyle-card input[type="radio"]:checked + label {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.weekday-lifestyle-card input[type="radio"]:checked + label img {
    transform: scale(1.02);
}

.weekday-sub-options {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease;
}

.sub-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: block;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.chip-option {
    display: inline-flex;
    align-items: center;
    /* padding: 6px 14px; */
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chip-option:hover {
    border-color: var(--accent-gold);
    /* background: rgba(212, 175, 55, 0.1); */
}

.chip-option input[type="checkbox"] {
    margin-right: 6px;
    accent-color: var(--accent-gold);
}

.chip-option span {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.sub-input {
    margin-top: 10px;
    width: 100%;
}

/* Female form adjustments */
.female-form .weekday-lifestyle-card input[type="radio"]:checked + label {
    border-color: var(--accent-light-gold);
    box-shadow: 0 0 0 3px rgba(184, 160, 106, 0.2);
}

.female-form .chip-option:hover {
    border-color: var(--accent-light-gold);
    background: rgba(184, 160, 106, 0.1);
}

.female-form .chip-option input[type="checkbox"] {
    accent-color: var(--accent-light-gold);
}

/* Overall Spacing Adjustments */
.form-section {
    padding: 60px 40px;
}

.form-group {
    margin-bottom: 40px;
}

.section-header {
    margin-bottom: 40px;
}

/* Female Form Spacing Enhancements */
.female-form .form-section {
    padding: 70px 45px;
}

.female-form .form-group {
    margin-bottom: 45px;
}

.female-form .section-header {
    margin-bottom: 50px;
}

.female-form .checkbox-grid,
.female-form .radio-group {
    gap: 20px;
}

.female-form .weekend-grid {
    gap: 24px;
}

.female-form .style-evaluation-item {
    margin-bottom: 35px;
}

.female-form .budget-grid {
    gap: 20px;
}

.female-form .wanted-items-enhanced-grid {
    gap: 24px;
}

.female-form .form-input,
.female-form .form-select,
.female-form .form-textarea {
    padding: 16px 20px;
}

.female-form .checkbox-item,
.female-form .radio-option {
    padding: 20px 24px;
}

.female-form .subsection-title {
    margin-bottom: 25px;
    padding-bottom: 15px;
}

/* Improve visual hierarchy with spacing */
.form-description {
    margin-bottom: 24px;
    line-height: 1.7;
}

.form-hint {
    margin-top: 8px;
    margin-bottom: 16px;
}

.category-title,
.group-title {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
}

/* Card spacing improvements */
.weekend-card,
.scene-item,
.brand-tag,
.wanted-item-card {
    margin-bottom: 0;
}

.activity-category,
.brand-section,
.lifestyle-group {
    margin-bottom: 40px;
}

.female-form .activity-category,
.female-form .brand-section {
    margin-bottom: 50px;
}

/* Button and action spacing */
.primary-button,
.submit-button {
    margin-top: 30px;
    padding: 18px 40px;
}

.female-form .primary-button,
.female-form .submit-button {
    padding: 20px 45px;
}

/* Responsive spacing adjustments */
@media (max-width: 768px) {
    .form-section {
        padding: 40px 20px;
    }

    .female-form .form-section {
        padding: 45px 25px;
    }

    .form-group {
        margin-bottom: 30px;
    }

    .female-form .form-group {
        margin-bottom: 35px;
    }

    .corporate-info-notice {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Pattern Selection Section */
.pattern-selection-section {
    margin-top: 48px;
    padding: 32px;
    background: var(--surface-elevated);
    border-radius: 16px;
    border: 1px solid var(--border-light);
}

.style-pattern-container {
    margin-bottom: 48px;
    padding: 24px;
    background: var(--background);
    border-radius: 12px;
    border: 1px solid var(--border-lighter);
}

.style-pattern-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.style-pattern-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.style-pattern-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary);
}

.pattern-variations-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .pattern-variations-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pattern-variations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.pattern-variation-card {
    position: relative;
    background: var(--surface-elevated);
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid var(--border-light);
    transition: all 0.15s ease;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pattern-variation-card:hover {
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

.pattern-variation-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.pattern-variation-name {
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 8px;
}

/* Pattern variation specific Good/Bad selection */
.pattern-variation-card .good-bad-selection {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pattern-variation-card .good-bad-option {
    flex: none;
    width: auto;
}

.pattern-variation-card .good-bad-option span {
    padding: 6px 16px;
    font-size: 0.85rem;
    border-radius: 20px;
    display: inline-block;
}

/* Pattern variation reason checkboxes */
.pattern-variation-card .good-bad-reasons {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    /* padding: 12px; */
    margin-top: 8px;
}

.pattern-variation-card .reason-checkbox {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    margin: 4px 0;
    font-size: 0.8rem;
    gap: 6px;
}

.pattern-variation-card .reason-label {
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Good/Bad button styling for pattern variations */
.pattern-variation-card .good-option span {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.pattern-variation-card .bad-option span {
    background: rgba(244, 67, 54, 0.1);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.pattern-variation-card .good-option input[type="radio"]:checked ~ span {
    background: rgba(76, 175, 80, 0.2);
    border-color: #4caf50;
    font-weight: 600;
}

.pattern-variation-card .bad-option input[type="radio"]:checked ~ span {
    background: rgba(244, 67, 54, 0.2);
    border-color: #f44336;
    font-weight: 600;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.pattern-variation-card label {
    display: block;
    padding: 0;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.pattern-variation-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.pattern-variation-name {
    padding: 12px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--surface-elevated);
}

.pattern-items-section {
    margin-top: 24px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    display: none;
}

.pattern-items-section.active {
    display: block;
}

.pattern-items-header {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.pattern-category {
    margin-bottom: 32px;
}

.pattern-category-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pattern-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}

.pattern-item-card {
    position: relative;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: all 0.15s ease;
}

.pattern-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pattern-item-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.pattern-item-card input[type="checkbox"]:checked + label {
    border-color: var(--primary-color);
}

.pattern-item-card input[type="checkbox"]:checked + label::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.pattern-item-card label {
    display: block;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.pattern-item-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.pattern-item-name {
    padding: 0 8px;
    text-align: center;
    font-size: 0.85rem;
}

/* Female form adjustments */
.female-form .pattern-variation-card input[type="radio"]:checked + label {
    border-color: var(--accent-light-gold);
}

.female-form .pattern-variation-card input[type="radio"]:checked + label::after {
    background: var(--accent-light-gold);
}

.female-form .pattern-item-card input[type="checkbox"]:checked + label {
    border-color: var(--accent-light-gold);
}

.female-form .pattern-item-card input[type="checkbox"]:checked + label::after {
    background: var(--accent-light-gold);
}

/* Pattern Good/Bad Styles */
.pattern-good-bad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 20px;
}

/* Updated pattern variation styles for Good/Bad */
.pattern-variations-grid .pattern-variation-card {
    padding: 16px;
    cursor: default;
}

.pattern-variations-grid .pattern-variation-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.pattern-variations-grid .pattern-variation-name {
    margin-bottom: 12px;
}

.pattern-variations-grid .good-bad-selection {
    margin-top: 12px;
}

.pattern-variations-grid .good-bad-reasons {
    margin-top: 12px;
}

.pattern-good-bad-item {
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.15s ease;
    min-width: 300px;
}

.pattern-good-bad-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pattern-item-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pattern-good-bad-item .pattern-item-name {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 18px;
    font-weight: 500;
}

.pattern-good-bad-item .good-bad-selection {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.pattern-good-bad-item .good-bad-option {
    flex: 1;
    padding: 10px 18px;
    border: 2px solid var(--border-color);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--surface-color);
}

.pattern-good-bad-item .good-option:hover {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.05);
}

.pattern-good-bad-item .bad-option:hover {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.05);
}

.pattern-good-bad-item input[type="radio"] {
    display: none;
}

.pattern-good-bad-item input[type="radio"]:checked + span {
    color: white;
}

.pattern-good-bad-item .good-option input[type="radio"]:checked ~ span {
    background: #4caf50;
}

.pattern-good-bad-item .bad-option input[type="radio"]:checked ~ span {
    background: #f44336;
}

.pattern-good-bad-item input[type="radio"]:checked ~ span {
    display: block;
    padding: 10px 18px;
    border-radius: 18px;
    margin: -12px -20px;
}

/* Good/Bad Reasons Section Styling */
.good-bad-reasons {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 20px 0;
    margin-top: 16px;
    border: 1px solid var(--border-light);
    text-align: left;
    animation: slideDown 0.3s ease-out;
    width: 100%;
    max-width: none;
}

.good-bad-reasons .reason-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-weight: 500;
}

.good-bad-reasons .reason-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.good-bad-reasons .reason-checkbox {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    gap: 8px;
}

.good-bad-reasons .reason-checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}

.good-bad-reasons .reason-checkbox input[type="checkbox"] {
    margin: 0;
    accent-color: var(--accent-gold);
    width: 16px;
    height: 16px;
}

.good-bad-reasons .reason-checkbox:has(input:checked) {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--accent-gold);
}

.good-bad-reasons .reason-checkbox span {
    color: var(--text-primary);
    font-weight: 400;
}

.good-bad-reasons .reason-other-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-top: 12px;
    transition: all 0.15s ease;
}

.good-bad-reasons .reason-other-input:focus {
    border-color: var(--accent-gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1);
}

/* Female form pattern styles */
.female-form .pattern-good-bad-item {
    background: #ffffff;
    border-color: #e0e0e0;
}

.female-form .pattern-good-bad-item:hover {
    border-color: var(--accent-light-gold);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.1);
}

.female-form .good-bad-reasons {
    background: rgba(212, 175, 55, 0.02);
    border-color: rgba(212, 175, 55, 0.2);
}

.female-form .good-bad-reasons .reason-checkbox {
    background: rgba(212, 175, 55, 0.02);
    border-color: rgba(212, 175, 55, 0.2);
}

.female-form .good-bad-reasons .reason-checkbox:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: var(--accent-gold);
}

/* Responsive adjustments for better usability */
@media (max-width: 768px) {
    .pattern-good-bad-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pattern-good-bad-item {
        min-width: auto;
        padding: 16px;
    }

    .good-bad-reasons .reason-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pattern-good-bad-item .good-bad-selection {
        gap: 10px;
    }

    .pattern-good-bad-item .good-bad-option {
        padding: 8px 15px;
    }
}

/* Corporate information styles */
.company-field,
.employee-count-field,
.age-demographics-field,
.revenue-field {
    margin-bottom: 20px;
}

.radio-group-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.radio-option-compact,
.checkbox-option-compact {
    display: flex;
    align-items: center;
    /* padding: 8px 16px; */
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-option-compact:hover,
.checkbox-option-compact:hover {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

.radio-option-compact input[type="radio"],
.checkbox-option-compact input[type="checkbox"] {
    margin-right: 8px;
}

.radio-option-compact input[type="radio"]:checked + span,
.checkbox-option-compact input[type="checkbox"]:checked + span {
    color: var(--accent-gold);
}

.radio-option-compact input[type="radio"]:checked ~ span,
.checkbox-option-compact input[type="checkbox"]:checked ~ span {
    font-weight: 500;
}

.radio-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.checkbox-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

/* Female form corporate info styles */
.female-form .radio-option-compact,
.female-form .checkbox-option-compact {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e0e0e0;
}

.female-form .radio-option-compact:hover,
.female-form .checkbox-option-compact:hover {
    border-color: var(--accent-light-gold);
    background: rgba(233, 30, 99, 0.05);
}

.female-form .radio-option-compact input[type="radio"]:checked + span,
.female-form .checkbox-option-compact input[type="checkbox"]:checked + span {
    color: var(--accent-light-gold);
}
/* Pattern Selection Styles */
.pattern-selections {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--surface-elevated);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.style-pattern-section {
    margin-bottom: 2.5rem;
    &:last-child {
        margin-bottom: 0;
    }
}

.pattern-style-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.pattern-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-color);
    border: 2px solid var(--border-light);
    transition: all 0.3s ease;

    &:hover {
        border-color: var(--border-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.pattern-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pattern-label {
    display: block;
    cursor: pointer;
    padding: 0.5rem;
    text-align: center;
}

.pattern-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
}

.pattern-number {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: var(--border-dark);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.pattern-name {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pattern-card input[type="radio"]:checked + .pattern-label {
    background: var(--primary-dark);
}

.pattern-card input[type="radio"]:checked + .pattern-label .pattern-image {
    opacity: 0.9;
}

.pattern-card input[type="radio"]:checked + .pattern-label .pattern-number {
    color: var(--background-color);
}

/* Enhanced Clickable Elements - Better Visual Feedback */
/* Make all clickable elements more obvious */
.radio-option,
.checkbox-option,
.style-option,
.avoid-option,
.weekend-option,
.scene-option,
.item-option,
.brand-option,
.investment-option,
.dress-code-option,
.photo-upload-box,
.gender-option,
.submit-btn,
.form-select,
.pattern-card,
.travel-option,
.sub-option {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative;
    overflow: hidden;
}

/* Add hover effects for all clickable elements */
.radio-option:hover,
.checkbox-option:hover,
.style-option:hover,
.avoid-option:hover,
.weekend-option:hover,
.scene-option:hover,
.item-option:hover,
.brand-option:hover,
.investment-option:hover,
.dress-code-option:hover,
.gender-option:hover,
.pattern-card:hover,
.travel-option:hover,
.sub-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
    /* background: rgba(255, 255, 255, 0.08) !important; */
    border-color: var(--accent-gold) !important;
}

/* Enhanced selected state */
.radio-option.selected,
.checkbox-option.selected,
.style-option.selected,
.avoid-option.selected,
.weekend-option.selected,
.scene-option.selected,
.item-option.selected,
.brand-option.selected,
.investment-option.selected,
.dress-code-option.selected,
.pattern-card.selected,
.travel-option.selected,
.sub-option.selected {
    /* background: rgba(212, 175, 55, 0.2) !important; */
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Pulse animation for better visibility */
@keyframes clickablePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

/* Apply pulse on hover */
.radio-option:hover::before,
.checkbox-option:hover::before,
.style-option:hover::before,
.avoid-option:hover::before,
.weekend-option:hover::before,
.scene-option:hover::before,
.item-option:hover::before,
.brand-option:hover::before,
.investment-option:hover::before,
.dress-code-option:hover::before,
.gender-option:hover::before,
.pattern-card:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    animation: clickablePulse 1.5s infinite;
    pointer-events: none;
}

/* Enhanced photo upload box */
.photo-upload-box {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.photo-upload-box:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.25);
    border-color: var(--accent-gold) !important;
}

.photo-upload-box:hover .photo-placeholder {
    background: rgba(212, 175, 55, 0.1);
}

/* Button hover effects */
.submit-btn:hover,
.change-photo-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.4);
    background: linear-gradient(135deg, var(--accent-gold) 0%, #b8941f 100%) !important;
}

/* Select dropdown hover */
.form-select:hover,
.date-selector select:hover {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
}

/* Active/pressed state */
.radio-option:active,
.checkbox-option:active,
.style-option:active,
.avoid-option:active,
.weekend-option:active,
.scene-option:active,
.item-option:active,
.brand-option:active,
.investment-option:active,
.dress-code-option:active,
.gender-option:active,
.pattern-card:active,
.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

/* Clickable hint */
.clickable-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--background-color);
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.radio-option:hover .clickable-hint,
.checkbox-option:hover .clickable-hint,
.style-option:hover .clickable-hint,
.avoid-option:hover .clickable-hint {
    opacity: 1;
}

/* Ripple effect on click */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.5);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

/* Replace checkboxes and radio buttons with clickable cards */
/* Hide all native checkboxes and radio buttons */
.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"],
.style-option input[type="radio"],
.style-option input[type="checkbox"],
.avoid-option input[type="checkbox"],
.weekend-option input[type="checkbox"],
.scene-option input[type="checkbox"],
.item-option input[type="radio"],
.brand-option input[type="checkbox"],
.investment-option input[type="checkbox"],
.dress-code-option input[type="radio"],
.travel-option input[type="checkbox"],
.sub-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Style labels as clickable cards */
.radio-option,
.checkbox-option {
    display: block;
    /* padding: 16px 20px; */
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Selected state for cards */
.radio-option:has(input:checked),
.checkbox-option:has(input:checked),
.style-option:has(input:checked),
.avoid-option:has(input:checked),
.weekend-option:has(input:checked),
.scene-option:has(input:checked),
.item-option:has(input:checked),
.brand-option:has(input:checked),
.investment-option:has(input:checked),
.dress-code-option:has(input:checked),
.travel-option:has(input:checked),
.sub-option:has(input:checked) {
    /* background: rgba(212, 175, 55, 0.15); */
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 1px var(--accent-gold), 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Add checkmark or indicator for selected state */
/* .radio-option:has(input:checked)::after,
.checkbox-option:has(input:checked)::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 16px;
    style-male-mode-1.jpg
    color: var(--background-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
} */

/* Style image options as cards */
.style-option,
.avoid-option,
.weekend-option,
.scene-option,
.item-option,
.brand-option,
.investment-option,
.dress-code-option {
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    background: var(--surface-elevated);
}

/* Selected indicator for image cards */
.style-option:has(input:checked)::before,
.avoid-option:has(input:checked)::before,
.weekend-option:has(input:checked)::before,
.scene-option:has(input:checked)::before,
.item-option:has(input:checked)::before,
.brand-option:has(input:checked)::before,
.investment-option:has(input:checked)::before,
.dress-code-option:has(input:checked)::before {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--background-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Age demographics grid special styling */
.age-demographics-grid .checkbox-option {
    padding: 12px 16px;
    text-align: center;
}

.age-demographics-grid .checkbox-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
}

/* Travel options special styling */
.travel-option {
    padding: 14px 18px;
    margin-bottom: 8px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.travel-option:has(input:checked) {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--accent-gold);
    padding-left: 24px;
}

/* Form group radio/checkbox grid adjustments */
.radio-group {
    gap: 6px;
    margin-top: 16px;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 30px;
}

/* Enhanced white theme for female form */
body.female-form {
    background-color: #ffffff !important;
}

body.female-form .complete-form-container {
    /* background-color: #fafafa; */
}

/* Ensure all text is dark on white background */
body.female-form .section-title,
body.female-form .subsection-title,
body.female-form .form-label,
body.female-form .form-description,
body.female-form label,
body.female-form p,
body.female-form h1,
body.female-form h2,
body.female-form h3,
body.female-form h4,
body.female-form h5 {
    color: #2c2c2c !important;
}

/* Input fields and form elements in female form */
body.female-form input[type="text"],
body.female-form input[type="email"],
body.female-form input[type="tel"],
body.female-form input[type="number"],
body.female-form textarea,
body.female-form select {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #2c2c2c;
}

body.female-form input[type="text"]:focus,
body.female-form input[type="email"]:focus,
body.female-form input[type="tel"]:focus,
body.female-form input[type="number"]:focus,
body.female-form textarea:focus,
body.female-form select:focus {
    border-color: #d4af37;
    background-color: #ffffff;
}

/* Radio and checkbox options in female form */
body.female-form .radio-option,
body.female-form .checkbox-option {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #2c2c2c;
}

body.female-form .radio-option:hover,
body.female-form .checkbox-option:hover {
    background-color: #f8f8f8;
    border-color: #d4af37;
}

body.female-form .radio-option.selected,
body.female-form .checkbox-option.selected,
body.female-form .radio-option:has(input:checked),
body.female-form .checkbox-option:has(input:checked) {
    /* background-color: #fef9e7; */
    border-color: #d4af37;
}

/* Style preference cards in female form */
body.female-form .style-preference-card input:checked + label {
    border-color: var(--accent-gold);
    border-width: 3px;
    background: rgba(212, 175, 55, 0.12);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
    transform: scale(1.03);
}

body.female-form .style-preference-card,
body.female-form .lifestyle-card,
body.female-form .weekend-activity-card,
body.female-form .scene-card {
    /* background-color: #ffffff;
    border: 1px solid #e0e0e0; */
}

body.female-form .style-preference-card:hover,
body.female-form .lifestyle-card:hover,
body.female-form .weekend-activity-card:hover,
body.female-form .scene-card:hover {
    border-color: #d4af37;
    background-color: #fefefe;
}

/* Buttons in female form */
body.female-form .primary-button,
body.female-form .submit-button {
    background-color: #d4af37;
    color: #ffffff;
    border: none;
}

body.female-form .primary-button:hover,
body.female-form .submit-button:hover {
    background-color: #b8941f;
}

/* Section numbers in female form */
body.female-form .section-number {
    background-color: #d4af37;
    color: #ffffff;
}

/* Global transition override for simplicity */
* {
    transition: all var(--transition-all) !important;
}

/* Instant gender switch */
body.female-form,
body:not(.female-form) {
    transition: background-color var(--transition-instant) !important;
}

/* Instant form content changes */
[data-gender-text],
[data-gender-content] {
    transition: none !important;
}

/* Enhanced Pattern Selection with Item Evaluation */
.pattern-card-wrapper {
    margin-bottom: var(--spacing-lg);
}

.pattern-item-evaluation {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--surface-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    animation: fadeIn 0.3s ease-out;
}

.pattern-item-evaluation .item-good-bad-section {
    margin-bottom: var(--spacing-md);
}

.pattern-item-evaluation .item-good-bad-section:last-child {
    margin-bottom: 0;
}

.pattern-item-evaluation .good-bad-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    display: block;
}

.pattern-item-evaluation .good-items {
    border: 2px solid #4CAF50;
    background: rgba(76, 175, 80, 0.05);
}

.pattern-item-evaluation .bad-items {
    border: 2px solid #f44336;
    background: rgba(244, 67, 54, 0.05);
}

.pattern-item-evaluation .good-items,
.pattern-item-evaluation .bad-items {
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
}

.pattern-item-evaluation .item-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-sm);
}

/* Toggle Styles for Sections */
.corporate-toggle,
.fashion-stance-toggle,
.proposal-frequency-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: var(--spacing-md);
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--transition-normal);
    margin-bottom: var(--spacing-md);
}

.corporate-toggle:hover,
.fashion-stance-toggle:hover,
.proposal-frequency-toggle:hover {
    background: var(--surface-color);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}

.corporate-toggle input[type="checkbox"],
.fashion-stance-toggle input[type="checkbox"],
.proposal-frequency-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-sm);
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: transparent;
    transition: all var(--transition-fast);
}

.corporate-toggle input[type="checkbox"]:checked,
.fashion-stance-toggle input[type="checkbox"]:checked,
.proposal-frequency-toggle input[type="checkbox"]:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.corporate-toggle input[type="checkbox"]:checked::after,
.fashion-stance-toggle input[type="checkbox"]:checked::after,
.proposal-frequency-toggle input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--background-color);
    font-size: 14px;
    font-weight: bold;
}

.toggle-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
}

#corporateInfoContent,
#fashionStanceContent,
#proposalFrequencyContent {
    transition: opacity 0.3s ease;
}

/* Nested content styling */
#corporateInfoContent .form-group:first-child,
#fashionStanceContent > label:first-child,
#proposalFrequencyContent > label:first-child {
    margin-top: 0;
}

#corporateInfoContent .radio-group {
  grid-template-columns: repeat(4, 1fr);
}

.pattern-item-evaluation .item-option {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.pattern-item-evaluation .item-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

.pattern-item-evaluation .item-option label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-size: 0.9rem;
}

.pattern-item-evaluation .item-option img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Female form adjustments */
body.female-form .pattern-item-evaluation {
    background: var(--surface-light);
    border-color: var(--border-soft);
}

body.female-form .pattern-item-evaluation .good-bad-label {
    color: var(--text-dark-secondary);
}

body.female-form .pattern-item-evaluation .good-items {
    background: rgba(76, 175, 80, 0.08);
}

body.female-form .pattern-item-evaluation .bad-items {
    background: rgba(244, 67, 54, 0.08);
}

body.female-form .pattern-item-evaluation .item-option:hover {
    background: rgba(0, 0, 0, 0.03);
}


/* ===== budget-styles.css ===== */

/* Budget Selection Enhanced Styles */

/* Budget Grid for Item Selection */
.budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.budget-option-card {
    position: relative;
    cursor: pointer;
}

.budget-option-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.budget-option-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    transition: all 0.15s ease;
}

.budget-option-card:hover .budget-option-content {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
}

.budget-option-card input:checked ~ .budget-option-content {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.05);
}

.budget-image {
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
    position: relative;
}

.budget-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--surface-dark);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.budget-image-placeholder span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.budget-range {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.budget-example {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* CSS Variables for monochrome luxury design */
:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-tertiary: rgba(255, 255, 255, 0.65);
    --accent-primary: #ffffff;
    --accent-secondary: #cccccc;
    --gradient-primary: linear-gradient(135deg, #ffffff 0%, #e5e5e5 50%, #ffffff 100%);
}

/* Item Budget Grid */
.item-budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.item-budget-card {
    background: linear-gradient(135deg,
        rgba(10, 10, 10, 0.9) 0%,
        rgba(20, 20, 20, 0.95) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 28px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.item-budget-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.item-budget-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 40px rgba(255, 255, 255, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.item-budget-card:hover::before {
    opacity: 0.7;
}

.item-budget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-icon {
    font-size: 2rem;
    filter: grayscale(0.2);
}

.item-budget-header h4 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.budget-range-selector {
    position: relative;
}

.budget-range-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.budget-range-option {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.budget-range-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.budget-range-option:hover {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(184, 134, 11, 0.12) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.budget-range-option:hover::before {
    opacity: 1;
}

.budget-range-option.selected {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(184, 134, 11, 0.2) 100%);
    border-color: var(--accent-primary);
    box-shadow:
        0 4px 16px rgba(255, 255, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.budget-range-option.selected::before {
    opacity: 1;
}

.price-main {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.price-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.budget-range-option.selected .price-main {
    color: var(--accent-primary);
}

.budget-range-option.selected .price-sub {
    color: var(--text-secondary);
}

/* Season Budget Cards */
.season-budget-selector {
    margin-top: 24px;
}

.budget-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.budget-card {
    background: linear-gradient(135deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 100%);
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 32px 20px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.budget-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.budget-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 20px 40px rgba(255, 255, 255, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.budget-card:hover::before {
    opacity: 1;
}

.budget-card.active {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(184, 134, 11, 0.15) 100%);
    transform: translateY(-4px);
    box-shadow:
        0 16px 32px rgba(255, 255, 255, 0.3),
        0 8px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.budget-card.active::before {
    opacity: 1;
}

.budget-card-content {
    position: relative;
    z-index: 2;
}

.budget-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    filter: brightness(1.2);
}

.budget-amount {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.budget-monthly {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.budget-label {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.budget-card.custom .budget-amount {
    font-size: 1.5rem;
}

.budget-card.custom .budget-monthly {
    font-size: 0.85rem;
}

/* Custom Budget Input */
.custom-budget-input {
    background: linear-gradient(135deg,
        rgba(10, 10, 10, 0.4) 0%,
        rgba(20, 20, 20, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
}

#customBudgetInput {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.08) 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

#customBudgetInput:focus {
    border-color: var(--accent-primary);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.1),
        0 0 30px rgba(255, 255, 255, 0.3);
}

.custom-budget-display {
    text-align: center;
    margin-top: 16px;
    font-size: 1.1rem;
    color: var(--accent-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .item-budget-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .budget-range-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .price-main {
        font-size: 0.95rem;
    }

    .price-sub {
        font-size: 0.7rem;
    }

    .budget-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .budget-card {
        padding: 24px 16px;
    }

    .budget-amount {
        font-size: 1.5rem;
    }

    .budget-icon {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .budget-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .budget-range-options {
        font-size: 0.85rem;
    }

    .budget-range-option {
        padding: 12px 8px;
    }
}

/* Budget Image Placeholder */
.budget-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--surface-elevated) 0%, var(--surface-dark) 100%);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.budget-image-placeholder::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(212, 175, 55, 0.03) 10px,
        rgba(212, 175, 55, 0.03) 20px
    );
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.budget-image-placeholder span {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.budget-image-placeholder span:first-child {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.budget-image-placeholder .price-label {
    font-size: 0.85rem;
    color: var(--accent-gold);
    font-weight: 600;
}

/* Hover effect for budget cards */
.budget-option-card:hover .budget-image-placeholder {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, var(--surface-dark) 100%);
}

/* Selected state */
.budget-option-card input:checked ~ .budget-option-content .budget-image-placeholder {
    border-color: var(--accent-gold);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, var(--surface-dark) 100%);
}

.budget-option-card input:checked ~ .budget-option-content .budget-image-placeholder::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    color: var(--background-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 2;
}

/* Actual images for budget items */
.budget-item-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
}

.item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* Hover and selected states for images */
.budget-option-card:hover .budget-item-image {
    opacity: 0.9;
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.budget-option-card input:checked ~ .budget-option-content .budget-item-image {
    opacity: 0.8;
}

.budget-option-card input:checked ~ .budget-option-content .budget-image {
    position: relative;
}

.budget-option-card input:checked ~ .budget-option-content .budget-image::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    color: var(--background-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

/* ===== budget-enhanced.css ===== */

/* Enhanced Budget Selection UI */

/* Budget Selection Container */
.budget-selection-enhanced {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 16px;
}

/* Budget Visual Scale */
.budget-visual-scale {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 20px 0;
    position: relative;
    padding: 0 20px;
}

.budget-scale-item {
    flex: 1;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.budget-scale-bar {
    height: 8px;
    background: linear-gradient(to right,
        #4a4a4a 0%,
        #666666 25%,
        #888888 50%,
        #aaaaaa 75%,
        #d4af37 100%
    );
    border-radius: 4px;
    margin-bottom: 16px;
    position: relative;
}

.budget-scale-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-elevated);
    border: 3px solid var(--border-color);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.budget-scale-marker:hover {
    border-color: var(--accent-gold);
    transform: translate(-50%, -50%) scale(1.2);
}

.budget-scale-marker.selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* Budget Range Cards */
.budget-range-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.budget-range-card {
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.budget-range-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-color);
    transition: all 0.3s ease;
}

.budget-range-card:nth-child(1)::before { background: #4a4a4a; }
.budget-range-card:nth-child(2)::before { background: #666666; }
.budget-range-card:nth-child(3)::before { background: #888888; }
.budget-range-card:nth-child(4)::before { background: #aaaaaa; }
.budget-range-card:nth-child(5)::before { background: #d4af37; }

.budget-range-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.budget-range-card.selected {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

.budget-range-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.budget-price-range {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
}

.budget-quality-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.budget-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Enhanced Item Budget Selector */
.item-budget-selector-enhanced {
    margin-top: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    opacity: 0;
    transform: translateY(-10px);
    animation: slideDown 0.3s ease forwards;
}

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

.budget-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.budget-selector-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.budget-quality-indicator {
    display: flex;
    gap: 8px;
    align-items: center;
}

.quality-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
}

/* Budget Options with Icons */
.budget-options-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.budget-option-visual {
    position: relative;
    cursor: pointer;
}

.budget-option-visual input {
    position: absolute;
    opacity: 0;
}

.budget-option-visual-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.budget-option-visual:hover .budget-option-visual-content {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.budget-option-visual input:checked ~ .budget-option-visual-content {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
}

.budget-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.budget-option-price {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.budget-option-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .budget-range-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .budget-visual-scale {
        flex-direction: column;
        gap: 16px;
    }

    .budget-options-visual {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== brand-selection.css ===== */

/* Brand Selection with ○× UI */

.brand-selection-enhanced {
    margin-bottom: 32px;
}

.brand-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.brand-selection-legend {
    display: flex;
    gap: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.legend-circle.like {
    color: #4caf50;
    border-color: #4caf50;
}

.legend-circle.dislike {
    color: #f44336;
    border-color: #f44336;
}

/* Brand Grid with ○× Selection */
.brand-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.brand-selection-item {
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

.brand-selection-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.brand-logo-container {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.brand-logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-name {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* ○× Buttons */
.brand-selection-buttons {
    display: flex;
    gap: 12px;
}

.brand-select-btn {
    flex: 1;
    padding: 8px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    color: var(--text-muted);
}

.brand-select-btn:hover {
    transform: scale(1.1);
}

.brand-select-btn.like {
    color: var(--text-muted);
}

.brand-select-btn.like:hover {
    color: #4caf50;
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

.brand-select-btn.like.selected {
    color: #ffffff;
    background: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
}

.brand-select-btn.like.selected .btn-icon {
    font-weight: bold;
}

.brand-select-btn.dislike {
    color: var(--text-muted);
}

.brand-select-btn.dislike:hover {
    color: #f44336;
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

.brand-select-btn.dislike.selected {
    color: #ffffff;
    background: #f44336;
    border-color: #f44336;
    box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.3);
}

.brand-select-btn.dislike.selected .btn-icon {
    font-weight: bold;
}

/* Button icon styling */
.btn-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
}

/* Hidden inputs for form submission */
.brand-selection-item input[type="hidden"] {
    display: none;
}

/* Brand category headers */
.brand-category-header {
    grid-column: 1 / -1;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-top: 24px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.brand-category-header:first-child {
    margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .brand-selection-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .brand-logo-container {
        height: 60px;
    }

    .brand-select-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* ===== brand-selection-active-fix.css ===== */

/* Brand Selection Active State Fix */

/* Ensure buttons have proper styling */
.brand-select-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    user-select: none;
}

/* Enhanced selected state */
.brand-select-btn.selected {
    transform: scale(1.1) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.4) !important;
}

.brand-select-btn.like.selected {
    color: #ffffff !important;
    background: #4caf50 !important;
    border-color: #4caf50 !important;
}

.brand-select-btn.dislike.selected {
    color: #ffffff !important;
    background: #f44336 !important;
    border-color: #f44336 !important;
}

/* Brand item visual feedback */
.brand-selection-item.brand-liked {
    background: rgba(76, 175, 80, 0.05);
    border-color: #4caf50;
}

.brand-selection-item.brand-disliked {
    background: rgba(244, 67, 54, 0.05);
    border-color: #f44336;
}

.brand-selection-item.brand-liked .brand-logo-container,
.brand-selection-item.brand-disliked .brand-logo-container {
    transform: scale(1.05);
}

/* Ensure button icon is visible */
.brand-select-btn .btn-icon {
    pointer-events: none;
    font-weight: 600;
    display: inline-block;
}

.brand-select-btn.selected .btn-icon {
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hover states when not selected */
.brand-select-btn:not(.selected):hover {
    transform: scale(1.15);
}

/* Active/pressed state */
.brand-select-btn:active {
    transform: scale(0.95) !important;
}

/* Focus state for accessibility */
.brand-select-btn:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Transition for smooth animation */
.brand-select-btn,
.brand-selection-item,
.brand-logo-container {
    transition: all 0.2s ease !important;
}

/* ===== unified-selection-styles.css ===== */

/* Unified Selection Styles - Yellow borders and consistent hover animations */

/* Override all selection borders with gold/yellow */
.checkbox-option input:checked ~ *,
.radio-option input:checked ~ *,
.checkbox-option.selected,
.radio-option.selected,
.brand-tag.selected,
.style-option.selected,
.travel-destination-label input:checked ~ *,
.lifestyle-option input:checked ~ *,
.scene-option input:checked ~ *,
.clothing-item-checkbox input:checked ~ *,
.budget-range-card input:checked ~ *,
.budget-range-card.selected,
.item-option.selected,
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
    border-color: var(--accent-gold) !important;
}

/* Unified hover effect */
.checkbox-option:hover,
.radio-option:hover,
.brand-tag:hover,
.style-option:hover,
.travel-destination-label:hover,
.lifestyle-option:hover,
.scene-option:hover,
.clothing-item-checkbox:hover,
.budget-range-card:hover,
.item-option:hover,
.common-card:hover {
    border-color: var(--accent-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

/* Consistent transition for all interactive elements */
.checkbox-option,
.radio-option,
.brand-tag,
.style-option,
.travel-destination-label,
.lifestyle-option,
.scene-option,
.clothing-item-checkbox,
.budget-range-card,
.item-option,
.common-card {
    transition: all 0.3s ease !important;
}

/* Checkbox and radio button custom styling */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent-gold);
}

/* Custom checkbox appearance */
input[type="checkbox"]:checked::before {
    background-color: var(--accent-gold);
}

/* Form inputs on focus */
.form-input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Button hover states */
.btn-primary:hover,
.submit-button:hover,
button[type="submit"]:hover {
    background-color: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Image hover effects */
.style-image:hover,
.item-image:hover,
.brand-logo:hover,
.travel-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

/* Unified gold accent color variable */
:root {
    --accent-gold: #d4af37;
    --accent-gold-light: rgba(212, 175, 55, 0.1);
    --accent-gold-shadow: rgba(212, 175, 55, 0.2);
}

/* Override any conflicting styles */
.checkbox-option:hover,
.radio-option:hover,
.checkbox-option input:checked ~ *,
.radio-option input:checked ~ * {
    border-color: var(--accent-gold) !important;
}

/* Style option cards selected state */
.style-option-card input:checked ~ .style-option-content,
.style-variation-option input:checked ~ * {
    border-color: var(--accent-gold) !important;
    background-color: var(--accent-gold-light) !important;
}

/* Travel and lifestyle cards */
.travel-card-content:hover,
.lifestyle-card:hover,
.scene-card:hover {
    border-color: var(--accent-gold) !important;
}

/* ===== image-portrait-styles.css ===== */

/* Portrait-oriented image styles */

/* Style option images */
.style-option-card .style-image,
.style-variation-option .style-variation-image,
.travel-image,
.lifestyle-image,
.scene-image,
.item-image,
.brand-logo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4; /* Portrait ratio */
    object-fit: cover;
    object-position: center;
}

/* Travel destination images */
.travel-image {
    aspect-ratio: 3/4;
    max-height: 200px;
}

/* Lifestyle and scene images */
.lifestyle-image,
.scene-image {
    aspect-ratio: 3/4;
    max-height: 180px;
}

/* Item images in budget section */
.clothing-item-enhanced .item-image {
    aspect-ratio: 3/4;
    max-height: 160px;
}

/* Brand logos - keep square */
.brand-logo img,
.brand-logo-container img {
    aspect-ratio: 1/1;
    object-fit: contain;
}

/* Style pattern images */
.style-pattern-image {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 8px;
}

/* Avoid items images */
.avoid-item-image {
    aspect-ratio: 3/4;
    max-height: 150px;
}

/* Media queries for responsive adjustments */
@media (max-width: 768px) {
    .style-option-card .style-image,
    .style-variation-option .style-variation-image,
    .travel-image,
    .lifestyle-image,
    .scene-image,
    .item-image {
        aspect-ratio: 4/5; /* Slightly less tall on mobile */
    }
}

/* ===== style-patterns-5x3.css ===== */

/* Style Patterns 5x3 Grid Layout */

/* Override the 3x5 grid to 5x3 */
.pattern-grid-5 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 24px !important;
}

/* Adjust pattern item sizing for 3 columns */
.pattern-item {
    width: 100% !important;
    max-width: none !important;
}

/* Row preview adjustments for 3 items */
.row-preview {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-width: 300px !important;
}

.row-thumbnail {
    width: 100% !important;
    height: 60px !important;
}

/* Description text already updated in JavaScript */

/* Responsive adjustments */
@media (max-width: 1200px) {
    .pattern-grid-5 {
        gap: 16px !important;
    }

    .pattern-item .pattern-image-container {
        height: 250px !important;
    }
}

@media (max-width: 768px) {
    /* Keep 3 columns on tablet but smaller */
    .pattern-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .pattern-item .pattern-image-container {
        height: 180px !important;
    }

    .pattern-item-name {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Switch to 2 columns on mobile */
    .pattern-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .pattern-item .pattern-image-container {
        height: 150px !important;
    }
}

/* ===== style-patterns-gender-integrated.css ===== */

/* Style Patterns Gender Integrated - 5x3 Layout */

/* Pattern Selection Container */
.pattern-selections {
    background: #000;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #333;
    margin-top: 20px;
    color: #fff;
}

/* Toggle Pattern Section */
.toggle-pattern-section {
    margin-bottom: 30px;
}

.pattern-section-header {
    margin-bottom: 20px;
}

.pattern-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.pattern-section-description {
    color: #ccc;
    font-size: 0.9rem;
}

/* Pattern Row Section */
.pattern-row-section {
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #111;
}

.pattern-row-section.expanded .row-details {
    display: block;
}

.pattern-row-section.expanded .toggle-icon {
    transform: rotate(180deg);
}

/* Row Header */
.row-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #222;
    cursor: pointer;
    user-select: none;
    color: #fff;
    justify-content: space-between;
}

.row-header:hover {
    background: #333;
}

/* Row Preview */
.row-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 200px;
    flex-shrink: 0;
}

.row-thumbnail {
    width: 100%;
    height: 50px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    border: 1px solid #555;
}

.row-label {
    font-weight: 600;
    color: #fff;
    margin-left: auto;
}

.toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    color: #ccc;
    margin-left: 16px;
}

/* Row Details */
.row-details {
    display: none;
    padding: 20px;
    background: #000;
    color: #fff;
}

/* Pattern Grid - 5 rows x 3 columns */
.pattern-grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Pattern Item */
.pattern-item {
    background: #000;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    color: #fff;
}

.pattern-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pattern-item.evaluated.good {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.pattern-item.evaluated.bad {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

/* Pattern Image */
.pattern-image-container {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
}

.pattern-full-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Pattern Name */
.pattern-item-name {
    height: 40px;
    display: flex;
    margin: 16px auto 0;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-align: center;
}

.good-bad-selection {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.eval-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eval-option:hover {
    background: #f5f5f5;
}

.eval-option.good {
    color: #28a745;
}

.eval-option.good:has(input:checked) {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.eval-option.bad {
    color: #dc3545;
}

.eval-option.bad:has(input:checked) {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.eval-option input[type="radio"] {
    display: none;
}

.eval-option span {
    font-weight: 500;
}

/* Reason Selection */
.reason-selection {
    background: #222;
    padding: 12px;
    border-radius: 6px;
    margin-top: 12px;
    border: 1px solid #444;
}

.reason-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 8px;
}

.reason-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.reason-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.reason-checkbox span {
    font-size: 0.85rem;
    color: #fff;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pattern-grid-5 {
        gap: 16px;
    }

    .pattern-image-container {
        height: 240px;
    }
}

@media (max-width: 768px) {
    .pattern-grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .pattern-image-container {
        height: 200px;
    }

    .pattern-selections {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .pattern-grid-5 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .pattern-image-container {
        height: 250px;
    }

    .row-preview {
        max-width: 150px;
    }
}

/* Separator between styles */
hr {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 40px 0;
}

/* ===== brand-circular-logos.css ===== */

/* Brand Circular Logo Display */

/* Override for brand logo containers to make them circular */
.brand-logo-container {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
}

.brand-logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

/* Fallback for missing images - show brand initials */
.brand-logo-container::after {
    content: attr(data-brand-initial);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: 'Montserrat', sans-serif;
    z-index: -1;
}

.brand-logo-container img[style*="display: none"] + ::after {
    z-index: 1;
}

/* Enhanced brand selection item for circular logos */
.brand-selection-item {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Brand name styling */
.brand-selection-item .brand-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Selected state enhancement */
.brand-selection-item.selected {
    border-color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.05);
}

.brand-selection-item.selected .brand-logo-container {
    border-color: var(--accent-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Grid adjustment for better circular logo display */
.brand-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

/* Category headers with enhanced styling */
.brand-category-header {
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 0;
    margin: 32px 0 20px;
    border-bottom: 2px solid var(--accent-gold);
}

/* Transition for smooth animations */
.brand-logo-container,
.brand-logo-container img {
    transition: all 0.3s ease;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .brand-selection-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }

    .brand-logo-container {
        width: 100px;
        height: 100px;
    }

    .brand-logo-container::after {
        font-size: 28px;
    }

    .brand-selection-item {
        /* min-height: 240px; */
        padding: 20px 12px;
    }

    .brand-category-header {
        font-size: 16px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .brand-selection-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .brand-logo-container {
        width: 80px;
        height: 80px;
    }

    .brand-logo-container::after {
        font-size: 24px;
    }
}

/* ===== clothing-items-2col.css ===== */

/* Clothing Items 2 Column Layout Override */

/* Force 2 column layout for clothing items */
.clothing-items-enhanced-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 30px;
}

/* Enhanced styling for 2 column layout */
.clothing-item-enhanced {
    background: var(--surface-elevated);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

/* Larger images for 2 column layout */
.clothing-item-enhanced .item-image {
    width: 100%;
    height: 350px;
    object-fit: contain;
    background: var(--border-dark);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: transform 0.3s ease;
}

/* Item name styling */
.item-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    padding: 20px 0;
}

/* Content padding adjustment */
.item-content-enhanced {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Hover effects */
.clothing-item-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-gold);
}

.clothing-item-enhanced:hover .item-image {
    transform: scale(1.03);
}

/* Selected state enhancement */
.clothing-item-checkbox input:checked ~ .item-content-enhanced {
    background: rgba(212, 175, 55, 0.15);
    position: relative;
}

/* Budget selector styling for 2 column layout */
.item-budget-selector {
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border-color);
}

.budget-label {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 15px;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .clothing-items-enhanced-grid {
        gap: 20px;
    }

    .clothing-item-enhanced .item-image {
        height: 300px;
    }
}

@media (max-width: 768px) {
    /* Keep 2 columns on tablet */
    .clothing-items-enhanced-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .clothing-item-enhanced .item-image {
        height: 200px;
        max-width: 100%;
    }

    .item-name {
        font-size: 16px;
    }

    .item-content-enhanced {
    }
}

@media (max-width: 480px) {
    /* Switch to single column on small mobile */
    .clothing-items-enhanced-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .clothing-item-enhanced .item-image {
        height: 250px;
    }
}

/* ===== clothing-items-checkbox-fix.css ===== */

/* Fix for duplicate checkbox display in clothing items */

/* First, remove any inherited checkbox styles */
.clothing-items-enhanced-grid .checkbox-option {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Hide the browser's default checkbox completely */
.clothing-item-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Style the custom checkbox */
.clothing-item-checkbox {
    position: relative;
}

/* Checked state */
.clothing-item-checkbox input:checked ~ .item-content-enhanced::before {
    border-color: var(--accent-gold);
}

/* Hover effect */
.clothing-item-checkbox:hover .item-content-enhanced::before {
    border-color: var(--accent-gold);
    transform: scale(1.1);
}

/* Ensure the entire card is clickable */
.clothing-item-checkbox {
    cursor: pointer;
}

/* Remove any additional checkbox styling from parent theme */
.clothing-items-enhanced-grid .checkbox-option::before,
.clothing-items-enhanced-grid .checkbox-option::after {
    display: none !important;
}

/* Ensure proper layout */
.clothing-item-checkbox .item-content-enhanced {
    position: relative;
}

/* Alternative solution if checkboxes still appear */
.clothing-items-enhanced-grid input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none !important;
}

/* ===== clothing-items-simple.css ===== */

/* Simple fix for clothing items checkbox display */

/* Override all checkbox styles in clothing items section */
.clothing-items-enhanced-grid .checkbox-option {
    all: unset !important;
    display: block !important;
    cursor: pointer !important;
}

/* Completely hide the checkbox input */
.clothing-items-enhanced-grid input[type="checkbox"] {
    display: none !important;
}

/* Remove any pseudo elements that might create checkboxes */
.clothing-items-enhanced-grid .checkbox-option::before,
.clothing-items-enhanced-grid .checkbox-option::after,
.clothing-items-enhanced-grid .clothing-item-checkbox::before,
.clothing-items-enhanced-grid .clothing-item-checkbox::after {
    display: none !important;
    content: none !important;
}

/* Ensure the item is styled properly */
.clothing-item-enhanced {
    position: relative;
}

/* Visual feedback for selected state */
.clothing-item-enhanced:has(input:checked) {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2) !important;
}

/* ===== fashion-literacy-styles.css ===== */

/* Fashion Literacy Conditional Display Styles */

/* Ensure conditional items are hidden initially */
.fashion-literacy-conditional {
    /* Remove !important to allow JavaScript to override */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

/* When shown via JavaScript */
.fashion-literacy-conditional[style*="display: flex"] {
    transform: translateY(0) !important;
}

/* Visual distinction for conditional items */
.fashion-literacy-conditional {
    position: relative;
    border-left: 3px solid #ff9800 !important;
    padding-left: 15px !important;
    background-color: rgba(255, 152, 0, 0.05) !important;
}

/* Add a label for conditional section */
.fashion-literacy-conditional:first-of-type::before {
    content: "詳細項目";
    position: absolute;
    top: -25px;
    left: -20px;
    font-size: 12px;
    color: #ff9800;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover effect for conditional items */
.fashion-literacy-conditional:hover {
    background-color: rgba(255, 152, 0, 0.1) !important;
    border-left-color: #f57c00 !important;
}

/* Ensure proper spacing */
.checkbox-group {
    position: relative;
}

/* Add visual separator before conditional items */
.fashion-literacy-conditional:first-of-type {
    margin-top: 25px !important;
    padding-top: 25px !important;
    border-top: 1px solid rgba(255, 152, 0, 0.3);
}

/* Animation for showing items */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fashion-literacy-conditional[style*="display: flex"] {
    animation: fadeInSlide 0.3s ease forwards;
}

/* ===== responsive-compact.css ===== */

/* Responsive Compact Styles - Reduce text size and spacing on smaller screens */

/* Input fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  padding: 10px !important;
  font-size: 14px !important;
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
  /* Global text size reduction */
  body {
    font-size: 14px !important;
  }

  /* Form container */
  .complete-form-container {
    padding: 20px !important;
    max-width: 100% !important;
  }

  /* Header adjustments */
  .form-header {
    padding: 20px !important;
    margin-bottom: 20px !important;
  }

  .main-title {
    font-size: 28px !important;
    margin-bottom: 8px !important;
  }

  .main-subtitle {
    font-size: 14px !important;
  }

  /* Section spacing */
  .form-section {
    padding: 20px !important;
    margin-bottom: 20px !important;
  }

  .section-title {
    font-size: 20px !important;
    margin-bottom: 15px !important;
  }

  /* Form groups */
  .form-group {
    margin-bottom: 20px !important;
  }

  .form-group label {
    font-size: 14px !important;
  }

  /* Checkboxes and radios */
  .checkbox-group,
  .radio-group {
    gap: 10px !important;
  }

  .checkbox-label,
  .radio-label {
    padding: 10px 15px !important;
    font-size: 14px !important;
  }

  /* Brand selection */
  .brand-grid {
    gap: 15px !important;
    padding: 15px !important;
  }

  .brand-selection-item {
    padding: 10px !important;
  }

  .brand-name {
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  /* Style patterns */
  .pattern-section {
    margin-bottom: 20px !important;
  }

  .pattern-section-header {
    margin-bottom: 15px !important;
  }

  .pattern-section-title {
    font-size: 18px !important;
  }

  .pattern-section-description {
    font-size: 13px !important;
  }

  .pattern-grid-5 {
    gap: 15px !important;
    padding: 20px !important;
  }

  .pattern-item-name {
    font-size: 13px !important;
  }

  /* Row headers */
  .row-header {
    padding: 12px !important;
    gap: 10px !important;
  }

  .row-label {
    font-size: 13px !important;
  }

  .good-bad-selection {
    gap: 8px !important;
  }

  .eval-option {
    font-size: 12px !important;
  }

  /* Rating buttons */
  .rating-buttons {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .rating-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  /* Further text reduction */
  body {
    font-size: 13px !important;
  }

  /* Container padding */
  .complete-form-container {
    padding: 15px !important;
  }

  /* Header */
  .form-header {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }

  .main-title {
    font-size: 24px !important;
    margin-bottom: 5px !important;
  }

  .main-subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Sections */
  .form-section {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }

  .section-title {
    font-size: 18px !important;
    margin-bottom: 12px !important;
  }

  /* Form elements */
  .form-group {
    margin-bottom: 15px !important;
  }

  .form-group label {
    font-size: 13px !important;
  }

  /* Inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Checkboxes */
  .checkbox-group,
  .radio-group {
    gap: 8px !important;
  }

  .checkbox-label,
  .radio-label {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Brand grid */
  .brand-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .brand-selection-item {
    padding: 8px !important;
  }

  .brand-logo-container {
    width: 70px !important;
    height: 70px !important;
    font-size: 16px !important;
  }

  .brand-name {
    font-size: 11px !important;
    margin-top: 6px !important;
  }

  .brand-selection-buttons {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .brand-select-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }

  /* Pattern sections */
  .pattern-section-header {
    margin-bottom: 12px !important;
  }

  .pattern-section-title {
    font-size: 16px !important;
  }

  .pattern-section-description {
    font-size: 12px !important;
  }

  .pattern-grid-5 {
    gap: 12px !important;
    padding: 15px !important;
  }

  .pattern-item .pattern-image-container {
    height: 140px !important;
  }

  .pattern-item-name {
    font-size: 12px !important;
  }

  /* Row elements */
  .row-header {
    padding: 10px !important;
    gap: 8px !important;
  }

  .row-preview {
    gap: 4px !important;
  }

  .row-thumbnail {
    height: 40px !important;
  }

  .row-label {
    font-size: 12px !important;
  }

  /* Evaluation */
  .good-bad-selection {
    gap: 6px !important;
  }

  .eval-option {
    font-size: 11px !important;
  }

  .rating-buttons {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .rating-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* Clothing items */
  .clothing-items-container {
    gap: 8px !important;
  }

  .clothing-item-box {
    padding: 8px !important;
  }

  .clothing-item-name {
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  /* Fashion literacy */
  .fashion-literacy-item {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
  /* Minimum text size */
  body {
    font-size: 12px !important;
  }

  /* Minimal padding */
  .complete-form-container {
    padding: 10px !important;
  }

  /* Compact header */
  .form-header {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  .main-title {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }

  .main-subtitle {
    font-size: 12px !important;
  }

  /* Minimal sections */
  .form-section {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  .section-title {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  /* Compact form groups */
  .form-group {
    margin-bottom: 12px !important;
  }

  .form-group label {
    font-size: 12px !important;
  }

  /* Small inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Compact brand grid */
  .brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .brand-logo-container {
    width: 60px !important;
    height: 60px !important;
    font-size: 14px !important;
  }

  .brand-name {
    font-size: 10px !important;
  }

  .brand-select-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  /* Compact patterns */
  .pattern-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .pattern-item .pattern-image-container {
    height: 120px !important;
  }

  .pattern-item-name {
    font-size: 11px !important;
  }

  /* Minimal evaluation */
  .eval-option {
    font-size: 10px !important;
  }

  .rating-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  /* Submit button */
  .submit-button {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }
}

/* Extra small devices (360px and below) */
@media (max-width: 360px) {
  /* Ultra compact */
  .complete-form-container {
    padding: 8px !important;
  }

  .main-title {
    font-size: 18px !important;
  }

  .section-title {
    font-size: 14px !important;
  }

  /* Single column for brands */
  .brand-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* Single column for patterns */
  .pattern-grid-5 {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}


/* ===== postal-error-fix.css ===== */

/* Postal Code Error Display Fix */

/* Ensure postal code error appears below the entire postal input group */
.postal-code-group {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Keep postal inputs inline */
.postal-code-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Position error message below the postal inputs */
.postal-code-group .error-message,
.postal-code-group .postal-error-container {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    flex: 0 0 100% !important;
}

/* Prevent error from breaking flex layout */
.postal-code-inputs .error-message {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 8px !important;
}

/* Ensure consistent error styling */
.postal-error-container {
    color: #ff4444;
    font-size: 14px;
    line-height: 1.4;
}

/* Add spacing when error is shown */
.postal-code-group.has-error {
    margin-bottom: 30px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .postal-code-group .error-message,
    .postal-code-group .postal-error-container {
        font-size: 13px !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 480px) {
    .postal-code-group .error-message,
    .postal-code-group .postal-error-container {
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    /* Adjust spacing for smaller screens */
    .postal-code-group.has-error {
        margin-bottom: 25px;
    }
}

/* ===== other-option-styles.css ===== */

/* Styles for "その他" (Other) option text inputs */

/* Wrapper for other text inputs */
.other-text-input-wrapper {
    margin-top: 10px;
    margin-left: 24px;
    transition: all 0.3s ease;
}

/* Text input styling */
.other-text-input {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.other-text-input:focus {
    outline: none;
    border-color: #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
}

.other-text-input::placeholder {
    color: #999;
    font-size: 13px;
}

/* Error state */
.other-text-input.error {
    border-color: #ff4444;
}

/* Budget section specific styling */
.budget-item .other-text-input-wrapper {
    margin-top: 8px;
    margin-left: 0;
}

.budget-item .other-text-input {
    font-size: 13px;
    padding: 6px 10px;
}

/* Travel section specific styling */
.travel-options .other-text-input-wrapper {
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .other-text-input-wrapper {
        margin-left: 16px;
    }

    .other-text-input {
        font-size: 13px;
        padding: 6px 10px;
    }
}

@media (max-width: 480px) {
    .other-text-input-wrapper {
        margin-left: 12px;
        margin-top: 8px;
    }

    .other-text-input {
        font-size: 12px;
        padding: 5px 8px;
    }

    .other-text-input::placeholder {
        font-size: 12px;
    }
}

/* Animation for showing/hiding */
.other-text-input-wrapper {
    animation: fadeIn 0.3s ease;
}

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

/* Integration with existing form styles */
.checkbox-group .other-text-input-wrapper {
    width: calc(100% - 24px);
}

.radio-group .other-text-input-wrapper {
    width: 100%;
    margin-left: 0;
    margin-top: 12px;
}

/* ===== pattern-evaluation-rich.css ===== */

/* Rich Pattern Evaluation Styles */

/* Enhanced evaluation section */
.evaluation-section {
    margin-top: 12px;
    transition: all 0.3s ease;
}

.pattern-item:hover .evaluation-section {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Good/Bad selection container */
.good-bad-selection {
    display: flex;
    gap: 8px;
    justify-content: center;
    position: relative;
    padding: 4px;
    border-radius: 8px;
}

/* Evaluation option styling */
.eval-option {
    position: relative;
    flex: 1;
    transition: all 0.3s ease;
}

.eval-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eval-option span {
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Good option styling */
.eval-option.good span {
    color: #2e7d32;
    border: none;
}

.eval-option.good input:checked ~ span {
    color: white;
}

/* Bad option styling */
.eval-option.bad span {
    color: #c62828;
    border: none;
}

.eval-option.bad input:checked ~ span {
    background: #c62828;
    color: white;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.2);
}

/* Selected state animations */
.eval-option input:checked ~ span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple {
    from {
        width: 0;
        height: 0;
        opacity: 1;
    }
    to {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

/* Enhanced rating section */
.rating-section {
    margin-top: 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.rating-section.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Rating buttons with enhanced styling */
.rating-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 12px;
    background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.rating-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.rating-btn:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Good rating buttons */
.eval-option.good input:checked ~ .rating-section .rating-btn {
    color: #2e7d32;
    border: none;
}

.eval-option.good input:checked ~ .rating-section .rating-btn:hover {
    background: #f1f8f4;
}

.eval-option.good input:checked ~ .rating-section .rating-btn.active {
    background: #2e7d32;
    color: white;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
}

/* Bad rating buttons */
.eval-option.bad input:checked ~ .rating-section .rating-btn {
    color: #c62828;
    border: none;
}

.eval-option.bad input:checked ~ .rating-section .rating-btn:hover {
    background: #fef5f5;
}

.eval-option.bad input:checked ~ .rating-section .rating-btn.active {
    background: #c62828;
    color: white;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.2);
}

/* Pattern item selected state */
.pattern-item.has-evaluation {
    position: relative;
}

.pattern-item.has-evaluation::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pattern-item.has-evaluation.good-selected::before {
    background: #2e7d32;
    opacity: 0.05;
}

.pattern-item.has-evaluation.bad-selected::before {
    background: #c62828;
    opacity: 0.05;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .eval-option span {
        padding: 8px 12px;
        font-size: 13px;
    }

    .eval-option span::before {
        font-size: 14px;
        margin-right: 4px;
    }

    .rating-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .evaluation-section {
        margin-top: 8px;
    }

    .good-bad-selection {
        gap: 6px;
        padding: 3px;
    }

    .eval-option span {
        padding: 6px 10px;
        font-size: 12px;
    }

    .eval-option span::before {
        display: none; /* Hide emoji on small screens */
    }

    .rating-buttons {
        gap: 6px;
        padding: 8px;
    }

    .rating-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}
/* Photo Upload Responsive Design */
@media (max-width: 768px) {
    .photo-upload-section {
        padding: 30px 0;
    }

    .photo-upload-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    .photo-preview {
        width: 200px;
        height: 200px;
        min-width: 200px;
        min-height: 200px;
    }

    .photo-upload-container {
        width: 200px;
        min-width: 200px;
    }

    .photo-upload-section {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .photo-preview {
        width: 180px;
        height: 180px;
        min-width: 180px;
        min-height: 180px;
    }

    .photo-upload-container {
        width: 180px;
        min-width: 180px;
    }

    .photo-type-description {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }
}