@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");


.do-popup-trigger{
  display:inline-block;
  background:#000;
  color:#fff;
  padding:14px 28px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.3px;
  font-family: 'Cairo', sans-serif;
  transition: background 0.3s ease;
}
.do-popup-trigger:hover { background: #333; }
.do-popup-modal{ display:none; }
.do-popup-modal.open{ display:block; position:fixed; inset:0; z-index:99999; }
.do-popup-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); }
.do-popup-dialog{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:95%; max-width:500px; background:#fff; border-radius:16px; box-shadow:0 25px 50px rgba(0,0,0,0.2); z-index:100000; overflow:hidden; font-family: 'Cairo', sans-serif; }
.do-popup-close{ position:absolute; right:15px; top:10px; background:transparent; border:none; font-size:24px; color:#333; cursor:pointer; font-weight:300; }
.do-popup-header{ padding:30px 20px 15px 20px; border-bottom:1px solid #eee; text-align:center; background:#fff; }
.do-popup-header h2{ margin:0; font-size:24px; font-weight:800; color:#111; }
.do-popup-price{ margin-top:10px; color:#555; font-size:16px; font-weight: 700; }
.do-popup-body{ padding: 30px 30px 20px 30px; }
.do-row{ margin-bottom:18px; }
.do-row input[type="text"], .do-row input[type="tel"], .do-row input[type="number"]{ width:100%; padding:14px 12px; border-radius:8px; border:1px solid #ddd; font-size:15px; color:#333; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-shadow: none; }
.do-row input[type="text"]:focus, .do-row input[type="tel"]:focus, .do-row input[type="number"]:focus{ outline:none; border-color:#000; box-shadow: 0 0 0 1px #000; }
.do-qty-label{ display:block; margin-bottom:8px; color:#333; font-weight:700; font-size:14px; }
.do-qty-input{ width:100px !important; text-align: center; }
.do-subtitle{ font-weight:700; margin-bottom:10px; color:#222; font-size:15px; }
.do-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.do-chip{ background:#fff; border:1px solid #ccc; padding:10px 15px; border-radius:6px; cursor:pointer; font-size:14px; transition: all 0.2s ease; min-width: 50px; text-align: center; color: #333; }
.do-chip:hover:not(.active) { border-color: #000; }
.do-chip.active{ background:#000; color:#fff; border-color:#000; box-shadow:none; transform:none; }
.do-free{ text-align:center; color:#009933; font-weight:700; margin-top:10px; margin-bottom: 20px; font-size: 15px; }
.do-popup-submit{ width:100%; background:#000; color:#fff; padding:16px; border-radius:10px; border:none; font-weight:800; cursor:pointer; margin-top:10px; transition: background 0.3s ease; font-size: 16px; letter-spacing: 0.5px; }
.do-popup-submit:hover { background: #333; }
.do-popup-submit:disabled { background: #ccc; cursor: not-allowed; opacity: 0.8; }
.do-popup-result{ text-align:center; min-height:24px; margin-top:10px; font-weight: 600; font-size: 15px; }
@media(max-width:520px){ .do-popup-dialog{ width:96%; max-width:100%; border-radius:10px; } .do-popup-body{ padding: 20px; } .do-popup-header h2{ font-size: 22px; } }
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

/* 🔹 تصميم أيقونات داخل الـ input */
.icon-input {
  position: relative;
}

.icon-input i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  font-size: 17px;
}

.icon-input input {
  padding-left: 38px !important;
}