html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Footer is no longer absolutely positioned; avoid extra bottom gap. */
    margin-bottom: 0;
    padding-bottom: 0;
    background-color: #f8f9fa;
}

/* Footer payment cards logo (global, not scoped) */
img.payment-cards-logo {
    width: clamp(48px, 10vw, 96px) !important;
    height: auto !important;
    max-height: clamp(24px, 6vw, 48px) !important;
    object-fit: contain;
    display: block;
}

/* Banner Header Styles - Rapido Green */
.banner-header {
    background: linear-gradient(135deg, #2d7a3e 0%, #1a5c2b 100%);
    color: white;
    padding: 40px 0;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.banner-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.banner-header p {
    font-size: 1.1rem;
    opacity: 0.95;
}

.rapido-logo {
    max-width: 250px;
    height: auto;
    background: white;
    padding: 15px;
    border-radius: 10px;
}

/* Search Section Styles */
.search-section .card {
    border: none;
    border-radius: 15px;
}

.search-section .input-group {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.search-section .form-control {
    border: 2px solid #e0e0e0;
    border-right: none;
}

.search-section .btn-primary {
    background: linear-gradient(135deg, #2d7a3e 0%, #1a5c2b 100%);
    border: none;
    padding: 0 30px;
}

.search-section .btn-primary:hover {
    background: linear-gradient(135deg, #236330 0%, #144522 100%);
}

.search-section .form-control:focus {
    border-color: #2d7a3e;
    box-shadow: 0 0 0 0.2rem rgba(45, 122, 62, 0.25);
}

/* Timeline Styles */
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #2d7a3e, #1a5c2b);
}

.timeline-item {
    position: relative;
    padding-left: 70px;
    margin-bottom: 30px;
    animation: fadeInUp 0.5s ease-in-out;
}

.timeline-item.latest .timeline-content {
    background: linear-gradient(135deg, #f0f8f3 0%, #e8f5ed 100%);
    border-left: 4px solid #2d7a3e;
}

.timeline-marker {
    position: absolute;
    left: 21px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid #2d7a3e;
    box-shadow: 0 0 0 4px rgba(45, 122, 62, 0.1);
}

.timeline-item.latest .timeline-marker {
    background: #2d7a3e;
    animation: pulse 2s infinite;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.timeline-header h5 {
    color: #333;
    font-weight: 600;
    margin-bottom: 5px;
}

.timeline-body {
    color: #666;
    margin-top: 10px;
}

.timeline-body strong {
    color: #333;
}

/* Results Section */
#resultsSection .card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

#resultsSection .card-header {
    background: linear-gradient(135deg, #2d7a3e 0%, #1a5c2b 100%);
    padding: 20px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 122, 62, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(45, 122, 62, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(45, 122, 62, 0);
    }
}

/* Loading Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .banner-header h1 {
        font-size: 2rem;
    }

    .banner-header p {
        font-size: 1rem;
    }

    .timeline::before {
        left: 15px;
    }

    .timeline-item {
        padding-left: 50px;
    }

    .timeline-marker {
        left: 6px;
    }
}

/* Navigation menu button styles */
.nav-menu-button {
    border-radius: 8px;
    padding: 8px 16px;
    margin: 0 4px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.main-navbar .btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 6px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nav-menu-button {
        padding: 8px 8px;
        font-size: 0.8rem;
        gap: 4px;
    }
    .main-navbar .btn {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    #balanceContainer {
        font-size: 0.8rem;
    }
    #sessionTimeContainer {
        font-size: 0.8rem;
    }
    #sessionTimeRemaining {
        font-size: 0.8rem;
    }
}

@media (min-width: 1200px) {
    #sessionTimeContainer {
        font-size: 1rem;
    }
    #sessionTimeRemaining {
        font-size: 1rem;
    }
}

/* TOP LEVEL BUTTONS */
/* Default: White text on Green background (Transparent/Greenish in navbar context) */
/* Actually user asked: "Te przyciski niech są z białym tekstem i na zielonym tle" (White text on Green background) */
/* Since the navbar itself is green gradient, buttons can be transparent or slightly lighter green. 
   But user said "usuwasz żółty kolor" (which was the old default).
   Let's make them transparent with white text by default (blending with navbar), 
   OR explicitly green if they need to stand out. 
   Given the navbar is green, "Green background" might mean "Transparent" or "Matching Identity".
   Let's stick to White Text, Transparent Background (so it looks green from navbar).
*/
.top-level-btn {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
}

.top-level-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Active State: Yellow background, Black text */
.top-level-btn.active {
    background: #FFC107 !important;
    color: #000000 !important;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* SECONDARY LEVEL BUTTONS */
/* Smaller size */
.secondary-level-btn {
    padding: 6px 12px;
    font-size: 0.9rem;

    /* Default: Green background, White text */
    background: #2d7a3e !important;
    color: white !important;
    border: none;
}

.secondary-level-btn:hover {
    background: #236330 !important;
    color: white !important;
    transform: translateY(-1px);
}

/* Active State: Yellow background, Black text */
.secondary-level-btn.active {
    background: #FFC107 !important;
    color: #000000 !important;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.secondary-navbar {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-menu-button i {
    font-size: 1.1em;
}

/* Status Badge Wrapping for Orders List */
.status-badge-wrap {
    white-space: normal !important;
    text-align: left !important;
    display: inline-block !important;
    max-width: 300px;
}

@media (max-width: 768px) {
    .status-badge-wrap {
        max-width: 140px;
        font-size: 0.85em;
        padding: 4px 8px;
    }
}

@media (max-width: 991.98px) {
    .header-mobile-sticky {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    #mainNavbarContent .nav-menu-button,
    #mainNavbarContent .btn {
        padding: 6px 16px !important;
        margin: 4px 0 !important;
        justify-content: flex-start;
    }

    #mainNavbarContent .nav-item {
        margin-bottom: 4px;
    }

    #balanceContainer,
    #sessionTimeContainer,
    #sessionTimeRemaining {
        font-size: 0.75rem !important;
    }
}

.cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: rgba(33, 37, 41, 0.96);
    color: #fff;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
}

.cookie-consent-content {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.92rem;
}

.cookie-consent-content a {
    color: #9fd4ff;
}

#sessionTimeContainer.session-time-warning #sessionTimeRemaining {
    color: #ffc107 !important;
}