/* Packages & Request Form — SaaS Components */

/* Packages Section */
.sec-packages{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(35,85,212,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, #f7f9ff 100%);
  position:relative;overflow:hidden;
}
.sec-packages::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(35,85,212,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,85,212,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.4), transparent 90%);
  pointer-events:none;
}
.pkg-wrap{max-width:1140px;margin:0 auto;position:relative;z-index:1}
.pkg-group{margin-bottom:3rem}
.pkg-group:last-child{margin-bottom:0}
.pkg-group-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:1.25rem;padding-bottom:0.75rem;
  border-bottom:1px solid rgba(35,85,212,0.1);
}
.pkg-group-head h3{font-size:1rem;font-weight:700;color:var(--navy)}
.pkg-group-head span{font-size:13px;color:var(--text3)}
.pkg-grid{
  display:grid;gap:14px;
}
.pkg-grid-standard{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
.pkg-grid-premium{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}

.pkg-card{
  position:relative;background:var(--glass);
  backdrop-filter:blur(12px);
  border:1.5px solid rgba(35,85,212,0.12);
  border-radius:var(--radius-md);
  padding:1.25rem 1rem;text-align:center;
  cursor:pointer;overflow:hidden;
  transition:all 0.4s var(--ease-out);
  box-shadow:var(--shadow);
}
.pkg-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.5),transparent 60%);
  opacity:0;transition:opacity 0.35s;
}
.pkg-card::after{
  content:'';position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0.45),transparent);
  transform:translateX(-120%) skewX(-12deg);
  transition:none;
}
.pkg-card:hover::after{animation:light-sweep 0.8s ease}
.pkg-card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:var(--shadow-h);
  border-color:rgba(35,85,212,0.3);
}
.pkg-card:hover::before{opacity:1}
.pkg-card.selected{
  border-color:var(--orange);
  background:linear-gradient(145deg,#fff4ed,#fff);
  box-shadow:0 8px 32px rgba(249,115,22,0.2), inset 0 0 0 1px rgba(249,115,22,0.15);
  transform:translateY(-4px);
}
.pkg-card.selected .pkg-check{opacity:1;transform:scale(1)}
.pkg-check{
  position:absolute;top:10px;left:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--orange);color:#fff;
  font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(0.5);
  transition:all 0.3s var(--ease-out);
}
.pkg-users{
  font-size:1.75rem;font-weight:900;color:var(--navy);
  line-height:1;margin-bottom:4px;
  font-variant-numeric:tabular-nums;
}
.pkg-label{font-size:12px;color:var(--text3);font-weight:600}
.pkg-tier{
  font-size:13px;font-weight:700;color:var(--navy);
  margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px dashed rgba(35,85,212,0.15);
}
.pkg-card.pkg-bronze{border-top:3px solid #cd7f32}
.pkg-card.pkg-silver{border-top:3px solid #a8a9ad}
.pkg-card.pkg-gold{border-top:3px solid #d4af37}
.pkg-card.pkg-diamond{border-top:3px solid #7dd3fc}
.pkg-card.pkg-bronze .pkg-tier{color:#92400e}
.pkg-card.pkg-silver .pkg-tier{color:#475569}
.pkg-card.pkg-gold .pkg-tier{color:#a16207}
.pkg-card.pkg-diamond .pkg-tier{color:#0369a1}
.pkg-card.pkg-bronze:hover{box-shadow:0 16px 40px rgba(205,127,50,0.15)}
.pkg-card.pkg-silver:hover{box-shadow:0 16px 40px rgba(148,163,184,0.2)}
.pkg-card.pkg-gold:hover{box-shadow:0 16px 40px rgba(212,175,55,0.2)}
.pkg-card.pkg-diamond:hover{box-shadow:0 16px 40px rgba(56,189,248,0.2)}
.pkg-extra .pkg-users{font-size:1.3rem}

/* Most-popular ribbon */
.pkg-card.pkg-popular{
  border-top-width:3px;
  box-shadow:0 14px 38px rgba(212,175,55,0.28);
  transform:translateY(-6px);
}
.pkg-card.pkg-popular::before{opacity:1}
.pkg-ribbon{
  position:absolute;top:12px;right:-34px;
  background:linear-gradient(135deg,#d4af37,#f0c040);
  color:#3a2a00;font-size:10.5px;font-weight:900;
  padding:5px 38px;transform:rotate(45deg);
  box-shadow:0 4px 12px rgba(212,175,55,0.45);
  letter-spacing:0.3px;z-index:2;white-space:nowrap;
}
.pkg-card.pkg-popular .pkg-tier{padding-top:6px}

/* Most-popular badge for small standard cards */
.pkg-card.pkg-popular-sm{
  border-color:rgba(212,175,55,0.55);
  border-top:2.5px solid #d4af37;
  padding-top:1.9rem;
  box-shadow:0 10px 26px rgba(212,175,55,0.2);
}
.pkg-card.pkg-popular-sm:hover{
  border-color:rgba(212,175,55,0.85);
  box-shadow:0 16px 36px rgba(212,175,55,0.32);
}
.pkg-badge{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#d4af37,#f0c040);
  color:#3a2a00;font-size:9.5px;font-weight:900;
  padding:3px 14px;border-radius:0 0 8px 8px;
  letter-spacing:0.2px;z-index:2;white-space:nowrap;
  box-shadow:0 3px 8px rgba(212,175,55,0.4);
}
.pkg-badge::before{content:'\2b50';margin-inline-end:3px}
.pkg-card.pkg-popular-sm .pkg-users{color:var(--navy)}

.pkg-cta-wrap{text-align:center;margin-top:2.5rem}
.pkg-cta-note{font-size:13.5px;color:var(--text2);margin-top:12px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7}

/* Request Form Section */
.sec-request{
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(249,115,22,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(35,85,212,0.07) 0%, transparent 50%),
    var(--bg);
  position:relative;
}
.request-layout{
  max-width:760px;margin:0 auto;
  position:relative;z-index:1;
}
.request-form{
  padding:2.5rem;border-radius:var(--radius-lg);
  position:relative;overflow:hidden;
}
.request-form::before{
  content:'';position:absolute;top:-50%;right:-30%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(35,85,212,0.08),transparent 70%);
  animation:glow-pulse 6s ease-in-out infinite;
  pointer-events:none;
}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  position:relative;z-index:1;
}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-group label{
  font-size:13px;font-weight:700;color:var(--navy);
  display:flex;align-items:center;gap:4px;
}
.form-group label .req{color:var(--orange);font-size:11px}
.form-group input,
.form-group select,
.form-group textarea{
  font-family:'Cairo',sans-serif;
  font-size:14px;padding:12px 14px;
  border:1.5px solid rgba(35,85,212,0.15);
  border-radius:12px;background:rgba(255,255,255,0.85);
  color:var(--text);transition:all 0.25s var(--ease-out);
  outline:none;width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(35,85,212,0.1);
  background:#fff;
}
.form-group textarea{min-height:100px;resize:vertical}
.form-group input.field-error,
.form-group select.field-error,
.form-group textarea.field-error{
  border-color:#e11d48;
  box-shadow:0 0 0 4px rgba(225,29,72,0.1);
  background:#fff5f7;
}
.form-actions{
  grid-column:1/-1;display:flex;
  flex-direction:column;align-items:center;
  gap:10px;margin-top:8px;
}
.btn-submit{
  width:100%;max-width:360px;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;border:none;padding:15px 28px;
  border-radius:14px;font-family:'Cairo',sans-serif;
  font-size:15px;font-weight:700;cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(35,85,212,0.3);
  transition:all 0.35s var(--ease-out);
}
.btn-submit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:translateX(-100%);
}
.btn-submit:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(35,85,212,0.35);
}
.btn-submit:hover::before{animation:light-sweep 0.7s ease}
.form-note{font-size:12px;color:var(--text3);text-align:center}

/* Toast */
.toast{
  position:fixed;bottom:90px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;
  padding:14px 24px;border-radius:14px;
  font-size:14px;font-weight:600;
  box-shadow:0 12px 40px rgba(26,58,143,0.35);
  z-index:10001;opacity:0;pointer-events:none;
  transition:all 0.4s var(--ease-out);
  max-width:90%;text-align:center;
}
.toast.show{
  opacity:1;transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

@media(max-width:700px){
  .form-grid{grid-template-columns:1fr}
  .pkg-grid-standard{grid-template-columns:repeat(2, 1fr)}
  .request-form{padding:1.5rem}
}