/* ================= FOOTER RESPONSIVE STYLES ================= */

/* ================= TABLET FOOTER RESPONSIVE STYLES (768px - 1199px) ================= */
/* 
 * TABLET FOOTER SYSTEM ARCHITECTURE:
 * 
 * DESKTOP & MOBILE: Use .footer--default (existing footer structure)
 * TABLET ONLY: Use .footer--tablet (new optimized structure for tablet layout)
 * 
 * TABLET LAYOUT STRATEGY:
 * - Left Side: A1 Steels branding + organized links in columns
 * - Right Side: Contact info + social media + address  
 * - Bottom: Copyright and credits section
 * 
 * CONTAINER SYSTEM (inherits from responsiveHomepage.css):
 * - iPad Mini (768-820px): calc(100% - 60px) = 30px padding each side
 * - Standard tablets (821-1024px): calc(100% - 80px) = 40px padding each side  
 * - Large tablets (1025-1199px): calc(100% - 100px) = 50px padding each side
 */

@media (min-width: 768px) and (max-width: 1199px) {
  
  /* ================= TABLET FOOTER VISIBILITY CONTROL ================= */
  
  /* Hide default footer on tablets */
  .footer--default {
    display: none !important;
  }
  
  /* Show tablet-specific footer only on tablets */
  .footer--tablet {
    display: block !important;
    background: #1E1E1E !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* ================= TABLET FOOTER TYPOGRAPHY SYSTEM ================= */
  /* Inherits from responsiveHomepage.css global variables and extends them */
  
  :root {
    /* Footer-specific tablet typography variables */
    --footer-tablet-title: clamp(1rem, 1.8vw, 1.3rem);           /* Column titles */
    --footer-tablet-link: clamp(0.8rem, 1.4vw, 1rem);           /* Footer links */
    --footer-tablet-contact: clamp(1rem, 1.8vw, 1.3rem);        /* Contact info */
    --footer-tablet-desc: clamp(0.8rem, 1.4vw, 1rem);           /* Description text */
    --footer-tablet-bottom: clamp(0.75rem, 1.2vw, 0.9rem);      /* Bottom section */
    
    /* Footer-specific tablet spacing variables */
    --footer-tablet-section-padding: clamp(2.5rem, 4vw, 3.5rem); /* Main section padding */
    --footer-tablet-element-gap: clamp(1rem, 2vw, 1.5rem);       /* Gap between elements */
    --footer-tablet-column-gap: clamp(1.5rem, 3vw, 2.5rem);     /* Gap between columns */
    --footer-tablet-bottom-padding: clamp(1rem, 2vw, 1.5rem);   /* Bottom section padding */
    
    /* Footer-specific tablet container system */
    --footer-tablet-container-width: calc(100% - 40px);          /* 20px padding each side for smaller tablets */
    --footer-tablet-container-max-width: 1000px;                 /* Optimal max-width for tablets */
  }
  
  /* ================= TABLET FOOTER MAIN CONTAINER ================= */
  
  .footer-tablet__container {
    width: var(--footer-tablet-container-width) !important;
    max-width: var(--footer-tablet-container-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .footer-tablet__main {
    display: flex !important;
    flex-direction: column !important; /* Changed to column layout */
    align-items: flex-start !important;
    gap: clamp(2.5rem, 4vw, 4rem) !important; /* Gap between top brand section and bottom links section */
    padding: var(--footer-tablet-section-padding) 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* ================= TABLET FOOTER LEFT SIDE (now top section) ================= */
  
  .footer-tablet__left {
    width: 100% !important; /* Take full width for brand section */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important; /* No gap, individual margins handle spacing */
  }
  
  /* Brand Section - Top row spanning full width */
  .footer-tablet__brand {
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .footer-tablet__logo {
    width: clamp(180px, 20vw, 240px) !important; /* Restore larger logo */
    height: auto !important;
    margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem) !important;
  }
  
  .footer-tablet__divider-svg {
    width: clamp(110px, 12vw, 150px) !important; /* 40% smaller - much more subtle */
    height: auto !important;
    margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
  }
  
  .footer-tablet__desc {
    font-size: clamp(0.8rem, 1.4vw, 1rem) !important; /* Slightly larger text for readability */
    line-height: 1.5 !important;
    color: #fff !important;
    margin: 0 !important;
    max-width: clamp(600px, 65vw, 750px) !important; /* Give description much more width */
  }
  
  /* Bottom Section - Contains both links and contact info horizontally */
  .footer-tablet__bottom-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(3rem, 5vw, 5rem) !important;
  }
  
  /* Links Section - Now part of bottom content */
  .footer-tablet__links {
    flex: 1 1 60% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: clamp(2rem, 4vw, 3.5rem) !important; /* Larger gaps between columns */
    margin-top: 0 !important; /* Remove margin, gap handles spacing */
  }
  
  .footer-tablet__col {
    flex: 0 1 auto !important; /* Don't grow, allow shrink, auto width */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.4rem, 0.8vw, 0.6rem) !important; /* Tighter spacing within columns */
    min-width: clamp(120px, 15vw, 160px) !important; /* Minimum width for columns */
  }
  
  .footer-tablet__col-title {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem) !important; /* Smaller column titles */
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Prevent title wrapping */
  }
  
  .footer-tablet__link {
    font-size: clamp(0.75rem, 1.3vw, 0.9rem) !important; /* Smaller link text */
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    padding: clamp(1px, 0.3vw, 3px) 0 !important; /* Tighter padding */
    transition: color 0.3s ease !important;
    display: block !important;
    white-space: nowrap !important; /* Prevent link wrapping */
  }
  
  .footer-tablet__link:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
  }
  
  .footer-tablet__link--about-us {
    font-weight: 600 !important;
  }
  
  /* ================= TABLET FOOTER RIGHT SIDE (now part of bottom content) ================= */
  
  .footer-tablet__right {
    flex: 1 1 40% !important; /* Takes up 40% of the bottom content width */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(1.2rem, 2.5vw, 2rem) !important; /* Better spacing between right sections */
    padding-left: 0 !important; /* Remove left padding, gap handles separation */
    max-width: clamp(280px, 35vw, 350px) !important; /* Constrain right section width */
  }
  
  /* Contact Info Section */
  .footer-tablet__contact-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.4rem, 1vw, 0.6rem) !important;
  }
  
  .footer-tablet__phone,
  .footer-tablet__email {
    width: 100% !important;
  }
  
  .footer-tablet__contact-link {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem) !important; /* Consistent with title size */
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
    display: block !important;
  }
  
  .footer-tablet__contact-link:hover {
    color: #d42836 !important;
    text-decoration: underline !important;
  }
  
  /* Social Media Section */
  .footer-tablet__social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.8rem, 1.8vw, 1.2rem) !important; /* Slightly larger gaps */
    margin: 0 !important; /* Remove margin, gap handles spacing */
  }
  
  .footer-tablet__social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(25px, 3.5vw, 30px) !important;
    height: clamp(25px, 3.5vw, 30px) !important;
    transition: transform 0.3s ease !important;
    border-radius: 50% !important;
  }
  
  .footer-tablet__social-link:hover {
    transform: scale(1.1) !important;
  }
  
  .footer-tablet__social-link svg {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Address Section */
  .footer-tablet__address {
    width: 100% !important;
  }
  
  .footer-tablet__address-text {
    font-size: clamp(0.75rem, 1.3vw, 0.9rem) !important; /* Consistent with description */
    color: #fff !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }
  
  /* ================= TABLET FOOTER BOTTOM SECTION ================= */
  
  .footer-tablet__bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--footer-tablet-bottom-padding) 0 !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
  }
  
  .footer-tablet__copyright {
    font-size: var(--footer-tablet-bottom) !important;
    color: #fff !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }
  
  .footer-tablet__credit {
    font-size: var(--footer-tablet-bottom) !important;
    color: #fff !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: right !important;
  }
  
  .footer-tablet__credit--bold {
    font-weight: 700 !important;
    color: #fff !important;
  }
}

/* ================= TABLET FOOTER BREAKPOINT OPTIMIZATIONS ================= */

/* iPad Mini and Small Tablets (768px - 820px) */
@media (min-width: 768px) and (max-width: 820px) {
  :root {
    --footer-tablet-container-width: calc(100% - 40px) !important; /* 20px padding each side for smaller tablets */
    --footer-tablet-section-padding: clamp(2rem, 4vw, 3rem) !important;
    --footer-tablet-column-gap: clamp(1.2rem, 2.5vw, 2rem) !important;
  }
  
  .footer-tablet__logo {
    width: clamp(160px, 22vw, 200px) !important;
  }
  
  .footer-tablet__divider-svg {
    width: clamp(100px, 13vw, 130px) !important; /* 40% smaller for iPad Mini */
  }
  
  .footer-tablet__bottom-content {
    gap: clamp(2rem, 4vw, 3rem) !important;
  }
}

/* Standard Tablets (821px - 1024px) */
@media (min-width: 821px) and (max-width: 1024px) {
  :root {
    --footer-tablet-container-width: calc(100% - 40px) !important; /* 20px padding each side for smaller tablets */
  }
  
  .footer-tablet__logo {
    width: clamp(180px, 20vw, 220px) !important;
  }
  
  .footer-tablet__divider-svg {
    width: clamp(110px, 12vw, 145px) !important; /* 40% smaller for standard tablets */
  }
  
  .footer-tablet__bottom-content {
    gap: clamp(2.5rem, 4.5vw, 4rem) !important;
  }
}

/* Large Tablets (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
  :root {
    --footer-tablet-container-width: calc(100% - 60px) !important; /* 30px padding each side for iPad Pro */
    --footer-tablet-section-padding: clamp(3rem, 4vw, 4rem) !important;
    --footer-tablet-column-gap: clamp(2rem, 3vw, 3rem) !important;
  }
  
  .footer-tablet__logo {
    width: clamp(200px, 18vw, 240px) !important;
  }
  
  .footer-tablet__divider-svg {
    width: clamp(120px, 11vw, 155px) !important; /* 40% smaller for large tablets */
  }
  
  .footer-tablet__bottom-content {
    gap: clamp(3rem, 5vw, 5rem) !important;
  }
}

/* ================= HIDE TABLET FOOTER ON NON-TABLET DEVICES ================= */

/* Hide tablet footer on desktop */
@media (min-width: 1200px) {
  .footer--tablet {
    display: none !important;
  }
  
  .footer--default {
    display: block !important;
  }
}

/* Hide tablet footer on mobile */
@media (max-width: 767px) {
  .footer--tablet {
    display: none !important;
  }
  
  .footer--default {
    display: block !important;
  }
}

/* ================= TABLET FOOTER ACCESSIBILITY & INTERACTION ================= */

@media (min-width: 768px) and (max-width: 1199px) {
  
  /* Enhanced focus states for tablet touch interaction */
  .footer-tablet__link:focus,
  .footer-tablet__contact-link:focus,
  .footer-tablet__social-link:focus {
    outline: none !important;
  }
  
  /* Improved touch targets for tablet */
  .footer-tablet__link,
  .footer-tablet__contact-link {
    min-height: clamp(32px, 4vw, 44px) !important;
    display: flex !important;
    align-items: center !important;
    padding: clamp(4px, 1vw, 8px) 0 !important;
  }
  
  /* Smooth transitions for tablet interactions */
  .footer-tablet__main,
  .footer-tablet__left,
  .footer-tablet__right {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* ================= CRITICAL TABLET FOOTER LAYOUT ENFORCEMENT ================= */

@media (min-width: 768px) and (max-width: 1199px) {
  
  /* Ensure tablet footer layout is never broken */
  body .footer-tablet__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  body .footer-tablet__left {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  body .footer-tablet__bottom-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  
  body .footer-tablet__links {
    flex: 1 1 60% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  
  body .footer-tablet__right {
    flex: 1 1 40% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  body .footer-tablet__bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
  }
  
  /* Prevent horizontal overflow */
  body .footer--tablet {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  body .footer-tablet__container * {
    box-sizing: border-box !important;
  }
}

/* ================= END TABLET FOOTER RESPONSIVE STYLES ================= */

/* ================= MOBILE FOOTER RESPONSIVE STYLES (max-width: 767px) ================= */
/* 
 * MOBILE FOOTER SYSTEM ARCHITECTURE:
 * 
 * DESKTOP: Use .footer--default (existing footer structure)
 * TABLET (768px-1199px): Use .footer--tablet (optimized tablet structure) 
 * MOBILE (max-width: 767px): Use .footer--mobile (new optimized structure for mobile layout)
 * 
 * MOBILE LAYOUT STRATEGY:
 * - Top: A1 Steels branding (logo, divider, description)
 * - Middle: Horizontal alignment - About Us (left) | Contact & Address (right)
 * - Lower: Products & Services and Support sections (stacked)
 * - Bottom: Social media icons and copyright section
 * 
 * CONTAINER SYSTEM:
 * - Mobile: calc(100% - 40px) = 20px padding each side for optimal mobile spacing
 */

@media (max-width: 767px) {
  
  /* ================= MOBILE FOOTER VISIBILITY CONTROL ================= */
  
  /* Hide default footer on mobile */
  .footer--default {
    display: none !important;
  }
  
  /* Hide tablet footer on mobile */
  .footer--tablet {
    display: none !important;
  }
  
  /* Show mobile-specific footer only on mobile */
  .footer--mobile {
    display: block !important;
    background: #1E1E1E !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* ================= MOBILE FOOTER TYPOGRAPHY SYSTEM ================= */
  
  :root {
    /* Footer-specific mobile typography variables - reduced for better space utilization */
    --footer-mobile-title: clamp(0.75rem, 3.2vw, 0.9rem);       /* Column titles - reduced */
    --footer-mobile-link: clamp(0.7rem, 2.8vw, 0.85rem);        /* Footer links - reduced */
    --footer-mobile-contact: clamp(0.75rem, 3.2vw, 0.9rem);     /* Contact info - reduced */
    --footer-mobile-desc: clamp(0.7rem, 2.8vw, 0.85rem);        /* Description text - reduced */
    --footer-mobile-bottom: clamp(0.65rem, 2.5vw, 0.75rem);     /* Bottom section - reduced */
    
      /* Footer-specific mobile spacing variables */
  --footer-mobile-section-padding: clamp(2rem, 7vw, 3rem);     /* Increased main section padding for better separation */
  --footer-mobile-element-gap: clamp(1.2rem, 5vw, 1.8rem);     /* Gap between major sections - reduced */
  --footer-mobile-small-gap: clamp(0.6rem, 2.5vw, 0.9rem);    /* Gap within sections - reduced */
  --footer-mobile-bottom-padding: clamp(0.8rem, 3vw, 1.2rem);  /* Bottom section padding - reduced */
    
    /* Footer-specific mobile container system */
    --footer-mobile-container-width: calc(100% - 40px);          /* 20px padding each side */
    --footer-mobile-container-max-width: 100%;                   /* Full width for mobile */
  }
  
  /* ================= MOBILE FOOTER MAIN CONTAINER ================= */
  
  .footer-mobile__container {
    width: var(--footer-mobile-container-width) !important;
    max-width: var(--footer-mobile-container-max-width) !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .footer-mobile__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(3.2rem, 10vw, 4.5rem) !important; /* Maximum gap between major sections for clear distinction */
    padding: var(--footer-mobile-section-padding) 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  /* ================= MOBILE FOOTER BRAND SECTION ================= */
  
  .footer-mobile__brand {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  
  .footer-mobile__logo {
    width: clamp(140px, 40vw, 180px) !important;
    height: auto !important;
    margin-bottom: clamp(0.3rem, 1.5vw, 0.5rem) !important; /* Very tight spacing after logo */
  }
  
  .footer-mobile__divider-svg {
    width: clamp(80px, 25vw, 120px) !important;
    height: auto !important;
    margin-bottom: clamp(0.5rem, 2vw, 0.7rem) !important; /* Tighter spacing after divider */
  }
  
  .footer-mobile__desc {
    font-size: var(--footer-mobile-desc) !important;
    line-height: 1.4 !important; /* Tighter line height */
    color: #fff !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  
  /* ================= MOBILE FOOTER HORIZONTAL CONTENT SECTION ================= */
  /* This section aligns "About Us" with "Contact & Address" horizontally */
  
  .footer-mobile__content {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(1.5rem, 6vw, 2.5rem) !important;
  }
  
  /* Left Side - Contact and Address */
  .footer-mobile__left {
    flex: 1 1 55% !important; /* Contact info gets more space */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.6rem, 2.5vw, 0.9rem) !important; /* Decreased spacing within contact section */
  }
  
  /* Right Side - About Us */
  .footer-mobile__right {
    flex: 1 1 45% !important; /* About Us gets less space */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Right-align the About Us section */
  }
  
  .footer-mobile__right .footer-mobile__col {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Right-align About Us content */
    gap: clamp(0.02rem, 0.2vw, 0.05rem) !important; /* Minimal spacing for About Us links */
  }
  
  .footer-mobile__contact-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.15rem, 1vw, 0.25rem) !important; /* Very tight gap between phone and email */
  }
  
  .footer-mobile__phone,
  .footer-mobile__email {
    width: 100% !important;
  }
  
  .footer-mobile__contact-link {
    font-size: var(--footer-mobile-contact) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    line-height: 1.2 !important; /* Tighter line height for more space */
    transition: color 0.3s ease !important;
    display: block !important;
  }
  
  .footer-mobile__contact-link:hover {
    color: #d42836 !important;
    text-decoration: underline !important;
  }
  
  .footer-mobile__address {
    width: 100% !important;
    margin-top: 0 !important; /* Remove margin, gap in parent handles spacing */
  }
  
  .footer-mobile__address-text {
    font-size: clamp(0.65rem, 2.5vw, 0.8rem) !important; /* Reduced address text */
    color: #fff !important;
    line-height: 1.3 !important; /* Tighter line height */
    margin: 0 !important;
  }
  
  /* ================= MOBILE FOOTER COLUMN STYLES ================= */
  
  .footer-mobile__col-title {
    font-size: var(--footer-mobile-title) !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: clamp(0.08rem, 0.4vw, 0.15rem) !important; /* Minimal margin for title grouping */
    line-height: 1.2 !important;
  }
  
  /* Right-aligned column titles for About Us and Support */
  .footer-mobile__right .footer-mobile__col-title,
  .footer-mobile__other-links .footer-mobile__col:last-child .footer-mobile__col-title {
    text-align: right !important;
  }
  
  .footer-mobile__link {
    font-size: var(--footer-mobile-link) !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1 !important; /* Minimal line height */
    padding: 0 !important; /* No padding at all */
    transition: color 0.3s ease !important;
    display: block !important;
  }
  
  /* Right-aligned links for About Us and Support */
  .footer-mobile__right .footer-mobile__link,
  .footer-mobile__other-links .footer-mobile__col:last-child .footer-mobile__link {
    text-align: right !important;
  }
  
  .footer-mobile__link:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
  }
  
  .footer-mobile__link--about-us {
    font-weight: 600 !important;
  }
  
  /* ================= MOBILE FOOTER OTHER LINKS SECTION ================= */
  /* Products & Services (left) and Support (right) side by side */
  
  .footer-mobile__other-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important; /* Changed to row for horizontal alignment */
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(1.5rem, 6vw, 2.5rem) !important; /* Responsive gap between columns */
  }
  
  .footer-mobile__other-links .footer-mobile__col {
    flex: 1 1 45% !important; /* Each column takes roughly 45% width */
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.01rem, 0.15vw, 0.03rem) !important; /* Minimal spacing for Products & Support links */
    min-width: 0 !important; /* Prevent flex items from overflowing */
  }
  
  /* First column (Products & Services) - left aligned */
  .footer-mobile__other-links .footer-mobile__col:first-child {
    align-items: flex-start !important;
  }
  
  /* Second column (Support) - right aligned */
  .footer-mobile__other-links .footer-mobile__col:last-child {
    align-items: flex-end !important;
  }
  
  /* ================= MOBILE FOOTER SOCIAL MEDIA SECTION ================= */
  /* Social media icons positioned between contact and address in right column */
  
  .footer-mobile__social {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.8rem, 3vw, 1.2rem) !important; /* Tighter spacing for inline social icons */
  }
  
  .footer-mobile__social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(20px, 3vw, 25px) !important; /* Slightly smaller icons */
    height: clamp(20px, 3vw, 25px) !important;
    transition: transform 0.3s ease !important;
    border-radius: 50% !important;
  }
  
  .footer-mobile__social-link:hover {
    transform: scale(1.1) !important;
  }
  
  .footer-mobile__social-link svg {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* ================= MOBILE FOOTER BOTTOM SECTION ================= */
  
  .footer-mobile__bottom {
    display: flex !important;
    flex-direction: row !important; /* Changed to horizontal layout */
    align-items: center !important;
    justify-content: space-between !important; /* Copyright left, Credit right */
    padding: clamp(2rem, 7vw, 3rem) 0 !important; /* Maximum padding for clear separation from main content */
    gap: clamp(1rem, 4vw, 1.5rem) !important; /* Gap between copyright and credit */
  }
  
  .footer-mobile__copyright {
    font-size: var(--footer-mobile-bottom) !important;
    color: #fff !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: left !important; /* Align copyright to left */
    flex: 0 1 auto !important;
  }
  
  .footer-mobile__credit {
    font-size: var(--footer-mobile-bottom) !important;
    color: #fff !important;
    font-weight: 400 !important;
    margin: 0 !important;
    text-align: right !important; /* Align credit to right */
    flex: 0 1 auto !important;
  }
  
  .footer-mobile__credit--bold {
    font-weight: 700 !important;
    color: #fff !important;
  }
}

/* ================= MOBILE FOOTER BREAKPOINT OPTIMIZATIONS ================= */

/* Extra Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
  :root {
    --footer-mobile-container-width: calc(100% - 32px) !important; /* 16px padding each side for extra small screens */
    --footer-mobile-section-padding: clamp(1.5rem, 8vw, 2.5rem) !important;
    --footer-mobile-element-gap: clamp(1rem, 6vw, 1.5rem) !important;
  }
  
  .footer-mobile__content {
    gap: clamp(1rem, 5vw, 1.5rem) !important;
  }
  
  .footer-mobile__other-links {
    gap: clamp(1rem, 5vw, 1.5rem) !important; /* Tighter gap for small screens */
  }
  
  .footer-mobile__logo {
    width: clamp(120px, 45vw, 160px) !important;
  }
  
  .footer-mobile__divider-svg {
    width: clamp(70px, 30vw, 100px) !important;
  }
}

/* Small Mobile (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  .footer-mobile__logo {
    width: clamp(140px, 42vw, 170px) !important;
  }
  
  .footer-mobile__divider-svg {
    width: clamp(80px, 28vw, 110px) !important;
  }
  
  .footer-mobile__content {
    gap: clamp(1.2rem, 5.5vw, 2rem) !important;
  }
  
  .footer-mobile__other-links {
    gap: clamp(1.2rem, 5.5vw, 2rem) !important; /* Responsive gap for small mobile */
  }
}

/* Medium Mobile (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
  .footer-mobile__logo {
    width: clamp(150px, 38vw, 180px) !important;
  }
  
  .footer-mobile__divider-svg {
    width: clamp(90px, 25vw, 120px) !important;
  }
  
  .footer-mobile__content {
    gap: clamp(1.5rem, 6vw, 2.5rem) !important;
  }
  
  .footer-mobile__other-links {
    gap: clamp(1.5rem, 6vw, 2.5rem) !important; /* Optimal gap for medium mobile */
  }
}

/* ================= HIDE MOBILE FOOTER ON NON-MOBILE DEVICES ================= */

/* Hide mobile footer on tablet and desktop */
@media (min-width: 768px) {
  .footer--mobile {
    display: none !important;
  }
}

/* ================= MOBILE FOOTER ACCESSIBILITY & INTERACTION ================= */

@media (max-width: 767px) {
  
  /* Enhanced focus states for mobile touch interaction */
  .footer-mobile__link:focus,
  .footer-mobile__contact-link:focus,
  .footer-mobile__social-link:focus {
    outline: none !important;
  }
  
  /* Improved touch targets for mobile */
  .footer-mobile__link,
  .footer-mobile__contact-link {
    min-height: clamp(36px, 10vw, 44px) !important; /* Reduced to match smaller text */
    display: flex !important;
    align-items: center !important;
    padding: clamp(4px, 1.5vw, 8px) 0 !important; /* Reduced padding */
  }
  
  /* Smooth transitions for mobile interactions */
  .footer-mobile__main,
  .footer-mobile__content,
  .footer-mobile__other-links {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* ================= CRITICAL MOBILE FOOTER LAYOUT ENFORCEMENT ================= */

@media (max-width: 767px) {
  
  /* Ensure mobile footer layout is never broken */
  body .footer-mobile__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  body .footer-mobile__content {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  
  body .footer-mobile__left {
    flex: 1 1 55% !important; /* Contact info on left gets more space */
    display: flex !important;
    flex-direction: column !important;
  }
  
  body .footer-mobile__right {
    flex: 1 1 45% !important; /* About Us on right gets less space */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* Enforce right alignment */
  }
  
  body .footer-mobile__other-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important; /* Ensure horizontal layout is enforced */
    align-items: flex-start !important;
    justify-content: space-between !important;
  }
  
  body .footer-mobile__bottom {
    display: flex !important;
    flex-direction: row !important; /* Ensure horizontal layout is enforced */
    align-items: center !important;
    justify-content: space-between !important; /* Copyright left, Credit right */
  }
  
  /* Prevent horizontal overflow */
  body .footer--mobile {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  body .footer-mobile__container * {
    box-sizing: border-box !important;
  }
}

/* ================= END MOBILE FOOTER RESPONSIVE STYLES ================= */