/* ===========================================================
   INCLUDE_HOME_FOOTER.CSS
   FILE SOURCE:
   static/css/pages/include_home_footer.css

   PURPOSE:
   - Global site footer used by skeleton_base.html.
   - Matches the new homepage/category/product/account visual system.
   - Dark agarwood background.
   - Ivory text.
   - Warm gold accents.
   - Responsive card layout.

   IMPORTANT LAYOUT:
   - Mobile/tablet:
       Footer cards stack normally.
       Floating support buttons are fixed, so footer gets extra
       bottom padding to avoid covering copyright/version text.

   - Desktop 960px+:
       Row 1: Company | Location | Contact
       Row 2: Payment & Delivery full-width strip
       Row 3: Support & Policies full-width strip

   DESKTOP POLICY STRIP:
       [ Hỗ trợ và chính sách ] [ all policy links group ]

   DEPENDS ON:
   static/css/pages/skeleton_base.css

   SKELETON VARIABLES USED:
   --page-max-width
   --color-primary
   --color-primary-soft
   --color-accent
   --color-accent-dark
   --color-bg
   --color-card
   --color-border
   =========================================================== */


/* ===========================================================
   01. FOOTER SHELL
   =========================================================== */

.home-footer {
  --footer-container: var(--page-max-width, 1180px);

  --footer-pad-x: 16px;
  --footer-pad-y: 46px;
  --footer-card-radius: 20px;

  --footer-bg-dark: #17100b;
  --footer-bg-main: var(--color-primary, #2B2118);
  --footer-bg-soft: rgba(255, 250, 240, 0.075);

  --footer-line: rgba(232, 222, 208, 0.18);
  --footer-line-strong: rgba(232, 222, 208, 0.28);

  --footer-text: #fffaf0;
  --footer-muted: rgba(255, 250, 240, 0.76);
  --footer-soft: rgba(255, 250, 240, 0.62);
  --footer-gold: var(--color-accent, #B9822F);

  width: 100%;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(185, 130, 47, 0.16),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      var(--footer-bg-main) 0%,
      var(--footer-bg-dark) 100%
    );

  color: var(--footer-text);
}

.home-footer,
.home-footer * {
  box-sizing: border-box;
}

.home-footer a {
  color: inherit;
}

.home-footer-inner {
  width: min(calc(100% - (var(--footer-pad-x) * 2)), var(--footer-container));

  margin: 0 auto;
  padding-top: var(--footer-pad-y);
  padding-bottom: 22px;
}


/* ===========================================================
   02. TOP BRAND AREA
   =========================================================== */

.home-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;

  margin-bottom: 22px;
}

.home-footer-brand-block {
  display: flex;
  align-items: center;
  gap: 16px;

  padding: 18px;

  border: 1px solid var(--footer-line);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 250, 240, 0.09),
      rgba(255, 250, 240, 0.035)
    );

  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.home-footer-logo-link {
  width: 70px;
  height: 70px;

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(185, 130, 47, 0.42);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.08);

  overflow: hidden;
  text-decoration: none;
}

.home-footer-logo {
  width: 56px;
  height: 56px;

  display: block;

  object-fit: contain;
}

.home-footer-brand-text {
  min-width: 0;
}

.home-footer-kicker {
  margin: 0 0 10px;

  color: var(--footer-gold);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-footer-brand-text h2 {
  margin: 0;

  color: var(--footer-text);
  font-size: clamp(1.28rem, 1rem + 1vw, 2rem);
  font-weight: 900;
  line-height: 1.16;
}

.home-footer-brand-text p:last-child {
  max-width: 760px;

  margin: 10px 0 0;

  color: var(--footer-muted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
}


/* ===========================================================
   03. QUICK CONTACT BUTTONS
   =========================================================== */

.home-footer-quick-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.home-footer-quick-contact a {
  min-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 9px 15px;

  border: 1px solid rgba(185, 130, 47, 0.44);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.07);

  color: var(--footer-text);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.home-footer-quick-contact a:hover {
  transform: translateY(-1px);

  border-color: rgba(255, 250, 240, 0.6);
  background: rgba(185, 130, 47, 0.2);

  color: #fff;
}

.home-footer-quick-contact i {
  color: var(--footer-gold);
}


/* ===========================================================
   04. FOOTER CARD GRID
   =========================================================== */

.home-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.home-footer-card {
  padding: 17px;

  border: 1px solid var(--footer-line);
  border-radius: var(--footer-card-radius);
  background: var(--footer-bg-soft);

  color: var(--footer-text);
}

.home-footer-card h3 {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 15px;

  color: var(--footer-text);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.22;
}

.home-footer-card h3 i {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 999px;
  background: rgba(185, 130, 47, 0.18);

  color: var(--footer-gold);
  font-size: 0.84rem;
}


/* ===========================================================
   05. COMPANY / CERTIFICATION
   =========================================================== */

.home-footer-cert-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.home-footer-cert-link {
  width: 118px;

  flex: 0 0 auto;

  display: block;

  padding: 8px;

  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.home-footer-cert-link img {
  width: 100%;
  height: auto;

  display: block;
}

.home-footer-business-info {
  min-width: 0;

  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.home-footer-business-info p {
  margin: 0;

  color: var(--footer-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.home-footer-business-info strong {
  color: var(--footer-text);
  font-weight: 900;
}

.home-footer-business-info span {
  color: var(--footer-muted);
}


/* ===========================================================
   06. LOCATION / CONTACT LISTS
   =========================================================== */

.home-footer-info-list,
.home-footer-contact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.home-footer-info-item,
.home-footer-contact-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  color: var(--footer-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  text-decoration: none;
}

.home-footer-info-item > i,
.home-footer-contact-list a > i {
  width: 22px;
  min-width: 22px;

  margin-top: 2px;

  color: var(--footer-gold);
  font-size: 0.88rem;
  text-align: center;
}

.home-footer-info-item strong,
.home-footer-contact-list strong {
  display: block;

  color: var(--footer-text);
  font-weight: 900;
}

.home-footer-info-item span,
.home-footer-contact-list span {
  color: var(--footer-muted);
}

.home-footer-contact-list a:hover span {
  color: #fff;
}


/* ===========================================================
   07. SOCIAL ICONS
   =========================================================== */

.home-footer-social-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 16px;
}

.home-footer-social-row a {
  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--footer-line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.08);

  overflow: hidden;

  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.home-footer-social-row a:hover {
  transform: translateY(-1px);

  border-color: rgba(185, 130, 47, 0.56);
  background: rgba(255, 250, 240, 0.16);
}

.home-footer-social-row img {
  width: 24px;
  height: 24px;

  display: block;

  object-fit: contain;
}


/* ===========================================================
   08. PAYMENT / DELIVERY LOGOS
   Mobile/tablet default card style.
   Desktop becomes a horizontal strip later.
   =========================================================== */

.home-footer-logo-section + .home-footer-logo-section {
  margin-top: 16px;
  padding-top: 14px;

  border-top: 1px solid var(--footer-line);
}

.home-footer-logo-section h4 {
  margin: 0 0 10px;

  color: var(--footer-text);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.2;
}

.home-footer-logo-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.home-footer-logo-grid img {
  width: 42px;
  height: 42px;

  display: block;

  padding: 6px;

  border: 1px solid var(--footer-line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.9);

  object-fit: contain;
}


/* ===========================================================
   09. FOOTER LINKS
   Mobile/tablet default card style.
   Desktop policy card becomes a horizontal strip later.
   =========================================================== */

.home-footer-link-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;

  margin-top: 14px;
}

.home-footer-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 0;

  border-bottom: 1px solid rgba(232, 222, 208, 0.12);

  color: var(--footer-muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;

  transition:
    color 0.18s ease,
    padding-left 0.18s ease;
}

.home-footer-link-list a::after {
  content: "→";

  color: rgba(185, 130, 47, 0.88);
  font-weight: 900;
}

.home-footer-link-list a:hover {
  padding-left: 4px;

  color: #fff;
}


/* ===========================================================
   10. FOOTER BOTTOM
   =========================================================== */

.home-footer-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;

  margin-top: 22px;
  padding-top: 18px;

  border-top: 1px solid var(--footer-line-strong);

  text-align: center;
}

.home-footer-bottom p {
  margin: 0;

  color: var(--footer-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.home-footer-version {
  color: var(--footer-gold) !important;
  font-weight: 900 !important;
}


/* ===========================================================
   11. TINY PHONE
   0px - 320px
   =========================================================== */

@media (max-width: 320px) {
  .home-footer {
    --footer-pad-x: 9px;
    --footer-pad-y: 36px;
  }

  .home-footer-inner {
    padding-bottom: calc(6.9rem + env(safe-area-inset-bottom));
  }

  .home-footer-brand-block {
    align-items: flex-start;
    padding: 14px;
  }

  .home-footer-logo-link {
    width: 56px;
    height: 56px;
  }

  .home-footer-logo {
    width: 44px;
    height: 44px;
  }

  .home-footer-brand-text h2 {
    font-size: 1.08rem;
  }

  .home-footer-brand-text p:last-child {
    font-size: 0.78rem;
  }

  .home-footer-quick-contact {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-footer-quick-contact a {
    width: 100%;
  }

  .home-footer-card {
    padding: 14px;
  }

  .home-footer-cert-row {
    flex-direction: column;
  }

  .home-footer-cert-link {
    width: 112px;
  }
}


/* ===========================================================
   12. MOBILE
   321px - 640px
   =========================================================== */

@media (min-width: 321px) and (max-width: 640px) {
  .home-footer {
    --footer-pad-x: 12px;
    --footer-pad-y: 40px;
  }

  .home-footer-inner {
    padding-bottom: calc(7.4rem + env(safe-area-inset-bottom));
  }

  .home-footer-brand-block {
    align-items: flex-start;
  }

  .home-footer-quick-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-footer-quick-contact a {
    padding-left: 10px;
    padding-right: 10px;
  }

  .home-footer-quick-contact span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ===========================================================
   13. LARGE MOBILE / TABLET MOBILE
   641px - 767px
   Floating support buttons still exist, so keep safe space.
   =========================================================== */

@media (min-width: 641px) and (max-width: 767px) {
  .home-footer {
    --footer-pad-x: 18px;
    --footer-pad-y: 44px;
  }

  .home-footer-inner {
    padding-bottom: calc(7.4rem + env(safe-area-inset-bottom));
  }

  .home-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-footer-payment-card,
  .home-footer-policy-card {
    grid-column: 1 / -1;
  }
}


/* ===========================================================
   14. TABLET HEADER RANGE
   768px - 959px
   No mobile floating split needed as aggressively, but still
   keep a little extra breathing room for scroll button.
   =========================================================== */

@media (min-width: 768px) and (max-width: 959px) {
  .home-footer {
    --footer-pad-x: 22px;
    --footer-pad-y: 44px;
  }

  .home-footer-inner {
    padding-bottom: 32px;
  }

  .home-footer-top {
    grid-template-columns: 1fr;
  }

  .home-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-footer-payment-card,
  .home-footer-policy-card {
    grid-column: 1 / -1;
  }
}


/* ===========================================================
   15. DESKTOP BASE
   960px+

   DESKTOP RESULT:
   Row 1:
   Company | Location | Contact

   Row 2:
   Payment & Delivery full-width horizontal strip

   Row 3:
   Support & Policies full-width horizontal strip
   =========================================================== */

@media (min-width: 960px) {
  .home-footer {
    --footer-pad-x: 18px;
    --footer-pad-y: 52px;
  }

  .home-footer-inner {
    padding-bottom: 22px;
  }

  .home-footer-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .home-footer-quick-contact {
    justify-content: flex-end;
  }

  .home-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .home-footer-bottom {
    grid-template-columns: 1fr auto;
    align-items: center;

    text-align: left;
  }

  .home-footer-version {
    text-align: right;
  }
}


/* ===========================================================
   16. DESKTOP PAYMENT STRIP
   960px+

   PURPOSE:
   - Payment & Delivery becomes one full-width horizontal strip.
   - Prevents payment/delivery icons from being cramped in a narrow column.
   =========================================================== */

@media (min-width: 960px) {
  .home-footer-payment-card {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px;

    padding: 16px 18px;
  }

  .home-footer-payment-card h3 {
    margin: 0;

    white-space: nowrap;
  }

  .home-footer-payment-card .home-footer-logo-section {
    margin: 0;
    padding: 0;

    border-top: 0;
  }

  .home-footer-payment-card .home-footer-logo-section + .home-footer-logo-section {
    margin-top: 0;
    padding-top: 0;

    border-top: 0;
  }

  .home-footer-payment-card .home-footer-logo-section h4 {
    margin: 0 0 8px;

    color: var(--footer-gold);
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .home-footer-payment-card .home-footer-logo-grid {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .home-footer-payment-card .home-footer-logo-grid img {
    width: 38px;
    height: 38px;
  }
}


/* ===========================================================
   17. DESKTOP POLICY STRIP
   960px+

   PURPOSE:
   - Support & Policies becomes one full-width horizontal strip.
   - Title and links stay on same visual row.
   =========================================================== */

@media (min-width: 960px) {
  .home-footer-policy-card {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1rem, 2vw, 1.6rem);

    padding: 16px 18px;
  }

  .home-footer-policy-card h3 {
    margin: 0;

    white-space: nowrap;
  }

  .home-footer-policy-card .home-footer-link-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 8px 14px;
    margin: 0;
  }

  .home-footer-policy-card .home-footer-link-list a {
    width: auto;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    padding: 4px 0;

    border-bottom: 0;

    font-size: 0.84rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .home-footer-policy-card .home-footer-link-list a::after {
    content: "›";
  }

  .home-footer-policy-card .home-footer-link-list a:hover {
    padding-left: 0;

    color: #fff;
  }
}


/* ===========================================================
   18. LARGE DESKTOP
   1200px+
   =========================================================== */

@media (min-width: 1200px) {
  .home-footer-grid {
    gap: 18px;
  }

  .home-footer-payment-card,
  .home-footer-policy-card {
    padding: 17px 20px;
  }

  .home-footer-policy-card .home-footer-link-list {
    gap: 8px 16px;
  }
}


/* ===========================================================
   19. WIDE DESKTOP
   1680px+
   Footer still follows --page-max-width / 1180px.
   =========================================================== */

@media (min-width: 1680px) {
  .home-footer-inner {
    max-width: var(--footer-container);
  }
}