/* ============================
   HP Remind Me Modal (Kazoku-ish)
   File: catalog/view/javascript/hprmm.css
   ============================ */

/* Optional tokens fallback (safe if Kazoku variables already exist) */
:root{
  --kz-ink:#0b1224;
  --kz-muted:#5b6075;
  --kz-border:rgba(11,18,36,.12);
  --kz-surface:#ffffff;
  --kz-surface-2:#f6f7fb;
  --kz-shadow:0 20px 50px rgba(11,18,36,.18);
  --kz-radius:4px;
  --kz-radius-sm:10px;
}

/* Modal alignment / spacing */
#hp_remind_me .modal-dialog{
  margin: 8vh auto;
  max-width: 520px;
}

/* Modal shell */
#hp_remind_me .modal-content{
  background: var(--kz-surface);
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius);
  box-shadow: var(--kz-shadow);
  overflow: hidden; /* keep rounded corners clean */
}

/* Header */
#hp_remind_me .modal-header{
  padding: 18px 20px;
  border-bottom: 1px solid var(--kz-border);
  background: linear-gradient(180deg, rgba(246,247,251,.9), rgba(255,255,255,1));
}

#hp_remind_me .modal-title{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kz-muted);
}

/* Close button (subtle, no “jump” on hover) */
#hp_remind_me .close{
  opacity: .55;
  text-shadow: none;
  outline: none;
}
#hp_remind_me .close:hover,
#hp_remind_me .close:focus{
  opacity: .85;
}

/* Body */
#hp_remind_me .modal-body{
  padding: 18px 20px 20px;
}

/* Product title */
#hp_remind_me .hp-remind-title{
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--kz-ink);
}

/* Field */
#hp_remind_me .hp-remind-field{
  margin: 0 0 14px;
}

#hp_remind_me .hp-remind-label{
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kz-muted);
}

/* Input */
#hp_remind_me .hp-remind-input.form-control{
  height: 44px;
  border-radius: var(--kz-radius-sm);
  border: 1px solid rgba(11,18,36,.14);
  box-shadow: none;
  color: var(--kz-ink);
  background: #fff;
  padding: 10px 12px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

#hp_remind_me .hp-remind-input.form-control::placeholder{
  color: rgba(91,96,117,.7);
}

#hp_remind_me .hp-remind-input.form-control:focus{
  border-color: rgba(11,18,36,.32);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(11,18,36,.08); /* soft shading, not aggressive */
}

/* Button: keep it calm (doesn't steal attention from knives) */
#hp_remind_me .hp-remind-btn.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
  border: 1px solid rgba(11,18,36,.14);
  box-shadow: 0 10px 22px rgba(11,18,36,.12);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  align-self: flex-end;
}

/* If your theme already styles .btn-primary, this will just refine it in the modal */
#hp_remind_me .hp-remind-btn.btn-primary{
  background: linear-gradient(180deg, rgba(11,18,36,.92), rgba(11,18,36,1));
  color: #fff;
}

#hp_remind_me .hp-remind-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(11,18,36,.16);
  filter: brightness(1.02);
}

#hp_remind_me .hp-remind-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(11,18,36,.12);
}

/* Alerts inside modal look tidy */
#hp_remind_me .alert{
  border-radius: 12px;
  border: 1px solid rgba(11,18,36,.12);
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}

.hp-remind-form {
  display: flex;
  flex-direction: column;
}

/* Mobile */
@media (max-width: 480px){
  #hp_remind_me .modal-dialog{
    margin: 10vh 12px;
  }
  #hp_remind_me .hp-remind-title{
    font-size: 16px;
  }
}