/* ============================================================
   CPF contact layer — floating WhatsApp, sticky mobile bar,
   inline inquiry form, footer contact strip.
   Loaded from header.htm after brand.css.
   ============================================================ */

.cpf-hide { display: none !important; }

/* ---------- 1. top bar contact links ---------- */
.tnr .cpf-tn { float: left; margin-right: 14px; }
.tnr .cpf-tn a { color: #FFFFFF; }
.tnr .cpf-tn a:hover { color: #FFD24A; }
.tnr .cpf-tn i { font-style: normal; margin-right: 4px; }

/* ---------- 2. floating WhatsApp ---------- */
.cpf-wa-float {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px 11px 13px;
  border-radius: 999px;
  background: #25D366;
  color: #FFFFFF !important;
  font: 700 14px/1 Arial, Helvetica, sans-serif;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cpf-wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }
.cpf-wa-float svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
.cpf-wa-float span { white-space: nowrap; }

/* ---------- 3. mobile sticky action bar ---------- */
.cpf-mbar { display: none; }
@media screen and (max-width: 900px) {
  body { padding-bottom: 62px; }
  .cpf-wa-float { display: none; }
  .cpf-mbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    background: #FFFFFF;
    border-top: 1px solid #E3E8F0;
    box-shadow: 0 -4px 16px rgba(0, 42, 119, .10);
  }
  .cpf-mbar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    color: #002A77;
    font: 700 11px/1.1 Arial, Helvetica, sans-serif;
    text-decoration: none !important;
    text-align: center;
  }
  .cpf-mbar a + a { border-left: 1px solid #EDF1F8; }
  .cpf-mbar a.cpf-mbar-main { background: #008945; color: #FFFFFF; }
  .cpf-mbar a.cpf-mbar-wa { background: #25D366; color: #FFFFFF; }
  .cpf-mbar b { font: 700 15px/1 Arial, Helvetica, sans-serif; }
}

/* ---------- 4. inline inquiry form ---------- */
.cpf-inq {
  margin: 26px 0 8px;
  padding: 26px 28px 24px;
  border: 1px solid #E3E8F0;
  border-radius: 10px;
  background: #F7F9FC;
  scroll-margin-top: 90px;
}
.cpf-inq-h {
  margin: 0 0 6px;
  font: 700 21px/1.25 Arial, Helvetica, sans-serif;
  color: #002A77;
}
.cpf-inq-sub {
  margin: 0 0 18px;
  font: 400 13.5px/1.55 Arial, Helvetica, sans-serif;
  color: #5B6472;
}
.cpf-inq-ok, .cpf-inq-err {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font: 700 13.5px/1.5 Arial, Helvetica, sans-serif;
}
.cpf-inq-ok { background: #E8F6EE; border: 1px solid #9FD9B8; color: #14663C; }
.cpf-inq-err { background: #FDEDED; border: 1px solid #F0B4B4; color: #9B1C1C; }
.cpf-inq-row { display: flex; gap: 14px; margin-bottom: 12px; }
.cpf-inq-row label { flex: 1 1 0; min-width: 0; display: block; }
.cpf-inq-full { display: block; margin-bottom: 12px; }
.cpf-inq label > span {
  display: block;
  margin-bottom: 5px;
  font: 700 12.5px/1.3 Arial, Helvetica, sans-serif;
  color: #33405A;
}
.cpf-inq input[type=text],
.cpf-inq input[type=email],
.cpf-inq textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #CDD6E4;
  border-radius: 7px;
  background: #FFFFFF;
  color: #1B2437;
  font: 400 14px/1.4 Arial, Helvetica, sans-serif;
}
.cpf-inq input:focus, .cpf-inq textarea:focus { outline: none; border-color: #002A77; }
.cpf-inq textarea { resize: vertical; min-height: 96px; }
.cpf-inq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cpf-inq-btn {
  display: inline-block;
  padding: 13px 34px;
  border: 0;
  border-radius: 999px;
  background: #008945;
  color: #FFFFFF;
  font: 700 15px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.cpf-inq-btn:hover { background: #00713A; }
.cpf-inq-alt {
  margin: 14px 0 0;
  font: 400 13px/1.5 Arial, Helvetica, sans-serif;
  color: #5B6472;
}
.cpf-inq-alt a { color: #002A77; font-weight: 700; }

@media screen and (max-width: 700px) {
  .cpf-inq { padding: 20px 16px; }
  .cpf-inq-row { flex-direction: column; gap: 12px; }
  .cpf-inq-btn { width: 100%; padding: 14px 0; }
}

/* ---------- 5. footer contact strip ---------- */
.cpf-foot-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  font: 400 13.5px/1.5 Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}
.cpf-foot-contact strong { color: #FFD24A; font-weight: 700; }
.cpf-foot-contact a { color: #FFFFFF; text-decoration: underline; }
.cpf-foot-contact a:hover { color: #FFD24A; }

/* ---------- 6. article → product cards ---------- */
.cpf-ap { margin: 26px 0 10px; }
.cpf-ap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.cpf-ap-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #E3E8F0;
  border-radius: 9px;
  overflow: hidden;
  background: #FFFFFF;
  text-decoration: none !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.cpf-ap-card:hover { border-color: #C7D3E6; box-shadow: 0 6px 16px rgba(0, 42, 119, .09); }
.cpf-ap-pic { display: block; aspect-ratio: 4 / 3; background: #F2F5F9; overflow: hidden; }
.cpf-ap-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cpf-ap-name {
  flex: 1 1 auto;
  padding: 10px 11px 6px;
  font: 400 13px/1.4 Arial, Helvetica, sans-serif;
  color: #1B2437;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cpf-ap-price {
  padding: 0 11px 11px;
  font: 700 13px/1.2 Arial, Helvetica, sans-serif;
  color: #C0392B;
}
@media screen and (max-width: 900px) {
  .cpf-ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}