:root {
    --bs-primary: #4c7558;
    --bs-primary-rgb: 76, 117, 88;
    --bs-light-gray: #f8f9fa;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding-top: 70px; }
.bg-primary { background-color: var(--bs-primary) !important; }
.border-primary { border-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3d5e46; --bs-btn-hover-border-color: #375540; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bs-primary); }
.navbar { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.hero-section { background-color: var(--bs-light-gray); padding: 5rem 0; }
.card { 
    border-radius: 10px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
    transition: transform 0.3s, box-shadow 0.3s; 
    border: none; 
    transform: translateZ(0); 
}
.card:hover { 
    transform: translateY(-5px) translateZ(0); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
}
.btn { border-radius: 8px; font-weight: 500; padding: 0.6rem 1.5rem; }
section { padding: 4rem 0; }
footer { background-color: var(--bs-light-gray); padding: 2rem 0; margin-top: 3rem; }
#card-element { padding: 12px; border: 1px solid #ced4da; border-radius: .375rem; }
/* style.css */
.modal-content {
    border-radius: 10px;
}

.btn-google {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #757575;
}

.btn-google:hover {
    background-color: #f8f9fa;
    border-color: #ddd;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #dee2e6;
}

.auth-divider::before {
    margin-right: .5em;
}

.auth-divider::after {
    margin-left: .5em;
}

/* Subscription Status Styles */
.status-active { background-color: #28a745; }
.status-trialing { background-color: #17a2b8; }
.status-past_due { background-color: #ffc107; }
.status-canceled { background-color: #6c757d; }
.status-inactive { background-color: #6c757d; }

.status-error {
    background-color: #dc3545;
    color: white;
}

/* Add this to make status more visible */
#subscription-status {
    font-size: 1.2rem;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
    min-width: 150px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.status-active { background-color: #28a745; color: white; }
.status-trialing { background-color: #17a2b8; color: white; }
.status-past_due { background-color: #ffc107; color: #212529; }
.status-canceled, .status-inactive { background-color: #6c757d; color: white; }
.status-error { background-color: #dc3545; color: white; }

/* Make unsubscribe button more visible */
#dashboard-unsubscribe-btn {
    padding: 10px 20px;
    font-size: 1.1rem;
    transition: all 0.3s;
}

#dashboard-unsubscribe-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Add animation for status loading */
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.status-loading {
    animation: pulse 1.5s infinite;
    background-color: #6c757d;
    color: white;
}

/* Unsubscribe Button */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

/* Spinner */
.spinner-border {
    vertical-align: middle;
    margin-right: 5px;
}
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.vh-100 {
    height: 100vh;
}