/* Modern Storage Punters Theme */
:root {
    --primary-green: #1C421D;
    /* Dark Green for buttons/headers */
    --brand-light-green: #4ADE80;
    /* Light green for 'Punters' text */
    --accent-gold: #D4AF37;
    --text-dark: #111827;
    /* Darker text */
    --text-grey: #6B7280;
    --bg-light: #F3F4F6;
    --white: #FFFFFF;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 1rem;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --font-sans: 'Inter', system-ui, sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-light);
    color: var(--text-dark);
}

/* Branding */
.brand-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-logo i {
    color: #ffc107;
    font-size: 1.5rem;
}

.brand-text-highlight {
    color: #ffc107;
    font-weight: 400;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* Buttons */
.btn-hero-primary {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.btn-hero-primary:hover {
    background-color: #143015;
    color: var(--white);
    transform: translateY(-1px);
}

.btn-hero-secondary {
    background-color: var(--white);
    color: var(--text-dark);
    padding: 0.75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.btn-hero-secondary:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
    transform: translateY(-1px);
}

/* Hero Section */
.hero-section {
    padding: 6rem 0 8rem;
    background-color: var(--bg-light);
    /* Assuming the image background is removed or specific? User mockup usually has white/light bg if text is dark. Current text is dark in mockup desc? "Your Next Great Find..." - usually dark text on light bg. Wait, the user reverted to my previous code which had a background image. The mockup description says "Hero Section: Core Messaging...". Usually modern designs have white clean background or light grey. Let's assume light background based on "modern" request, or keep the image but make text readable. 
    Actually, the previous code had a background image. If the user wants "exact same design", and the text is "Your Next Great Find Is Waiting" (Black text), the background must be light. Let's change hero to light background. */
    background: var(--bg-light);
    text-align: center;
    margin-bottom: 0;
}

.hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

/* Filter Card */
.filter-card-container {
    max-width: 960px;
    margin: -3rem auto 4rem;
    position: relative;
    z-index: 10;
    padding: 0 1rem;
}

.filter-card {
    background: var(--white);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid #E5E7EB;
}

.filter-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.filter-input-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-grey);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.filter-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--text-dark);
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 2px rgba(28, 66, 29, 0.1);
}

.filter-btn {
    background-color: var(--primary-green);
    color: var(--white);
    border: none;
    padding: 0.625rem 2.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    /* Match input height */
    transition: background 0.2s;
}

.filter-btn:hover {
    background-color: #143015;
}

@media (max-width: 768px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .hero-btns {
        flex-direction: column;
        padding: 0 2rem;
    }
}

.section-subtitle {
    color: var(--text-grey);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* How It Works - Steps */
.step-card {
    text-align: center;
    padding: 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s;
    height: 100%;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.step-number {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary-green);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 auto 1.5rem;
}

.step-icon {
    font-size: 2.5rem;
    color: var(--accent-gold);
    margin-bottom: 1.5rem;
}

/* Auction Cards - Modern */
.auction-card-modern {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s;
    border: 1px solid #e5e7eb;
}

.auction-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.auction-image-container {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.auction-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.auction-card-modern:hover .auction-image-container img {
    transform: scale(1.05);
}

.auction-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent-gold);
    color: var(--text-dark);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
}

.auction-details {
    padding: 1.5rem;
}

.auction-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.auction-location {
    color: var(--text-grey);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bid-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f3f4f6;
}

.bid-label {
    font-size: 0.75rem;
    color: var(--text-grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bid-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-green);
}

.time-value {
    font-size: 1rem;
    font-weight: 600;
    color: #ef4444;
    /* Alert red for time */
}

/* Why Choose Us */
.feature-box {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.feature-icon-wrapper {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    background: #f0fdf4;
    color: var(--primary-green);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* User Type Cards */
.user-type-card {
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: 0.3s;
}

.user-type-card:hover {
    border-color: var(--primary-green);
    box-shadow: var(--shadow-lg);
}

.user-type-card.dark {
    background: var(--primary-green);
    color: var(--white);
    border: none;
}

.user-type-card.dark .text-grey {
    color: #d1d5db;
}

/* Testimonials */
.testimonial-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin: 1rem;
}

.user-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
    }

    .hero-section {
        border-radius: 0;
        padding: 4rem 1rem 6rem;
    }

    .search-wrapper {
        flex-direction: column;
        padding: 1rem;
    }

    .search-btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}
/* Auction Card V2 Styles - Matching Image Design */
.auction-card-modern-v2 {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auction-card-modern-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.card-header-visual {
    /* Large colored area */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.bg-success-modern {
    background-color: #5ab583 !important; /* Soft Green */
}

.bg-secondary-light {
    background-color: #aeb4be !important; /* Muted Grey-Blue */
}

.bg-primary-modern {
    background-color: #5b9bd5 !important; /* Soft Blue */
}

.status-badge-v2 {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.65rem;
}

.badge-hot {
    background-color: #ffc107; /* Yellow/Gold for HOT */
    color: #000 !important;
}

.badge-standard {
    background-color: #6c757d; /* Grey for Standard */
    color: #fff !important;
}

.badge-ending {
    background-color: #dc3545; /* Red for Ending Soon */
    color: #fff !important;
}

.text-danger-modern {
    color: #d9534f;
}

/* Typography tweaks */
.auction-card-modern-v2 h3.display-6 {
    font-size: 2rem;
    line-height: 1.2;
}

.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.card-body h5.card-title {
    font-size: 1.1rem;
    line-height: 1.4;
}

/* Ensure equal height stacking */
.auction-card-modern-v2 {
    display: flex;
    flex-direction: column;
}

.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-body hr {
    margin-top: auto; /* Push bottom row down if content is short */
}

/* Responsiveness */
@media (max-width: 768px) {
    .auction-card-modern-v2 h3.display-6 {
        font-size: 1.75rem;
    }
    
    .card-header-visual {
        min-height: 160px !important;
    }
}

/* Auction Card V3 Styles (Auctions Page) */
.auction-card-v3 {
    border: 1px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auction-card-v3:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
}

.bg-purple-modern {
    background-color: #a142f4 !important; /* Vivid Purple */
}

.bg-warning-modern {
    background-color: #fbbc04 !important; /* Yellow/Gold */
}

.bg-secondary-modern {
    background-color: #9aa0a6 !important; /* Cool Grey */
}

/* Ensure darker text on yellow background header if needed, but design shows white text on colors. 
   Yellow might need dark text adjustment if it's too light, but user image shows white on vibrant colors.
   Let's keep white for now to match other headers. */

.auction-card-v3 h4 {
    line-height: 1.3;
}

.rounded-pill {
    border-radius: 50rem !important;
}