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 {
  margin-bottom: 60px;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.animate-pulse {
    animation: pulse-red 2s infinite;
}

/* --- MOBILE RESPONSIVENESS --- */

/* 1. Navbar Adjustments */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1.2rem;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    h1 {
        font-size: 1.75rem;
    }
    /* Smaller headings */
}

/* 2. Responsive Tables (The "Card Stack" Trick) */
/* This forces tables to behave like a stack of cards on mobile */
@media (max-width: 768px) {
    .table-responsive-mobile thead {
        display: none; /* Hide headers */
    }

    .table-responsive-mobile tr {
        display: block;
        margin-bottom: 1rem;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        padding: 1rem;
    }

    .table-responsive-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

        .table-responsive-mobile td:last-child {
            border-bottom: none;
            flex-direction: column;
            align-items: stretch;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }
        /* Add labels before values using data-label attribute (optional but good) */
        .table-responsive-mobile td::before {
            content: attr(data-label);
            font-weight: bold;
            color: #6c757d;
            font-size: 0.85rem;
            margin-right: 1rem;
        }
}

/* 3. PayPal Container Responsive */
#paypal-button-container {
    width: 100% !important; /* Force full width on mobile */
    max-width: 300px; /* Cap width on desktop */
}
/* Specific override for the dashboard loop containers */
[id^="paypal-button-container-"] {
    width: 100% !important;
    min-width: 150px;
}


/* Card Hover Effect */
.auction-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .auction-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

    /* Ensure stretched link doesn't cover the buttons */
    .auction-card .btn {
        /*position: relative;*/
        z-index: 100; /* Keeps button clickable over the stretched link */
    }

/* Glassmorphism effect for Category badge */
.backdrop-blur {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* --- CUSTOM THEME: TEAL & PINK --- */
:root {
    --theme-teal: #005668; /* Deep Teal Background */
    --theme-pink: #ff3366; /* Vibrant Pink */
    --theme-pink-hover: #e62e5c;
}

/* Custom Navbar */
.bg-theme-teal {
    background-color: var(--theme-teal) !important;
    padding: 0.8rem 1rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.95rem;
    margin-right: 15px;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #fff;
    }

/* Custom Logo Construction (CSS Only) */
.brand-logo-container {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    letter-spacing: -0.5px;
}

.brand-icon-circle {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%; /* Circle */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,0.2);
}

    .brand-icon-circle i {
        color: white;
        font-size: 1.2rem;
    }

/* "Get Started" Pink Button */
.btn-theme-pink {
    background-color: var(--theme-pink);
    color: white;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    transition: background-color 0.2s;
}

    .btn-theme-pink:hover {
        background-color: var(--theme-pink-hover);
        color: white;
    }

/* Dropdown Customization for Dark Header */
.dropdown-menu-dark-custom {
    background-color: #004554;
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

    .dropdown-menu-dark-custom .dropdown-item {
        color: #eee;
    }

        .dropdown-menu-dark-custom .dropdown-item:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

/* --- CUSTOM THEME COLORS & COMPONENTS --- */
:root {
    --theme-teal: #005668;
    --theme-teal-dark: #004554;
    --theme-pink: #ff3366;
    --theme-pink-dark: #e62e5c;
    --theme-green: #2cb543; /* Custom green from image */
    --theme-green-dark: #249637;
    --text-muted: #6c757d;
}

/* Custom Header Bar (Teal) */
.bg-theme-teal {
    background-color: #371f17 !important;
}

.bg-theme-pink {
    background-color: #84240f !important;
    color: white;
}

/* Custom Buttons */
.btn-theme-pink {
    background-color: #ef8914 !important;
    color: white;
    border: none;
    font-weight: 600;
}

    .btn-theme-pink:hover {
        background-color: var(--theme-pink-dark);
        color: white;
    }

.btn-theme-green {
    background-color: var(--theme-green);
    color: white;
    border: none;
    font-weight: 700;
    font-size: 1.1rem;
}

    .btn-theme-green:hover {
        background-color: var(--theme-green-dark);
        color: white;
    }

.btn-theme-teal {
    background-color: var(--theme-teal);
    color: white;
    border: none;
    font-weight: 600;
}

    .btn-theme-teal:hover {
        background-color: var(--theme-teal-dark);
        color: white;
    }


/* Sidebar Blocks */
.sidebar-block {
    border: 1px solid #dee2e6;
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;
}

/* Date Block Styling */
.date-row {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

    .date-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.date-day {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: #333;
    margin-right: 15px;
}

.date-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.date-month {
    font-weight: bold;
    color: #333;
}

.date-time {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.date-label-start {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--text-muted);
    margin-right: 10px;
    border-left: 2px solid var(--theme-teal);
    padding-left: 5px;
}

.date-label-end {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 0.7rem;
    font-weight: bold;
    color: var(--text-muted);
    margin-right: 10px;
    border-left: 2px solid var(--theme-pink);
    padding-left: 5px;
}


/* --- CIRCULAR PROGRESS BAR --- */
.progress-circle-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px auto;
}

.progress-circle-svg {
    transform: rotate(-90deg); /* Start from top */
    width: 100%;
    height: 100%;
}

.circle-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 10; /* Thickness of gray circle */
}

.circle-progress {
    fill: none;
    stroke: var(--theme-pink);
    stroke-width: 10; /* Thickness of pink progress */
    stroke-linecap: round;
    /* Circumference of circle with r=90 is approx 565.48 */
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48; /* Start empty */
    transition: stroke-dashoffset 1s ease-in-out;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-percent {
    font-size: 2.5rem;
    font-weight: 300;
    color: #333;
    line-height: 1;
}

.progress-label {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Raised Amount Styling */
.raised-label {
    font-weight: bold;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.raised-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--theme-teal);
    line-height: 1.1;
}

.goal-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Social Icons */
.social-icon-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    margin: 0 5px;
    text-decoration: none;
    font-size: 1.2rem;
}

.btn-fb {
    background-color: #3b5998;
}

.btn-x {
    background-color: #000;
}

.btn-email {
    background-color: #888;
}

.btn-apps {
    background-color: var(--theme-teal);
}


@media (max-width: 992px) {
    .nav-item {
        margin-bottom: 10px !important;
    }
}