@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --sidebar-width: 260px;
    --header-height: 60px;
    --primary-color: #79d19f; /* DineMint Green */
    --secondary-color: #d7ccc8; /* Light Coffee - Kept as is or user didn't specify */
    --accent-color: #79d19f;    /* DineMint Green */
    --text-color: #2c2c2c;      /* Softer Black */
    --bg-color: #fbfbfa;
    --sidebar-bg: #fbfbfa;      /* Match Body Background */
    --sidebar-text: #4a4a4a;    /* Dark Gray Text */
    --white: #ffffff;
    --border-color: #e0e0e0;
    --switch-width: 50px;
    --switch-height: 26px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Softer Font */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ... (Existing Layout Grid / Sidebar remains similar, but using new variables) ... */

/* Layout Grid */
.dashboard-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    transition: all 0.3s ease;
    z-index: 1000;
    border-right: 1px solid #eee; /* Add subtle border for separation */
    box-shadow: 2px 0 12px rgba(0,0,0,0.02); /* Very subtle shadow */
}

.sidebar-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: transparent; /* Remove dark tint */
    border-bottom: 1px solid #f0f0f0; /* Light border */
}

.brand-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c2c2c; /* Dark text */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
}

.user-profile-section {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0; /* Light border */
}

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: #f0f0f0; /* Light gray bg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #555; /* Darker text */
    font-size: 0.9rem;
}

.user-info h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #2c2c2c; /* Dark text */
    font-weight: 600;
}

.user-info p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #888; /* Medium gray */
}

.sidebar-nav {
    padding: 20px 0;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #666; /* Darker gray for inactive */
    text-decoration: none;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    font-weight: 500;
}

.nav-item:hover, .nav-item.active {
    background-color: rgba(0,0,0,0.03); /* Subtle dark overlay for hover */
    color: var(--primary-color); /* Brand color for active */
    border-left-color: var(--accent-color);
}

.nav-item i {
    width: 24px;
    margin-right: 10px;
    text-align: center;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 30px;
    padding-top: 80px; /* Add top padding for fixed toggle/header overlap avoidance */
    transition: margin-left 0.3s ease;
}

/* Sidebar Toggle Arrow (Desktop) */
.sidebar-toggle-arrow {
    position: absolute;
    top: 30px; /* Aligned near logo/top area */
    right: -14px; /* Half overlapping border */
    width: 28px;
    height: 28px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 0.8rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    z-index: 1002;
}

.sidebar-toggle-arrow:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

/* --- Desktop Collapse Logic (.active = Collapsed) --- */
.sidebar.active { width: 80px; }
.sidebar.active ~ .main-content { margin-left: 80px; }

/* Hide Text Elements when Collapsed */
.sidebar.active .brand-logo span,
.sidebar.active .user-info,
.sidebar.active .section-title {
    display: none;
}

/* Initially hide nav text in collapsed mode */
.sidebar.active .nav-item span {
    display: none;
}

/* Tooltip on Hover for Collapsed Sidebar items */
.sidebar.active .nav-item {
    position: relative; /* Anchor for tooltip */
    overflow: visible; /* Allow tooltip to show outside */
}

.sidebar.active .nav-item:hover span {
    display: block;
    position: absolute;
    left: calc(100% + 15px); /* Offset from icon */
    top: 50%;
    transform: translateY(-50%);
    background-color: #222; /* Dark tooltip background */
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
}

/* Tooltip Arrow */
.sidebar.active .nav-item:hover span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-style: solid;
    border-color: transparent #222 transparent transparent;
}

/* Center Icons when Collapsed */
.sidebar.active .nav-item { justify-content: center; padding: 14px 0; }
.sidebar.active .nav-item i { margin-right: 0; font-size: 1.2rem; }
.sidebar.active .brand-logo { justify-content: center; }
.sidebar.active .user-profile-section { padding: 20px 0; }
.sidebar.active .user-card { justify-content: center; }
.sidebar.active .brand-logo img { height: 28px; } /* Slightly smaller logo */

/* Mobile Responsive Overrides */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 260px; /* Restore width */
    }
    /* Mobile Active = Visible (Not Collapsed) */
    .sidebar.active {
        transform: translateX(0);
        width: 260px;
    }

    .main-content { margin-left: 0 !important; padding: 20px; padding-top: 70px; }

    .main-content { margin-left: 0 !important; padding: 20px; padding-top: 70px; }

    /* Reveal arrow even if sidebar off-screen?
       Actually on mobile we want a different behavior usually (hamburger).
       But user asked for arrow. Let's make the arrow visible when sidebar is closed?
       Or simply keep using the arrow but inside the sidebar wrapper.
       If sidebar is X:-100%, arrow is also hidden. We need a trigger to OPEN it on mobile.

       Decision: For mobile, we might still need a distinct trigger if the sidebar is completely hidden.
       The user said "instead of hamburger", but on mobile if sidebar is hidden, you can't see the arrow attached to it.
       So on mobile, we'll keep the arrow attached to the sidebar edge (right edge).
       When sidebar is hidden (-100%), the arrow should maybe peek out?
       Or just keep a fixed toggle for mobile only?
       Let's try to make the arrow float on the left edge of screen when sidebar is hidden.
    */

    .sidebar-toggle-arrow {
        right: -30px; /* Push it out so it's visible when sidebar is hidden? */
        /* Wait, if sidebar has transform translateX(-100%), children move with it. */
        /* We need a Fixed toggle for mobile if we want to open it from closed state. */
    }

    /* On mobile, if sidebar is closed (default), we need a way to open it.
       The arrow inside .sidebar will be hidden.
       Let's stick to the user request. But if I hide hamburger, mobile users contain't open menu.
       I will assume the arrow on Mobile should act as the opener.
    */

    /* Override for Mobile to make the arrow fixed on screen if sidebar is hidden? */
    /* Easier way: Keep the arrow fixed valid for mobile. */

    /* Restore Text on Mobile Active */
    .sidebar.active .brand-logo span,
    .sidebar.active .nav-item span,
    .sidebar.active .user-info { display: block; }
    .sidebar.active .nav-item { justify-content: flex-start; padding: 12px 20px; }
    .sidebar.active .nav-item i { margin-right: 10px; }
    .sidebar.active .brand-logo { justify-content: flex-start; }
    .sidebar.active .user-profile-section { padding: 20px; }
    .sidebar.active .user-card { justify-content: flex-start; }
}

/* Utility / Tables */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.5px;
}

.content-card {
    background: var(--white);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.03);
}

.table-container { width: 100%; overflow-x: auto; }
.modern-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.modern-table th {
    background-color: #fafafa;
    color: #555;
    font-weight: 600;
    text-align: left;
    padding: 16px 24px;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}
.modern-table td { padding: 16px 24px; border-bottom: 1px solid #f5f5f5; color: #444; }
.modern-table tr:hover { background-color: #fbfbfb; }

.action-btn {
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    line-height: normal;
}

/* Standard Button Classes */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px; /* Standard rounded corner, not pill unless specified */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none; /* Critical fix for underlined links */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    line-height: 1.2;
    font-family: inherit;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-decoration: none;
}

.btn:active {
    transform: scale(0.98);
}

/* Primary Button */
.btn-primary, .btn-primary-action {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary-action:hover {
    background-color: var(--accent-color);
    filter: brightness(105%);
    color: white;
    opacity: 1; /* Reset opacity from previous definition */
}

/* Secondary Button */
.btn-secondary {
    background-color: white;
    color: #444;
    border-color: #e0e0e0;
}

.btn-secondary:hover {
    border-color: #ccc;
    background-color: #f9f9f9;
    color: #333;
}

/* Breadcrumbs (Premium) */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    color: #667085; /* Neutral gray */
    font-weight: 500;
}

.breadcrumb a {
    color: var(--accent-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
    border-radius: 6px;
    padding: 4px 8px;
}

.breadcrumb a:hover {
    color: var(--text-color);
    background: #f9fafb;
}

.breadcrumb-separator {
    color: #98a2b3; /* Lighter gray */
    font-size: 0.8rem;
}

.breadcrumb-current {
    color: var(--text-color);
    font-weight: 600;
    background: #f2f4f7;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Clickable Cards */
.clickable-card {
    cursor: pointer;
}


/* Menu Builder Cards */
.builder-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px; background: white; padding: 20px;
    border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.nested-list { list-style: none; padding-left: 0; }
.nested-list .nested-list { padding-left: 24px; margin-top: 12px; }
.nested-list .nested-list .nested-list { padding-left: 24px; }
.nested-item { margin-bottom: 16px; }

.menu-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.menu-card.section-card { border-left: 4px solid var(--primary-color); }
.menu-card.category-card { border-left: 4px solid var(--secondary-color); margin-bottom: 10px; }
.menu-card.item-card { border: 1px solid #f5f5f5; border-left: 4px solid #e0e0e0; margin-bottom: 8px; }

/* Headers inside cards */
.section-header, .category-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #fff; }
.section-title { font-size: 1.1rem; font-weight: 700; color: var(--primary-color); display: flex; gap: 10px; align-items: center; }
.category-title { font-size: 1rem; font-weight: 600; color: #444; display: flex; gap: 10px; align-items: center; }

/* Item Row */
.item-row { padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.item-meta { display: flex; align-items: center; gap: 16px; }
.item-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #f0f0f0; }
.item-name { font-weight: 600; color: #333; font-size: 0.95rem; }
.item-price { font-size: 0.9rem; color: #777; margin-top: 2px; }

/* Actions & Icons */
.drag-handle { color: #ccc; cursor: grab; padding: 6px; transition: color 0.2s; }
.drag-handle:hover { color: #666; }
.collapse-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #999; transition: transform 0.3s ease; }
.expanded .collapse-icon { transform: rotate(90deg); color: #555; }
.btn-icon-text { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; text-decoration: none; transition: all 0.2s; font-weight: 500; }
.btn-ghost { color: #666; }
.btn-ghost:hover { background: #f5f5f5; color: #222; }

/* --- PREMIUM TOGGLE SWITCH --- */
/* Base Switch Container */
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

/* Hide Default Checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The Slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  transition: .3s;
  border-radius: 34px; /* Rounded */
  border: 1px solid #dcdcdc;
}

/* The Circle */
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Checked State */
input:checked + .slider {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* Focus State */
input:focus + .slider {
  box-shadow: 0 0 1px var(--accent-color);
}


/* --- PREMIUM MODAL & FORM STYLES --- */
.modern-form-container {
    padding: 30px; /* Increased padding */
}

.form-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 30px; padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}
.form-header h1 { font-size: 1.4rem; font-weight: 700; color: #222; margin: 0; display: flex; align-items: center; gap: 10px; }
.form-header .header-badge { background: #e8f5e9; color: #2e7d32; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* Form Grid */
.form-row { display: flex; gap: 20px; margin-bottom: 24px; }
.form-col { flex: 1; }
.form-group { margin-bottom: 24px; position: relative; }

.form-label {
    display: block; font-size: 0.9rem; font-weight: 600; color: #444; margin-bottom: 8px;
}

.form-input {
    width: 100%; padding: 14px 16px;
    border: 1px solid #e0e0e0; border-radius: 12px;
    font-size: 1rem; color: #333; background: #fff;
    transition: all 0.2s ease; box-sizing: border-box;
    font-family: inherit;
}
.form-input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(121, 209, 159, 0.2); outline: none; }
textarea.form-input { min-height: 120px; resize: vertical; line-height: 1.6; }

/* Color Input Override */
input[type="color"].form-input {
    padding: 4px;
    height: 50px;
    cursor: pointer;
    background-color: white; /* Ensure visible background for picker area */
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px; /* Match form radius - 4px padding */
}

/* Chips */
.tags-input-container {
    border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; background: #fff;
    max-height: 200px; overflow-y: auto;
}
.tag-chips-wrapper { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: #f8f9fa; border: 1px solid #eee; border-radius: 24px;
    font-size: 0.9rem; color: #555; cursor: pointer; transition: all 0.2s; font-weight: 500;
}
.tag-chip:hover { background: #fff; border-color: #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.tag-chip.selected { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; padding-right: 14px; }

/* Dropzone Fix */
.upload-container { margin-top: 8px; }
.drop-zone {
    border: 2px dashed #e0e0e0; border-radius: 16px; padding: 32px 20px;
    background: #fafafa; cursor: pointer; transition: all 0.2s;
    width: 100%; box-sizing: border-box;
    /* Flex Center Fix */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Hidden Input */
.hidden-input {
    display: none !important;
}

/* Thumbnails Grid */
.thumbnails-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.thumbnail-card {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.thumbnail-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover Overlay Actions */
.thumbnail-actions {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.thumbnail-card:hover .thumbnail-actions {
    opacity: 1;
}

.action-btn-icon {
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    font-size: 12px;
    text-decoration: none;
    transition: transform 0.1s;
}

.action-btn-icon:hover { transform: scale(1.1); }
.view-btn { color: var(--accent-color); }
.delete-btn { color: #e74c3c; }
.drop-zone:hover { border-color: var(--accent-color); background: #f1f8f3; }
.upload-icon-wrapper {
    width: 56px; height: 56px; background: white; border-radius: 50%;
    margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.06); font-size: 28px;
}

.form-actions {
    display: flex; justify-content: flex-end; gap: 16px; margin-top: 40px;
    padding-top: 24px; border-top: 1px solid #f0f0f0;
}
.btn-submit {
    background: var(--accent-color); color: white; border: none; padding: 14px 32px;
    border-radius: 10px; font-weight: 600; font-size: 1rem; cursor: pointer;
    transition: all 0.2s; box-shadow: 0 4px 10px rgba(121, 209, 159, 0.25);
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(121, 209, 159, 0.35); }
.btn-cancel {
    background: transparent; color: #666; border: 1px solid #e0e0e0; padding: 14px 28px;
    border-radius: 10px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s;
}
.btn-cancel:hover { background: #f9f9f9; color: #333; border-color: #ccc; }

/* --- Global Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply to Main Areas */
.main-content {
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Cards Animation */
.content-card, .menu-card {
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation-fill-mode: both;
}

/* Staggered Delays for Cards */
.content-card:nth-child(1), .menu-card:nth-child(1) { animation-delay: 0.05s; }
.content-card:nth-child(2), .menu-card:nth-child(2) { animation-delay: 0.1s; }
.content-card:nth-child(3), .menu-card:nth-child(3) { animation-delay: 0.15s; }
.content-card:nth-child(4), .menu-card:nth-child(4) { animation-delay: 0.2s; }
.content-card:nth-child(5), .menu-card:nth-child(5) { animation-delay: 0.25s; }

/* Modal Animation */
.modal-content {
    animation: fadeInScale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Enhanced Hover Effects */
.clickable-card, .menu-card, .btn-submit, .action-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.clickable-card:hover, .menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08); /* More pronounced shadow */
}

.btn-submit:active, .action-btn:active {
    transform: scale(0.96);
}

/* Sidebar Item Hover Micro-interaction */
.nav-item {
    transition: all 0.2s ease;
}

.nav-item:hover i {
    transform: scale(1.1);
    color: var(--primary-color);
}

/* Modal Main Container Fade-In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    animation: fadeIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Clean Selection Cards (Import UI) --- */
.selection-group {
    margin-bottom: 24px;
}

.selection-group-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    margin-left: 4px;
}

.selection-card {
    display: flex;
    align-items: center;
    padding: 16px 20px; /* More breathing room */
    background: white;
    border-radius: 16px; /* High roundness */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Soft subtle shadow */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 2px solid transparent; /* Reserve space */
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.selection-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.selection-card.selected {
    border-color: var(--accent-color);
    background-color: var(--white); /* Keep white for cleanliness */
    box-shadow: 0 8px 20px rgba(121, 209, 159, 0.2); /* Colored shadow */
}

/* Hide actual checkbox */
.selection-card input[type="checkbox"] {
    display: none;
}

/* Custom Indicator */
.selection-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Circle */
    border: 2px solid #eee;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #fafafa;
    flex-shrink: 0;
}

.selection-card:hover .selection-indicator {
    border-color: #ddd;
}

.selection-card.selected .selection-indicator {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.1);
}

.selection-indicator::after {
    content: ''; /* Checkmark handled by font or SVG, or simpler CSS check */
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s;
    margin-bottom: 2px; /* Eye-ball centering */
}

.selection-card.selected .selection-indicator::after {
    opacity: 1;
}

.selection-content {
    flex: 1;
}

.selection-title {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    margin-bottom: 4px;
}

.selection-desc {
    font-size: 0.85rem;
    color: #999;
}