/* Footer Enhancements */
footer {
    background-color: #b86614;
    color: var(--light);
    position: relative;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--gradient-primary);
}

/* Subtle pint glass background decoration */
footer::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='rgba(255,255,255,0.03)' d='M96 208v288c0 8.8 7.2 16 16 16h144v-64h64v64h144c8.8 0 16-7.2 16-16V208L256 48 96 208z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    opacity: 0.1;
    transform: rotate(-15deg);
}

footer .container {
    position: relative;
    z-index: 1;
}

/* Standardized heading style */
footer h5 {
    color: #fdc500 !important; /* Use direct hex to avoid variable issues */
    margin-bottom: 1.2rem;
    font-weight: 700 !important; /* Force bold */
    font-size: 1rem;
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-top: 0;
    letter-spacing: 0.5px;
}

footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: #fdc500; /* Use direct hex */
    border-radius: 1.5px;
}

/* Special styling for section title */
.footer-section-title {
    position: relative;
    color: #fdc500 !important;
    font-weight: 700 !important;
}

/* Standardized paragraph text */
footer p {
    font-size: 0.85rem;
    opacity: 0.9;
    line-height: 1.5;
    margin-bottom: 1rem;
}

footer a {
    color: var(--light);
    transition: all 0.3s ease;
    text-decoration: none;
}

footer a:hover {
    color: #fdc500; /* Use direct hex */
}

/* Link styling */
.footer-links li {
    margin-bottom: 0.5rem;
}

footer ul li a {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

footer ul li a:hover {
    transform: translateX(3px);
}

.footer-tagline {
    font-style: italic;
    font-weight: 600 !important;
    color: #fdc500 !important; /* Use direct hex */
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.footer-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer-lottie-container {
    width: 60px;
    height: 60px;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Special styling for the logo heading */
.footer-logo-container h5 {
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 1.5rem;
    font-weight: 700 !important;
    color: #fdc500 !important;
}

.footer-logo-container h5::after {
    display: none;
}

/* Social icons - repositioned */
.social-icons {
    display: flex;
    gap: 0.8rem;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background-color: #fdc500; /* Use direct hex */
    color: var(--dark);
    transform: translateY(-3px);
}

/* Portal button styling */
.portal-buttons {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.portal-buttons .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* App store buttons */
.app-store-button {
    display: block;
    transition: all 0.3s ease;
    max-width: 160px;
}

.app-store-button img {
    height: 40px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.app-store-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Footer bottom */
.footer-bottom {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p, 
.footer-bottom a {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.7); /* Light color for links */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.footer-legal-links a:hover {
    color: #FFFFFF; /* White on hover */
    text-decoration: underline;
}

/* Adjust spacing if needed for the pipe separator */
.footer-legal-links a:not(:last-child) {
    margin-right: 0.25rem; 
}

.footer-legal-links span.separator {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    color: rgba(255, 255, 255, 0.5); /* Color for the pipe if it were a span */
}

/* Ensure footer has dark background if not already set by parent styles */
footer.py-5 {
    /* If your footer doesn't inherit a dark background from a parent, 
       you might want to set one, e.g., background-color: #212529; 
       However, your existing screenshots suggest it's already on a dark/gradient bg. */
}

/* Responsive design adjustments */
@media (min-width: 1200px) {
    footer .row > div {
        padding-right: 2rem;
    }
    
    /* Larger text sizes for desktop only */
    footer h5 {
        font-size: 1.15rem;
        color: #fdc500 !important;
    }
    
    footer p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    footer ul li a {
        font-size: 0.95rem;
    }
    
    .footer-tagline {
        font-size: 1rem;
        color: #fdc500 !important;
    }
    
    .portal-buttons .btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .footer-bottom p, 
    .footer-bottom a {
        font-size: 0.85rem;
    }
}

/* Specific adjustments for large screens that aren't quite extra large */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Slightly reduced padding to prevent squishing */
    footer .row > div {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    /* Slightly smaller text to fit better */
    footer h5 {
        font-size: 1.05rem;
        color: #fdc500 !important;
    }
    
    footer p {
        font-size: 0.85rem;
        margin-bottom: 0.7rem;
        line-height: 1.5;
    }
    
    footer ul li a {
        font-size: 0.85rem;
        padding: 0.2rem 0;
    }
    
    .footer-tagline {
        font-size: 0.9rem;
        margin-bottom: 0.7rem;
    }
    
    /* Make columns slightly more proportional */
    footer .row .col-lg-3:first-child {
        flex: 0 0 auto;
        width: 28%;
    }
    
    footer .row .col-lg-2 {
        flex: 0 0 auto;
        width: 18%;
    }
    
    footer .row .col-lg-4 {
        flex: 0 0 auto;
        width: 31%;
    }
    
    footer .row .col-lg-3:last-child {
        flex: 0 0 auto;
        width: 23%;
    }
    
    /* Compact the portal buttons */
    .portal-buttons .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .portal-buttons {
        margin-bottom: 1rem;
    }
    
    /* Slightly smaller footer bottom text */
    .footer-bottom {
        margin-top: 2rem;
        padding-top: 1.2rem;
    }
    
    .footer-bottom p, 
    .footer-bottom a {
        font-size: 0.8rem;
    }
    
    /* Adjustments for app store buttons */
    .app-store-button img {
        height: 36px;
    }
}

/* Tablet-specific optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
    footer {
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
    
    footer h5::after {
        left: 0;
        width: 35px;
    }
    
    footer p {
        margin-bottom: 0.8rem;
    }
    
    /* Optimized 2-column layout for tablet */
    footer .row .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
        margin-bottom: 2rem;
    }

    /* Remove offset on the download app section */
    footer .row .offset-md-3 {
        margin-left: 0;
    }
    
    /* Move Quick Links to the right */
    footer .quick-links-column {
        padding-left: 2.5rem;
    }
    
    /* Ensure even heights for partner/ambassador sections */
    footer .col-lg-4 .row {
        display: flex;
        flex-wrap: wrap;
    }
    
    footer .col-lg-4 .row > div {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 2rem;
    }
    
    /* Ensure buttons have even spacing */
    .portal-buttons {
        margin-bottom: 0;
    }
    
    .portal-buttons .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    /* Adjust app store buttons for tablet */
    .app-buttons {
        display: flex;
        flex-direction: row !important;
        justify-content: flex-start;
        gap: 1rem;
    }
    
    .app-store-button {
        margin-bottom: 0 !important;
    }
    
    .app-store-button img {
        height: 36px;
    }
    
    /* Bottom section spacing */
    .footer-bottom {
        margin-top: 1rem;
        padding-top: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    footer {
        padding-top: 2.5rem;
        padding-bottom: 1.5rem;
        text-align: center;
    }
    
    footer h5 {
        display: inline-block;
        color: #fdc500 !important;
        font-weight: 700 !important;
    }
    
    footer h5::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .portal-buttons {
        justify-content: center;
    }
    
    .footer-bottom {
        text-align: center;
        margin-top: 1.5rem;
    }
    
    .footer-bottom .text-md-end {
        text-align: center !important;
        margin-top: 0.5rem;
    }
    
    .footer-logo-container {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    footer {
        padding: 2rem 0 1rem;
    }
    
    footer h5 {
        color: #fdc500 !important;
        font-weight: 700 !important;
    }
    
    .footer-bottom {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    .app-store-button {
        margin: 0 auto;
    }
}