/* ==========================================================================
   CSS RESET & VARIABLES
   ========================================================================== */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Color palette */
:root {
    /* Primary Colors */
    --darkblue: #1e3a5f; /* Body background, list item backgrounds, item header backgrounds, landing page backgrounds and text */

    --darkdarkblue: #152843; /* Modal backgrounds, date picker surfaces, landing page text */
    --darkdarkblue-20: color-mix(in srgb, var(--darkdarkblue) 20%, transparent);
    --darkdarkblue-30: color-mix(in srgb, var(--darkdarkblue) 30%, transparent);
    --darkdarkblue-80: color-mix(in srgb, var(--darkdarkblue) 80%, transparent);
    --darkdarkblue-95: color-mix(in srgb, var(--darkdarkblue) 95%, transparent);

    --blue: #2a4a75; /* Item backgrounds (asset-item, liability-item, income-item, expense-item, payment-item) */
    --blue-40: color-mix(in srgb, var(--blue) 40%, transparent);
    --blue-60: color-mix(in srgb, var(--blue) 60%, transparent);

    --lightblue: #4a90e2; /* Plus button backgrounds, button text, borders, date picker primary color, header underlines */
    --lightblue-10: color-mix(in srgb, var(--lightblue) 10%, transparent);
    --lightblue-20: color-mix(in srgb, var(--lightblue) 20%, transparent);
    --lightblue-30: color-mix(in srgb, var(--lightblue) 30%, transparent);
    --lightblue-50: color-mix(in srgb, var(--lightblue) 50%, transparent);

    --highlightblue: #4a7aaa; /* Input field border on focus */
    --highlightblue-50: color-mix(in srgb, var(--highlightblue) 50%, transparent);

    /* Accent Colors */
    --keylime: #c8f279; /* Primary button backgrounds, button text, borders, time machine elements, highlights, gradients */
    --keylime-10: color-mix(in srgb, var(--keylime) 10%, transparent);
    --keylime-15: color-mix(in srgb, var(--keylime) 15%, transparent);
    --keylime-20: color-mix(in srgb, var(--keylime) 20%, transparent);
    --keylime-25: color-mix(in srgb, var(--keylime) 25%, transparent);
    --keylime-30: color-mix(in srgb, var(--keylime) 30%, transparent);
    --keylime-35: color-mix(in srgb, var(--keylime) 35%, transparent);
    --keylime-40: color-mix(in srgb, var(--keylime) 40%, transparent);
    --keylime-50: color-mix(in srgb, var(--keylime) 50%, transparent);
    --keylime-60: color-mix(in srgb, var(--keylime) 60%, transparent);
    --keylime-90: color-mix(in srgb, var(--keylime) 90%, transparent);

    --lightgreen: #70d588; /* Add button hover font color */
    --mossgreen: #48b160; /* Add button hover background (unused in CSS, hardcoded in Python) */
    --darkgreen: #1d5429; /* Add button hover background (unused in CSS, hardcoded in Python) */

    /* Text Colors */
    --white: #e0e6ed; /* Body text, button text, modal text, general text color */
    --white-50: color-mix(in srgb, var(--white) 50%, transparent);
    --white-60: color-mix(in srgb, var(--white) 60%, transparent);
    --white-75: color-mix(in srgb, var(--white) 75%, transparent);
    --white-80: color-mix(in srgb, var(--white) 80%, transparent);
    --white-90: color-mix(in srgb, var(--white) 90%, transparent);

    --blueishwhite: #b0c4de; /* Text input color, selection text color */
    --blueishwhite-50: color-mix(in srgb, var(--blueishwhite) 50%, transparent);

    --realwhite: #fff; /* Borders (with opacity variants) */
    --realwhite-05: color-mix(in srgb, var(--realwhite) 5%, transparent);
    --realwhite-08: color-mix(in srgb, var(--realwhite) 8%, transparent);
    --realwhite-10: color-mix(in srgb, var(--realwhite) 10%, transparent);
    --realwhite-15: color-mix(in srgb, var(--realwhite) 15%, transparent);
    --realwhite-20: color-mix(in srgb, var(--realwhite) 20%, transparent);
    --realwhite-30: color-mix(in srgb, var(--realwhite) 30%, transparent);
    --realwhite-35: color-mix(in srgb, var(--realwhite) 35%, transparent);

    --newspapergrey: #aeaeae; /* Header text color */
    --lightgrey: #70849F; /* Remove button text, secondary text, borders */
    --lightgrey-40: color-mix(in srgb, var(--lightgrey) 40%, transparent);
    --lightgrey-50: color-mix(in srgb, var(--lightgrey) 50%, transparent);

    --lightlightgrey: #ddd; /* Text area borders */

    /* Background Colors */
    --darkgreyblue: #3b4f6c; /* Input field backgrounds, borders, date picker button color */
    --darkgreyblue-semi-transparent: color-mix(in srgb, var(--darkgreyblue) 50%, transparent); /* Readonly input field background */
    --darkgreyblue-40: color-mix(in srgb, var(--darkgreyblue) 40%, transparent);
    --darkgreyblue-50: color-mix(in srgb, var(--darkgreyblue) 50%, transparent);
    --darkgreyblue-60: color-mix(in srgb, var(--darkgreyblue) 60%, transparent);
    --darkgreyblue-70: color-mix(in srgb, var(--darkgreyblue) 70%, transparent);

    --darkdarkgreyblue: #304057; /* Payment input field backgrounds, date picker surface color */

    /* Status Colors */
    --lightorange: #b36b00; /* Unsaved changes text background, selection background */
    --darkorange: #794e00; /* Unsaved changes outline, date picker primary hover */
    --darkred: #b05151; /* Remove button hover background, error text colors */
    --darkred-10: color-mix(in srgb, var(--darkred) 10%, transparent);
    --darkred-15: color-mix(in srgb, var(--darkred) 15%, transparent);
    --darkred-20: color-mix(in srgb, var(--darkred) 20%, transparent);
    --darkred-40: color-mix(in srgb, var(--darkred) 40%, transparent);

    --darkdarkred: #553030; /* Auth error background (used in JavaScript) */

    /* Special Colors */
    --dogegold: #C2A633; /* Donations box text and border */
    --dogegold-30: color-mix(in srgb, var(--dogegold) 30%, transparent);
    --dogegold-50: color-mix(in srgb, var(--dogegold) 50%, transparent);

    --darkeggplant: #725487; /* Time machine background, landing page gradients */

    /* Landing page aliases (for consistency) */
    --darker-blue: #152843; /* Alias for --darkdarkblue, used for button text color and landing page text */

    /* Black (for opacity variants) */
    --black: #000000; /* Shadows and overlays (with opacity variants) */
    --black-10: color-mix(in srgb, var(--black) 10%, transparent);
    --black-15: color-mix(in srgb, var(--black) 15%, transparent);
    --black-20: color-mix(in srgb, var(--black) 20%, transparent);
    --black-25: color-mix(in srgb, var(--black) 25%, transparent);
    --black-30: color-mix(in srgb, var(--black) 30%, transparent);
    --black-40: color-mix(in srgb, var(--black) 40%, transparent);
    --black-50: color-mix(in srgb, var(--black) 50%, transparent);
    --black-80: color-mix(in srgb, var(--black) 80%, transparent);
}

:root {
    --input-font-size: 0.9em;
    --small-input-font-size: 0.75em;

    /* Z-index layers */
    --z-base: 1;
    --z-overlay: 10;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-tooltip: 1000;

    /* Breakpoints */
    --breakpoint-xs: 640px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 968px;
    --breakpoint-lg: 1200px;
    --breakpoint-xl: 1350px;

    /* Transition durations */
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --transition-slower: 0.4s;

    /* Easing functions */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: ease-in-out;
    --ease-out: ease-out;
    --ease: ease;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* Base body styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--darkblue);
    color: var(--white);
    padding-bottom: 100px; /* Add padding at bottom for fixed bitcoin-box */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: background-color var(--transition-slow), color var(--transition-slow);
    min-height: 100vh; /* Ensure body fills viewport */
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main heading style */
body > h1 {
    font-family: 'Inter', sans-serif;
    color: var(--white);
    text-shadow: 0px 2px 10px var(--black-30);
    font-size: 2.5rem;
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 0px;
    text-align: center !important;
    width: 100% !important;
    letter-spacing: -0.02em;
}

/* Logo F and P styling */
body > h1 .logo-f,
body > h1 .logo-p {
    color: var(--keylime);
}

/* General h3 styling */
h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 0;
    margin: 0;
    color: var(--keylime);
    letter-spacing: -0.01em;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes modalFade {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

@keyframes dropdownFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes iconRing {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

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

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

@keyframes fadeInUpLarge {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   TIME MACHINE / TARGET DATE
   ========================================================================== */

/* Target date container */
.target-date-container {
    position: fixed;
    top: 30px;
    left: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    z-index: var(--z-modal-backdrop);
    background-color: var(--darkblue);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 10px var(--black-30);
    transition: all var(--transition-slow) var(--ease);
    overflow: visible;
}

.target-date-container:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--black-20);
}

/* Time machine header */
.time-machine-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-machine-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Time machine toggle button */
.time-machine-toggle {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all var(--transition-normal) var(--ease);
}

.time-machine-toggle:hover {
    /* background-color: rgba(255, 255, 255, 0.1); */
    transform: scale(1.2);
}

/* Time machine content */
.time-machine-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-slow) var(--ease);
    overflow: visible;
}

/* Collapsed state */
.target-date-container.collapsed .time-machine-content {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    pointer-events: none; /* Disable all mouse interactions when collapsed */
}

.target-date-container.collapsed {
    padding: 8px 12px;
}


.target-date-container label {
    font-size: 1.5em;
    margin-bottom: 0px;
}

/* Style the target date picker to match other form inputs */
.target-date-container duet-date-picker {
    max-width: 200px;
    margin: 0 auto;
}

/* Match the styling of form-group inputs */
.target-date-container duet-date-picker .duet-date__input {
    text-align: center;
    font-size: 14px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background-color: var(--darkeggplant);
    color: var(--white);
    padding: 8px;
    box-sizing: border-box;
}

/* Date slider styling */
.date-slider-container {
    margin-top: 15px;
    width: 100%;
    max-width: 400px;
}

.date-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--keylime);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.date-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lightblue);
    cursor: pointer;
    border: 2px solid var(--white);
}

.date-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lightblue);
    cursor: pointer;
    border: 2px solid var(--white);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.9em;
    color: var(--white);
}

/* ==========================================================================
   MAIN APP LAYOUT & LISTS
   ========================================================================== */

/* Container for all lists */
body > .container {
    display: flex !important;
    justify-content: space-between !important;
    width: 90% !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

/* Individual list style (Assets, Liabilities, etc.) */
.list {
    width: 49%;
    background: var(--blue-40);
    color: var(--white);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--realwhite-08);
    box-shadow: 0 4px 20px var(--black-15);
    margin-bottom: 20px;
    transition: all var(--transition-slower) var(--ease-standard);
    backdrop-filter: blur(10px);
    z-index: var(--z-overlay);
}

.list:hover {
    background: var(--blue-60);
    border-color: var(--keylime-20);
    box-shadow: 0 8px 30px var(--black-20);
    transform: translateY(-2px);
}

/* Ensure the date picker dialog appears above everything else */
.list:focus-within {
    z-index: var(--z-modal);
}

/* Ensure no containers clip the calendar or tooltips */
#asset-list,
#income-list,
#payment-list,
#liability-list,
#expense-list {
    overflow: visible !important;
}

/* List header style */
.list h2 {
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: 2px solid var(--keylime-30);
    padding-bottom: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--keylime);
    letter-spacing: -0.01em;
}

/* Make list section headers feel clickable on hover */
.clickable-header {
    transition: transform var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease);
    cursor: pointer;
    overflow: visible;
    padding: 0px 4px; /* Small padding to give room for scaling */
    display: inline-block; /* Ensures padding works properly */
}

.clickable-header:hover {
    transform: scale(1.06);
    color: var(--keylime);
}

/* Unordered list reset */
ul {
    list-style-type: none;
    padding: 0;
}

/* Add button style */
.add-button {
    background-color: transparent;
    color: var(--keylime);
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-slow) var(--ease-standard);
    font-weight: 600;
}

/* Add button hover effect */
.add-button:hover {
    color: #b8e066;
    transform: scale(1.1);
}

.remove-button-group {
    width: 0px; /* Adjust as needed */
    height: 10px;
    align-items: center;
    flex: 0 0 25px !important; /* Fixed width for the group */
    width: 25px !important;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    padding-left: 0px;
    text-align: center;
}

.add-payment-button-group {
    width: 20%;
    height: 10px;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: center;
}

.move-buttons-group {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0px;
    text-align: center;
    /* Ensure a consistent, fixed column width for handle in both header and rows */
    flex: 0 0 28px !important;
    width: 28px !important;
}

/* Ensure move-buttons-group has consistent sizing in both header and item rows */
.asset-item .form-group.move-buttons-group,
.liability-item .form-group.move-buttons-group,
.income-item .form-group.move-buttons-group,
.expense-item .form-group.move-buttons-group,
.payment-item .form-group.move-buttons-group {
    flex: 0 0 15px !important;  /* Override base class to match min/max width */
    width: 15px !important;  /* Override base class to match min/max width */
    min-width: 15px !important;
    max-width: 15px !important;
    padding: 0 15px 0 15px !important;  /* No left padding */
    margin-left: 0 !important;  /* Remove horizontal margins */
    margin-right: 0 !important;  /* Remove horizontal margins */
    box-sizing: border-box !important;  /* Ensure box-sizing is consistent */
    align-self: center;  /* Ensure vertical centering in flex container */
}

/* Ensure remove-button-group has consistent sizing in both header and item rows */
.asset-item .form-group.remove-button-group,
.liability-item .form-group.remove-button-group,
.income-item .form-group.remove-button-group,
.expense-item .form-group.remove-button-group,
.payment-item .form-group.remove-button-group {
    flex: 0 0 15px !important;  /* Override base class to match min/max width */
    width: 15px !important;  /* Override base class to match min/max width */
    min-width: 15px !important;
    max-width: 15px !important;
    padding: 0 15px 0 15px !important;  /* No left padding */
    margin-left: 0 !important;  /* Remove horizontal margins */
    margin-right: 0 !important;  /* Remove horizontal margins */
    box-sizing: border-box !important;  /* Ensure box-sizing is consistent */
    align-self: center;  /* Ensure vertical centering in flex container */
}

/* Ensure add-payment-button-group has consistent sizing in both header and item rows */
.liability-item .form-group.add-payment-button-group label {
    width: 20%;
    padding: 0 !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    box-sizing: border-box !important;
    align-self: center;  /* Ensure vertical centering in flex container */
}

.move-handle {
    position: relative;
    background-color: transparent;
    color: var(--lightgrey);
    border: none;
    cursor: pointer;
    font-size: 32px;
    font-weight: bolder;
    padding: 0 2.5px;  /* Equal horizontal padding to center content */
    text-align: center;
    transition: transform var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), background-color var(--transition-fast) var(--ease);
    line-height: 1;
    min-width: 0;  /* Allow button to shrink to fit container */
    max-width: 100%;  /* Don't exceed container width */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;  /* Remove auto margin, let flex container handle centering */
    width: 100%;  /* Fill container width */
    will-change: transform;
}

.move-handle.active {
    color: var(--lightblue);
    transform: scale(1.2) translateZ(0);
    transform-origin: center center;
    z-index: var(--z-overlay);
    position: relative;
}

/* When the move handle is active, hide the outer focus ring */
.move-handle.active:focus {
    outline: none;
    outline-offset: 0;
}

/* Instant custom tooltip for move-handle buttons (appears immediately on hover) */
.move-handle::after {
    content: attr(data-title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--darkdarkblue);
    color: var(--white);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-tooltip);
    margin-bottom: 5px;
    box-shadow: 0 2px 8px var(--black-30);
}

.move-handle.active::after {
    opacity: 1;
}

/* Style for the reorder handle SVG */
.reorder-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reorder-handle svg {
    display: block;
}

/* Highlight all input fields in row when move handle is active */
li.active-row input[type="text"],
li.active-row input[type="number"],
li.active-row select,
li.active-row select.payment-select,
li.active-row input.payment-input,
li.active-row duet-date-picker .duet-date__input,
li.active-row duet-date-picker.payment-date-picker .duet-date__input {
    transition: all var(--transition-normal) var(--ease);
    background-color: var(--lightblue-20) !important;
    border-color: var(--lightblue) !important;
    box-shadow: 0 0 5px var(--lightblue-50) !important;
}

/* li.active-row .move-handle {
    background-color: var(--lightblue-30) !important;
} */

.remove-button {
    padding: 0 2.5px;  /* Equal horizontal padding to center content */
    cursor: pointer;
    line-height: 24px;  /* Center text vertically */
    display: flex !important;  /* Use flexbox for centering */
    justify-content: center !important;  /* Center horizontally */
    align-items: center !important;  /* Center vertically */
    background-color: transparent;
    color: var(--lightgrey);
    border: none;
    border-radius: 3px;
    font-size: 25px;
    text-align: center;
    width: 100% !important;  /* Fill the container width */
    box-sizing: border-box !important;
    margin: 0 !important;  /* Remove any margins */
}

.remove-button:hover {
    color: var(--darkred);
    background-color: transparent;
    font-weight: bold;
}

/* ==========================================================================
   MODALS
   ========================================================================== */

/* Modal overlay */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--black-40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-top: 60px;
    cursor: pointer;  /* Shows clickable cursor on backdrop */
    animation: modalFadeIn 0.3s ease-out;
}

.modal[style*="display: block"] {
    animation: modalFade 0.5s forwards;
    -webkit-animation: modalFade 0.5s forwards;
}

/* Optional: prevent clicks on modal content from closing */
.modal > * {
    pointer-events: none;
}

.modal-content {
    background-color: rgba(43, 43, 43, 0.9) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--white);
    margin: 5% auto;
    padding: 0;
    border: 1px solid var(--realwhite-10);
    width: 300px;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 24px 64px var(--black-50), 0 0 0 1px var(--realwhite-05);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;  /* Regular cursor on content */
    pointer-events: auto;  /* Ensures clicks work on content */
    font-family: 'Inter', sans-serif;
    animation: modalSlideUp var(--transition-slower) var(--ease-standard);
    overflow: hidden;
}

/* Close button for modal */
.close {
    color: var(--blueishwhite);
    float: left;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    margin-left: -10px;
}

/* Close button hover and focus effects */
.close:hover,
.close:focus {
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */

/* Form group style */
.form-group {
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
    flex: 1;
}

/* Reduce bottom padding on form-groups in header rows (which contain labels) */
.asset-item.header .form-group,
.liability-item.header .form-group,
.income-item.header .form-group,
.expense-item.header .form-group,
.payment-item.header .form-group {
    margin-bottom: 0;
    padding-bottom: 5px;
}

/* Form label style */
.form-group label {
    display: block;
    margin-bottom: 0px;
    font-weight: bold;
    color: var(--white);
    text-align: left;
}

/* Form input and textarea style */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    box-sizing: border-box;
    border: 1px solid var(--realwhite-20);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    text-align: center;
    max-width: 200px;
    margin: 0 auto;
    background-color: var(--darkgreyblue-50);
    color: var(--white);
    transition: all var(--transition-slow) var(--ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--keylime);
    box-shadow: 0 0 0 2px var(--keylime-20);
    background-color: var(--darkgreyblue-70);
}

select {
    background-color: var(--darkdarkgreyblue);
    color: var(--white);
    text-align-last: center;  /* This additional property helps with select alignment */
}

select.unsaved {
    background-color: var(--orange);
}

/* Item style */
.asset-item,
.liability-item,
.income-item,
.expense-item,
.payment-item {
    padding: 0px 0px;
    margin-bottom: 0;
    border-bottom: 0;
}

.liability-item.bottom-left-curved {
    border-bottom-left-radius: 5px;
}

/* Payment-specific smaller font size */
.form-group .payment-input,
.form-group .payment-select,
.form-group duet-date-picker.payment-date-picker .duet-date__input {
    font-size: var(--small-input-font-size) !important;
    height: 24px;
    border-color: var(--darkdarkgreyblue) !important;
    background-color: var(--darkdarkgreyblue) !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* Item form style */
.item-form {
    display: flex;
    align-items: center;
}

/* Form row style */
.form-row {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    margin-right: 0px;
    margin-bottom: 0px;
    align-items: center;
}


/* Header style for items */
.asset-item.header,
.liability-item.header,
.income-item.header,
.expense-item.header {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-size: 0.9em;
    padding: 8px 0px 0px 0px;
}


.payment-item.header {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-size: 0.8em;
    padding: 8px 0px 0px 0px;
}

/* Style for non-header items */
.asset-item:not(.header),
.liability-item:not(.header),
.income-item:not(.header),
.expense-item:not(.header),
.payment-item:not(.header) {
    background-color: var(--darkblue);
}

/* List style */
#asset-list,
#liability-list,
#income-list,
#expense-list,
#payment-list {
    background-color: transparent;
    border-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Form group style within asset form */
.item-form .form-group {
    margin-right: 5px;
    margin-left: 5px;
}

/* Remove margin from last form group */
.item-form .form-group:last-child {
    margin-right: 0;
}

/* Item background colors */
.asset-item,
.liability-item,
.income-item,
.expense-item,
.payment-item {
    background-color: var(--blue);
}

/* Item header background */
.asset-item.header,
.liability-item.header,
.income-item.header,
.expense-item.header,
.payment-item.header {
    background-color: var(--darkblue);
}

/* Form submit button style */
#form-submit {
    width: 100%;
    padding: 0.875rem 2rem;
    background-color: var(--keylime);
    color: var(--darker-blue);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 15px;
    transition: all var(--transition-slow) var(--ease-standard);
    box-shadow: 0 4px 14px var(--keylime-25);
    letter-spacing: 0.01em;
}

/* Keylime button hover/active states (shared) */
#form-submit:hover,
#view-plans-button:hover,
#auth-button:hover,
#auth-submit:hover,
.btn-primary:hover {
    background-color: #b8e066;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--keylime-40);
}

#form-submit:active,
#view-plans-button:active,
#auth-button:active,
#auth-submit:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px var(--keylime-30);
}


/* Form style within modal content */
.modal-content form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Style for unsaved changes */
.unsaved,
duet-date-picker.unsaved .duet-date__input,
.form-group duet-date-picker.payment-date-picker.unsaved .duet-date__input,
.payment-input.unsaved,
.payment-select.unsaved {
    outline: 2px solid var(--darkorange) !important;
    background-color: var(--lightorange) !important;
}

/* Style for empty asset fields that need to be updated */
.empty-asset-field,
select.empty-asset-field,
body .item-form select.empty-asset-field,
body select.empty-asset-field {
    outline: 2px solid var(--darkorange) !important;
    background-color: var(--lightorange) !important;
}

/* Remove spinners from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Form row style for all items */
.asset-item .form-row,
.liability-item .form-row,
.income-item .form-row,
.expense-item .form-row,
.payment-item .form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;  /* Equal padding on both sides to center buttons between inputs and container edge */
}

/* Form group style for all items */
.asset-item .form-group,
.liability-item .form-group,
.income-item .form-group,
.expense-item .form-group,
.payment-item .form-group {
    flex: 1;
    text-align: center;
}

.payment-item .form-group {
    margin-top: 0px;
    margin-bottom: 10px;
}

/* Percentage widths for form groups (excluding fixed-width groups) */
/* Using flex-grow to distribute remaining space proportionally after fixed-width groups */

/* Asset items: move (fixed), Name, Value, Growth Rate, Quantity, remove (fixed) */
.asset-item .form-row > .form-group:nth-child(2) { flex: 2.5 1 0; } /* Name - 25% of remaining space */
.asset-item .form-row > .form-group:nth-child(3) { flex: 2.5 1 0; } /* Value - 25% of remaining space */
.asset-item .form-row > .form-group:nth-child(4) { flex: 2.5 1 0; } /* Growth Rate - 25% of remaining space */
.asset-item .form-row > .form-group:nth-child(5) { flex: 2.5 1 0; } /* Quantity - 25% of remaining space */

/* Liability items: move (fixed), Name, Value, Interest Rate, Paid Off, remove (fixed), add-payment (fixed) */
.liability-item .form-row > .form-group:nth-child(2) { flex: 2.0 1 0; } /* Name - 25% of remaining space */
.liability-item .form-row > .form-group:nth-child(3) { flex: 2.0 1 0; } /* Value - 25% of remaining space */
.liability-item .form-row > .form-group:nth-child(4) { flex: 2.0 1 0; } /* Interest Rate - 25% of remaining space */
.liability-item .form-row > .form-group:nth-child(5) { flex: 2.0 1 0; } /* Paid Off - 25% of remaining space */
.liability-item .form-row > .form-group:nth-child(6) { flex: 2.0 1 0; } /* Add Payment - 25% of remaining space */

/* Income items: move (fixed), Name, Amount, Frequency, Start Date, End Date, To Asset, remove (fixed) */
.income-item .form-row > .form-group:nth-child(2) { flex: 1.6666 1 0; } /* Name - ~16.67% of remaining space */
.income-item .form-row > .form-group:nth-child(3) { flex: 1.6666 1 0; } /* Amount - ~16.67% of remaining space */
.income-item .form-row > .form-group:nth-child(4) { flex: 1.6666 1 0; } /* Frequency - ~16.67% of remaining space */
.income-item .form-row > .form-group:nth-child(5) { flex: 1.6666 1 0; } /* Start Date - ~16.67% of remaining space */
.income-item .form-row > .form-group:nth-child(6) { flex: 1.6666 1 0; } /* End Date - ~16.67% of remaining space */
.income-item .form-row > .form-group:nth-child(7) { flex: 1.6666 1 0; } /* To Asset - ~16.67% of remaining space */

/* Expense items: move (fixed), Name, Amount, Frequency, Start Date, End Date, From Asset, remove (fixed) */
.expense-item .form-row > .form-group:nth-child(2) { flex: 1.6666 1 0; } /* Name - ~16.67% of remaining space */
.expense-item .form-row > .form-group:nth-child(3) { flex: 1.6666 1 0; } /* Amount - ~16.67% of remaining space */
.expense-item .form-row > .form-group:nth-child(4) { flex: 1.6666 1 0; } /* Frequency - ~16.67% of remaining space */
.expense-item .form-row > .form-group:nth-child(5) { flex: 1.6666 1 0; } /* Start Date - ~16.67% of remaining space */
.expense-item .form-row > .form-group:nth-child(6) { flex: 1.6666 1 0; } /* End Date - ~16.67% of remaining space */
.expense-item .form-row > .form-group:nth-child(7) { flex: 1.6666 1 0; } /* From Asset - ~16.67% of remaining space */

/* Payment items: move (fixed), Payment Name, Amount, Frequency, Start Date, End Date, From Asset, remove (fixed) */
.payment-item .form-row > .form-group:nth-child(2) { flex: 1.6666 1 0; } /* Payment Name - ~16.67% of remaining space */
.payment-item .form-row > .form-group:nth-child(3) { flex: 1.6666 1 0; } /* Amount - ~16.67% of remaining space */
.payment-item .form-row > .form-group:nth-child(4) { flex: 1.6666 1 0; } /* Frequency - ~16.67% of remaining space */
.payment-item .form-row > .form-group:nth-child(5) { flex: 1.6666 1 0; } /* Start Date - ~16.67% of remaining space */
.payment-item .form-row > .form-group:nth-child(6) { flex: 1.6666 1 0; } /* End Date - ~16.67% of remaining space */
.payment-item .form-row > .form-group:nth-child(7) { flex: 1.6666 1 0; } /* From Asset - ~16.67% of remaining space */

/* Labels fill their form-group container width */
.asset-item .form-row > .form-group label,
.liability-item .form-row > .form-group label,
.income-item .form-row > .form-group label,
.expense-item .form-row > .form-group label,
.payment-item .form-row > .form-group label {
    width: 100%;  /* Fill parent form-group width */
}

/* Header form group label style */
.asset-item.header .form-group label,
.liability-item.header .form-group label,
.income-item.header .form-group label,
.expense-item.header .form-group label,
.payment-item.header .form-group label {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
    vertical-align: middle;
}

/* Input field style for asset form */
.item-form input,
.item-form select {
    padding: 5px;
    border-radius: 4px;
    background-color: var(--darkgreyblue);
    color: var(--blueishwhite);
    border: 1px solid var(--darkgreyblue);
    width: 100%;  /* Fill the form-group width */
    box-sizing: border-box;  /* Include padding in width calculation */
    text-align: center;  /* Center the text content */
}

/* Hover style for input fields */
.item-form input:hover,
.item-form select:hover {
    box-shadow: 0 0 5px var(--darkorange);
}

/* Readonly input styling - make it look like regular text */
.item-form input[readonly] {
    background-color: var(--darkgreyblue-semi-transparent);
    border: 1px solid transparent !important;  /* Make border transparent */
    cursor: default;
    box-shadow: none;
    outline: none;
}

.item-form input[readonly]:focus {
    border: 1px solid transparent !important;
    box-shadow: none;
    outline: none;
}

.item-form input::selection,
.item-form select::selection {
    color: var(--blueishwhite);
    background: var(--lightorange);
}

/* Focus style for input fields */
.item-form input:focus,
.item-form select:focus {
    outline: none;
    border-color: var(--highlightblue);
    box-shadow: 0 0 5px var(--highlightblue-50);
}

/* ==========================================================================
   NET WORTH PLOT / VISUALIZATIONS
   ========================================================================== */

/* Net worth plot container style */
.net-worth-plot {
    width: 95%;
    min-width: 200px; /* See plot.py bokeh_fig.sizing_mode = 'stretch_width' */
    max-width: 1000px; /* See plot.py bokeh_fig.sizing_mode = 'stretch_width' */
    background: var(--blue-40);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid var(--realwhite-08);
    box-shadow: 0 4px 20px var(--black-15);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    transition: all var(--transition-slower) var(--ease-standard);
    text-align: center;
    backdrop-filter: blur(10px);
    /* Let container size to content */
    display: flex;
    flex-direction: column;
}

/* Ensure the Bokeh plot fills the container */
.net-worth-plot .bk-root,
.net-worth-plot .bk-plot-layout {
    width: 100% !important;
}

/* Net worth plot heading style */
.net-worth-plot h2 {
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--keylime);
    letter-spacing: -0.01em;
}

/* See plot.py hv.Overlay.opts(height=400, width=600) */
.plot-wrapper {
    width: 100%;
    flex: 1;
    margin: 0 auto;
    overflow: hidden; /* Prevent any spillover */
}

/* Iframe container with loading state */
.iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 400px; /* Match iframe height */
    background-color: var(--darkblue); /* Prevent white flash */
    overflow: hidden; /* Prevent spillover */
}

/* Ensure iframes can be positioned absolutely during transitions */
.iframe-container iframe {
    position: relative;
    z-index: var(--z-base);
    width: 100%;
    height: 400px; /* Fixed height to match container */
    border: none;
    background-color: var(--darkblue); /* Prevent white flash */
    transition: opacity var(--transition-normal) var(--ease-in-out);
    display: block; /* Remove any inline spacing */
    /* Ensure iframe can access parent page fonts */
    font-family: inherit;
}

/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--darkdarkblue-20); /* Semi-transparent overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    backdrop-filter: blur(1px); /* Optional: adds a subtle blur effect */
    opacity: 0;
    transition: opacity var(--transition-slow) var(--ease-in-out);
}

/* Show loading overlay when visible */
.loading-overlay.show {
    opacity: 1;
}

/* Loading spinner */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--lightgrey);
    border-top: 4px solid var(--lightblue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Reset any Bokeh styles that might be leaking */
.plot-wrapper .bk-root {
    width: 100% !important;
    height: 100% !important;
    /* Don't use all: initial as it resets fonts and other important Bokeh styling */
}

/* Ensure Bokeh elements stay within bounds */
.plot-wrapper .bk-root * {
    box-sizing: border-box;
}

/* Keep plot layout contained */
.plot-wrapper .bk-plot-layout {
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   PAYMENTS
   ========================================================================== */

.add-payment-button {
    background-color: var(--keylime-10);
    color: var(--keylime);
    border: 1px solid var(--keylime-30);
    padding: 0.25rem 0.25rem;
    margin: 0;
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-slow) var(--ease-standard);
    width: 100%;
    box-sizing: border-box;
    display: flex;  /* Use flexbox for centering */
    align-items: center;  /* Center vertically */
    justify-content: center;  /* Center horizontally */
    text-align: center;  /* Center text content */
}

.add-payment-button:hover {
    background-color: var(--keylime-20);
    border-color: var(--keylime-50);
    transform: translateY(-1px);
}

.payments-container {
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 40px;
    padding-left: 0px;
    display: block;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: var(--darkblue);
}

.payment-item {
    margin-bottom: 0px;
}
.payment-item.header {
    margin-bottom: 0;
}

/* ==========================================================================
   QR CODE & INFO MODALS
   ========================================================================== */

/* QR and info modals - wider and centered text */
#qrModal .modal-content,
#supportInfoModal .modal-content,
#timeMachineInfoModal .modal-content,
#wealthInfoModal .modal-content,
#viewPlansModal .modal-content,
#authModal .modal-content {
    width: 410px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--blueishwhite);
    border-radius: 8px;
}

#supportInfoModal .modal-content {
    max-width: 400px;
}

#qrImage {
    width: 250px;
    height: 250px;
    margin: 10px 0;
}

#qrAddress {
    color: var(--blueishwhite);
    word-break: break-all;
    margin-top: 10px;
    font-family: monospace;
}

#cryptoLabel {
    font-family: monospace;
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
    color: var(--blueishwhite);
}

.crypto-logo {
    cursor: pointer;
}

.crypto-logo:hover {
    transform: scale(1.2);
}

.address-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 20px;
}

.copy-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    opacity: 0.7;
    transition: opacity var(--transition-normal);
}

.copy-button:hover {
    opacity: 1;
}

.copy-feedback {
    position: absolute;
    background: var(--black-80);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    font-family: monospace;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal);
}

.copy-feedback.show {
    opacity: 1;
    visibility: visible;
}

.tooltip {
    position: absolute;
    background: var(--black-80);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal);
}

.copy-button:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.info-icon {
    position: absolute;
    right: -5px;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity var(--transition-normal);
}

.info-icon:hover {
    opacity: 1;
    transform: scale(1.2);
    font-weight: bold;
}


h3.support-text-header {
    font-family: 'Inter', sans-serif;
    font-size: 1.75em;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--keylime);
}

h4.support-text-subheader {
    font-family: 'Inter', sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    text-align: left;
    margin: 20px 0 10px 0;
    color: var(--keylime-90);
    padding-top: 15px;
}

.support-text {
    text-align: left !important;
    padding: 20px 55px 20px 55px;
}

.support-text p,
.support-text-list {
    font-family: 'Merriweather', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--lightlightgrey);
    margin: 15px 0;
}

.support-text-list {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    text-align: left !important;
    list-style-type: disc;
    padding-left: 20px;
}

.support-text a {
    color: var(--lightblue);  /* Use the light blue variable */
    text-decoration: none;  /* Optional: removes underline */
    transition: opacity var(--transition-normal);  /* Optional: smooth hover effect */
}

.support-text a:hover {
    opacity: 0.8;  /* Optional: slight dim on hover */
}

/* ==========================================================================
   DONATIONS / BITCOIN BOX
   ========================================================================== */

.bitcoin-box {
    position: fixed;
    bottom: 20px;
    left: 5%;
    width: auto;
    height: 70px;
    border-radius: 16px;
    border: 1px solid var(--dogegold-30);
    background-color: var(--darkdarkblue-80);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px var(--black-20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    cursor: pointer;
    transition: all var(--transition-slow) var(--ease-standard);
    padding: 8px;
    padding-top: 2px;
}

.bitcoin-box:hover {
    transform: translateY(-2px);
    border-color: var(--dogegold-50);
    box-shadow: 0 8px 30px var(--black-30);
}

.bitcoin-label {
    font-size: 16px;
    margin-bottom: 8px;
    margin-top: -4px;
    color: var(--dogegold);
    font-family: monospace;
    font-weight: 500;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bitcoin-box img {
    width: 30px;
    height: 30px;
    margin: 0 5px;
    transition: transform var(--transition-normal) var(--ease);
}

.bitcoin-box img:hover {
    transform: scale(1.2);
}

/* ==========================================================================
   DATE PICKER STYLES
   ========================================================================== */

duet-date-picker {
    --duet-color-primary: var(--lightblue);
    --duet-color-primary-hover: var(--darkorange);
    --duet-color-text: var(--white);
    --duet-color-button: var(--darkgreyblue);
    --duet-color-surface: var(--darkdarkgreyblue);
    --duet-color-overlay: var(--black-80);
    width: 100%;
}

/* Hide dates from adjacent months */
.duet-date__day:not(.is-month) {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.duet-date__mobile {
    display: none !important;
}

.duet-date__toggle {
    opacity: 0 !important;
    pointer-events: none !important;
}
/*
duet-date-picker.unsaved .duet-date__input {
    outline: 2px solid var(--darkorange) !important;
    background-color: var(--lightorange) !important;
} */

/* ==========================================================================
   AUTHENTICATION
   ========================================================================== */

/* Header container for title and auth buttons */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 30px auto 0 auto;
    position: relative;
    min-height: 60px; /* Ensure enough height for vertical centering */
}

.header-container .logo-container {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}

.header-container .logo-container img {
    height: 50px;
    width: auto;
    transition: transform var(--transition-slow) var(--ease);
}

.header-container .auth-user-info {
    position: relative;
    z-index: var(--z-modal); /* Ensure auth buttons and dropdown menu are above lists */
    margin-left: auto; /* Push to the right */
    padding-right: 0px; /* Match list box padding to align with content area */
}

/* Auth user info section */
.auth-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.9em;
    position: relative;
}

/* User Settings Dropdown */
.user-settings-dropdown {
    position: relative;
}

.user-settings-trigger {
    background: none;
    border: none;
    color: var(--newspapergrey);
    font-family: 'Hoefler Text', 'Baskerville', 'Baskerville Old Face', 'Goudy Old Style', 'Palatino', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color var(--transition-normal);
}

.settings-icon {
    width: 1em;
    height: 1em;
    opacity: 1;
    transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.user-settings-trigger:hover .settings-icon {
    color: var(--keylime);
    opacity: 1;
}

.user-settings-dropdown.open .settings-icon {
    opacity: 1;
    transform: rotate(90deg);
    transition: transform 1s;
}

.user-settings-menu {
    position: absolute;
    z-index: var(--z-tooltip);
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: rgba(43, 43, 43, 0.9);
    border: 1px solid #232222;
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--black-15);
    min-width: 320px;
    max-width: 500px;
    overflow: hidden;
    animation: dropdownFade 0.5s forwards;
    -webkit-animation: dropdownFade 0.5s forwards;
}

/* Shared "settings header" styling (dropdown + account settings modal) */
.user-settings-header,
.account-settings-header {
    background-color: rgba(60, 60, 60, 0.9);
    color: var(--white);
}

.user-settings-header {
    padding: 16px;
}

/* Shared email/plan line styling (dropdown + account settings modal) */
.user-settings-email,
.account-settings-email {
    font-weight: 600;
    word-break: break-all;
}

.user-settings-email {
    font-size: 1.1em;
    margin-bottom: 4px;
    text-align: center;
}

.user-settings-plan,
.account-settings-plan {
    opacity: 0.9;
}

.user-settings-plan {
    font-size: 1em;
    text-align: center;
}

.user-settings-divider {
    height: 1px;
    background-color: var(--realwhite-10);
    margin: 0;
}

.user-settings-item {
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.95em;
    color: var(--white);
    transition: background-color 0.5s, color 0.5s;
    font-family: inherit;
}

.user-settings-item:hover {
    background-color: var(--keylime);
    color: var(--darkdarkblue);
}

.user-settings-item:active {
    background-color: var(--darkdarkblue);
    color: var(--keylime);
}

.auth-button {
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all var(--transition-slow) var(--ease-standard);
    letter-spacing: 0.01em;
}

/* Sign In button - keylime theme */
#view-plans-button,
#auth-button {
    background-color: var(--keylime);
    color: var(--darker-blue);
    box-shadow: 0 4px 14px var(--keylime-25);
}


/* Auth modal specific styles */
.auth-modal-content {
    max-width: 450px;
    width: 90%;
    padding: 2.5rem;
}

/* Account Settings modal specific styles */
.account-settings-modal-content {
    max-width: 500px;
    width: 90%;
    padding: 0;
}

/* Account Settings modal container should feel like settings/auth UI (not info modals) */
#accountSettingsModal .modal-content {
    width: 410px;                 /* keep consistent modal width */
    text-align: left;             /* settings-style alignment */
    border-radius: 8px;          /* match base modal radius */
    border: 1px solid var(--realwhite-10); /* match base modal border */
    align-items: stretch;         /* allow sections to span full width */
}

/* Header bar: reuse dropdown header vibe (slightly lighter panel) */
.account-settings-header {
    padding: 16px 2.5rem;
    border-bottom: 1px solid var(--realwhite-10);
}

/* .account-settings-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.35em;
    font-weight: 700;
    color: var(--white);
    text-align: left;
} */

.account-settings-header-meta {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-settings-email {
    font-size: 1.1em;
    text-align: left;
}

.account-settings-plan {
    font-size: 0.9em;
    text-align: left;
}

.account-settings-body {
    padding: 2.25rem 2.5rem 2.5rem 2.5rem;
}

/* Change password form - center labels to match auth modal style */
.change-password-view {
    text-align: center;
    align-self: center;
    max-width: 400px;
    width: 100%;
}

/* Keep header and description left-aligned even when form is centered */
.account-settings-section:has(.change-password-view) .account-settings-section-header,
.account-settings-section:has(.change-password-view) .account-settings-description-text {
    align-self: flex-start;
    width: 100%;
}

.account-settings-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 0;
}

.account-settings-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.account-settings-section-header {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 0.25rem 0;
    text-align: left;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--realwhite-10);
    width: 100%;
}

/* Account Settings Buttons - Base Styles */
.account-settings-button {
    /* Layout */
    padding: 0.5rem 1rem;
    width: fit-content;
    display: inline-block;
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0;

    /* Typography */
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--white);

    /* Appearance */
    border-radius: 6px;
    border: 1px solid var(--lightblue);
    background-color: var(--lightblue-20);

    /* Interaction */
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-settings-button:hover {
    background-color: var(--lightblue-50);
    border-color: var(--lightblue-50);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.account-settings-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.account-settings-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Danger variant - only overrides colors */
.account-settings-button-danger {
    background: var(--darkred-20);
    border-color: var(--darkred);
}

.account-settings-button-danger:hover {
    background: var(--darkred-40);
    border-color: var(--darkred);
    color: var(--white); /* Keep text color on hover */
}

.account-settings-danger-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.account-settings-description-text {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--white) 70%, transparent);
    text-align: left;
    margin: 0 0 0.5rem 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}

/* Privacy Statement Toggle */
.account-settings-privacy-container {
    width: 100%;
}

.account-settings-privacy-toggle {
    background: none;
    border: none;
    color: var(--lightblue);
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.account-settings-privacy-toggle:hover {
    color: var(--lightblue-50);
}

.privacy-toggle-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
    display: inline-block;
    transform: rotate(0deg);
}

.account-settings-privacy-statement {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    max-height: 1000px;
    opacity: 1;
    margin-top: 0.5rem;
}

.account-settings-privacy-statement.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.account-settings-privacy-content {
    background: color-mix(in srgb, var(--white) 5%, transparent);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

/* Delete Account Confirmation View */
.delete-confirmation-view {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.delete-confirmation-title {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.delete-confirmation-warning {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.delete-confirmation-message {
    font-size: 1rem;
    color: var(--white);
    margin: 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    font-weight: 500;
}

.delete-confirmation-details {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--white) 80%, transparent);
    margin: 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.delete-confirmation-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.delete-confirmation-label {
    font-size: 0.9rem;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.delete-confirmation-label strong {
    color: var(--darkred);
    font-weight: 700;
}

.delete-confirmation-input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--darkred-40);
    border-radius: 6px;
    background: var(--darkred-10);
    color: var(--white);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    box-sizing: border-box;
    width: 100%;
}

.delete-confirmation-input:focus {
    outline: none;
    border-color: var(--darkred);
    background: var(--darkred-20);
    box-shadow: 0 0 0 3px var(--darkred-15);
}

.delete-confirmation-input::placeholder {
    color: color-mix(in srgb, var(--white) 40%, transparent);
}

.delete-confirmation-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 0.5rem;
}

/* Delete Account Success View */
.delete-account-success-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.delete-account-success-title {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    text-align: left;
    font-family: 'Inter', sans-serif;
}

.delete-account-success-message {
    font-size: 1rem;
    color: var(--white);
    margin: 0;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
}

.delete-account-success-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    width: 100%;
}

.auth-form-group {
    color: var(--white);
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.auth-form-group label {
    display: block;
    margin-bottom: 0.625rem;
    font-size: 0.95rem;
    font-weight: 600;
    width: 100%;
    letter-spacing: 0.01em;
}

/* Single source of truth for input colors */
.auth-form-group {
    --input-bg: var(--darkgreyblue-40);
    --input-bg-focus: var(--darkgreyblue-60);
    --input-text: var(--white);
    --input-border: var(--realwhite-15);
    --input-border-focus: var(--lightblue);
    --input-focus-ring: var(--lightblue-20);
    --input-shadow: var(--black-20);
}

.auth-form-group input {
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--input-border);
    border-radius: 10px;
    background: var(--input-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--input-text);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all var(--transition-slow) var(--ease-standard);
    width: 100%;
    box-sizing: border-box;
}

.auth-form-group input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    background: var(--input-bg-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring), 0 4px 12px var(--input-shadow);
    transform: translateY(-1px);
}

/* Override browser autofill styling - requires webkit-specific hacks */
.auth-form-group input:-webkit-autofill,
.auth-form-group input:-webkit-autofill:hover,
.auth-form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--input-text) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.auth-form-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg-focus) inset, 0 0 0 3px var(--input-focus-ring), 0 4px 12px var(--input-shadow) !important;
}

.auth-form-group input::placeholder {
    color: var(--blueishwhite-50);
}

.password-match-indicator {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and input */
    width: 100%;
}

.password-match-indicator input {
    flex: 1; /* Take up remaining space */
    box-sizing: border-box;
}

.password-match-icon {
    font-size: 1.2em;
    line-height: 1;
    flex-shrink: 0; /* Don't shrink the icon */
    transition: color var(--transition-slow);
    min-width: 1.2em; /* Reserve space for icon */
}

.password-match-icon.valid {
    color: var(--lightgreen);
}

.password-match-icon.invalid {
    color: var(--darkred);
}

#password-match-icon-right {
    opacity: 0;
}

.auth-error {
    background: var(--darkred-20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--darkred-40);
    color: var(--blueishwhite);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    animation: fadeInUp 0.3s ease-out;
}

.auth-welcome-message {
    text-align: center;
    padding: 1.75rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 16px;
    background: var(--keylime-10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--keylime-20);
    animation: fadeInUp 0.5s ease-out;
}

.auth-welcome-message h2 {
    color: var(--keylime);
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: 'Inter', sans-serif;
}

.auth-welcome-message p {
    color: var(--white-90);
    font-size: 1rem;
    margin: 0;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

#auth-submit {
    flex: 1; /* Take up available space in flex container */
    padding: 0.875rem 2rem;
    background: var(--keylime);
    color: var(--darker-blue);
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-slow) var(--ease-standard);
    margin-top: 1rem;
    box-shadow: 0 4px 14px var(--keylime-25);
    letter-spacing: 0.01em;
}


#auth-submit:disabled {
    background: var(--lightgrey-50);
    color: var(--white-50);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-switch {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--white-80);
    font-family: 'Inter', sans-serif;
}

.auth-switch a {
    color: var(--keylime);
    text-decoration: none;
    margin-left: 0.5rem;
    font-weight: 600;
    transition: all var(--transition-slow) var(--ease);
}

.auth-switch a:hover {
    color: #b8e066;
    text-decoration: underline;
}

/* Auth cancel button container - styled like auth-switch */
.auth-cancel-container {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--white-80);
    font-family: 'Inter', sans-serif;
}

/* Auth cancel button - styled like "Recover account" link */
.auth-cancel-button {
    background: none;
    border: none;
    color: var(--keylime);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all var(--transition-slow) var(--ease);
    padding: 0;
    margin: 0;
}

.auth-cancel-button:hover {
    color: #b8e066;
    text-decoration: underline;
}

/* Password requirements styling */
.password-requirements {
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: var(--white);
    margin-bottom: 15px;
    text-align: left;
}

.password-requirements strong {
    display: block;
    margin-bottom: 5px;
}

.password-requirements ul {
    margin: 5px 0;
    padding-left: 0;
    list-style-type: none;
}

.password-requirements li {
    margin: 3px 0;
    transition: color var(--transition-slow);
    position: relative;
    padding-left: 1.1em; /* Reserve space for checkmark/X */
}

.password-requirements li::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1em;
    /* Empty by default, will be filled by valid/invalid states */
}

.password-requirements li.valid {
    color: var(--lightgreen);
}

.password-requirements li.valid::before {
    content: "✓ ";
    color: var(--lightgreen);
}

.password-requirements li.invalid {
    color: var(--darkred);
}

.password-requirements li.invalid::before {
    content: "✗ ";
    color: var(--darkred);
}

/* ==========================================================================
   PLANS / PRICING MODAL
   ========================================================================== */
.plans-modal-content {
    max-width: 1000px !important;
    width: 95% !important;
    padding: 30px !important;
}

.plans-modal-content .support-text-header {
    /* font-family: 'Inter', sans-serif !important; */
    font-family: 'Merriweather', serif;
    color: var(--newspapergrey) !important;
    text-shadow: 0px 4px 8px var(--black-10) !important;
    font-size: 2.5em !important;
    font-weight: 600 !important;
    margin-bottom: 20px;
}

.plans-modal-content .support-text-header .logo-s,
.plans-modal-content .support-text-header .logo-p {
    color: var(--keylime);
}

.plans-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.plan-box {
    background-color: var(--darkgreyblue);
    border: 2px solid var(--lightgrey);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    position: relative;
    transition: all var(--transition-slow) var(--ease);
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.plan-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--black-30);
    border-color: var(--lightblue);
}

.plan-box-no-hover:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--lightgrey);
}

.plan-box.plan-featured {
    border-color: var(--keylime);
    border-width: 3px;
    background-color: var(--darkeggplant);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--keylime);
    color: var(--darkblue);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
}

.plan-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.8em;
    font-weight: 700;
    color: var(--keylime);
    margin: 10px 0 15px 0;
}

.plan-price {
    font-family: 'Merriweather', serif;
    font-size: 2.5em;
    font-weight: bold;
    color: var(--white);
    margin: 15px 0;
}

.plan-period {
    font-family: 'Merriweather', serif;
    font-size: 0.4em;
    color: var(--blueishwhite);
    font-weight: normal;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    flex-grow: 1;
    text-align: left;
}

/* List items with checkmarks (shared base styles) */
.plan-features li,
.use-case-benefits li {
    position: relative;
    padding-left: 1.5rem;
}

.plan-features li {
    font-family: 'Merriweather', serif;
    padding: 8px 0;
    color: var(--blueishwhite);
    font-size: 1em;
    border-bottom: 1px solid var(--realwhite-10);
    padding-left: 20px;
}

.plan-features li:last-child {
    border-bottom: none;
}

/* Checkmark list items (shared ::before styles) */
.plan-features li::before,
.use-case-benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--keylime);
    font-weight: bold;
}

.plan-button {
    background-color: var(--lightblue);
    color: var(--white);
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: all var(--transition-slow) var(--ease);
    margin-top: auto;
    width: 100%;
}


.plan-button:active {
    transform: translateY(0);
}

.plan-button-featured {
    background-color: var(--keylime);
    color: var(--darkblue);
}

.plan-button-featured:hover {
    background-color: #d4e89f;
}

.plan-button-disabled,
.plan-button-disabled:hover,
.plan-button-disabled:active {
    background-color: var(--highlightblue);
    box-shadow: none;
    cursor: default;
    transform: none;
}

.plan-button-featured.plan-button-disabled,
.plan-button-featured.plan-button-disabled:hover,
.plan-button-featured.plan-button-disabled:active {
    background-color: var(--darkgreyblue);
    color: var(--lightgrey);
}

/* Loading state for plan buttons */
.plan-button-loading {
    opacity: 0.7;
    cursor: wait !important;
    pointer-events: none;
}

.plan-button-loading:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Spinner inside button */
.button-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--realwhite-30);
    border-top: 2px solid var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

.plan-button-featured .button-spinner {
    border: 2px solid var(--darkdarkblue-30);
    border-top: 2px solid var(--darkblue);
}

/* ==========================================================================
   LEMON SQUEEZY SUCCESS PAGE
   ========================================================================== */

/* Lemon Squeezy Success Page Styles */

/* Lemon success/cancel content (shared base styles) */
.lemon-success-content,
.lemon-cancel-content {
    background-color: var(--darkgreyblue);
    border-radius: 15px;
    padding: 50px 40px;
    text-align: center;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 32px var(--black-30);
}

.lemon-success-content {
    border: 2px solid var(--lightblue);
}

/* Icon wrapper (shared) */
.success-icon-wrapper,
.cancel-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon base styles (shared) */
.success-icon,
.cancel-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4em;
    font-weight: bold;
    position: relative;
    z-index: var(--z-base);
    animation: iconPulse 0.6s ease-out;
}

.success-icon {
    background: linear-gradient(135deg, var(--keylime) 0%, #a8d85a 100%);
    color: var(--darkblue);
    box-shadow: 0 4px 20px var(--keylime-40);
}

/* Icon ring (shared base styles) */
.success-icon-ring,
.cancel-icon-ring {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.6;
    animation: iconRing 1.5s ease-out infinite;
}

.success-icon-ring {
    border: 3px solid var(--keylime);
}

/* Title base styles (shared) */
.success-title,
.cancel-title {
    font-family: 'Crimson Pro', serif;
    font-size: 3em;
    font-weight: 700;
    color: var(--newspapergrey);
    margin: 0 0 20px 0;
    text-shadow: 0px 2px 4px var(--black-20);
}

.success-title .logo-s {
    color: var(--keylime);
    font-size: 1.1em;
}

.cancel-title .logo-c {
    color: var(--lightgrey);
    font-size: 1.1em;
}

/* Message base styles (shared) */
.success-message,
.cancel-message {
    font-size: 1.2em;
    color: var(--white);
    text-align: center;
    margin: 0 0 30px 0;
    font-family: monospace;
}


/* Badge base styles (shared) */
.success-badge,
.cancel-badge {
    background: linear-gradient(135deg, var(--darkeggplant) 0%, var(--darkblue) 100%);
    border-radius: 25px;
    padding: 12px 24px;
    margin: 0 0 30px 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: monospace;
}

.success-badge {
    border: 2px solid var(--keylime);
}

.badge-icon {
    font-size: 1.5em;
}

/* Success and cancel buttons (identical styles) */
.success-button,
.cancel-button {
    display: inline-block;
    background-color: var(--lightblue);
    color: var(--white);
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    transition: all var(--transition-slow) var(--ease);
    margin-bottom: 15px;
}

/* Light blue button hover states (shared) */
.plan-button:hover,
.success-button:hover,
.cancel-button:hover {
    background-color: var(--highlightblue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--black-20);
}

/* ==========================================================================
   LEMON SQUEEZY CANCEL PAGE
   ========================================================================== */

.lemon-cancel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    background-color: var(--darkblue);
    padding: 20px;
    margin: 0;
}

.lemon-cancel-content {
    border: 2px solid var(--lightgrey);
}


.cancel-icon {
    background: linear-gradient(135deg, var(--lightgrey) 0%, #8a9db8 100%);
    color: var(--white);
    box-shadow: 0 4px 20px var(--lightgrey-40);
}

.cancel-icon-ring {
    top: -10px;
    left: -10px;
    border: 3px solid var(--lightgrey);
}




.cancel-badge {
    border: 2px solid var(--lightgrey);
}

.success-badge .badge-text {
    color: var(--keylime);
    font-weight: 600;
    font-size: 1em;
}

.cancel-badge .badge-text {
    color: var(--lightgrey);
}


/* ==========================================================================
   LANDING PAGE
   ========================================================================== */

/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-modal-backdrop);
    padding: 1.5rem 5%;
    background: var(--darkdarkblue-80);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--realwhite-10);
    transition: all var(--transition-slow) var(--ease);
}

nav.scrolled {
    background: var(--darkdarkblue-95);
    padding: 1rem 5%;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo-container img {
    height: 40px;
    width: auto;
    transition: transform var(--transition-slow) var(--ease);
}


.nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn {
    padding: 0.875rem 2rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all var(--transition-slow) var(--ease-standard);
    border: none;
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--keylime);
    color: var(--darker-blue);
    box-shadow: 0 4px 14px var(--keylime-25);
}


.btn-secondary {
    background: var(--realwhite-05);
    color: var(--white);
    border: 1.5px solid var(--realwhite-20);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: var(--realwhite-10);
    border-color: var(--realwhite-35);
    transform: translateY(-1px);
}

/* Hero Section */
.hero {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 5% 4rem;
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--darker-blue);
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--keylime-10) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 8s ease-in-out infinite;
}

.hero-container {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: var(--z-base);
}

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

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px var(--black-30);
}

.hero h1 .gradient-text {
    background: var(--keylime);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 1.25rem;
    color: var(--white-80);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
    animation: fadeInRight 1s ease-out 0.2s both;
}

.hero-image {
    perspective: 1000px;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 24px 64px var(--black-50), 0 0 0 1px var(--realwhite-05);
    border: 1px solid var(--realwhite-08);
    transform: perspective(1000px) rotateY(-5deg) rotateX(3deg) scale(1.02);
    transition: transform 0.5s var(--ease-standard);
}

.hero-image:hover img {
    transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(1.03);
}


/* Section base styles (shared) */
.features,
.how-it-works-section,
.cta-section {
    width: 100%;
    padding: 8rem 5%;
    background: var(--darkblue);
    position: relative;
    margin: 0;
}

/* Container base styles (shared) */
.hero-container,
.features-container,
.use-cases-container,
.screenshot-container,
.nav-container,
.footer-content {
    max-width: 1400px;
    margin: 0 auto;
}

.hero-container {
    display: grid;
}

.screenshot-container {
    text-align: center;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

/* Section heading styles (shared base) */
.section-header h2,
.how-it-works-section .section-title {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-header h2 {
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.15rem;
    color: var(--white-75);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Card base styles (shared) */
.feature-card,
.use-case-card {
    border: 1px solid var(--realwhite-08);
    transition: all var(--transition-slower) var(--ease-standard);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px var(--black-15);
}

.feature-card {
    background: rgb(21, 40, 67);
    border-radius: 20px;
    padding: 2.25rem;
}

.use-case-card {
    background: rgb(30, 58, 95);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Card hover states */
.feature-card:hover {
    transform: translateY(-8px);
    background: rgb(21, 40, 67, 0.5);
    border-color: var(--keylime-25);
    box-shadow: 0 12px 40px var(--black-25), 0 0 0 1px var(--keylime-10);
}

.use-case-card:hover {
    transform: translateY(-8px);
    background: rgb(30, 58, 95, 0.5);
    border-color: var(--keylime-30);
    box-shadow: 0 16px 48px var(--black-30), 0 0 0 1px var(--keylime-10);
}

.feature-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.feature-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--keylime-15) 0%, var(--keylime-25) 100%);
    border: 1px solid var(--keylime-20);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--keylime);
    transition: all var(--transition-slow) var(--ease);
}

.feature-card:hover .feature-icon {
    background: linear-gradient(135deg, var(--keylime-25) 0%, var(--keylime-35) 100%);
    border-color: var(--keylime-40);
    transform: scale(1.05);
}

.feature-icon img,
.feature-icon svg {
    width: 32px;
    height: 32px;
}

/* Card title styles (shared base) */
.feature-card h3,
.step-title,
.use-case-question {
    font-weight: 700;
    color: var(--keylime);
    letter-spacing: -0.01em;
}

.feature-card h3 {
    font-size: 1.375rem;
    margin: 0;
}

.feature-card p {
    color: var(--white-75);
    line-height: 1.75;
    font-size: 0.95rem;
    margin-top: 0.75rem;
}


.how-it-works-container {
    max-width: 1200px;
    margin: 0 auto;
}

.how-it-works-section .section-title {
    text-align: center;
    margin-bottom: 4rem;
    color: var(--white);
    position: relative;
    display: inline-block;
    width: 100%;
}

.how-it-works-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--keylime) 50%, transparent 100%);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    position: relative;
}

.step-item {
    position: relative;
    z-index: var(--z-base);
    text-align: center;
    transition: transform var(--transition-slow) var(--ease);
}

.step-item:hover {
    transform: translateY(-5px);
}

.step-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--keylime-20) 0%, var(--keylime-30) 100%);
    border: 2px solid var(--keylime-40);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--keylime);
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 20px var(--keylime-20);
    transition: all var(--transition-slow) var(--ease);
}

.step-item:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 6px 30px var(--keylime-30);
    border-color: var(--keylime-60);
}

.step-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.step-description {
    font-size: 1rem;
}

/* Use Cases Section */
.use-cases-section,
.screenshot-section {
    width: 100%;
    padding: 8rem 5%;
    background: var(--darker-blue);
    position: relative;
    margin: 0;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.use-case-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--keylime) 0%, transparent 100%);
    transform: scaleX(0);
    transition: transform var(--transition-slower) var(--ease);
}

.use-case-card:hover::before {
    transform: scaleX(1);
}

.use-case-question {
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}


.use-case-description {
    color: var(--white-90);
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.use-case-benefits {
    list-style: none;
    padding: 0;
}

.use-case-benefits li {
    color: var(--white-80);
    padding: 0.5rem 0;
    font-size: 0.95rem;
    padding-left: 1.5rem;
}


/* Screenshot Section */


.screenshot-wrapper {
    position: relative;
    margin-top: 4rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px var(--black-50);
    border: 1px solid var(--realwhite-10);
}

.screenshot-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* CTA Section */
.cta-section {
    text-align: center;
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
}

.cta-section h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.cta-section p {
    font-size: 1.25rem;
    color: var(--white-80);
    margin-bottom: 2.5rem;
}

/* Footer */
footer {
    width: 100%;
    padding: 3rem 5%;
    background: var(--darkblue);
    border-top: 1px solid var(--realwhite-10);
    text-align: center;
}

.footer-content {
    color: var(--white-60);
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

/* Extra Large Devices (max-width: 1350px) */
@media (max-width: 1350px) {
    /* Make the container wider */
    body > .container,
    .expense-list,
    .income-list,
    .asset-list,
    .liability-list,
    .net-worth-plot {
        width: 98% !important;
        padding: 0px 5px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Make the list wider within the container*/
    .list {
        width: 100%;  /* Increase width */
        padding: 10px;  /* Slightly reduce padding */
    }
}

/* Large Devices (max-width: 1200px) */
@media (max-width: 1200px) {
    .plans-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium Devices (max-width: 968px) */
@media (max-width: 968px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .cta-section h2 {
        font-size: 2rem;
    }
}

/* Small Devices (max-width: 768px) */
@media (max-width: 768px) {
    /* Landing Page - push content down below nav */
    .hero {
        padding-top: 8rem;
    }

    /* Authentication */
    .header-container {
        flex-direction: column;
        gap: 15px;
    }

    .auth-user-info {
        flex-direction: column;
        gap: 10px;
    }

    /* Plans Modal */
    .plans-container {
        grid-template-columns: 1fr;
    }

    .plans-modal-content {
        padding: 20px !important;
    }

    /* Lemon Squeezy Pages */
    .lemon-success-content,
    .lemon-cancel-content {
        padding: 40px 30px;
    }

    .success-icon,
    .cancel-icon {
        width: 60px;
        height: 60px;
        font-size: 2.5em;
    }

    .success-title,
    .cancel-title {
        font-size: 2em;
    }

    .amount-value {
        font-size: 1.5em;
    }
}

/* Extra Small Devices (max-width: 640px) */
@media (max-width: 640px) {
    nav {
        padding: 1rem 3%;
    }

    .hero {
        padding: 9rem 3% 3rem;
    }

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

    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .features, .screenshot-section, .cta-section, .use-cases-section, .how-it-works-section {
        padding: 4rem 3%;
    }

    .steps-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .steps-container::before {
        display: none;
    }

    .how-it-works-section .section-title {
        font-size: 2rem;
    }

    .use-cases-grid {
        grid-template-columns: 1fr;
    }
}