/*
 * Woo Phone OTP – Modern Modal Styles (tuned for tuadah.sa)
 * Palette: primary #007B83 , accent #FFBB6C , neutral #FFFFFF / #F9F9F9 , text #333
 * Font: inherit (Cairo on tuadah.sa)  
 */

/* ---------- OVERLAY ---------- */
.wpotp-modal{ /* overlay wrapper */
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:9999;
  padding:1.2rem;
  overflow:auto;
  backdrop-filter:blur(4px);
}

/* ---------- DIALOG ---------- */
.wpotp-modal-content{
  background:#fff;
  width:100%;
  max-width:420px;
  border-radius:12px;
  box-shadow:0 16px 50px rgba(0,0,0,.15);
  padding:2rem 1.75rem 1.75rem;
  position:relative;
  font-family:'Cairo',sans-serif;
  text-align:center;
}

/* close button */
.wpotp-close{
  position:absolute;
  top:14px;right:14px;
  font-size:1.6rem;
  font-weight:700;
  line-height:1;
  color:#666;
  border:none;outline:none;background:none;
  cursor:pointer;
  transition:transform .2s ease;
}
.wpotp-close:hover{transform:scale(1.15);}

/* heading */
.wpotp-modal-content h2{
  margin:0 0 .4rem;
  font-size:1.3rem;
  color:#333;
  font-weight:700;
}
.wpotp-modal-content p{
  margin:0 0 1.2rem;
  color:#666;
  font-size:.95rem;
}

/* form elements */
.wpotp-modal-content input[type="tel"],
.wpotp-modal-content input[type="text"]{
  width:100%;
  padding:.75rem 1rem;
  font-size:1rem;
  border:1px solid #E2E2E2;
  border-radius:8px;
  background:#F9F9F9;
  transition:border-color .2s;
  direction:ltr;text-align:left;
}
.wpotp-modal-content input:focus{
  outline:none;
  border-color:#007B83;
  background:#fff;
}

/* primary button */
.wpotp-modal-content button{
  width:100%;
  margin-top:1rem;
  padding:.85rem 1rem;
  font-size:1rem;
  font-weight:700;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:opacity .2s;
  color:#fff;
  background:#007B83;
}
.wpotp-modal-content button:hover{opacity:.9;}

/* secondary tiny links */
.wpotp-modal-content .link-secondary{
  display:inline-block;
  margin-top:.8rem;
  font-size:.9rem;
  color:#007B83;
  text-decoration:underline;
  cursor:pointer;
}

/* message / alert box */
.wpotp-message{
  margin-top:1rem;
  font-size:.9rem;
  font-weight:600;
}
.wpotp-message.error{color:#D93025;}
.wpotp-message.success{color:#188038;}

/* responsive tweak */
@media (max-width:480px){
  .wpotp-modal-content{padding:1.5rem;}
  .wpotp-modal-content h2{font-size:1.15rem;}
}