/**
 * StaySTRA Members - Auth Styles
 *
 * Authentication modal and form styles.
 * Uses staystra-theme design system for components.
 *
 * @package StaySTRA_Members
 * @since 0.5.0
 */

/* ==========================================================================
   Modal Container (unique to plugin)
   ========================================================================== */

.staystra-modal {
    position: fixed;
    z-index: var(--z-modal, 999999);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.staystra-modal-content,
#staystra-auth-modal .staystra-modal-content {
    background: var(--background, #fff);
    margin: 60px auto;
    padding: 40px;
    border-radius: var(--radius-lg, 12px);
    max-width: 1045px !important;
    width: 90%;
    box-shadow: var(--shadow-lg);
    position: relative;
    box-sizing: border-box;
    text-align: left; /* Override analyzer.css center alignment */
}

.staystra-modal-close {
    color: var(--muted-foreground, #999);
    float: right;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    transition: color var(--transition-fast, 0.2s);
    z-index: 10;
}

.staystra-modal-close:hover,
.staystra-modal-close:focus {
    color: var(--foreground, #333);
}

/* ==========================================================================
   Two-Column Layout (unique to auth)
   ========================================================================== */

.staystra-auth-container {
    display: flex;
    gap: 48px;
    width: 100%;
    max-width: 1045px;
    margin: 0 auto;
}

.staystra-auth-left {
    flex: 1;
    min-width: 0;
    max-width: 480px;
}

.staystra-auth-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 40px;
    background: linear-gradient(135deg, var(--accent, #dcf2ff) 0%, var(--muted, #f8f8f8) 100%);
    border-radius: var(--radius-xl, 16px);
}

/* ==========================================================================
   Login Header
   ========================================================================== */

.staystra-login-header {
    text-align: left;
    margin-bottom: 32px;
}

.staystra-auth-title {
    margin: 0 0 8px 0;
    font-size: 36px;
    font-weight: 700;
    color: var(--foreground, #000);
    line-height: 1.2;
}

.staystra-auth-subtitle,
#staystra-auth-modal .staystra-auth-subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--muted-foreground, #666);
    font-weight: 400;
    text-align: left; /* Override analyzer.css #staystra-auth-modal p rule */
}

/* ==========================================================================
   Right Column: Login Preview
   ========================================================================== */

.staystra-preview-content {
    text-align: left;
}

.staystra-preview-title {
    margin: 0 0 12px 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--foreground, #000);
    line-height: 1.2;
}

.staystra-preview-subtitle {
    margin: 0 0 32px 0;
    font-size: 16px;
    color: var(--muted-foreground, #666);
    line-height: 1.5;
}

.staystra-preview-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.staystra-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--foreground, #000);
    font-weight: 500;
}

.staystra-feature-item svg {
    flex-shrink: 0;
    color: var(--primary, #5BA4D9);
}

/* ==========================================================================
   Right Column: Content States
   ========================================================================== */

.staystra-right-login,
.staystra-right-signup {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.staystra-right-login {
    justify-content: center;
}

.staystra-right-signup {
    justify-content: flex-start;
    gap: 16px;
}

/* ==========================================================================
   Right Column: Pricing Cards (uses theme .pricing-card base)
   ========================================================================== */

.staystra-pricing-header {
    text-align: left;
    margin-bottom: 24px;
}

.staystra-pricing-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--foreground, #000);
    line-height: 1.2;
}

.staystra-pricing-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--muted-foreground, #666);
}

.staystra-pricing-cards-inline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Pricing card - extends theme .card */
.staystra-pricing-card {
    position: relative;
    display: block;
    padding: 24px 16px 14px;
    border: 2px solid var(--border, #e4e8ef);
    border-radius: var(--radius-lg, 12px);
    background: var(--background, #fff);
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s);
}

.staystra-pricing-card:hover {
    border-color: var(--primary, #5BA4D9);
    box-shadow: var(--shadow-md);
}

.staystra-pricing-card.selected {
    border-color: var(--primary, #5BA4D9);
    background: var(--accent, #dcf2ff);
    box-shadow: var(--shadow);
}

/* Recommended card styling */
.staystra-pricing-card-recommended {
    margin-top: 4px;
    background: linear-gradient(135deg, var(--accent, #dcf2ff) 0%, var(--muted, #f8f8f8) 100%);
    border-color: var(--primary, #5BA4D9);
    box-shadow: var(--shadow-md);
}

.staystra-pricing-card-recommended:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.staystra-pricing-card-recommended.selected {
    background: linear-gradient(135deg, var(--accent, #dcf2ff) 0%, var(--background, #fff) 100%);
    border-color: var(--primary, #5BA4D9);
    box-shadow: var(--shadow-lg);
}

/* Hide check circles - selection shown via card highlight */
.staystra-pricing-check {
    display: none;
}

/* Add margin to cards with badges to accommodate badge overflow */
.staystra-pricing-card:has(.staystra-pricing-badge-value) {
    margin-top: 4px;
}

/* Badges - uses theme badge as base */
.staystra-pricing-badge-recommended {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: linear-gradient(135deg, var(--primary, #5BA4D9) 0%, #4a93c8 100%);
    color: var(--primary-foreground, #fff);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-md, 6px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow);
}

.staystra-pricing-badge-value {
    position: absolute;
    top: -8px;
    right: 16px;
    padding: 4px 10px;
    background: var(--primary, #5BA4D9);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-md, 6px);
    text-transform: uppercase;
}

.staystra-pricing-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.staystra-pricing-card .staystra-pricing-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border, #f3f4f6);
    margin-bottom: 0;
}

.staystra-pricing-name {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--foreground, #000);
}

.staystra-pricing-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.staystra-pricing-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary, #5BA4D9);
}

.staystra-pricing-period {
    font-size: 13px;
    color: var(--muted-foreground, #666);
    font-weight: 500;
}

/* Feature list - simple bullets */
.staystra-pricing-features-list {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: disc;
    column-count: 2;
    column-gap: 12px;
}

.staystra-pricing-features-list li {
    font-size: 12px;
    color: var(--muted-foreground, #4b5563);
    line-height: 1.4;
    margin-bottom: 2px;
    break-inside: avoid;
}

.staystra-pricing-features-list li::marker {
    color: var(--muted-foreground, #6b7280);
    font-size: 12px;
}

/* ==========================================================================
   OAuth Buttons (extends theme .btn .btn-outline)
   ========================================================================== */

.staystra-oauth-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
    margin-bottom: 29px;
}

.staystra-oauth-btn {
    flex: 1;
    min-width: 180px;
}

.staystra-oauth-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.staystra-oauth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.staystra-oauth-icon svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Icon-Only OAuth Buttons (compact row layout)
   ========================================================================== */

.staystra-oauth-icons-only {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
}

.staystra-oauth-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    border: 2px solid var(--border, #e4e8ef);
    border-radius: var(--radius-lg, 12px);
    background: var(--background, #fff);
    cursor: pointer;
    transition: all var(--transition-fast, 0.2s);
}

.staystra-oauth-icon-btn:hover {
    border-color: var(--primary, #5BA4D9);
    background: var(--accent, #dcf2ff);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.staystra-oauth-icon-btn:active {
    transform: translateY(0);
}

.staystra-oauth-icon-btn .staystra-oauth-icon {
    width: 24px;
    height: 24px;
}

.staystra-oauth-icon-btn .staystra-oauth-icon svg {
    width: 24px;
    height: 24px;
}

/* Icon-only responsive - stay in row on mobile */
@media (max-width: 640px) {
    .staystra-oauth-icons-only {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .staystra-oauth-icon-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .staystra-oauth-icon-btn .staystra-oauth-icon,
    .staystra-oauth-icon-btn .staystra-oauth-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* ==========================================================================
   Divider
   ========================================================================== */

.staystra-divider {
    position: relative;
    text-align: center;
    margin: 32px 0 28px;
    width: 100%;
}

.staystra-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: var(--border, #e4e8ef);
}

.staystra-divider span {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background: var(--background, #fff);
    color: var(--muted-foreground, #9ca3af);
    font-size: 14px;
    font-weight: 400;
}

/* ==========================================================================
   Form Overrides (theme .form-* provides base)
   ========================================================================== */

.staystra-traditional-form {
    margin-top: 0;
}

.staystra-traditional-form .form-group {
    margin-bottom: 20px;
}

/* Larger inputs for auth forms */
.staystra-traditional-form .form-input {
    padding: 16px 20px;
    border-radius: var(--radius-lg, 12px);
    background: var(--muted, #f8f8f8);
}

.staystra-traditional-form .form-input:focus {
    border-width: 2px;
    padding: 15px 19px;
    background: var(--background, #fff);
}

/* Password field with toggle */
.staystra-password-wrapper {
    position: relative;
}

.staystra-password-wrapper .form-input {
    padding-right: 50px;
}

.staystra-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: opacity var(--transition-fast, 0.2s);
}

.staystra-password-toggle:hover {
    opacity: 1;
}

.staystra-eye-icon {
    width: 20px;
    height: 20px;
}

/* Label row with forgot password */
.staystra-field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.staystra-field-label-row .form-label {
    margin-bottom: 0;
}

.staystra-forgot-password {
    font-size: 13px;
    color: var(--primary, #5BA4D9);
    text-decoration: none;
    font-weight: 500;
}

.staystra-forgot-password:hover {
    color: var(--accent-foreground, #1e3a5f);
    text-decoration: underline;
}

/* Terms checkbox override */
.staystra-field-terms {
    margin: 20px 0 24px;
}

.staystra-terms-link {
    color: var(--foreground, #000);
    text-decoration: underline;
    font-weight: 500;
}

.staystra-terms-link:hover {
    color: var(--primary, #5BA4D9);
}

/* ==========================================================================
   Submit Button (extends theme .btn .btn-primary .btn-lg .btn-full)
   ========================================================================== */

.staystra-auth-submit {
    margin-bottom: 24px;
    border-radius: var(--radius-lg, 12px);
}

.staystra-auth-submit.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ==========================================================================
   Toggle Sign In/Sign Up
   ========================================================================== */

.staystra-auth-toggle {
    text-align: center;
    margin: 0;
    font-size: 14px;
    color: var(--foreground, #000);
}

.staystra-toggle-link {
    color: var(--primary, #5BA4D9);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.staystra-toggle-link:hover {
    color: var(--accent-foreground, #1e3a5f);
    text-decoration: underline;
}

/* ==========================================================================
   Messages (extends theme .alert)
   ========================================================================== */

.staystra-login-message {
    padding: 12px 16px;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 20px;
    font-size: 14px;
    display: none;
}

.staystra-login-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.staystra-login-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

/* ==========================================================================
   Plan Selection Screen (post-signup)
   ========================================================================== */

.staystra-plan-selection {
    animation: staystra-fadeIn 0.3s ease;
}

.staystra-plan-selection .staystra-login-header {
    margin-bottom: 20px;
    text-align: center;
}

.staystra-plan-selection .staystra-auth-title {
    font-size: 24px;
    margin-bottom: 4px;
}

.staystra-plan-selection .staystra-auth-subtitle {
    font-size: 14px;
}

.staystra-plan-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.staystra-plan-card {
    position: relative;
    width: 100%;
    padding: 20px 24px;
    border: 2px solid var(--border, #e4e8ef);
    border-radius: var(--radius-lg, 12px);
    background: var(--background, #fff);
    transition: all var(--transition-fast, 0.2s);
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 100px;
    cursor: pointer;
}

.staystra-plan-card:hover {
    border-color: var(--primary, #5BA4D9);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.staystra-plan-card-featured {
    border-color: var(--primary, #5BA4D9);
    box-shadow: var(--shadow);
    background: var(--accent, #dcf2ff);
}

.staystra-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    background: var(--primary, #5BA4D9);
    color: var(--primary-foreground, #fff);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-md, 6px);
}

.staystra-plan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.staystra-plan-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.staystra-plan-title-section {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.staystra-plan-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--foreground, #000);
}

.staystra-plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.staystra-plan-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary, #5BA4D9);
}

.staystra-plan-period {
    font-size: 13px;
    color: var(--muted-foreground, #666);
    font-weight: 500;
}

.staystra-plan-savings {
    padding: 3px 8px;
    background: #d1fae5;
    color: #065f46;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.staystra-plan-features {
    margin: 0;
    font-size: 14px;
    color: var(--muted-foreground, #666);
    line-height: 1.5;
}

/* Plan CTA buttons - use theme .btn */
.staystra-plan-cta {
    white-space: nowrap;
}

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

/* ==========================================================================
   Modal Content Overrides
   ========================================================================== */

.staystra-modal-content .staystra-login-header {
    margin-bottom: 20px;
}

.staystra-modal-content .staystra-oauth-buttons {
    margin-bottom: 16px;
}

/* Modal pricing cards should be vertically centered like login state */
.staystra-modal-content .staystra-right-signup {
    justify-content: center;
}

/* Modal pricing elements need extra spacing to match inline
   (inline gets styles from .entry-content ul/li) */
.staystra-modal-content .staystra-pricing-content {
    line-height: 2.025; /* Match inline's 32.4px line-height */
}

.staystra-modal-content .staystra-pricing-features-list {
    margin: 24px 0;
    padding-left: 24px;
}

.staystra-modal-content .staystra-pricing-features-list li {
    margin-bottom: 8px;
    padding-left: 8px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .staystra-auth-container {
        flex-direction: column;
        gap: 32px;
    }

    .staystra-auth-left,
    .staystra-auth-right {
        max-width: 100%;
    }

    .staystra-auth-right {
        order: 2;
    }
}

@media (max-width: 640px) {
    .staystra-auth-title {
        font-size: 28px;
    }

    .staystra-oauth-buttons {
        flex-direction: column;
    }

    .staystra-oauth-btn {
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .staystra-modal-content {
        margin: 20px auto;
        padding: 30px 20px;
    }

    .staystra-auth-title {
        font-size: 24px;
    }

    .staystra-traditional-form .form-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ==========================================================================
   Dark Mode Support
   Theme adds .dark class to <html> element
   ========================================================================== */

.dark .staystra-modal {
    background-color: rgba(0, 0, 0, 0.8);
}

.dark .staystra-modal-content {
    /* IMPORTANT: Must use --card (not --background) to match inline form
       and ensure .staystra-divider span background matches container */
    background: var(--card);
    border: 1px solid var(--border);
}

/* Messages - adjusted for dark backgrounds */
.dark .staystra-login-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.dark .staystra-login-message.success {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

/* Pricing cards */
.dark .staystra-pricing-card {
    background: var(--card);
    border-color: var(--border);
}

.dark .staystra-pricing-card:hover {
    border-color: var(--primary);
}

.dark .staystra-pricing-card.selected {
    background: var(--accent);
    border-color: var(--primary);
}

.dark .staystra-pricing-card-recommended {
    background: linear-gradient(135deg, var(--accent) 0%, var(--card) 100%);
}

/* Plan savings badge */
.dark .staystra-plan-savings {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

/* Plan cards (post-signup) */
.dark .staystra-plan-card {
    background: var(--card);
    border-color: var(--border);
}

.dark .staystra-plan-card:hover {
    border-color: var(--primary);
    background: var(--muted);
}

.dark .staystra-plan-card-featured {
    background: var(--accent);
    border-color: var(--primary);
}

/* OAuth icon buttons */
.dark .staystra-oauth-icon-btn {
    background: var(--card);
    border-color: var(--border);
}

.dark .staystra-oauth-icon-btn:hover {
    background: var(--accent);
    border-color: var(--primary);
}

/* Apple icon - invert for dark mode */
.dark .staystra-oauth-icon-btn.apple .staystra-oauth-icon svg path {
    fill: #fff;
}

/* Divider line
   IMPORTANT: Divider span uses --card background.
   Both .staystra-modal-content and .staystra-login-page must also use --card
   in dark mode, or the "or" will appear as wrong color. */
.dark .staystra-divider::before {
    background: var(--border);
}

.dark .staystra-divider span {
    background: var(--card);
}

/* Right column gradient */
.dark .staystra-auth-right {
    background: linear-gradient(135deg, var(--accent) 0%, var(--muted) 100%);
}

/* Form inputs */
.dark .staystra-traditional-form .form-input {
    background: var(--muted);
    border-color: var(--border);
    color: var(--foreground);
}

.dark .staystra-traditional-form .form-input:focus {
    background: var(--background);
    border-color: var(--ring);
}

.dark .staystra-traditional-form .form-input::placeholder {
    color: var(--muted-foreground);
}

/* Login page card wrapper - needs !important to override inline style */
.dark .staystra-login-page {
    background: var(--card) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   Account Page Dark Mode
   ========================================================================== */

/* Account page container - no background needed, inherits from page */
.dark .staystra-account-page {
    color: var(--foreground);
}

/* Account header */
.dark .staystra-account-header {
    border-bottom-color: var(--border) !important;
}

.dark .staystra-account-header h2 {
    color: var(--foreground) !important;
}

/* Avatar border */
.dark .staystra-account-header img {
    border-color: var(--border) !important;
}

/* Account sections (cards) */
.dark .staystra-account-section {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

.dark .staystra-account-section h2 {
    color: var(--foreground) !important;
}

/* Form labels */
.dark .staystra-account-section label {
    color: var(--muted-foreground) !important;
}

/* Form inputs */
.dark .staystra-account-section input[type="text"],
.dark .staystra-account-section input[type="email"],
.dark .staystra-account-section input[type="password"] {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

.dark .staystra-account-section input[readonly] {
    background: var(--muted) !important;
    opacity: 0.7;
}

/* Checkbox labels */
.dark .staystra-account-section input[type="checkbox"] + span {
    color: var(--muted-foreground) !important;
}

/* Info boxes with backgrounds */
.dark .staystra-account-section [style*="background: #f9f9f9"],
.dark .staystra-account-section [style*="background: #fafafa"],
.dark .staystra-account-section [style*="background: #f5f5f5"] {
    background: var(--muted) !important;
    border-color: var(--border) !important;
}

/* GDPR data box */
.dark .staystra-account-section [style*="background: #f0f7ff"] {
    background: rgba(34, 113, 177, 0.15) !important;
    border-color: rgba(34, 113, 177, 0.3) !important;
}

/* Subscription section */
.dark #subscription-billing-section {
    background: var(--muted) !important;
    border-color: var(--border) !important;
}

/* Payment method box */
.dark #payment-method-section {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

.dark #payment-method-section [style*="color: #333"] {
    color: var(--foreground) !important;
}

/* Billing history */
.dark #billing-history-table {
    background: var(--card) !important;
    border-color: var(--border) !important;
}

/* Status badges */
.dark #subscription-status-badge {
    background: var(--muted) !important;
    color: var(--muted-foreground) !important;
}

/* Warning/Notice boxes */
.dark #cancellation-notice {
    background: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #ffc107 !important;
}

.dark #past-due-notice,
.dark .staystra-message--error {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
    color: #f8b4b4 !important;
}

.dark .staystra-message--success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}

/* Saved properties */
.dark .staystra-saved-property {
    background: var(--muted) !important;
    border-color: var(--border) !important;
}

.dark .staystra-saved-property:hover {
    background: var(--accent) !important;
}

.dark .staystra-property-info h4 {
    color: var(--foreground) !important;
}

.dark .staystra-property-meta {
    color: var(--muted-foreground) !important;
}

/* Property action buttons */
.dark .staystra-property-actions button {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--muted-foreground) !important;
}

.dark .staystra-property-actions button:hover {
    background: var(--muted) !important;
    border-color: var(--border) !important;
}

.dark .staystra-property-actions button.delete-btn {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

.dark .staystra-property-actions button.delete-btn:hover {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: #f87171 !important;
}

/* Analysis history items */
.dark .staystra-analysis-history-item {
    border-bottom-color: var(--border) !important;
}

.dark .staystra-analysis-history-item strong {
    color: var(--foreground) !important;
}

.dark .staystra-analysis-history-item span {
    color: var(--muted-foreground) !important;
}

.dark .staystra-analysis-history-item a {
    color: var(--primary) !important;
}

.dark .staystra-analysis-history-item a:hover {
    background: var(--accent) !important;
}

/* Empty state */
.dark .staystra-empty-state {
    color: var(--muted-foreground) !important;
}

/* Buttons - secondary */
.dark .staystra-button--secondary {
    background: var(--muted) !important;
    color: var(--foreground) !important;
}

.dark .staystra-button--secondary:hover {
    background: var(--accent) !important;
}

/* Small inline buttons */
.dark .staystra-account-section button[style*="background: white"],
.dark .staystra-account-section button[style*="background: #f0f0f0"] {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* Update payment button */
.dark #update-payment-btn {
    background: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}

/* Password modal */
.dark #password-modal > div {
    background: var(--card) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark #password-modal h3 {
    color: var(--foreground) !important;
}

.dark #password-modal small {
    color: var(--muted-foreground) !important;
}

.dark #password-error {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #f8b4b4 !important;
}

.dark #cancel-password-btn {
    background: var(--muted) !important;
    color: var(--foreground) !important;
}

/* Text colors for inline styles */
.dark .staystra-account-section [style*="color: #333"],
.dark .staystra-account-section [style*="color: #555"] {
    color: var(--foreground) !important;
}

.dark .staystra-account-section [style*="color: #666"],
.dark .staystra-account-section [style*="color: #777"],
.dark .staystra-account-section [style*="color: #888"] {
    color: var(--muted-foreground) !important;
}

/* Border overrides for inline styles */
.dark .staystra-account-section [style*="border-top: 1px solid #e5e5e5"],
.dark .staystra-account-section [style*="border: 1px solid #e0e0e0"],
.dark .staystra-account-section [style*="border: 1px solid #e8e8e8"],
.dark .staystra-account-section [style*="border-bottom: 1px solid #eee"] {
    border-color: var(--border) !important;
}

/* ==========================================================================
   Contact Form Styles
   ========================================================================== */

.staystra-contact-form {
    flex: 1;
    min-width: 0;
    max-width: 480px;
}

.staystra-contact-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

/* Readonly input styling for contact form */
.staystra-contact-form input[readonly] {
    background-color: var(--muted, #f8f8f8);
    cursor: not-allowed;
    opacity: 0.7;
}

.dark .staystra-contact-form input[readonly] {
    background-color: var(--muted);
}

/* Select dropdown styling */
.staystra-contact-form select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ==========================================================================
   Newsletter & Contact Right Columns
   ========================================================================== */

.staystra-right-newsletter,
.staystra-right-contact {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    justify-content: center;
}

/* Contact info items */
.staystra-contact-info {
    margin: 24px 0;
}

.staystra-contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--foreground, #333);
}

.staystra-contact-info-item svg {
    flex-shrink: 0;
}

/* Contact topics section */
.staystra-contact-topics {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border, #e5e5e5);
}

.staystra-contact-topics-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-foreground, #666);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.staystra-contact-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.staystra-contact-topics-list li {
    padding: 6px 0;
    font-size: 14px;
    color: var(--muted-foreground, #666);
}

.staystra-contact-topics-list li::before {
    content: "•";
    margin-right: 8px;
    color: var(--primary, #5BA4D9);
}

/* ==========================================================================
   Modal-Specific Overrides for Newsletter & Contact
   ========================================================================== */

.staystra-modal-content .staystra-right-newsletter,
.staystra-modal-content .staystra-right-contact {
    justify-content: center;
}

/* Match modal line-height and spacing like pricing cards */
.staystra-modal-content .staystra-contact-info,
.staystra-modal-content .staystra-contact-topics {
    line-height: 2.025;
}

/* Dark mode for contact elements */
.dark .staystra-contact-info-item {
    color: var(--foreground);
}

.dark .staystra-contact-topics {
    border-top-color: var(--border);
}

.dark .staystra-contact-topics-title,
.dark .staystra-contact-topics-list li {
    color: var(--muted-foreground);
}

/* ==========================================================================
   Contact Form - Right Column Form
   ========================================================================== */

.staystra-contact-right-form {
    width: 100%;
}

.staystra-contact-right-form-inner {
    margin-top: 24px;
}

.staystra-contact-right-form-inner .form-group {
    margin-bottom: 16px;
}

.staystra-contact-right-form-inner select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Sign in hint for disabled button */
.staystra-contact-signin-hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted-foreground, #666);
    text-align: center;
}

.dark .staystra-contact-signin-hint {
    color: var(--muted-foreground);
}

/* Disabled submit button styling */
.staystra-contact-right-form-inner button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   Contact Modal - Two-Step Flow
   ========================================================================== */

/* Narrow the modal when in contact step mode
   Single column width: 480px + 40px padding each side = 560px
   Must use #id selector to override line 29-34 specificity */
#staystra-auth-modal .staystra-modal-content:has(.staystra-contact-step1),
#staystra-auth-modal .staystra-modal-content:has(.staystra-contact-step2) {
    max-width: 560px !important;
}

/* Step 1: Auth only (centered, narrower modal) */
.staystra-contact-step1 {
    max-width: 100%;
    margin: 0 auto;
}

.staystra-contact-step1 .staystra-auth-left {
    max-width: 100%;
}

/* Step 2: Contact form only (centered, medium width) */
.staystra-contact-step2 {
    max-width: 100%;
    margin: 0 auto;
}

.staystra-contact-step2 .staystra-auth-right {
    width: 100%;
    max-width: 100%;
    background: transparent;
    padding: 0;
}

.staystra-contact-step2 .staystra-right-contact {
    background: linear-gradient(135deg, var(--accent, #dcf2ff) 0%, var(--muted, #f8f8f8) 100%);
    border-radius: var(--radius-xl, 16px);
    padding: 40px;
}

/* Dark mode for step 2 */
.dark .staystra-contact-step2 .staystra-right-contact {
    background: linear-gradient(135deg, var(--accent, rgba(91, 164, 217, 0.15)) 0%, var(--muted, rgba(255, 255, 255, 0.05)) 100%);
}