/* Woodworking Letters - Main Stylesheet */
/* Manly, rugged woodworking aesthetic */

:root {
    --primary-brown: #4a2c2a;
    --secondary-brown: #7d5a50;
    --accent-wood: #a67c52;
    --dark-wood: #2c1810;
    --light-wood: #d4a574;
    --text-dark: #2c1810;
    --text-light: #f5f5f5;
    --success-green: #5a7d50;
    --error-red: #7d3a3a;
    --border-color: #d4a574;
}

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

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    background: linear-gradient(135deg, #f5f0e8 0%, #e8ddd0 100%);
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-brown);
    margin-bottom: 1rem;
}

h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

h2 {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.6rem;
}

p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
.site-header {
    background: linear-gradient(135deg, var(--primary-brown) 0%, var(--secondary-brown) 100%);
    padding: 30px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-bottom: 4px solid var(--accent-wood);
}

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

.logo {
    color: var(--text-light);
    font-size: 2.5rem;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo::before {
    content: "🪚";
    font-size: 3rem;
}

/* Hero Section */
.hero {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%234a2c2a" width="1200" height="600"/><path fill="%237d5a50" opacity="0.3" d="M0 300L50 283.3C100 266.7 200 233.3 300 233.3C400 233.3 500 266.7 600 283.3C700 300 800 300 900 283.3C1000 266.7 1100 233.3 1150 216.7L1200 200V600H1150C1100 600 1000 600 900 600C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z"/></svg>') center/cover;
    padding: 100px 20px;
    text-align: center;
    color: var(--text-light);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(42, 28, 26, 0.7);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 3.5rem;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 1.4rem;
    margin-bottom: 30px;
    color: var(--light-wood);
}

/* Pricing Cards */
.pricing-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #f5f0e8 0%, #ffffff 100%);
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 900px;
    margin: 50px auto;
}

.pricing-card {
    background: white;
    border: 3px solid var(--accent-wood);
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-brown), var(--accent-wood));
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

.pricing-card.featured {
    border-color: var(--primary-brown);
    border-width: 4px;
    transform: scale(1.05);
}

.pricing-card .badge {
    background: var(--success-green);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.pricing-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.price {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-brown);
    margin: 20px 0;
}

.price-term {
    font-size: 1.2rem;
    color: var(--secondary-brown);
    font-weight: normal;
}

.pricing-card ul {
    list-style: none;
    text-align: left;
    margin: 30px 0;
}

.pricing-card li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    font-size: 1.05rem;
}

.pricing-card li::before {
    content: "✓ ";
    color: var(--success-green);
    font-weight: bold;
    margin-right: 10px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-brown) 0%, var(--secondary-brown) 100%);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-brown) 0%, var(--primary-brown) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.btn-secondary {
    background: white;
    color: var(--primary-brown);
    border: 2px solid var(--primary-brown);
}

.btn-secondary:hover {
    background: var(--primary-brown);
    color: white;
}

/* Forms */
.form-section {
    background: white;
    padding: 60px 40px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    max-width: 700px;
    margin: 50px auto;
    border: 3px solid var(--accent-wood);
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--primary-brown);
    font-size: 1.1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    font-family: 'Georgia', serif;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-brown);
    box-shadow: 0 0 8px rgba(74, 44, 42, 0.2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.required {
    color: var(--error-red);
}

/* Features Section */
.features {
    padding: 80px 20px;
    background: white;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1100px;
    margin: 50px auto;
}

.feature-card {
    text-align: center;
    padding: 30px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #fafafa, #f0f0f0);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

/* Footer */
.site-footer {
    background: var(--dark-wood);
    color: var(--text-light);
    padding: 40px 20px;
    text-align: center;
    border-top: 4px solid var(--accent-wood);
}

.site-footer a {
    color: var(--light-wood);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Alert Messages */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: bold;
}

.alert-success {
    background: #d4edda;
    border: 2px solid var(--success-green);
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    border: 2px solid var(--error-red);
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    border: 2px solid #0c5460;
    color: #0c5460;
}

/* Admin Styles */
.admin-nav {
    background: var(--primary-brown);
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.admin-nav a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    margin: 0 5px;
    display: inline-block;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.admin-nav a:hover {
    background: var(--secondary-brown);
}

.admin-nav a.active {
    background: var(--accent-wood);
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.stat-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-left: 5px solid var(--accent-wood);
}

.stat-card h3 {
    font-size: 1rem;
    color: var(--secondary-brown);
    margin-bottom: 10px;
}

.stat-card .stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-brown);
}

.data-table {
    width: 100%;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

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

.data-table th {
    background: var(--primary-brown);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: bold;
}

.data-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.data-table tr:hover {
    background: #f9f9f9;
}

.badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-active {
    background: #d4edda;
    color: #155724;
}

.badge-cancelled {
    background: #f8d7da;
    color: #721c24;
}

.badge-suspended {
    background: #fff3cd;
    color: #856404;
}

.badge-past-due {
    background: #f8d7da;
    color: #721c24;
}

/* Responsive Design */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .pricing-cards {
        grid-template-columns: 1fr;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .site-header .container {
        flex-direction: column;
        text-align: center;
    }
}

/* Loading Spinner */
.spinner {
    border: 4px solid var(--light-wood);
    border-top: 4px solid var(--primary-brown);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

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