/* --- 1. Определение цветовой палитры через CSS-переменные --- */
:root {
    --primary-color: #FF673D; /* Наш новый энергичный кораллово-оранжевый */
    --primary-color-hover: #E6562E; /* Его более темная версия для наведения */
    --text-color: #2E3A48;      /* Глубокий графитовый для основного текста */
    --secondary-text-color: #555; /* Для менее важного текста */
    --background-color: #fdfcfa;/* Очень легкий теплый оттенок для фона */
    --surface-color: #ffffff;   /* Чистый белый для карточек и шапки */
    --border-color: #eeeeee;    /* Светлый цвет для границ */
}

/* --- 2. Глобальные стили с использованием переменных --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color); /* ИЗМЕНЕНО */
    background-color: var(--background-color); /* ИЗМЕНЕНО */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

p {
    margin-bottom: 15px;
    color: var(--secondary-text-color); /* ИЗМЕНЕНО */
}

a {
    text-decoration: none;
    color: var(--primary-color); /* ИЗМЕНЕНО */
    transition: color 0.3s ease;
}
a:hover {
    color: var(--primary-color-hover);
}

section {
    padding: 60px 0;
}

/* --- Header --- */
header {
    background: var(--surface-color); /* ИЗМЕНЕНО */
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color); /* ИЗМЕНЕНО */
    position: sticky;
    top: 0;
    z-index: 100;
}

header nav {
    display: flex; /* Flexbox для выравнивания элементов */
    justify-content: space-between; /* Раздвигаем элементы по краям */
    align-items: center; /* Центрируем элементы по вертикали */
}

header nav ul {
    list-style: none; /* Убирает маркеры-точки */
    display: flex;    /* Выстраивает элементы в ряд */
}

header nav ul li {
    margin-left: 25px; /* Добавляет отступ между ссылками */
}

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

.logo-img {
    max-height: 50px; 
    width: auto; 
}

header nav ul li a {
    color: var(--secondary-text-color); /* ИЗМЕНЕНО */
    font-weight: 500;
}
header nav ul li a:hover {
    color: var(--primary-color); /* ИЗМЕНЕНО */
}

/* --- Hero Section --- */
.hero {
    /* ИЗМЕНЕНО: Добавляем фоновое изображение с затемняющим слоем */
    background-image: 
        linear-gradient(rgba(46, 58, 72, 0.6), rgba(46, 58, 72, 0.6)), /* Градиент-оверлей на основе нашего цвета --text-color */
        url('images/hero-background.avif');
    background-size: cover; /* Изображение заполняет весь блок */
    background-position: center; /* Центрируем изображение */
    color: var(--surface-color); /* Весь текст внутри блока по умолчанию будет белым */
    
    text-align: center;
    padding: 120px 0; /* Увеличим отступы, чтобы фон был лучше виден */
}

.hero .container {
    position: relative; /* Необходимо для правильного отображения */
    z-index: 2;
}

.hero h1 {
    font-size: 3.5rem; /* Сделаем главный заголовок еще крупнее */
    color: var(--surface-color); /* Явно указываем белый цвет */
}

.hero p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.85); /* Делаем подзаголовок слегка прозрачным для иерархии */
    max-width: 700px; /* Ограничим ширину, чтобы текст не был слишком длинным */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background: var(--primary-color); /* ИЗМЕНЕНО */
    color: var(--surface-color); /* ИЗМЕНЕНО */
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.cta-button:hover {
    background: var(--primary-color-hover);
    color: var(--surface-color); /* This forces the text to remain white */
}

/* Secondary CTA button for Login */
.cta-button-secondary {
    display: inline-block;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--border-color);
    padding: 13px 25px; /* Adjust padding to match primary button height */
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-left: 25px;
}
.cta-button-secondary:hover {
    background: var(--background-color);
    border-color: var(--primary-color);
}
.header-signup-btn {
    margin-left: 15px;
}

/* ===== HEADER AUTH BUTTONS (STABLE VERSION) ===== */

/* --- Default State (Desktop) --- */
.desktop-auth-buttons {
    display: flex;       /* Show desktop buttons by default */
    align-items: center;
}

/* Hide the list item container for mobile buttons on desktop */
.mobile-auth-buttons {
    display: none;
}

/* --- Responsive State (Mobile) --- */
@media (max-width: 768px) {
    /* Hide the desktop button container on mobile */
    .desktop-auth-buttons {
        display: none;
    }
    
    /* Show the list item container inside the mobile menu */
    .main-nav .mobile-auth-buttons {
        display: flex;
        justify-content: center;
        gap: 15px;
        width: 100%;
        margin-top: 15px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color);
    }

    /* Style the buttons inside the mobile menu to not take full width */
    .mobile-auth-buttons .cta-button,
    .mobile-auth-buttons .cta-button-secondary {
        width: auto; /* Reset width */
        padding: 10px 20px; /* Adjust padding for smaller size */
    }
}
/* ===== END HEADER AUTH BUTTONS ===== */

/* ===== SERVICE CARD STYLES (WITH IMAGES) ===== */
.service-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Rounded corners for the card */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* These properties are crucial for the new layout */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* This hides any part of the image that might stick out */
    
    /* We remove the padding from the card itself */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(46, 58, 72, 0.1); /* A more pronounced shadow on hover */
}

/* Container for the image at the top of the card */
.service-card-image {
    height: 200px; /* A fixed height for all images */
    background-color: #f0f4f8; /* A light background in case images don't load */
}

/* The image itself */
.service-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the magic part: it scales the image to fit without distortion */
}

/* The container for all text content */
.service-card-body {
    padding: 25px; /* We apply padding here now, not on the main card */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This makes the body take up all remaining vertical space */
    text-align: center;
}

.service-card-body h3 {
    font-size: 1.5rem;
    color: var(--text-color);
}

.service-card-body p {
    flex-grow: 1; /* This makes the paragraph stretch, pushing the price/button down */
    margin-bottom: 20px;
}

.service-card-body .price {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 15px 0; /* Adjusted margin */
}

/* The "Order Now" button remains as is */
.order-button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s ease;
}
.order-button:hover {
    background: var(--primary-color-hover);
}
/* ===== END SERVICE CARD STYLES ===== */

.order-button {
    background: var(--primary-color); /* ИЗМЕНЕНО (зеленый стал оранжевым для единства стиля) */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.3s ease;
}
.order-button:hover {
    background: var(--primary-color-hover); /* ИЗМЕНЕНО */
}

/* --- Process Section --- */
.process ol {
    list-style: none;
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.process li {
    background: var(--surface-color);
    padding: 25px 30px; /* Немного увеличим отступы */
    margin-bottom: 20px; /* Увеличим расстояние между шагами */
    border-left: 4px solid var(--primary-color);
    display: flex;
    align-items: flex-start; /* Выравниваем по верху для лучшей читаемости */
    transition: box-shadow 0.3s ease;
}

.process li:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.07); /* Добавим тень при наведении */
}

.process .step-number { /* Изменили селектор для ясности */
    font-size: 2.5rem; /* Сделаем цифры чуть крупнее */
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
    margin-right: 25px;
    line-height: 1;
    opacity: 0.4;
}

/* НОВЫЕ СТИЛИ для контентной части шага */
.process .step-content h3 {
    margin: 0 0 5px 0; /* Убираем лишние отступы у заголовка шага */
    font-size: 1.4rem;
    color: var(--text-color);
}

.process .step-content p {
    margin: 0;
    color: var(--secondary-text-color);
}

/* Адаптивность для футера */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* На мобильных все колонки встают друг под друга */
        text-align: center;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%); /* Центрируем декоративную линию */
    }

    .payment-logos {
        justify-content: center; /* Центрируем логотипы */
    }
}

/* --- Updated Portfolio Section Styles --- */
.portfolio {
    background-color: #f8f9fa;
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 40px;
}
.portfolio-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    aspect-ratio: 4 / 3;
}
.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ИЗМЕНЕНО: оверлей теперь в тон основному темному цвету */
    background: rgba(46, 58, 72, 0.8); 
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.portfolio-overlay h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.4s ease-in-out;
}
.portfolio-overlay .category {
    font-size: 0.9rem;
    font-style: italic;
    background: rgba(255, 255, 255, 0.15);
    padding: 3px 10px;
    border-radius: 15px;
    transform: translateY(20px);
    transition: transform 0.4s 0.1s ease-in-out;
}
.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}
.portfolio-card:hover img {
    transform: scale(1.1);
}
.portfolio-card:hover .portfolio-overlay h3,
.portfolio-card:hover .portfolio-overlay .category {
    transform: translateY(0);
}

/* --- Адаптивность для мобильных устройств --- */
@media (max-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* --- About Us Section --- */
.about {
    background-color: var(--surface-color); /* Белый фон для чистоты */
    text-align: center; /* Центрируем весь контент */
}

.about .container {
    max-width: 750px; /* Ограничиваем ширину для лучшей читаемости текста */
}

.about h2 {
    margin-bottom: 30px;
}

.about-quote {
    font-size: 1.1rem; /* Делаем текст кредо чуть крупнее */
    font-style: italic; /* Добавляем курсив для выразительности */
    color: var(--text-color); /* Используем основной, более темный цвет текста */
    margin-top: 30px;
    padding-left: 25px;
    border-left: 3px solid var(--primary-color); /* Создаем акцентную линию слева */
    text-align: left; /* Выравниваем сам текст кредо по левому краю для аккуратности */
}

/* --- Contact Section --- */
.contact-section {
    background-color: var(--background-color);
}

.contact-section h2 {
    margin-bottom: 10px;
}
.contact-section p {
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

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

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007BFF;
}

.contact-form button[type="submit"] {
    width: 100%;
    border: none;
    cursor: pointer;
}

/* ===== FOOTER STYLES ===== */
footer {
    background-color: #2c3e50;
    color: #bdc3c7;
    padding: 60px 0 20px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: #e67e22;
}

.footer-col p {
    color: #a9a9a9;
    line-height: 1.8;
    margin: 0 0 10px 0;
}

.footer-col a {
    color: #e67e22;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: #fff;
}

/* === USING THE ORIGINAL, WORKING STYLES FOR IMG === */
.payment-logos {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.payment-logos img {
    height: 25px; /* Fixed height for consistency */
    width: auto;
    opacity: 0.7; /* Subdued look */
    transition: opacity 0.3s ease;
}

.payment-logos img:hover {
    opacity: 1; /* Fully visible on hover */
}
/* === END OF PAYMENT LOGO STYLES === */


.footer-bottom {
    text-align: center;
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid #3e5165;
    font-size: 0.9rem;
    color: #888;
}

/* Container for the policy links */
.footer-policy-links {
    margin-bottom: 15px; /* Adds space between the policy links and the copyright notice */
}

/* The links themselves */
.footer-policy-links a {
    color: #95a5a6;
    /* margin-right: 15px; is removed, we add horizontal margin instead */
    margin: 0 7px; /* Adds a bit of space on both sides of each link */
}

.footer-policy-links a:hover {
    color: #e67e22;
}

/* Finally, ensure the copyright paragraph has no extra margin */
.footer-bottom p {
    margin: 0;
}


/* === RESPONSIVENESS FOR FOOTER === */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }

    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .payment-logos {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
    }
}
/* ===== END FOOTER STYLES ===== */

/* ===== POLICY PAGE SPECIFIC STYLES ===== */

/* Styles for the main content area of policy pages */

/* This is the fix for the list alignment issue */
.policy-page ul {
    list-style-position: inside; /* Forces bullet points inside the content flow */
    padding-left: 5px; /* Adds a very small indent for readability */
}

/* ===== END POLICY PAGE SPECIFIC STYLES ===== */

/* ===== MOBILE NAVIGATION STYLES ===== */

/* The button container for the burger */
.mobile-nav-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000; /* Ensure it's above other elements */
}

/* The lines of the burger icon */
.burger-icon,
.burger-icon::before,
.burger-icon::after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.burger-icon::before,
.burger-icon::after {
    content: '';
    position: relative;
}
.burger-icon::before { top: -8px; }
.burger-icon::after { top: 5px; }


/* Styles for mobile screens (e.g., tablets and phones) */
@media (max-width: 768px) {
    /* Hide the desktop navigation links */
    header nav {
        display: none;
    }
    
    /* Show the burger button */
    .mobile-nav-toggle {
        display: block;
    }
}
/* ===== END MOBILE NAVIGATION STYLES ===== */

/* ===== SLIDE-OUT MOBILE MENU STYLES ===== */

@media (max-width: 768px) {
    /*
      This is the container for our slide-out menu.
      By default, it is hidden off-screen to the right.
    */
    header nav {
        display: block; /* Change from none to block so we can animate it */
        position: fixed; /* Position it relative to the browser window */
        top: 0;
        right: 0;
        width: 75%; /* The menu will take up 75% of the screen width */
        max-width: 320px; /* But not more than 320px */
        height: 100vh; /* 100% of the viewport height */
        background: var(--surface-color); /* Use our clean white background */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* A nice shadow on the left */
        
        padding-top: 100px; /* Leave space for the logo and close button */
        z-index: 999; /* Position it below the burger toggle button */
        
        /* The key for the slide animation */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    /* 
      WHEN the header has the .mobile-nav-active class (added by JS on click),
      we slide the navigation menu into view.
    */
    header.mobile-nav-active nav {
        transform: translateX(0);
    }

    /* Style the list inside the mobile menu */
    header nav .main-nav {
        display: flex;
        flex-direction: column; /* Stack the links vertically */
        align-items: center; /* Center them horizontally */
        width: 100%;
    }

    /* Style each link item */
    header nav .main-nav li {
        margin: 0;
        width: 100%;
        text-align: center;
    }

    /* Style the links themselves for better tap-ability */
    header nav .main-nav a {
        display: block; /* Make the whole area clickable */
        padding: 15px 0;
        font-size: 1.3rem; /* Make the text larger */
        color: var(--text-color);
        transition: background-color 0.3s ease;
    }
    
    header nav .main-nav a:hover {
        background-color: var(--background-color);
        color: var(--primary-color);
    }

    /* === The famous "Burger to X" animation === */

    /* When active, hide the middle bar of the burger */
    header.mobile-nav-active .burger-icon {
        background: transparent;
    }

    /* Rotate the top bar to form one half of the "X" */
    header.mobile-nav-active .burger-icon::before {
        transform: translateY(8px) rotate(45deg);
    }

    /* Rotate the bottom bar to form the other half of the "X" */
    header.mobile-nav-active .burger-icon::after {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* ===== END SLIDE-OUT MOBILE MENU STYLES ===== */

/* ===== GENERAL CONTENT RESPONSIVENESS ===== */
/* This media query will apply styles to screens 768px wide or smaller */
@media (max-width: 768px) {
    
    /* --- Adjusting Font Sizes for Mobile --- */
    .hero h1 {
        font-size: 2.5rem; /* Make the main title smaller to fit better */
    }

    .hero p {
        font-size: 1.1rem; /* Adjust the paragraph size */
    }

    h2 {
        font-size: 2rem; /* Make all section titles a bit smaller */
    }
    
    /* --- Adjusting Layouts for Mobile --- */
    
    /*
      This is the key fix for the contact form.
      It changes the 2-column grid for First/Last name into a single column.
    */
    .form-group-grid {
        grid-template-columns: 1fr; /* 1fr means "take up 1 fraction of the available space" */
        gap: 0; /* Remove the gap, as the form-group already has margin */
    }
    
    /* Reduce padding on forms for mobile to give more space */
    .contact-form {
        padding: 30px;
    }
    
    /* --- General Spacing Adjustments --- */
    section {
        padding: 50px 0; /* Reduce top/bottom padding for sections */
    }
    
}

/* Optional: For very small phones, we can make titles even smaller */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    .contact-form {
        padding: 20px;
    }
}
/* ===== END GENERAL CONTENT RESPONSIVENESS ===== */

/* ===== HEADER RESPONSIVENESS ===== */
/* These rules apply ONLY to screens 768px or smaller */
@media (max-width: 768px) {

    /* --- Rule for the MAIN header (homepage with burger) --- */
    /* We ensure its container always separates logo and burger */
    header .container {
        justify-content: space-between;
    }
    
    /* We hide the main desktop navigation UL element */
    header .main-nav {
        display: none;
    }
    

    /* --- Rule for the SIMPLE header (policy pages) --- */
    /* By targeting the new .header-simple class, these rules will NOT affect the main header. */

    /* 1. We make the nav container VISIBLE, overriding the global hide rule. */
    .header-simple nav {
        display: block;
    }

    /* 2. We center the container for the "Back to Home" link */
    .header-simple .container {
        justify-content: center;
    }

    /* 3. We style the link itself to be large and tappable */
    .header-simple .back-link-mobile {
        font-size: 1.1rem;
        font-weight: 600;
        padding: 10px 0;
    }
}
/* ===== END HEADER RESPONSIVENESS ===== */

/* ===== OPTIMIZATION FOR PORTFOLIO ON TOUCH DEVICES ===== */
@media (max-width: 992px) {
    /*
      On touch devices, hover effects can be clunky.
      We disable the fancy slide-in overlay and just make it semi-visible always.
    */
    .portfolio-overlay {
        opacity: 0.85; /* Overlay is always visible */
        background: rgba(46, 58, 72, 0.7);
    }
    .portfolio-overlay h3,
    .portfolio-overlay .category {
        transform: translateY(0); /* Text is always in its final position */
    }

    /* We also disable the image zoom effect on hover */
    .portfolio-card:hover img {
        transform: scale(1); /* No zoom */
    }
}
/* ===== END OPTIMIZATION FOR PORTFOLIO ON TOUCH DEVICES ===== */

/* ===== TOP-UP PAGE STYLES ===== */

.topup-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* A light background to set it apart */
}

.topup-section h2,
.topup-section p {
    text-align: center;
}

.topup-section p {
    max-width: 600px;
    margin: 0 auto 40px auto;
}

.topup-form-container {
    max-width: 500px;
    margin: 0 auto;
    background: var(--surface-color);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(46, 58, 72, 0.1);
}

/* This is a wrapper for the input field and the currency symbol */
.amount-input-wrapper {
    position: relative;
}

/* Style for the currency symbol '£' */
.amount-input-wrapper .currency-symbol {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 1.5rem; /* Match input font size */
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #999;
    pointer-events: none;
    opacity: 0; /* HIDDEN BY DEFAULT */
    transition: opacity 0.3s ease;
}

/* Style for the amount input field itself */
#topup-amount {
    width: 100%;
    padding: 15px 15px 15px 45px; /* Use padding for space again */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease;
}

#topup-amount:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Make the main button full width */
.topup-form-container .cta-button {
    width: 100%;
    margin-top: 20px;
}

/* Styles for the new preset amount buttons */

.preset-amounts-container {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap to the next line on mobile */
    gap: 10px; /* Space between buttons */
    margin-top: 10px;
}

.preset-amount-btn {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    padding: 8px 15px;
    border-radius: 20px; /* Makes them pill-shaped */
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.preset-amount-btn:hover {
    background-color: var(--primary-color-hover);
    color: var(--surface-color);
    border-color: var(--primary-color-hover);
}

/* Style for the ACTIVE button */
.preset-amount-btn.active {
    background-color: var(--primary-color);
    color: var(--surface-color);
    border-color: var(--primary-color);
}
/* ===== END TOP-UP PAGE STYLES ===== */

/* ===== TOP-UP SLIDER SECTION STYLES ===== */
.slider-display {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
    margin: 10px 0 20px 0;
}
.currency-symbol-slider {
    font-size: 2rem;
    vertical-align: middle;
    color: var(--text-color);
    opacity: 0.5;
}

/* Custom slider styles */
.slider {
    -webkit-appearance: none; /* Hides the default slider appearance */
    appearance: none; /* Standard property for compatibility */
    width: 100%;
    height: 10px;
    background: #e9ecef; /* Light grey track */
    border-radius: 5px;
    outline: none;
    transition: opacity 0.2s;
}
.slider:hover {
    opacity: 1; /* Fully visible on hover */
}
/* Thumb (the draggable handle) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
}
.slider::-moz-range-thumb { /* For Firefox */
    width: 25px;
    height: 25px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
}
/* ===== END: TOP-UP SLIDER STYLES ===== */

/* ===== HEADER TOP-UP BUTTON STYLES ===== */

.header-topup-btn {
    margin-left: 25px; /* Add some space between nav links and button */
}

/* 
  THIS IS THE NEW RULE TO HIDE THE EXTRA LINK ON DESKTOP
  It targets the list item and hides it by default.
*/
.main-nav .mobile-topup-link {
    display: none;
}

@media (max-width: 768px) {
    /* Hide the button itself in the header on mobile to avoid clutter */
    .header-topup-btn {
        display: none; 
    }

    /* 
      THIS IS THE NEW RULE TO SHOW THE LINK INSIDE THE SLIDE-OUT MENU
      We make it visible again only on mobile screens.
    */
    .main-nav .mobile-topup-link {
        display: block; /* Make it visible */
        margin-top: 15px;
        padding-top: 15px;
        width: 100%; /* Ensure it takes full width like other items */
        border-top: 1px solid var(--border-color);
    }
}
/* ===== END HEADER TOP-UP BUTTON STYLES ===== */

/* ===== AUTHENTICATION PAGE STYLES (Register & Login) ===== */
.auth-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* Light background */
}

.auth-form-container {
    max-width: 500px;
    margin: 0 auto;
    background: var(--surface-color);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(46, 58, 72, 0.1);
    text-align: center;
}

.auth-form-container h2 {
    margin-bottom: 10px;
}
.auth-form-container p {
    margin-bottom: 30px;
}

.auth-form-container .form-group {
    text-align: left; /* Align labels to the left */
}

.auth-form-container .cta-button {
    width: 100%;
    margin-top: 15px;
}

/* Link to switch between login/register pages */
.auth-switch-link {
    margin-top: 25px;
    font-size: 0.9rem;
}
/* ===== END AUTHENTICATION STYLES ===== */

/* ===== CABINET PAGE STYLES ===== */
.cabinet-section {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.cabinet-section h2,
.cabinet-section > .container > p {
    text-align: center;
}

.cabinet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 30px;
    margin-top: 40px;
}

.cabinet-block {
    background: var(--surface-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(46, 58, 72, 0.08);
}
.cabinet-block h3 {
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* Specific style for the history block to span two columns */
.history-block {
    grid-column: 1 / -1; /* This makes the block span all columns */
}

/* Balance display */
.balance-display {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 25px;
}
.cabinet-block .cta-button {
    width: 100%;
}

/* User details styles */
.user-details p {
    margin-bottom: 15px;
}
.user-details p strong {
    color: var(--text-color);
}

/* History table styles */
.history-table-container {
    max-height: 300px;
    overflow-y: auto; /* Adds a scrollbar if the content is too tall */
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
th {
    background-color: #f8f9fa;
}
td:last-child {
    font-weight: 600;
    text-align: right;
}

/* Logout link container */
.logout-link-container {
    text-align: center;
    margin-top: 40px;
}
.logout-link-container a {
    color: var(--secondary-text-color);
    text-decoration: underline;
}

/* Responsive adjustments for the cabinet */
@media (max-width: 992px) {
    .cabinet-grid {
        grid-template-columns: 1fr; /* Stack blocks on top of each other on mobile */
    }
    .history-block {
        grid-column: auto; /* Reset column span for mobile */
    }
}
/* ===== END CABINET PAGE STYLES ===== */

/* ===== TRANSACTION HISTORY COLORS ===== */
.amount-credit {
    color: #2ecc71; /* A nice green color */
    font-weight: 700;
}

.amount-debit {
    color: #e74c3c; /* A nice red color for future use */
    font-weight: 700;
}
/* ===== END TRANSACTION HISTORY COLORS ===== */