/* =========================================================
   ATHAR 2.0 — Deep Red (Garo Red) + Deep Black Theme
   Removes purple, premium feel, smooth click animations
   ========================================================= */

:root{
  --athar-red:#dc2626;
  --athar-red-deep:#991b1b;
  --athar-red-dark:#7f1d1d;
  --athar-red-glow:rgba(220,38,38,.45);
  --athar-black:#050203;
  --athar-black-2:#0c0607;
  --athar-black-3:#140809;
  --athar-card:#120607;
}

/* Global background & kill purple */
html,body{
  background:#050203 !important;
  color:#f5f5f5 !important;
}
body{
  --purple:#dc2626 !important;
  --violet:#991b1b !important;
}

/* Floating support — full red headset */
.floating-support-wrap{
  right:14px !important;
  bottom:92px !important;
  z-index:99999 !important;
  gap:10px !important;
  animation:atharFloatSoft 3.2s ease-in-out infinite !important;
}
@keyframes atharFloatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.floating-support-wrap .floating-support{
  width:52px !important;height:52px !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#7f1d1d,#dc2626) !important;
  border:1.5px solid rgba(252,165,165,.55) !important;
  box-shadow:0 6px 28px rgba(220,38,38,.55),0 0 22px rgba(127,29,29,.4) !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s !important;
}
.floating-support-wrap .floating-support:active,
.floating-support-wrap .floating-support:hover{
  transform:scale(1.08) !important;
  box-shadow:0 8px 32px rgba(220,38,38,.7),0 0 28px rgba(185,28,28,.5) !important;
}
.floating-support-wrap .floating-support i{
  font-size:24px !important;color:#fff !important;
}
.floating-support-label{
  padding:8px 12px !important;
  border:1px solid rgba(220,38,38,.5) !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,#1a080a,#0c0405) !important;
  color:#fecaca !important;
  font-size:11px !important;font-weight:800 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.4) !important;
}

/* Search Products */
.athar-search-wrap{
  padding:10px 12px 6px;
  margin:0 0 4px;
}
.athar-search-box{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(145deg,#140809,#0a0405);
  border:1.5px solid rgba(220,38,38,.4);
  border-radius:16px;
  padding:11px 14px;
  box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .22s,box-shadow .22s;
}
.athar-search-box:focus-within{
  border-color:rgba(220,38,38,.75);
  box-shadow:0 0 0 3px rgba(220,38,38,.18),0 8px 24px rgba(0,0,0,.45);
}
.athar-search-icon{color:#f87171;font-size:15px;flex-shrink:0}
.athar-search-input{
  flex:1;min-width:0;border:none;outline:none;background:transparent !important;
  color:#fff !important;font-size:14.5px;font-weight:600;
  -webkit-text-fill-color:#fff !important;
}
.athar-search-input::placeholder{color:#a1a1aa;font-weight:500}
.athar-search-clear{
  width:26px;height:26px;border-radius:8px;border:none;
  background:rgba(220,38,38,.25);color:#fecaca;font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.18s;
}
.athar-search-clear:hover{background:rgba(220,38,38,.45);color:#fff}

/* Panel cards / logo cards — red glow on hover */
.logo-card,.panel-card,.logo-grid > *{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s !important;
}
.logo-card:active,.panel-card:active,.logo-grid > *:active{
  transform:scale(.97) !important;
}
.logo-card:hover,.panel-card:hover{
  border-color:rgba(220,38,38,.5) !important;
  box-shadow:0 10px 28px rgba(220,38,38,.18) !important;
}

/* Rules & Condition card — nicer, normal layout, red theme */
.panel-rules-inside{
  margin-top:16px !important;
  padding:16px 14px !important;
  border-radius:18px !important;
  border:1.5px solid rgba(220,38,38,.35) !important;
  background:linear-gradient(160deg,#140809 0%,#0a0405 100%) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.panel-rules-inside .rules-header-row{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.panel-rules-inside .rules-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7f1d1d,#dc2626);
  color:#fff;font-size:16px;
  box-shadow:0 4px 14px rgba(220,38,38,.4);
}
.panel-rules-inside h4{
  margin:0;font-size:14px;font-weight:800;color:#fff;
  letter-spacing:.3px;
}
.panel-rules-inside .rules-header-row span{
  font-size:11px;color:#fca5a5;font-weight:500;
}
.panel-rules-inside .rules-divider{
  height:1px;background:linear-gradient(90deg,transparent,rgba(220,38,38,.4),transparent);
  margin:8px 0 12px;
}
.panel-rules-inside .rules-body{
  font-size:12.5px;line-height:1.55;color:#d4d4d8;
}
.panel-rules-inside .rules-footer{
  margin-top:12px;padding-top:10px;
  border-top:1px solid rgba(220,38,38,.2);
  font-size:11px;color:#a1a1aa;
  display:flex;align-items:center;gap:6px;
}
.panel-rules-inside .rules-footer i{color:#f87171}

/* Quantity selector + system together, premium red */
.quantity-selector{
  display:inline-flex !important;align-items:center;gap:0 !important;
  background:linear-gradient(145deg,#160809,#0a0405) !important;
  border:1.5px solid rgba(220,38,38,.4) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 4px 16px rgba(0,0,0,.3) !important;
  margin:6px 0 10px !important;
}
.quantity-selector .qty-btn{
  width:42px !important;height:40px !important;
  border:none !important;background:transparent !important;
  color:#fecaca !important;font-size:15px !important;
  transition:background .18s,color .18s,transform .15s !important;
  display:flex;align-items:center;justify-content:center;
}
.quantity-selector .qty-btn:hover,
.quantity-selector .qty-btn:active{
  background:rgba(220,38,38,.25) !important;color:#fff !important;
}
.quantity-selector .qty-btn:active{transform:scale(.92)}
.quantity-selector .qty-number{
  width:52px !important;height:40px !important;
  border:none !important;border-left:1px solid rgba(220,38,38,.25) !important;
  border-right:1px solid rgba(220,38,38,.25) !important;
  background:#0c0405 !important;color:#fff !important;
  text-align:center !important;font-weight:800 !important;font-size:15px !important;
  -webkit-text-fill-color:#fff !important;
}
.price-display-box{
  border:1.5px solid rgba(220,38,38,.35) !important;
  background:linear-gradient(145deg,#160809,#0a0405) !important;
  border-radius:14px !important;
  box-shadow:0 4px 18px rgba(0,0,0,.3) !important;
}
.price-display-box .final-price{color:#fecaca !important;font-weight:900}
.qty-badge{
  background:linear-gradient(90deg,#991b1b,#dc2626) !important;
  color:#fff !important;border-radius:999px !important;
  padding:2px 8px !important;font-size:11px !important;font-weight:800;
}

/* Payment Method — more beautiful red system */
.method-selector,#panel-payment-method-selector{
  display:grid !important;gap:10px !important;margin:8px 0 12px !important;
}
.method-btn,.pay-choice-btn,.wallet-pay-btn,.other-pay-btn{
  border:1.5px solid rgba(220,38,38,.3) !important;
  background:linear-gradient(145deg,#140809,#0a0405) !important;
  border-radius:16px !important;
  color:#fff !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s,box-shadow .22s,background .22s !important;
  box-shadow:0 4px 16px rgba(0,0,0,.25) !important;
}
.method-btn:hover,.pay-choice-btn:hover,
.method-btn.selected,.pay-choice-btn.selected,
.wallet-pay-btn.selected,.other-pay-btn.selected{
  border-color:rgba(220,38,38,.75) !important;
  background:linear-gradient(145deg,#1f0a0c,#120607) !important;
  box-shadow:0 8px 24px rgba(220,38,38,.22) !important;
  transform:translateY(-2px) !important;
}
.method-btn:active,.pay-choice-btn:active{transform:scale(.98) !important}
.payment-method-buy-btn,#panel-payment-buy-btn{
  background:linear-gradient(135deg,#991b1b,#dc2626) !important;
  border:none !important;color:#fff !important;
  border-radius:16px !important;
  font-weight:800 !important;
  box-shadow:0 8px 28px rgba(220,38,38,.4) !important;
  transition:transform .2s,box-shadow .2s !important;
}
.payment-method-buy-btn:hover,#panel-payment-buy-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 32px rgba(220,38,38,.5) !important;
}
.payment-method-buy-btn:active{transform:scale(.97) !important}

/* Section tabs red active */
.section-tab.active,.section-tabs .active{
  background:linear-gradient(135deg,#7f1d1d,#dc2626) !important;
  color:#fff !important;
  border-color:rgba(252,165,165,.4) !important;
  box-shadow:0 4px 16px rgba(220,38,38,.35) !important;
}
.section-tab{
  transition:transform .18s,background .18s,box-shadow .18s !important;
}
.section-tab:active{transform:scale(.96)}

/* Bottom nav red accent */
.bottom-nav{
  background:rgba(5,2,3,.98) !important;
  border-top:1px solid rgba(220,38,38,.25) !important;
  box-shadow:0 -8px 30px rgba(0,0,0,.5) !important;
}
.nav-item.active,.nav-item.nav-home.active{
  color:#f87171 !important;
}
.nav-item{
  transition:transform .18s,color .18s !important;
}
.nav-item:active{transform:scale(.92)}

/* Country / dropdowns / popups — kill purple → red */
.athar-country-menu,.pf-country-menu,
.notification-popup .popup-box,
.verifying-popup-box,
.athar-referral-modal-card,
.funds-method-modal-card{
  background:linear-gradient(165deg,#1a080a 0%,#0a0405 100%) !important;
  border:1px solid rgba(220,38,38,.4) !important;
  box-shadow:0 24px 60px rgba(0,0,0,.6) !important;
}
.athar-country-option:hover,.athar-country-option.active,
.pf-country-menu button:hover{
  background:rgba(220,38,38,.22) !important;
  color:#fff !important;
}
.popup-btn,.funds-method-modal-card button.selected{
  background:linear-gradient(135deg,#991b1b,#dc2626) !important;
  color:#fff !important;
}
.athar-country-btn,.pf-country-btn{
  background:linear-gradient(135deg,#1f0a0c,#120607) !important;
  border:1px solid rgba(220,38,38,.45) !important;
  color:#fecaca !important;
}

/* Login / auth shells */
.athar-auth-shell,.login-view,#login-view{
  background:radial-gradient(ellipse at top,#2a0a0c 0%,#0a0405 50%,#000 100%) !important;
}

/* Generic purple → red force overrides */
[style*="168,85,247"],[style*="124,58,237"],[style*="7c3aed"],[style*="a855f7"]{
  /* handled by specific rules */
}
.pro-badge,.badge-pro{
  background:linear-gradient(90deg,#dc2626,#991b1b) !important;
}

/* Smooth premium feel on most interactive elements */
button,.nav-item,.method-card,.method-btn,.pay-choice-btn,
.logo-card,.section-tab,.qty-btn,.payment-method-buy-btn,
.floating-support,.athar-support-option-v4{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button:active,.method-btn:active,.section-tab:active,.logo-card:active{
  transition-duration:.1s !important;
}

/* Hide residual channel if any */
.official-channel-section{display:none !important}

/* Secure trust strip red */
.secure-trust-strip{
  border-color:rgba(220,38,38,.25) !important;
  color:#a1a1aa !important;
}
.secure-trust-strip i{color:#f87171 !important}

/* Price section labels */
.step-label.price-section-btn{
  color:#fecaca !important;
}
.step-label.price-section-btn i{color:#f87171 !important}

/* Wallet confirm / other cards */
.wallet-confirm-box,.athar-wallet-confirm{
  border:1.5px solid rgba(220,38,38,.4) !important;
  background:linear-gradient(165deg,#140809,#0a0405) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 40px rgba(220,38,38,.15) !important;
}
.confirm-btn{
  background:linear-gradient(135deg,#991b1b,#dc2626) !important;
  box-shadow:0 6px 20px rgba(220,38,38,.4) !important;
}

/* AI already has some red overrides — reinforce */
#atharAIAssistantV5 .athar-ai-card-v5{
  border-color:rgba(220,38,38,.45) !important;
  background:linear-gradient(165deg,#0d0607 0%,#160a0b 45%,#080404 100%) !important;
  box-shadow:0 28px 100px rgba(0,0,0,.85),0 0 50px rgba(220,38,38,.2) !important;
}

/* Store main logo: no side outline/shadow (user request) */


/* ========== Payment Method: ONLY Wallet + Add Funds, 1 horizontal row ========== */
#panel-payment-method-selector{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 8px 0 12px !important;
}
#panel-payment-method-selector .method-btn,
#panel-payment-method-selector .pay-choice-btn{
  width: 100% !important;
  min-height: 0 !important;
  padding: 12px 8px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
#panel-payment-method-selector .athar-pay-main-logo,
#panel-payment-method-selector .athar-addfunds-static-icon{
  width: 42px !important;
  height: 42px !important;
  font-size: 20px !important;
}
#panel-payment-method-selector .athar-pay-title{
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
}
#panel-payment-method-selector .athar-pay-sub{
  font-size: 9.5px !important;
  text-align: center !important;
  opacity: .85;
}
#panel-payment-method-selector .athar-auto-verified-badge{
  font-size: 9px !important;
  padding: 2px 6px !important;
}

/* Hide BINANCE + IND UPI completely from panel purchase page */
#panel-payment-method-selector .binance-btn,
#panel-payment-method-selector [data-payment-method="binance"],
#panel-payment-method-selector [data-method="binance"],
#panel-payment-method-selector .brand-binance,
#panel-payment-method-selector .ind-upi-pay-card,
#panel-payment-method-selector [data-payment-method="ind_upi"],
#panel-payment-method-selector [data-method="ind_upi"],
#panel-payment-method-selector .ind-upi-separate-wrap,
.ind-upi-separate-wrap,
#ind-upi-tab,
button.binance-btn.brand-binance,
.panel-page .binance-btn,
.purchase-box .binance-btn,
.purchase-box .ind-upi-pay-card,
.purchase-box [data-method="binance"],
.purchase-box [data-method="ind_upi"],
.purchase-box [data-payment-method="binance"],
.purchase-box [data-payment-method="ind_upi"]{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

/* ========== Official Store Update Popup — Full Red Garo Shadow ========== */
.official-notice-overlay,
.official-notice-overlay.active{
  background: rgba(0,0,0,.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.official-notice-card,
.athar-join-card,
.official-notice-overlay .official-notice-card{
  background: linear-gradient(165deg, #140809 0%, #1a080a 40%, #0a0405 100%) !important;
  border: 1.5px solid rgba(220,38,38,.55) !important;
  border-radius: 26px !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.88),
    0 0 60px rgba(220,38,38,.32),
    0 0 40px rgba(127,29,29,.22),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: #fff !important;
}
.official-notice-logo,
.athar-join-card .official-notice-logo{
  border: 2px solid rgba(220,38,38,.7) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.12), 0 0 32px rgba(220,38,38,.4), 0 8px 24px rgba(0,0,0,.45) !important;
  background: #0c0405 !important;
}
.official-notice-label,
.athar-join-card .official-notice-label{
  border: 1px solid rgba(220,38,38,.55) !important;
  background: rgba(220,38,38,.14) !important;
  color: #fecaca !important;
  box-shadow: 0 0 16px rgba(220,38,38,.2) !important;
}
.official-notice-title,
.athar-join-card .official-notice-title{
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(220,38,38,.2) !important;
}
.official-notice-btn,
.athar-join-main-btn,
.athar-join-card .official-notice-btn{
  background: linear-gradient(90deg, #991b1b, #dc2626) !important;
  box-shadow: 0 10px 28px rgba(220,38,38,.4) !important;
  border: none !important;
  color: #fff !important;
}
.official-notice-close{
  border: 1px solid rgba(220,38,38,.35) !important;
  background: rgba(220,38,38,.12) !important;
  color: #fecaca !important;
}
.athar-join-card .aj-card{
  border-color: rgba(220,38,38,.3) !important;
  background: rgba(255,255,255,.04) !important;
}
/* colored feature chips stay colorful but card itself is red-black */

/* Search ranking: keep existing grid, allow order */
.logo-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.logo-grid .logo-card,
.logo-grid .panel-card,
#grid-all-panels > *,
#grid-safe-location > *{
  transition: opacity .18s, transform .18s;
  min-width: 0 !important;
}
/* Fix empty left gap / overflow */
#home-view .logo-grid,
#grid-all-panels,
#grid-safe-location{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}
.content-wrapper, #home-view, #main-content{
  overflow-x: hidden !important;
}

/* header logo shadow disabled */


/* Panel purchase: never show binance / upi tiles */
#binance-manual-tab,
#ind-upi-direct-tab,
#ind-upi-tab,
.ind-upi-separate-wrap,
.method-btn.binance-manual-pay-btn{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

#panel-payment-method-selector{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* ========== Store Main Logo: NO outline / NO color shadow ========== */
.top-header .header-left img.header-logo-img,
.top-header img.header-logo-img,
img.header-logo-img[data-firebase-brand-logo="1"],
.header-logo-img{
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* ========== Panel Cards: Red outline only + soft normal shadow (no purple, no inner glow) ========== */
.logo-card,
.logo-grid .logo-card,
#grid-all-panels .logo-card,
#grid-safe-location .logo-card,
.logo-grid > .logo-card{
  border: 1.5px solid rgba(220,38,38,.55) !important;
  outline: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
  background: #050505 !important;
}
.logo-card:hover,
.logo-grid .logo-card:hover{
  border-color: rgba(239,68,68,.75) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.5) !important;
  transform: translateY(-2px) !important;
}
/* Logo image: no color glow, no purple outline from CSS */
.logo-card img,
.logo-card > img,
.logo-grid .logo-card img{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 12px !important;
  background: transparent !important;
}
.logo-card:hover img,
.logo-card:hover > img{
  box-shadow: none !important;
  filter: none !important;
}
/* Kill any purple/blue/neon leftover on cards */
.logo-card::before,
.logo-card::after{
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  background: none !important;
}
.logo-card .panel-name-top{
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #e5e5e5 !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.logo-card .panel-name-top .os-icons i{
  color: #f87171 !important;
}
.section-title,
.panel-section-title,
.section-title.panel-section-title{
  border-color: rgba(220,38,38,.45) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  color: #fecaca !important;
  text-shadow: none !important;
}


/* FINAL override — kill purple/blue panel card glow from older CSS */
.logo-card{
  border: 1.5px solid rgba(220,38,38,.55) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
  background: #050505 !important;
}
.logo-card img,
.logo-card > img{
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}
.logo-card .panel-name-top{
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.04) !important;
  color: #e5e5e5 !important;
}

/* ========== Section text WHITE only ========== */
.section-title,
.panel-section-title,
.section-title.panel-section-title,
.section-title span,
.panel-section-title span,
.section-tabs .section-tab,
.section-tab,
.section-extra-tabs .section-tab{
  color: #ffffff !important;
  text-shadow: none !important;
}
.section-tab.active{
  color: #ffffff !important;
}

/* ========== Quantity label + bar one linear row ========== */
.athar-qty-linear-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 8px 0 10px !important;
  width: 100% !important;
}
.athar-qty-linear-row .qty-inline-label,
.athar-qty-linear-row .step-label{
  margin: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.athar-qty-linear-row .quantity-selector{
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* ========== Select Plan Validity — Red outline ========== */
.step-label.price-section-btn{
  color: #fecaca !important;
  border: 1.5px solid rgba(220,38,38,.55) !important;
  background: rgba(127,29,29,.12) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 0 12px rgba(220,38,38,.15) !important;
}
.step-label.price-section-btn i{
  color: #f87171 !important;
}
.flat-price-item{
  border: 1.5px solid rgba(220,38,38,.4) !important;
  background: #0a0405 !important;
}
.flat-price-item:hover,
.flat-price-item.selected{
  border-color: rgba(239,68,68,.75) !important;
  box-shadow: 0 0 16px rgba(220,38,38,.25) !important;
  background: #120607 !important;
}

/* ========== Tutorial video player ========== */
#athar-panel-tutorial-video{
  margin: 12px 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1.5px solid rgba(220,38,38,.35) !important;
  background: #080404 !important;
}
#athar-panel-tutorial-video .apv-title{
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}
#athar-panel-tutorial-video .apv-caption{
  color: #a1a1aa !important;
  font-size: 11px !important;
  margin-top: 8px !important;
}
#athar-panel-tutorial-video .apv-player-wrap video,
#athar-panel-tutorial-video .apv-player-wrap iframe{
  border-radius: 12px !important;
}


/* Quantity label and +/- controls integrated into one compact control */
.quantity-selector.athar-qty-combined{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:7px !important; width:100% !important; max-width:100% !important;
  box-sizing:border-box !important; padding:7px 9px !important; margin:8px 0 10px !important;
  border:1.5px solid rgba(220,38,38,.58) !important; border-radius:13px !important;
  background:linear-gradient(135deg,rgba(127,29,29,.22),rgba(12,12,12,.96)) !important;
  box-shadow:0 0 13px rgba(220,38,38,.12) !important;
}
.quantity-selector.athar-qty-combined .qty-title{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  color:#fecaca !important; font-size:13px !important; font-weight:800 !important;
  white-space:nowrap !important; margin-right:auto !important;
}
.quantity-selector.athar-qty-combined .qty-title i{color:#f87171 !important}
.quantity-selector.athar-qty-combined .qty-btn{
  flex:0 0 34px !important; width:34px !important; height:34px !important;
  min-width:34px !important; border-radius:9px !important;
}
.quantity-selector.athar-qty-combined .qty-number{
  flex:0 1 42px !important; width:42px !important; min-width:32px !important;
  max-width:48px !important; text-align:center !important; font-size:16px !important;
  background:transparent !important; color:#fff !important; border:0 !important;
}
@media(max-width:360px){
 .quantity-selector.athar-qty-combined{gap:5px !important;padding:6px 7px !important}
 .quantity-selector.athar-qty-combined .qty-title{font-size:12px !important}
 .quantity-selector.athar-qty-combined .qty-btn{flex-basis:30px !important;width:30px !important;min-width:30px !important;height:31px !important}
}