/**
 * ============================================================================
 * footer.css - Footer Styles (FULL WIDTH BACKGROUND, 1200PX CONTENT)
 * ============================================================================
 * File Location: /www/wwwroot/payorget.com/app/Modules/Frontend/Footer/Assets/css/footer.css
 * Purpose: Full browser width background with 1200px content area
 * Updated: Hidden on mobile devices (below 768px)
 * ============================================================================
 */

/* Main Footer - Full Browser Width Background */
.main-footer{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-top:0;padding:60px 0 30px;clear:both;display:block}

/* Footer Container - 1200px content area */
.footer-container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Footer Main Text */
.footer-main-text{text-align:center;margin-bottom:40px;line-height:1.6;font-size:22px}

/* Footer Columns Grid */
.footer-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:50px}

/* Column Headers */
.footer-column h4{font-size:18px;font-weight:600;margin:0 0 20px 0;text-transform:uppercase;letter-spacing:1.5px;line-height:1.4}

/* Column Lists */
.footer-column ul{list-style:none;padding:0;margin:0}
.footer-column li{margin-bottom:12px;line-height:1.4}

/* Footer Links */
.footer-column a.footer-link,.footer-column span.footer-link{text-decoration:none;transition:color 0.3s ease;font-size:13px;display:inline-block;position:relative}
.footer-column a.footer-link{cursor:pointer}
.footer-column span.footer-link-disabled{cursor:default;opacity:1}
.footer-column a.footer-link:focus,.footer-column a.footer-link:active{outline:none;text-decoration:none}

/* Bottom Bar - Full Browser Width Background */
.footer-bottom-bar{width:100%;border-top:1px solid rgba(255,255,255,0.1);margin-top:50px;padding-top:30px}
.footer-bottom-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}

/* Social Links Section */
.footer-social-section{display:flex;align-items:center;gap:20px}
.footer-social-title{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin:0}
.footer-social-cards{display:flex;align-items:center;gap:15px}

/* Social Cards */
.social-card{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.2);border-radius:8px;transition:all 0.3s ease;text-decoration:none;position:relative}
a.social-card{cursor:pointer}
span.social-card-disabled{cursor:default;opacity:0.7}
.social-card:hover{transform:translateY(-2px);background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);box-shadow:0 4px 12px rgba(0,0,0,0.2)}
.social-card i{font-size:18px;color:#9ca3af;transition:color 0.3s ease}
.social-card:hover i{color:#60a5fa}

/* Platform Colors */
.social-card[data-platform="facebook"]:hover i{color:#3b5998}
.social-card[data-platform="twitter"]:hover i{color:#1da1f2}
.social-card[data-platform="instagram"]:hover i{color:#e1306c}
.social-card[data-platform="linkedin"]:hover i{color:#0077b5}
.social-card[data-platform="youtube"]:hover i{color:#ff0000}
.social-card[data-platform="github"]:hover i{color:#6e7681}

/* Copyright */
.footer-copyright{font-size:12px;opacity:0.9;margin:0}
.copyright-text{margin:0;padding:0}
.main-footer a{text-decoration:none!important}

/* Responsive - Tablet 991px */
@media(max-width:991px){
.footer-columns{grid-template-columns:repeat(4,1fr);gap:25px}
.footer-column h4{font-size:15px;letter-spacing:1px}
.main-footer .footer-container .footer-main-text{font-size:18px!important}
.footer-column a.footer-link,.footer-column span.footer-link{font-size:12px}
.footer-column li{margin-bottom:10px}
}

/* HIDE FOOTER ON MOBILE DEVICES - Below 768px */
@media(max-width:767px){
.main-footer{display:none!important;visibility:hidden!important}
}

/* For tablets that should still show footer (768px and above) */
@media(min-width:768px) and (max-width:991px){
.main-footer{display:block!important;visibility:visible!important}
.footer-columns{grid-template-columns:repeat(4,1fr);gap:20px}
.footer-column h4{font-size:13px;margin-bottom:15px}
.main-footer .footer-container .footer-main-text{font-size:16px!important}
.footer-column a.footer-link,.footer-column span.footer-link{font-size:11px}
.footer-bottom-container{flex-direction:column;gap:20px;text-align:center}
.footer-social-section{flex-direction:column;gap:15px}
}