:root{
  --PrimaryColor: #BB3030;
  --SecondaryColor: #1F3A40;
  --PrimaryHover: rgba(255,255,255,0.35);
  --SecondaryHover: rgba(255,255,255,0.35);
  --BackgroundColor: #F7F7F9;
  --c-border: #1F3A40;
  --TextDark: #1F3A40;
  --TextBright: #FFFFFF;
  --hover: #9f1d22 ;
  --CairoFont: 'Noto Sans Arabic', sans-serif;
  --ShadowGray: 0 20px 50px rgba(0,0,0,.18);
}

:root {
  --fw-MainTitle: 400;
  --fw-Subtitle: 400;
  --fw-Buttons: 600;
  --fw-Text: 400;
}

.plan-label {
    text-align: center;
    margin-bottom: 15px;
}

.plan-title {
    font-size: 32px;
    font-weight: 400;
    color: var(--TextDark);
}

.plan-subtitle {
    font-size: 18px;
    color: var(--TextDark);
}

/* Custom Select */
.hp-select{
  position: relative;
  width: 290px;
}

.hp-select__btn{
  width: 100%;
  height: 44px;
  padding: 10px 44px 10px 14px;

  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.15);
  background: var(--BackgroundColor);

  font-size: 14px;
  font-weight: 500;
  color: var(--TextDark);

  box-shadow: 0 6px 18px rgba(2,6,23,.08);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}

.hp-select__btn:hover{
  box-shadow: 0 10px 28px rgba(2,6,23,.12);
}

.hp-select__btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--PrimaryColor);
}

.hp-select__chev{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 18px;
  height: 18px;
  opacity: .7;
}

/* Dropdown */
.hp-select__list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);

  background: var(--BackgroundColor);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 20px 50px rgba(2,6,23,.18);

  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 9999;

  display: none;
}

.hp-select.is-open .hp-select__list{
  display: block;
}

.hp-select__opt{
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
}

.hp-select__opt:hover{
  background: rgba(15,23,42,.06);
}

.hp-select__opt.is-active{
  background: var(--PrimaryColor);
  color: var(--TextBright);
  font-weight: 600;
}

/* ===== Shared Product Grid ===== */
/* Greift auf Homepage + überall dort, wo deine shared-product-grid.tpl eingebunden ist */

#order-pure_comparison #products.price-table-container > ul,
#plans #products.price-table-container > ul,
#products.price-table-container > ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:22px;
  padding:0;
  margin:22px 0 0;
}

#order-pure_comparison #products.price-table-container > ul > li,
#plans #products.price-table-container > ul > li,
#products.price-table-container > ul > li{
  list-style:none;
  margin:0 !important;
  padding:0 !important;
  flex:0 1 320px;
  display:flex;
}

#order-pure_comparison #products.price-table-container > ul > li > .price-table,
#plans #products.price-table-container > ul > li > .price-table,
#products.price-table-container > ul > li > .price-table{
  width:100%;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 28px rgba(2,6,23,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}

#order-pure_comparison .price-table,
#plans .price-table,
#products.price-table-container .price-table{
  width:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(2,6,23,.08);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#order-pure_comparison .price-table:hover,
#plans .price-table:hover,
#products.price-table-container .price-table:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 70px rgba(2,6,23,.14);
  border-color:var(--SecondaryColor);
}

#order-pure_comparison .price-table .top-head,
#plans .price-table .top-head,
#products.price-table-container .price-table .top-head{
  background:#f8fafc !important;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(2,6,23,.08);
}

#order-pure_comparison .price-table .top-area,
#plans .price-table .top-area,
#products.price-table-container .price-table .top-area{
  padding:0 !important;
}

#order-pure_comparison .price-table .top-area h4,
#plans .price-table .top-area h4,
#products.price-table-container .price-table .top-area h4{
  margin:0;
  text-align:center;
  font-size:27px;
  font-weight:600;
  color:var(--SecondaryColor);
  letter-spacing:.2px;
  line-height:1.2;
}

#order-pure_comparison .price-table > ul,
#plans .price-table > ul,
#products.price-table-container .price-table > ul{
  flex:1;
  padding:14px 20px 8px;
  margin:0;
}

#order-pure_comparison .price-table > ul > li,
#plans .price-table > ul > li,
#products.price-table-container .price-table > ul > li{
  list-style:none !important;
  padding:10px 0;
  border-top:1px solid rgba(2,6,23,.06);
  color:var(--SecondaryColor);
  font-size:14px;
  line-height:1.35;
}

#order-pure_comparison .price-table > ul > li:first-child,
#plans .price-table > ul > li:first-child,
#products.price-table-container .price-table > ul > li:first-child{
  border-top:none;
}

#order-pure_comparison .price-table > ul > li:before,
#plans .price-table > ul > li:before,
#products.price-table-container .price-table > ul > li:before{
  content:"✓";
  font-weight:900;
  margin-right:10px;
  color:#16a34a;
}

#order-pure_comparison .price-table .price-area,
#plans .price-table .price-area,
#products.price-table-container .price-table .price-area{
  padding:12px 20px 6px;
  text-align:center;
}

#order-pure_comparison .price-table .price-area .price,
#plans .price-table .price-area .price,
#products.price-table-container .price-table .price-area .price{
  font-size:20px;
  font-weight:900;
  color:var(--SecondaryColor);
  margin:0;
}

#order-pure_comparison .price-table .price-area .price small,
#plans .price-table .price-area .price small,
#products.price-table-container .price-table .price-area .price small{
  font-size:14px;
  font-weight:800;
  color:var(--SecondaryColor);
}

#order-pure_comparison .price-table-container .order-button,
#plans .price-table-container .order-button,
#products.price-table-container .order-button{
  margin:14px 35px 20px !important;
  padding:13px 18px !important;
  border-radius:14px;
  background:var(--PrimaryColor);
  color:var(--BackgroundColor) !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
}

#order-pure_comparison .price-table-container .order-button:hover,
#plans .price-table-container .order-button:hover,
#products.price-table-container .order-button:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
}

#order-pure_comparison .price-table .popular-plan,
#order-pure_comparison .price-table .plan-container,
#order-pure_comparison .price-table .txt-container,
#plans .price-table .popular-plan,
#plans .price-table .plan-container,
#plans .price-table .txt-container,
#products.price-table-container .price-table .popular-plan,
#products.price-table-container .price-table .plan-container,
#products.price-table-container .price-table .txt-container{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}

#order-pure_comparison .price-table .popular-plan,
#plans .price-table .popular-plan,
#products.price-table-container .price-table .popular-plan{
  margin-top:5px;
  width:100%;
  height:35px;
  position:relative;
}

#order-pure_comparison .price-table .popular-plan .plan-container,
#plans .price-table .popular-plan .plan-container,
#products.price-table-container .price-table .popular-plan .plan-container{
  position:absolute;
  height:35px;
  top:0;
  left:-5%;
  width:110%;
  background-size:100% auto;
}

#order-pure_comparison .price-table .popular-plan .plan-container .txt-container,
#plans .price-table .popular-plan .plan-container .txt-container,
#products.price-table-container .price-table .popular-plan .plan-container .txt-container{
  padding:6px 0 0 0;
  height:28px;
  width:100%;
  background:#BB3030;
  color:var(--BackgroundColor);
  font-size:16px;
  font-weight:800;
}

#order-pure_comparison li.plan-pro > .price-table,
#plans li.plan-pro > .price-table,
#products.price-table-container li.plan-pro > .price-table{
  background:#dbeafe;
}

@media (max-width:768px){
  #order-pure_comparison #products.price-table-container > ul > li,
  #plans #products.price-table-container > ul > li,
  #products.price-table-container > ul > li{
    flex-basis:92%;
  }
}

/* Überschrift / Bereichsabstand */
#order-pure_comparison,
#plans{
  margin-top:30px;
}

/* echten select verstecken, wenn er in hp-select liegt */
#order-pure_comparison .hp-select > select#hpBillingCycle,
#plans .hp-select > select#hpBillingCycle,
#products.price-table-container .hp-select > select#hpBillingCycle{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

#order-pure_comparison .billing-switcher,
#plans .billing-switcher,
#products.price-table-container .billing-switcher{
  margin:24px auto 36px;
  max-width:980px;
  width:100%;

  display:grid;
  grid-template-columns: 1fr auto 1fr; /* 🔥 MAGIC */

  align-items:center;

  padding:16px 20px;
  border-radius:16px;

  background: var(--BackgroundColor);
  border: var(--c-border);
  box-shadow: var(--ShadowGray);
}

#order-pure_comparison .billing-switcher label,
#plans .billing-switcher label,
#products.price-table-container .billing-switcher label{
  margin:0;
  font-weight:400;
  font-size:15px;
  color:var(--TextDark);
}
#products.price-table-container .billing-switcher.is-arabic {
  text-align: right;
  direction: rtl;
}
/* Standard Select statt hp-select */
#order-pure_comparison select#billingCycleSelect,
#plans select#billingCycleSelect,
#products.price-table-container select#billingCycleSelect{
  justify-self:center;
  width:290px;
  height:44px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.15);
  background:var(--BackgroundColor);
  font-size:14px;
  font-weight:500;
  color:var(--TextDark);
  box-shadow:0 6px 18px rgba(2,6,23,.08);
  cursor:pointer;
  transition:box-shadow .2s ease, transform .2s ease;
}

#order-pure_comparison select#billingCycleSelect:hover,
#plans select#billingCycleSelect:hover,
#products.price-table-container select#billingCycleSelect:hover{
  box-shadow:0 10px 28px rgba(2,6,23,.12);
}

#order-pure_comparison select#billingCycleSelect:focus,
#plans select#billingCycleSelect:focus,
#products.price-table-container select#billingCycleSelect:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(187,48,48,.22);
}

@media (max-width: 575px){
  #order-pure_comparison .billing-switcher,
  #plans .billing-switcher,
  #products.price-table-container .billing-switcher{
    width:calc(100% - 28px) !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:10px;
  }

  #order-pure_comparison select#billingCycleSelect,
  #plans select#billingCycleSelect,
  #products.price-table-container select#billingCycleSelect{
    width:60%;
    max-width:320px;
  }
}

.monthly-price {
  font-size:28px;
  font-weight:700;
  line-height:1.2;
}

.total-price {
  margin-top:4px;
  font-size:13px;
  opacity:0.8;
  line-height:1.2;
}

.monthly-price .cycle,
.total-price .cycle {
  font-size:12px;
}

/* Optional: Effective monthly Text */
.js-effective-monthly{
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:#64748b;
}