/* Opto Zero v3.60 — WhatsApp + phone fixed neatly inside header */

/* ===== PC / TABLET ===== */
@media (min-width: 768px) {
  .oc-header .oc-header-row {
    display:grid!important;
    grid-template-columns:190px minmax(300px,1fr) auto auto!important;
    grid-template-areas:"logo search contacts actions"!important;
    align-items:center!important;
    gap:12px!important;
  }

  .oc-header .oc-logo {
    grid-area:logo!important;
  }

  .oc-header .oc-header-center {
    grid-area:search!important;
    min-width:0!important;
  }

  .oc-header .oc-header-contacts {
    grid-area:contacts!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
  }

  .oc-header .oc-header-actions {
    grid-area:actions!important;
  }

  .oc-header .oc-header-contact {
    height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    padding:0 10px!important;
    border:1px solid rgba(255,255,255,.40)!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.91)!important;
    color:#24405f!important;
    box-shadow:0 4px 13px rgba(20,52,100,.10)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    backdrop-filter:blur(8px)!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    font-size:9.5px!important;
    line-height:1!important;
    font-weight:900!important;
    transition:transform .15s ease,background .15s ease,box-shadow .15s ease!important;
  }

  .oc-header .oc-header-contact i {
    font-size:15px!important;
  }

  .oc-header .oc-header-contact.is-whatsapp {
    color:#168b45!important;
  }

  .oc-header .oc-header-contact.is-whatsapp i {
    color:#20b85a!important;
  }

  .oc-header .oc-header-contact.is-phone {
    color:#0d5de6!important;
  }

  .oc-header .oc-header-contact.is-phone i {
    color:#0d5de6!important;
  }

  .oc-header .oc-header-contact:hover {
    background:#fff!important;
    transform:translateY(-1px)!important;
    box-shadow:0 6px 16px rgba(20,52,100,.14)!important;
  }
}

/* On narrower desktop/tablet, keep the header from becoming crowded. */
@media (min-width:768px) and (max-width:1180px) {
  .oc-header .oc-header-row {
    grid-template-columns:150px minmax(250px,1fr) auto!important;
    grid-template-areas:
      "logo search actions"
      "contacts contacts contacts"!important;
    gap:7px 10px!important;
  }

  .oc-header .oc-header-contacts {
    justify-content:flex-end!important;
    padding-bottom:2px!important;
  }

  .oc-header .oc-header-contact {
    height:34px!important;
    padding:0 9px!important;
    font-size:9px!important;
  }
}

/* ===== PHONES ===== */
@media (max-width:767px) {
  .oc-header .oc-header-row {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "logo actions"
      "search search"
      "contacts contacts"!important;
    align-items:center!important;
    gap:7px 9px!important;
  }

  .oc-header .oc-header-contacts {
    grid-area:contacts!important;
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }

  .oc-header .oc-header-contact {
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:0 7px!important;
    border:1px solid rgba(255,255,255,.46)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.91)!important;
    box-shadow:0 3px 11px rgba(20,52,100,.10)!important;
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
    color:#29415f!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-decoration:none!important;
    font-size:9.5px!important;
    line-height:1!important;
    font-weight:900!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:manipulation!important;
  }

  .oc-header .oc-header-contact i {
    flex:0 0 auto!important;
    font-size:15px!important;
  }

  .oc-header .oc-header-contact span {
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .oc-header .oc-header-contact.is-whatsapp {
    color:#168b45!important;
  }

  .oc-header .oc-header-contact.is-whatsapp i {
    color:#20b85a!important;
  }

  .oc-header .oc-header-contact.is-phone,
  .oc-header .oc-header-contact.is-phone i {
    color:#0d5de6!important;
  }
}

@media (max-width:380px) {
  .oc-header .oc-header-contact {
    height:34px!important;
    gap:5px!important;
    padding:0 5px!important;
    font-size:8.8px!important;
  }

  .oc-header .oc-header-contact i {
    font-size:14px!important;
  }
}