/* ===== One-column layout ===== */
:root{
  --brand-primary:#0e4363;     /* dark blue (headers, picked head) */
  --brand-accent:#263988;      /* buttons/tiles accent (plus/active) */
  --brand-bg:#ffffff;
  --brand-soft:#f5f8fb;
  --brand-border:#e6edf5;
  --text:#111827;
  --muted:#6b7280;
  --danger:#ef4444;
  --danger-hover:#dc2626;
  --radius:16px;
}

.dgr-pc{display:flex;flex-direction:column;gap:24px;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"IBM Plex Sans Arabic","Cairo",sans-serif}
.dgr-pc.ltr{direction:ltr}

.dgr-pc__header{margin-bottom:-6px}
.pc-title{margin:0 0 6px;font-size:28px;font-weight:700}
.pc-note{margin:0;color:var(--muted);font-size:14px}

/* === Category tiles === */
.dgr-pc__cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:10px 0}
@media (max-width:1200px){.dgr-pc__cats{grid-template-columns:repeat(4,1fr)}}
@media (max-width:700px){.dgr-pc__cats{grid-template-columns:repeat(2,1fr)}}

.pc-tile{background:var(--brand-bg);border:1px solid var(--brand-border);border-radius:18px;padding:18px 14px;text-align:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.03);display:flex;flex-direction:column;gap:8px;align-items:center;transition:.15s ease}
.pc-tile:hover{transform:translateY(-1px)}
.pc-tile .icon{font-size:36px;}
.pc-tile .label{font-weight:700}
.pc-tile.active{outline:3px solid var(--brand-accent)}

.pc-tile .icon svg {
    width: 40px;
    height: 40px;
}

.pc-tile { color:#fff; } 
.pc-tile:hover { color: var(--text); }

.pc-tile .icon svg,
.pc-tile .icon svg * {
  stroke: currentColor !important;
}


/* === Services: full-width vertical list === */
.dgr-pc__services{background:var(--brand-bg);border:1px solid var(--brand-border);border-radius:var(--radius);padding:16px}
.pc-section-title{font-weight:700;margin-bottom:10px}
.dgr-pc__grid{display:grid;grid-template-columns:1fr;gap:14px} /* SINGLE COLUMN */

.dgr-card{display:flex;align-items:center;gap:14px;border:1px solid var(--brand-border);background:var(--brand-bg);border-radius:8px;padding:10px 12px;box-shadow:0 2px 4px rgba(0,0,0,.03)}
.dgr-card__title{font-weight:700}
.dgr-card__unit{color:var(--muted);font-size:12px;margin-left:auto;margin-right:8px}
.dgr-card__price{font-weight:700}

.dgr-qty{display:flex;align-items:center;background:var(--brand-soft);border-radius:12px;overflow:hidden;padding:5px 10px!important}
.dgr-qty button{border:0;width:40px;height:40px;font-weight:900;background:var(--brand-accent);color:#fff;cursor:pointer}
.dgr-qty .minus{background:#0aa39c}
.dgr-qty input{width:56px;height:40px;border:0;background:transparent;text-align:center;font-weight:600}

/* === Summary (right column stacked) === */
.dgr-pc__summary{display:flex;flex-direction:column;gap:12px}
.dgr-pc__picked{background:var(--brand-bg);border:1px solid var(--brand-border);border-radius:16px;padding:12px}
.dgr-pc__picked-head{background:var(--brand-primary);color:#fff;padding:12px;border-radius:12px;margin-bottom:8px}
.dgr-pc__picked-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}

.dgr-picked{display:grid;grid-template-columns:1fr 140px 110px 40px;gap:8px;align-items:center;background:var(--brand-soft);border:1px solid var(--brand-border);border-radius:12px;padding:8px 10px}
.dgr-picked .remove{width:36px;height:36px;border-radius:10px;border:0;background:var(--danger);color:#fff;cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.dgr-picked .remove:hover{background:var(--danger-hover)}

.dgr-pc__totals{display:flex;flex-direction:column;gap:8px}
.dgr-row{display:flex;justify-content:space-between;align-items:center;background:var(--brand-bg);border:1px solid var(--brand-border);border-radius:12px;padding:12px;font-weight:700}

/* Grand total bar */
.dgr-pc__grand{
  display:flex;align-items:center;justify-content:space-between;
  background:#FFC925;border-radius:14px;padding:14px 16px;font-weight:700
}

/* Currency icon + alignment */
.dgr-pc .money{display:inline-flex;align-items:center;gap:6px;line-height:1}
.dgr-pc .money .amount{display:inline-block}
.dgr-pc .sar-icon{width:16px!important;height:16px!important;object-fit:contain;vertical-align:-2px;display:inline-block}

.dgr-card__price,
.dgr-picked b,
.dgr-row b,
.dgr-pc__grand .js-grand{display:inline-flex;align-items:center;gap:6px}

/* Hide number input spinners */
.dgr-pc input.qty::-webkit-outer-spin-button,
.dgr-pc input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dgr-pc input.qty[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* ==== Packages cards (spacious layout) ==== */
.dgr-pc__packages{
  background:var(--brand-bg);
  border:1px solid var(--brand-border);
  border-radius:var(--radius);
  padding:24px;
}

.pkg-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap:24px;
  justify-items:center;
}
@media (max-width:1100px){
  .pkg-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width:700px){
  .pkg-grid{ grid-template-columns: 1fr; }
}

.pkg-card{
  position:relative;
  width:100%;
  max-width:360px;
  background:#fff;
  border:1px solid var(--brand-border);
  border-radius:24px;    
  padding:28px 22px 24px;        
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  text-align:center;
}
.pkg-card.is-featured{
  background:var(--brand-accent);
  color:#fff;
}

.pkg-card .pkg-badge{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-18px;                          
  background:#f9c73c; color:#000; font-weight:700;
  padding:10px 16px;                  
  border-radius:14px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.pkg-card .pkg-title{ font-size:20px; font-weight:700; margin-top:14px; }
.pkg-card .pkg-visits{ color:var(--muted); margin:8px 0 14px; }
.pkg-card.is-featured .pkg-visits{ color:rgba(255,255,255,.85); }

.pkg-services{
  list-style:none; margin: 22px 0 18px; padding:0;
  display:flex; flex-direction:column; gap:10px;
  width:100%;
}
.pkg-services li{
  padding-bottom:10px;
  border-bottom:1px dashed var(--brand-border);
}
.pkg-card.is-featured .pkg-services li{ border-color:rgba(255,255,255,.28); }
.pkg-services li:last-child{ border-bottom:none; padding-bottom:0; }

.pkg-price{ display:flex; flex-direction:column; gap:6px; align-items:center;margin-top: 28px; }
.pkg-price .label{ font-weight:700; opacity:.85; }
.pkg-price .value{ font-size:24px; font-weight:900; }
.pkg-card.is-featured .pkg-price .value{ color:#fff; }

.pac-section-title,
.dgr-pc__packages .pc-section-title{
  text-align:center;
  font-size:22px;
  margin-bottom:38px;
}

.pc-placeholder {
  text-align: center;
  color: #999;
  font-size: 15px;
  margin: 25px 0;
}

.dgr-qtybar{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  order: 4;
}


@media (max-width: 768px) {
  /* بطاقة الخدمة على شكل Grid لسهولة توزيع العناصر */
  .dgr-card {
    display: grid;
    grid-template-columns: 1fr auto;   /* يسار (السعر/النص) | يمين (العداد) */
    grid-auto-rows: min-content;
    align-items: center;
    gap: 8px 12px;
    text-align: start;
    padding: 14px;
  }

  /* الصف الأول: السعر يسار */
  .dgr-card__price {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    font-size: 18px;
    font-weight: 700;
  }

  /* الصف الأول: العداد يمين داخل ديف جامع */
  .dgr-qtybar {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  /* الصف الثاني: العنوان بعرض كامل */
  .dgr-card__title {
    grid-column: 1 / 3;
    grid-row: 1;
    font-size: 16px;
    font-weight: 700;
  }

  /* الصف الثالث: الوحدة بعرض كامل */
  .dgr-card__unit {
    grid-column: 1 / 3;
    grid-row: 3;
    font-size: 13px;
    color: var(--muted);
    margin: 0;
  }

  /* ستايل مجموعة العداد */
  .dgr-qty {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #f5f8fb;
    border-radius: 12px;
    overflow: hidden;
    padding: 4px;
    width: auto; /* لا تثبتها 20% حتى لا تصغر */
  }

  .dgr-qty button {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
    background: var(--brand-accent);
    color: #fff;
    border: 0;
  }

  .dgr-qtybar .minus,
  .dgr-qtybar .plus {
    width: 40px;
  }

  .dgr-qty input {
    width: 64px;
    height: 40px;
    text-align: center;
    border: 0;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
  }

  /* لائحة المختارات تبقى كما هي لديك */
  .dgr-picked {
    grid-template-columns: 1fr 80px 70px 50px;
  }

  /* دعم RTL: السعر يمين والعداد يسار تلقائياً */
  [dir="rtl"] .dgr-card__price { justify-self: end; }
  [dir="rtl"] .dgr-qtybar     { justify-self: start; }
}