/* --- Summernote dialogs must sit ABOVE your edit modal overlay --- */
.note-modal-backdrop {
  z-index: 99998 !important;
}

.note-modal {
  z-index: 99999 !important;
}

/* Summernote dropdowns (font, color, etc.) */
.note-dropdown-menu,
.note-color-palette {
  z-index: 1000000000 !important;
}

/* If your edit modal overlay has a huge z-index, keep it LOWER than summernote */
#editProductModal {
  z-index: 3000000000000 !important; /* example */
}


/* ─────────────────────────────────────────
   FAQ CONTAINER
───────────────────────────────────────── */
#editProductModal .faq-item {
  position: relative;
  font-family: "askwhy" !important;
  background: #1b2436;
  border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 1rem auto;
  max-width: 700px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* ─────────────────────────────────────────
   FAQ QUESTION INPUT
───────────────────────────────────────── */
#editProductModal .faq-question {
  width: 100%;
  font-family: "askwhy";
  font-size: 1.35rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #293b54;
  color: white;
  letter-spacing: .4px;
  margin-bottom: .5rem;
}

#editProductModal .faq-question::placeholder {
  color: white; 
  font-family: "askwhy" !important;
  font-style: none !important;
}

#editProductModal .faq-question:focus {
  box-shadow: 0 0 0 2px rgba(120,150,220,0.4);
}

/* ─────────────────────────────────────────
   FAQ ANSWER TEXTAREA
───────────────────────────────────────── */
#editProductModal .faq-answer {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: .65rem .75rem;
  font-family: "askwhy";
  font-size: 1rem;
  line-height: 1.55;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #ffffff;
  color: var(--color-slate) !important;
}

#editProductModal .faq-answer::placeholder {
  color: var(--color-slate);
  font-style: none !important; 
}

#editProductModal .faq-answer:focus {
  box-shadow: 0 0 0 2px rgba(120,150,220,0.35);
}

/* ─────────────────────────────────────────
   DELETE “×” BUTTON
───────────────────────────────────────── */
#editProductModal .faq-delete-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .15s ease;
}

#editProductModal .faq-delete-x:hover {
  background: rgba(220,80,80,0.8);
  transform: scale(1.05);
}

/* ─────────────────────────────────────────
   ADD / SAVE / CANCEL BUTTONS
───────────────────────────────────────── */
#editProductModal .faq-button-row {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: .6rem;
}

/* Shared pill style */
#editProductModal .faq-pill-button,
#editAddFaqBtn {
  appearance: none;
  border-radius: 999px;
  padding: .5rem 1.25rem;
  font-family: "brick";
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-slate);
  color: white;
  transition: transform .15s ease, filter .15s ease;
}

#editProductModal .faq-pill-button:hover,
#editAddFaqBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Cancel button variant */
#editProductModal .faq-pill-button.red {
  background: transparent;
  border-color: #c55;
  color: #ffb3b3;
}

#editProductModal .faq-pill-button.red:hover {
  background: rgba(200,80,80,0.15);
}

/* Add FAQ button positioning */
#editAddFaqBtn {
  display: inline-block;
  margin: 1rem auto 0;
}


/* make "hidden" actually hide */
#editProductModal.hidden { display: none; }

/* dim background behind modal */
#editProductModal.modal-overlay {
  background: rgba(0,0,0,0.6);
  padding: 2rem;
}

/* responsive width */
#editProductModal .modal-box {
  width: min(900px, 92vw);
  max-height: 80vh;
  overflow: auto;
  color: white !important;
  background: var(--color-dark) !important;
}

/* Modal overlay & box */
#editProductModal.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#editProductModal .modal-box {
  background: var(--color-dark);
  border-radius: 8px;
  padding: 20px;
  width: 40%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  position: relative;
scrollbar-width: none; 
}

/* Close button in corner */
#editProductModal [data-modal-close] {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Gallery row */
#editProductModal .product-modal-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-bottom: 1rem;
}

#editProductModal .product-modal-gallery .prev-btn,
#editProductModal .product-modal-gallery .next-btn {
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 8px;
}

#editProductModal .product-modal-gallery img {
    max-width: 90%;
  border-radius: 4px;
  object-fit: contain;
}

/* Thumbnails */
#editProductModal .thumbnail-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

#editProductModal .thumbnail-row img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

#editProductModal .thumbnail-row img.active {
  border-color: #333;
}

/* Details section */
#editProductModal .product-modal-details {
  font-family: 'loubag', sans-serif;
  width: 100% !important;
  color: #333;
}

#editProductModal h4 {
  font-size: 2.5rem !important;
  font-family: "brick" !important;
  margin: .25rem auto !important;
  text-align: center !important;
  color: var(--color-slate) !important;
  font-weight: normal !important;
}

#editProductModal .product-modal-details label {
display: block;
font-size: 1.5em;
margin-top: .25rem;
font-family: "brick";
color: white;
text-align: center;
  letter-spacing: 0.5px;
}

/* Style the editable “Title” field’s text */
#editProductModal #edit-title {
  font-size: 2.5rem;        /* bigger text */
  font-weight: normal;         /* bold */
  color: #485f88;              /* dark color */
  text-align: center;       /* centered inside the box */
  background: transparent;      /* very light gray background */
  border: none;  /* darker border */
  border-radius: 8px;       /* rounded corners */
  padding: 0rem;       /* space inside */
  box-sizing: border-box;
  font-family: "brick";
}

/* If you also want to style the placeholder differently: */
#editProductModal #edit-title::placeholder {
  color: #888;              /* gray placeholder text */
  font-style: italic;
}

#editProductModal #edit-price {
  font-size: 2.5rem;
  text-align: center;
  color: #627b9d;
  border: none;
  padding: 0em;
  border-radius: 8px;
  background: transparent; 
  font-family: "brick";
  box-sizing: border-box;
  text-align: center;
  max-width: 30%;
  margin-right: 1rem;
  margin-left: 1rem;
}

/* placeholder styling for price */
#editProductModal #edit-price::placeholder {
  color: #627b9d;
  font-style: italic;
}

/* ── Description Label & Textarea ───────────────────────────────────── */
#editProductModal .product-modal-details label[for="edit-description"] {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  font-weight: bold;
  color: #627b9d;
}

#editProductModal .product-modal-details input,
#editProductModal .product-modal-details textarea {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: var(--color-dark);
  resize: vertical;
  box-sizing: border-box;
  margin-top: .25rem;
}

#editProductModal .product-modal-details textarea {
  min-height: 80px;
  background: var(--color-dark);
}

/* Action buttons */
#editProductModal .modal-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

#editProductModal .modal-actions button {
  padding: 10px 20px;
  font-size: 1.5rem;
  background: var(--color-slate);
  color: white;
  border: none;
  border-radius: 4px;
  font-family: "brick";
  cursor: pointer;
}

#editProductModal .modal-actions button[data-modal-close] {
  background: #777;
}

/* ── Edit Modal Description Textarea ────────────────────────────────── */
#editProductModal #edit-description {
  width: 100%;
  min-height: 300px;           /* a bit taller for comfort */
  max-height: 500px;
  padding: 12px 16px;
  font-size: 1.25em;
  color: white;
  font-family: "seawashed";
  border-radius: 6px;
  background: var(--color-dark);
  scrollbar-width: none;
  resize: vertical;
  box-sizing: border-box;
  margin: .5rem auto;
  line-height: 1.6;
  transition: border-color 0.2s, background 0.2s;
}

/* Placeholder styling */
#editProductModal #edit-description::placeholder {
  color: #999;
  font-style: italic;
}

/* Focus state */
#editProductModal #edit-description:focus {
  outline: none;
  border-color: #777;
}

/* Questions get a bold, standout look */
#editProductModal .faq-question,
#productModal .faq-question {
  font-weight: normal;
  font-size: 1.25em;
  padding: .5em;
  margin: 0em;
  font-family: "askwhy";
  color: white;
  background: #293b54;
  font-style: italic;
  letter-spacing: 0.5px;
}

/* Answers are indented & lighter color */
#editProductModal .faq-answer,
#productModal .faq-answer {
  font-size: 0.95rem;
  font-family: "askwhy";
  color: #121524;
  margin: 0em;
  background: white;
  padding: .5em;
  line-height: 1.4;
}

/* If you want a little icon or bullet before each question */
#editProductModal .faq-question::before,
#productModal .faq-question::before {
  content: "";
  margin-right: 4px;
}

/* And a checkmark or dash before each answer */
#editProductModal .faq-answer::before,
#productModal .faq-answer::before {
  content: "";
  margin-right: 4px;
}

/* Make Description label match your main label style */
#editProductModal .product-modal-details label[for="edit-description"]{
display:block;
font-size:1.5em;
margin-top:.25rem;
margin-bottom:4px;
font-family:"brick";
color:white;
text-align:center;
letter-spacing:.5px;
font-weight:normal;
}

.title_price_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: .25rem auto;
}
.title, 
.price {
        justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0em auto;
}
.price {
    margin-top: .5rem;
}

.file-upload-btn{
display:inline-block;
padding:.6em; 
border-radius:999px;
border:1px solid var(--color-border);
background:var(--bg-1);
color:var(--text);
font-family:"loubag";
cursor:pointer;
margin: .25rem !important;
transition:transform .2s ease, filter .2s ease;
}

.file-upload-btn:hover{
transform:translateY(-1px);
filter:brightness(1.08);
}

.file-upload-status{
display:block;
margin-top:.4rem;
color: white;
font-family:"seawashed";
text-align: center;
font-style: italic;
}


#editProductModal .thumb-remove {
position: relative;
top: -110px;
left: 110px;
width:22px;
height:22px;
border-radius:999px;
border:none;
background:rgba(0,0,0,.65);
color:#fff;
font-size:14px;
line-height:1;
display:grid;
place-items:center;
cursor:pointer;
z-index:2;
}

/* =========================
   Summernote LINK modal (force dark)
   Works across BS3/4/5
   ========================= */

/* The modal wrapper Summernote creates */
.note-modal,
.note-modal .modal-dialog,
.note-modal .modal-content,
.note-modal .modal-header,
.note-modal .modal-body,
.note-modal .modal-footer {
  background: #121524 !important;
  color: #fff !important;
  border-color: rgba(98,123,157,.4) !important;
}

/* The actual panel in Bootstrap */
.note-modal .modal-content {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
}

/* Title text */
.note-modal .modal-title,
.note-modal h4,
.note-modal label {
  color: #fff !important;
}

/* Inputs inside the dialog */
.note-modal input,
.note-modal textarea,
.note-modal select {
  background: #0f1220 !important;
  color: #fff !important;
  border: 1px solid rgba(98,123,157,.55) !important;
  border-radius: 10px !important;
}

/* Buttons */
.note-modal .btn,
.note-modal button {
  background: #627b9d !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
}

.note-modal .btn:hover,
.note-modal button:hover {
  background: #4a6fa5 !important;
}

/* Bootstrap backdrop (THIS is usually the missing piece) */
.modal-backdrop,
.modal-backdrop.show {
  background: rgba(10,12,25,.85) !important;
  opacity: 1 !important;
}