/* ======================================================
   Random Contact Buttons
   - Brand-aligned colors
   - Supports Call, WhatsApp, Support, Enquiry
   - Includes enquiry popup
   ====================================================== */

/* Header row classes (set in header builder)
   hdr-row   -> row/section containing logo + buttons
   hdr-logo  -> logo container
   rcb-header-> shortcode container
*/
.hdr-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:12px;
}
.hdr-logo{ flex:0 1 auto; min-width:0; }
.rcb-header{ flex:0 0 auto; margin-left:auto; display:flex; justify-content:flex-end; }

/* Core layout + tokens */
.rcb-actions{
  --brand-cyan:#34acd8;
  --brand-gold:#f7c600;
  --brand-red:#de3b2a;
  --brand-ink:#1f1f1f;

  --shadow:0 10px 24px rgba(0,0,0,.14);
  --shadow-hover:0 14px 30px rgba(0,0,0,.18);

  display:inline-flex;
  align-items:center;
  gap:10px;

  flex-wrap:nowrap !important;
  width:max-content !important;
  white-space:nowrap !important;
}

.rcb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  appearance:none;
  font:inherit;
  outline:none;

  text-decoration:none;
  cursor:pointer;
  user-select:none;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);

  color:#fff;                 /* ensure icons/text visible */
  font-weight:700;
  letter-spacing:.2px;
  line-height:1;

  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  background-size:200% 200%;
  animation:rcbGradientShift 10s linear infinite, rcbFloat 3.3s linear infinite;
  animation-play-state: paused, paused;
}

/* Icons: always visible */
.rcb-btn svg{
  color:#fff !important;
  fill:#fff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) !important;
}


/* Subtle gradients (not harsh) */
.rcb-call{
  background:linear-gradient(135deg, #42b7e0 0%, #239fcf 100%);
}
.rcb-call:hover{
  color:#000;
}
.rcb-call:hover svg{
  color:#000 !important;
  fill:#000 !important;
}
.rcb-wa{
  background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-color:rgba(37,211,102,.1);
  color:#fff;
}
.rcb-wa:hover{
  color:#000;
}
.rcb-wa:hover svg{
  color:#000 !important;
  fill:#000 !important;
}
.rcb-support,
.rcb-enquiry{
  background:linear-gradient(135deg, #e54a38 0%, #cd2f1e 100%);
}
.rcb-support:hover,
.rcb-enquiry:hover{
  filter:brightness(0.5);
  color:#000;
}
.rcb-support:hover svg,
.rcb-enquiry:hover svg{
  color:#000 !important;
  fill:#000 !important;
}
.rcb-wa svg{
  color:#fff !important;
  fill:#fff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)) !important;
}

.rcb-btn:hover{
  transform:translateY(-2px) scale(1.08);
  box-shadow:0 16px 32px rgba(0,0,0,.2);
  filter:brightness(1.05);
  animation-play-state: running, running;
}
@keyframes rcbGradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

@keyframes rcbFloat{
  0%, 100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  25%{ transform:translate3d(0,-2px,0) rotate(-0.5deg) scale(1.005); }
  50%{ transform:translate3d(0,-4px,0) rotate(0deg) scale(1.01); }
  75%{ transform:translate3d(0,-2px,0) rotate(0.5deg) scale(1.005); }
}

@media (prefers-reduced-motion:reduce){
  .rcb-btn{
    animation:rcbGradientShift 10s linear infinite;
    animation-play-state: paused;
  }
}
.rcb-btn:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}

.rcb-popup{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease, visibility .28s ease;
  z-index:99997;
}

.rcb-popup.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.rcb-popup__backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,14,18,.56);
  backdrop-filter:blur(3px);
}

.rcb-popup__dialog{
  position:relative;
  width:min(94vw, 880px);
  max-height:90vh;
  overflow:visible;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fffdf9;
  border-radius:28px;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.14);
  padding:34px 32px 30px;
  z-index:1;
  transform:translateY(24px) scale(.98);
  opacity:0;
  transition:transform .32s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

.rcb-popup.is-open .rcb-popup__dialog{
  transform:translateY(0) scale(1);
  opacity:1;
}

.rcb-popup__close{
  position:absolute;
  top:-18px;
  right:-18px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:#fff;
  color:#111;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:20;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.rcb-popup__title{
  font-size:30px;
  font-weight:800;
  color:#111;
  margin:0 0 24px;
  padding-right:0;
  letter-spacing:-0.03em;
}

.rcb-popup__body{
  max-height:calc(90vh - 110px);
  overflow:auto;
  color:#333;
}

.rcb-popup__body .wpforms-container{
  margin:0;
}

.rcb-popup__body form,
.rcb-popup__body .wpcf7,
.rcb-popup__body .wpforms-container,
.rcb-popup__body .redminds-ticket-form-wrap,
.rcb-popup__body .myspacee-ticket-form-wrap,
.rcb-popup__body .ptv-sf-form{
  max-width:none !important;
  width:100%;
}

.rcb-popup__body p,
.rcb-popup__body .wpforms-field,
.rcb-popup__body .wpcf7-form p,
.rcb-popup__body .ptv-sf-field{
  margin-bottom:16px;
}

.rcb-popup__body label,
.rcb-popup__body .wpforms-field-label,
.rcb-popup__body .wpcf7-form label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:#232323;
}

.rcb-popup__body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.rcb-popup__body select,
.rcb-popup__body textarea,
.rcb-popup__body .wpforms-field input,
.rcb-popup__body .wpforms-field select,
.rcb-popup__body .wpforms-field textarea{
  width:100%;
  min-height:52px;
  padding:14px 16px;
  border:1px solid rgba(17,17,17,.12);
  border-radius:14px;
  background:#fff;
  box-shadow:none;
  font-size:15px;
  line-height:1.4;
  color:#222;
}

.rcb-popup__body textarea,
.rcb-popup__body .wpforms-field textarea{
  min-height:132px;
  resize:vertical;
}

.rcb-popup__body button[type="submit"],
.rcb-popup__body input[type="submit"],
.rcb-popup__body .wpforms-submit{
  min-height:52px;
  padding:14px 22px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg, #2d2d2d 0%, #111111 100%);
  color:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
}

.rcb-popup__body input:focus,
.rcb-popup__body select:focus,
.rcb-popup__body textarea:focus{
  outline:none;
  border-color:#239fcf;
  box-shadow:0 0 0 4px rgba(35,159,207,.12);
}

/* Desktop sizes (only apply where you use size classes) */
.rcb-actions.xs .rcb-btn{ min-height:38px; padding:9px 12px; font-size:13px; }
.rcb-actions.sm .rcb-btn{ min-height:42px; padding:10px 14px; font-size:14px; }
.rcb-actions.md .rcb-btn{ min-height:46px; padding:12px 16px; font-size:16px; }
.rcb-actions.lg .rcb-btn{ min-height:50px; padding:14px 18px; font-size:18px; }

/* ======================================================
   iPad + Mobile: SMALL CIRCLE ICONS ONLY
   ====================================================== */
@media (max-width:1024px){

  /* hide text */
  .rcb-actions .rcb-btn span{ display:none !important; }

  /* small circular buttons */
  .rcb-actions{ gap:8px; }
  .rcb-actions .rcb-btn{
    width:38px;
    height:38px;
    min-height:38px;
    padding:0 !important;
    border-radius:999px;
  }

  /* slightly smaller icon */
  .rcb-actions .rcb-btn svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
  }

  /* keep buttons on the right (no wrap) */
  .rcb-header{ margin-left:auto; }
  .rcb-header .rcb-actions{
    flex-wrap:nowrap !important;
    width:max-content !important;
  }

  /* optional: reduce logo width so it doesn't push icons to next line */
  .hdr-logo img{ max-width:170px; height:auto; }

  .rcb-popup{
    padding:18px;
  }

  .rcb-popup__dialog{
    width:min(100%, 760px);
    max-height:min(88vh, 820px);
    border-radius:22px;
    padding:28px 22px 22px;
  }

  .rcb-popup__close{
    top:-14px;
    right:-8px;
  }

  .rcb-popup__title{
    font-size:24px;
    margin-bottom:18px;
  }
}

@media (max-width:520px){
  .hdr-logo img{ max-width:140px; height:auto; }

  .rcb-popup{
    padding:12px;
  }

  .rcb-popup__dialog{
    width:100%;
    max-height:calc(100vh - 24px);
    border-radius:18px;
    padding:22px 16px 16px;
  }

  .rcb-popup__close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
  }

  .rcb-popup__title{
    font-size:20px;
    margin-bottom:14px;
    padding-right:44px;
  }

  .rcb-popup__body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .rcb-popup__body select,
  .rcb-popup__body textarea,
  .rcb-popup__body .wpforms-field input,
  .rcb-popup__body .wpforms-field select,
  .rcb-popup__body .wpforms-field textarea{
    min-height:48px;
    padding:12px 14px;
    font-size:14px;
  }

  .rcb-popup__body textarea,
  .rcb-popup__body .wpforms-field textarea{
    min-height:120px;
  }

  .rcb-popup__body button[type="submit"],
  .rcb-popup__body input[type="submit"],
  .rcb-popup__body .wpforms-submit{
    width:100%;
  }
}