/* =====================================================================
   Footer — the live site's footer, to the pixel where it matters.
   Colours are V1's: #0b192c panel, #1a0581 icon discs, #031474 button,
   #260275 hairlines above and below the link bar.
   Rebuilt on grid rather than V1's floats, so it stops collapsing on
   the tablet widths where the float layout used to overlap.
   ===================================================================== */

:root {
  --ft-bg:    #0B192C;
  --ft-disc:  #1A0581;
  --ft-btn:   #031474;
  --ft-rule:  #260275;
  --ft-muted: #BEBCBC;
}

.ft { background: var(--ft-bg); color: #fff; padding-block: 45px 25px; font-size: 15px; }
.ft a { color: #fff; }

.ft__grid { display: grid; gap: 2.5rem; }
@media (min-width: 992px) { .ft__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3rem; } }

/* ---------- left: identity + contacts ---------- */
.ft__logo { width: 200px; height: auto; margin-bottom: 1.25rem; }
.ft__about > p { color: #fff; font-size: 15px; line-height: 1.7; margin-bottom: 1.75rem; max-width: 40rem; }

.ft__contacts { display: grid; gap: 1.4rem; }
@media (min-width: 620px) { .ft__contacts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.ft__row { display: flex; align-items: flex-start; gap: .95rem; min-width: 0; }
.ft__row--wide { grid-column: 1 / -1; }
.ft__disc {
  flex: none; width: 35px; height: 35px; border-radius: 50%;
  background: var(--ft-disc); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ft__disc svg { width: 17px; height: 17px; }
.ft__disc--wa { background: #128C34; }
.ft__text { min-width: 0; }
/* A one-word action label, used only where a tile is too narrow for the value. */
.ft__short { display: none; }
.ft__label { display: block; font-size: 12px; color: var(--ft-muted); margin-bottom: 2px; }
.ft__value { display: block; color: #fff; font-size: 15px; }
a.ft__row:hover .ft__value { color: var(--yellow); }

.ft__social h6 { color: #fff; font-size: 14px; font-weight: 600; margin: 2rem 0 .9rem; }
.ft__social-links { display: flex; align-items: center; gap: 1.5rem; }
.ft__social-links a { display: inline-flex; color: #fff; transition: color .18s var(--ease), transform .18s var(--ease); }
.ft__social-links svg { width: 26px; height: 26px; }
.ft__social-links a:hover { color: var(--yellow); transform: translateY(-2px); }

/* ---------- right: newsletter + registrations ---------- */
.ft__side { padding-top: .5rem; }
@media (min-width: 992px) { .ft__side { padding-top: 30px; } }
.ft__side h4 { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: .6rem; }
.ft__side > p { color: #fff; font-size: 14px; line-height: 1.7; margin-bottom: 1.25rem; max-width: 42rem; }

.ft__news { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.ft__news-input {
  flex: 1 1 18rem; min-width: 0; height: 49px; padding-inline: 1.1rem;
  background: transparent; color: #fff; font: inherit; font-size: 15px;
  border: 1px solid #B9B9B9; border-radius: 11px;
}
.ft__news-input::placeholder { color: #9AA6B6; }
.ft__news-input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(253,215,23,.15); }
.ft__news-btn {
  flex: none; background: var(--ft-btn); color: #fff; border: 0; border-radius: 30px;
  padding: 12px 28px; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.ft__news-btn:hover { background: var(--brand-2); transform: translateY(-1px); }
.ft__news-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ft__news-msg { flex: 1 0 100%; margin: .35rem 0 0; font-size: 14px; color: var(--yellow); }

.ft__badge { display: flex; align-items: center; gap: 1rem; padding-top: 30px; }
.ft__badge img { width: 45px; height: auto; flex: none; }
.ft__badge h6 { color: #fff; font-size: 15px; font-weight: 500; margin: 0; line-height: 1.5; }

/* ---------- link bar ---------- */
.ft-menu {
  background: var(--ft-bg); color: #fff; font-size: 15px;
  border-top: 1px solid var(--ft-rule); border-bottom: 1px solid var(--ft-rule);
  padding-block: 12px;
}
.ft-menu__in {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem 1rem;
}
@media (min-width: 700px)  { .ft-menu__in { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1040px) { .ft-menu__in { grid-template-columns: repeat(7, minmax(0,1fr)); } }
.ft-menu a { color: #fff; padding-block: .35rem; display: flex; align-items: center; min-width: 0; }
.ft-menu a:hover { color: var(--yellow); }

/* ---------- copyright ---------- */
.ft-copy { background: var(--ft-bg); color: #fff; text-align: center; font-size: 13px; padding-block: 15px; }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 90;
  width: 55px; height: 55px; border-radius: 50%;
  background: #128C34; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 15px rgba(0,0,0,.3);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.wa-float:hover { background: var(--brand); color: #fff; transform: scale(1.05); }
.wa-float svg { width: 30px; height: 30px; }

@media print { .wa-float, .site-head, .ft, .ft-menu, .ft-copy { display: none; } }

/* =====================================================================
   The footer on a phone.
   Unchanged, this is a long dark wall: a paragraph, four contact rows,
   socials, a newsletter, two registration badges, seven links and a
   copyright line — all in one column, all the same weight.
   Re-ordered here into four clear blocks with the tappable things first.
   ===================================================================== */
@media (max-width: 767px) {

  .ft { padding-block: 2.25rem 1.25rem; text-align: center; }

  /* --- identity --- */
  .ft__logo { width: 168px; margin-inline: auto; margin-bottom: 1rem; }
  .ft__about > p {
    font-size: 14px; line-height: 1.7; margin-inline: auto; margin-bottom: 1.5rem;
    /* The full paragraph is four lines of company history that nobody reads at
       the bottom of a phone screen. It stays in the HTML; it just stops taking
       up a third of the footer. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- contact tiles: the reason anyone scrolls this far --- */
  .ft__contacts { grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; }
  .ft__row {
    flex-direction: column; align-items: center; gap: .5rem;
    min-height: 92px; justify-content: center; text-align: center;
    padding: .85rem .5rem; border-radius: 14px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    transition: background .18s var(--ease), transform .12s var(--ease);
  }
  .ft__row:active { transform: scale(.97); background: rgba(255,255,255,.1); }
  /* Three tiles across a 360px screen leaves about 100px each — not enough for
     "+966 53 151 9792" or an email address, and a truncated phone number is
     worse than none. The tile shows the action instead; the href still carries
     the number, and the full details stay visible on a desktop. */
  .ft__row:not(.ft__row--wide) .ft__text { display: none; }
  .ft__short {
    display: block; font-size: 12.5px; font-weight: 600; color: #fff;
    line-height: 1.25; overflow-wrap: anywhere;
  }
  .ft__label { font-size: 11px; letter-spacing: .02em; margin-bottom: 1px; }
  .ft__value { font-size: 13px; }
  /* the address gets its own full-width row and reads as a line, not a tile */
  .ft__row--wide {
    grid-column: 1 / -1; flex-direction: row; min-height: 56px;
    text-align: start; justify-content: flex-start; gap: .8rem; padding-inline: .9rem;
  }
  .ft__row--wide .ft__value { white-space: normal; font-weight: 500; }

  /* --- social --- */
  .ft__social h6 { margin-top: 1.75rem; }
  .ft__social-links { justify-content: center; gap: 1.75rem; }
  .ft__social-links a { width: 44px; height: 44px; align-items: center; justify-content: center; }

  /* --- newsletter --- */
  .ft__side { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.1); }
  .ft__side > p {
    font-size: 13.5px; margin-inline: auto;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Stacked and full width. Side by side, the input ends up ~150px wide and the
     placeholder is cut in half. */
  .ft__news { flex-direction: column; gap: .6rem; }
  .ft__news-input { flex: none; width: 100%; text-align: center; }
  .ft__news-btn { width: 100%; min-height: 50px; }

  /* --- registration badges: two compact chips, not two stacked rows --- */
  .ft__badge {
    padding-top: 0; margin-top: 1.5rem;
    flex-direction: column; gap: .5rem; text-align: center;
    padding: .9rem .6rem; border-radius: 12px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  }
  .ft__badge img { width: 34px; }
  .ft__badge h6 { font-size: 11px; color: #A9BDD6; }
  .ft__badge h6 + h6 { font-size: 13.5px; font-weight: 700; color: #fff; }
  .ft__side { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 .6rem; }
  .ft__side h4, .ft__side > p, .ft__news { grid-column: 1 / -1; }

  /* --- link bar: two tidy columns, hairline separated --- */
  .ft-menu { padding-block: .25rem; }
  .ft-menu__in { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; }
  .ft-menu a {
    min-height: 48px; font-size: 13.5px; justify-content: center; text-align: center;
    padding-inline: .4rem; border-bottom: 1px solid rgba(255,255,255,.07);
    /* "Private Label Wipes Manufacturer" in a 155px column has to be allowed to
       break, or it sets the track's min-content width and pushes the grid wide. */
    overflow-wrap: anywhere;
  }
  /* the odd one out spans the row rather than leaving a gap */
  .ft-menu a:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .ft-menu a:nth-last-child(2), .ft-menu a:nth-last-child(3) { border-bottom: 0; }

  .ft-copy { font-size: 12px; }
}

/* Very narrow phones cannot hold three tiles side by side without the labels
   becoming unreadable, so they become two plus one. */
@media (max-width: 359px) {
  .ft__contacts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .ft__side { grid-template-columns: minmax(0,1fr); }
}