/* =========================
   PE Flex Pricing — Frontend (clean)
   Dark glass cards + GPT-5 inspired background INSIDE cards
   ========================= */

/* Layout */
.pefp-container{
  display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start;
  color-scheme:dark;
  --text:#e8edf3; --muted:#a3adba;
  --ring:#ffffff10; --panel:#ffffff0f; --pill:#171b23e6;
}
@media(max-width:900px){ .pefp-container{grid-template-columns:1fr} .pefp-brand{order:1} }

/* ========== Cards (form + brand) ========== */
.pefp-form,
.pefp-brand{
  position:relative; overflow:hidden; padding:16px; border-radius:20px;
  border:1px solid var(--ring);
  box-shadow:0 14px 44px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.03);
  color:var(--text);
}

/* GPT-5 style background INSIDE each card (image + soft color glows) */
.pefp-form::before,
.pefp-brand::before{
  content:""; position:absolute; inset:-18%;
  background:
    radial-gradient(40% 60% at 15% 22%, rgba(99,102,241,.26) 0%, rgba(99,102,241,0) 60%),
    radial-gradient(36% 56% at 84% 22%, rgba(236,72,153,.22) 0%, rgba(236,72,153,0) 60%),
    radial-gradient(70% 70% at 50% 88%, rgba(20,184,166,.18) 0%, rgba(20,184,166,0) 60%),
    /* Lighten the overall background by using a much softer overlay */
    linear-gradient(180deg, rgba(11,15,22,.35), rgba(10,13,19,.48)),
    url("https://sadabco.com/wp-content/uploads/2025/08/back-price.jpg") center/cover no-repeat;
  /* Slightly increase brightness and reduce opacity for a lighter feel */
  filter: blur(22px) saturate(115%) brightness(1.08);
  z-index:-1; opacity:.75;
}
/* gentle inner vignette for readability */
.pefp-form::after,
.pefp-brand::after{
  content:""; position:absolute; inset:0;
  pointer-events:none; z-index:-1;
}

/* Brand panel basics */
.pefp-brand .logo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pefp-brand img{max-width:42px;max-height:42px;border-radius:10px;border:1px solid var(--panel);background:#fff}
.pefp-brand h4{margin:0; color:#ffffff; font-weight:800; letter-spacing:.2px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);}
.pefp-brand .desc,.pefp-count{color:#ffffff; font-size:13px; text-align: justify; text-shadow: 0 1px 2px rgba(0,0,0,0.4); line-height: 1.4;}

/* ========== Dropdown bar (clean, compact) ========== */
.pefp-dropdowns{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  background: transparent; /* remove dark pill background */
  border:none; border-radius:0; padding:0; margin-bottom:14px;
  box-shadow:none;
}
.pefp-field{
  display:flex; align-items:center; gap:10px; padding:4px 0; position:relative; width:100%;
}
.pefp-field > label{ width:120px; text-align:start; color:#ffffff; font-weight:600; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.pefp-field > .pefp-cs{ margin-inline-start:0 }
.pefp-field + .pefp-field{ border-inline-start:0 }
.pefp-field label{ margin:0 6px 0 0; font-size:12px; color:#ffffff; font-weight:600; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* Selects (pill, dark, unobtrusive) */
.pefp-form .pefp-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: linear-gradient(180deg, #ffffff, #bbbbbb) !important;
  color: #000 !important;
  border:1px solid #3b4250 !important; border-radius:100px !important;
  outline:none; font-size:14.5px; height:42px !important; line-height:42px !important;
  padding:0 38px 0 12px; min-width:180px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23cbd5e1" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.pefp-form .pefp-select:hover{ border-color:#4a5161; box-shadow:0 10px 28px rgba(2,6,23,.26), inset 0 1px 0 rgba(255,255,255,.05) }

/* Custom Select (dark dropdown menu) */
.pefp-native-hide{ position:absolute !important; left:-9999px !important; opacity:0 !important; width:1px !important; height:1px !important; }
.pefp-cs{ position:relative; display:inline-flex; align-items:center; width:min(100%, var(--pefp-field-width, 640px)); }
.pefp-cs-trigger{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background: linear-gradient(180deg, #ffffff, #bbbbbb); color:var(--text);
  border:1px solid #3b4250; border-radius:100px; height:42px; padding:0 16px; min-width:180px;
  box-shadow: 0 8px 22px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.04); width:100%;
}
.pefp-cs.open .pefp-cs-trigger{ border-color:#4f67ff; box-shadow:0 0 0 3px #4f67ff44, 0 10px 28px rgba(2,6,23,.26) }
.pefp-cs-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pefp-cs-caret{ width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid #cbd5e1 }

.pefp-cs-menu.pefp-portal{ position:fixed; z-index:999999; background:#bbbbbb; color:#000; border:1px solid rgba(255,255,255,.08); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02); overflow:auto; max-height:50vh; padding:6px; backdrop-filter:saturate(120%) blur(6px);
  overscroll-behavior: contain; scrollbar-gutter: stable; /* avoid page scroll/jumps */
  scrollbar-width: thin; scrollbar-color:#5b6476 rgba(255,255,255,.06); /* Firefox */
}
/* WebKit/Chromium custom scrollbar (scoped) */
.pefp-cs-menu.pefp-portal::-webkit-scrollbar{ width:10px; height:10px }
.pefp-cs-menu.pefp-portal::-webkit-scrollbar-track{ background:#bbbbbb; border-radius:12px }
.pefp-cs-menu.pefp-portal::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ffffff,#bbbbbb);
  border-radius:12px; border:2px solid rgba(24,28,36,.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.pefp-cs-menu.pefp-portal::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#7b85a0,#5f6b88) }
.pefp-cs-menu.pefp-portal::-webkit-scrollbar-thumb:active{ background:linear-gradient(180deg,#8893b0,#6a7696) }
.pefp-cs-list{ list-style:none; margin:0; padding:0 }
.pefp-cs-option{ padding:10px 12px; border-radius:10px; cursor:pointer }
.pefp-cs-option:hover{ background:rgba(255,255,255,.06) }
.pefp-cs-option.is-selected{ background:rgba(99,102,241,.18); border:1px solid rgba(99,102,241,.28) }

/* ========== Result card ========== */
.pefp-result{margin-top:14px}
.pefp-card{
   padding:24px;
}
.pefp-card h3{margin:0 0 8px;font-size:16px;color:#e6ecfb;font-weight:700}
.pefp-badges{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.pefp-badge{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:999px;padding:2px 8px;font-size:12px}
.pefp-price{font-size:26px;font-weight:800}
.pefp-muted{opacity:.9;font-size:12px;color:#aab6c7}

/* Action area under price */
.pefp-actions{ margin-top:14px; display:flex; justify-content:flex-start }
.pefp-actions .pefp-add-to-preinvoice{
  appearance:none; -webkit-appearance:none;
  border:0; border-radius:10px; cursor:pointer;
  background:linear-gradient(135deg,#1E88E5,#1565C0); color:#fff;
  padding:10px 14px; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(30,136,229,.35), 0 2px 6px rgba(0,0,0,.15);
}
.pefp-actions .pefp-add-to-preinvoice:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(30,136,229,.45), 0 4px 10px rgba(0,0,0,.18) }
.pefp-actions .pefp-add-to-preinvoice:active{ transform:translateY(0) }

/* Mobile: make each dropdown a standalone pill */
@media(max-width:900px){
  .pefp-dropdowns{ background:transparent; border:none; padding:0; gap:12px }
  .pefp-field{
    border:none;
    padding:0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .pefp-field > label {
    width: auto;
  }
  .pefp-cs{ width:100% }
  .pefp-form .pefp-select{
    background: linear-gradient(180deg, #ffffff, #bbbbbb);
    color:var(--text);
    border:1px solid #414958; border-radius:9999px; height:64px; line-height:46px;
    min-width:0; width:100%;
  }
}