/* ============================
   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:0;
}

/* 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);
  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: var(--kz-radius);
  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;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

#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: var(--kz-radius);
  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;
  }
}


  #hp_remind_me .modal-header{
    background-color: {{ color_scheme }};
  }
/* ============================
   HP Remind Me – Sold Out Block
   ============================ */

#hprmm-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 14px;
}

/* SOLD OUT label */
#hprmm-container .hprmm-soldout-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: var(--kz-radius);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: #5b6075;
  background: linear-gradient(
    180deg,
    rgba(11,18,36,.04),
    rgba(11,18,36,.08)
  );

  border: 1px dashed rgba(11,18,36,.18);

  user-select: none;
}

/* Notify button (calmer than add-to-cart) */
#hprmm-container .btn{
  height: 46px;
  border-radius: var(--kz-radius);

  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 24px rgba(11,18,36,.14);
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    filter .14s ease;
}

/* Refine primary just for remind-me context */
#hprmm-container .btn-primary{
  background: linear-gradient(
    180deg,
    rgba(11,18,36,.9),
    rgba(11,18,36,1)
  );
  border: 1px solid rgba(11,18,36,.18);
  color: #fff;
}

#hprmm-container .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(11,18,36,.18);
  filter: brightness(1.04);
}

#hprmm-container .btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(11,18,36,.14);
}

/* Mobile safety */
@media (max-width: 480px){
  #hprmm-container{
    margin-top: 10px;
  }

  #hprmm-container .btn{
    height: 44px;
    font-size: 13px;
  }
}