/* ==========================================================================
   Social Media Marketing & Digital Marketing — Package Page Styles
   Layout: One side image (280px) | One side details
   FIXED: Even images, RTL mobile no scroll
   ========================================================================== */

/* Hero */
.sm-hero {
  padding-block: 44px 40px;
  background: radial-gradient(900px 480px at 82% 12%,rgba(201,168,76,.13),transparent 62%),var(--black);
  border-bottom: 1px solid var(--border);
  overflow-x:hidden;
  max-width:100%;
}
.sm-hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
  max-width:100%;
}
@media (min-width: 900px) {
  .sm-hero-grid {grid-template-columns: 1.1fr .9fr; gap: 48px;}
}
.sm-hero-visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  aspect-ratio: 3/2;
  max-width:100%;
  height:auto;
}
.sm-hero-visual img {width: 100%; height: 100%; object-fit: cover; max-width:100%;}
.sm-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  max-width:100%;
}
@media (min-width: 560px) {.sm-hero-stats {grid-template-columns: repeat(4, 1fr);}}

/* Package Cards - EVEN IMAGES */
.sm-packages{
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:900px;
  width:100%;
  margin-inline:auto;
  box-sizing:border-box;
}
.sm-pkg-card{
  display:grid;
  background:var(--black-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:var(--t);
  position:relative;
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}
.sm-pkg-card:hover{border-color:rgba(201,168,76,.4);transform:translateY(-3px);box-shadow:var(--shadow);}
.sm-pkg-card--featured{border-color:var(--gold);box-shadow:0 0 40px rgba(201,168,76,.15);}

/* Mobile: image top, 16:9 */
.sm-pkg-img{
  width:100%;
  height:200px;
  min-height:200px;
  max-height:200px;
  overflow:hidden;
  background:#101010;
  position:relative;
  flex-shrink:0;
}
.sm-pkg-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .5s ease;
  display:block;
}
.sm-pkg-card:hover .sm-pkg-img img{transform:scale(1.05);}

/* Desktop: EVEN images - fixed 280x280 */
@media(min-width:700px){
  .sm-pkg-card{
    grid-template-columns:280px 1fr;
    min-height:280px;
    max-height:400px;
    height:400px;
    align-items:stretch;
  }
  .sm-pkg-img{
    width:280px;
    height:400px;
    min-height:400px;
    max-height:400px;
    aspect-ratio:auto;
    flex-shrink:0;
  }
  .sm-pkg-img img{
    height:400px;
    width:280px;
    min-height:400px;
    max-height:400px;
    object-fit:cover;
    object-position:center;
  }
  .sm-pkg-body{
    height:400px;
    min-height:400px;
    max-height:400px;
    overflow:hidden;
  }
  .sm-pkg-features{
    overflow:hidden;
  }
  .sm-pkg-features li{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
  }
  .sm-pkg-features li .check{
    display:inline;
  }
}

.sm-pkg-body{
  padding:26px 24px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:break-word;
  word-break:break-word;
}
.sm-pkg-badge{
  position:absolute;
  top:14px;
  right:14px;
  background:rgba(37,211,102,.15);
  color:var(--green);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(37,211,102,.3);
  z-index:1;
  max-width:calc(100% - 28px);
  box-sizing:border-box;
}
.sm-pkg-badge--gold{background:rgba(201,168,76,.15);color:var(--gold-light);border-color:rgba(201,168,76,.4);}
.sm-pkg-badge--green{background:rgba(37,211,102,.15);color:var(--green);border-color:rgba(37,211,102,.3);}
.sm-pkg-badge--purple{background:rgba(147,130,220,.15);color:#b8a9f0;border-color:rgba(147,130,220,.3);}
.sm-pkg-body h3{
  font-size:1.3rem;
  margin-bottom:8px;
  padding-right:100px;
  line-height:1.3;
  color:#fff;
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}
@media(max-width:700px){
  .sm-pkg-body h3{padding-right:0;padding-left:0;margin-top:8px;}
  .sm-pkg-badge{position:static;display:inline-block;margin-bottom:10px;max-width:100%;white-space:normal;}
}
.sm-pkg-price{
  font-size:1.8rem;
  font-weight:800;
  color:var(--gold);
  font-family:var(--ff-head);
  margin-bottom:16px;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  max-width:100%;
}
.sm-pkg-period{font-family:var(--ff);font-size:.85rem;color:var(--text-muted);font-weight:400;text-transform:lowercase;}
.sm-pkg-features{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px;max-width:100%;}
.sm-pkg-features li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text-sub);line-height:1.5;min-width:0;max-width:100%;overflow-wrap:break-word;}
.sm-pkg-features .check{color:var(--green);font-weight:800;flex-shrink:0;font-size:1rem;line-height:1;}
.sm-pkg-how{background:rgba(201,168,76,.06);border:1px solid rgba(201,168,76,.15);border-radius:var(--r-md);padding:14px 16px;margin-bottom:18px;font-size:.85rem;color:var(--text-sub);line-height:1.65;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;}
.sm-pkg-how strong{color:var(--text);display:block;margin-bottom:4px;}
.sm-pkg-how p{margin:4px 0;overflow-wrap:break-word;}
.sm-pkg-how em{color:var(--gold);font-style:normal;font-weight:600;font-size:.83rem;}
.sm-pkg-note{font-size:.85rem;color:var(--text-muted);margin-bottom:16px;line-height:1.6;font-style:italic;padding-inline-start:12px;border-inline-start:2px solid rgba(201,168,76,.35);max-width:100%;box-sizing:border-box;overflow-wrap:break-word;}
.sm-pkg-cta{margin-top:auto;width:100%;max-width:100%;box-sizing:border-box;}

/* Steps */
.sm-steps {display: flex;align-items: flex-start;gap: 16px;max-width: 860px;width:100%;margin-inline: auto;flex-wrap: wrap;justify-content: center;box-sizing:border-box;}
.sm-step {flex: 1;min-width:200px;max-width:260px;width:100%;text-align: center;padding: 28px 20px;background: var(--black-card);border: 1px solid var(--border);border-radius: var(--r-md);transition: var(--t);box-sizing:border-box;min-width:0;overflow-wrap:break-word;}
.sm-step:hover {border-color: rgba(201,168,76,.4);transform: translateY(-3px);}
.sm-step-num {display: block;font-family: var(--ff-head);font-size: 2rem;font-weight: 800;color: var(--gold);margin-bottom: 12px;opacity: .6;}
.sm-step h3 {font-size: 1.05rem;margin-bottom: 8px;padding-right:0;padding-left:0;}
.sm-step p {font-size: .88rem;color: var(--text-sub);line-height: 1.65;overflow-wrap:break-word;}
.sm-step-arrow {color: var(--gold);font-size: 1.8rem;opacity: .5;align-self: center;padding-top: 20px;}
@media (max-width: 700px) {.sm-step-arrow {display: none;}.sm-steps {flex-direction: column;align-items: center;}.sm-step{max-width:100%;}}

/* Table - FIXED */
.sm-table-wrap {overflow-x: auto;overflow-y:hidden;border-radius: var(--r-md);border: 1px solid var(--border);max-width:100%;width:100%;box-sizing:border-box;-webkit-overflow-scrolling:touch;}
.sm-compare-table {width: 100%;border-collapse: collapse;font-size: .9rem;min-width: 580px;}
.sm-compare-table th,.sm-compare-table td {padding: 14px 18px;border: 1px solid var(--border);text-align: start;vertical-align: middle;overflow-wrap:break-word;word-break:break-word;}
.sm-compare-table th {background: var(--black-elev);color: var(--gold);font-weight: 700;font-size: .82rem;text-transform: uppercase;letter-spacing: .06em;}
.sm-compare-table td {color: var(--text-sub);}
.sm-compare-table tbody tr:hover td {background: rgba(201,168,76,.04);}
.sm-compare-table td strong {color: var(--gold);}

/* RTL Support */
html[dir="rtl"], body[dir="rtl"], [dir="rtl"]{overflow-x:hidden;max-width:100vw;}
[dir="rtl"] .sm-packages,[dir="rtl"] .sm-pkg-card,[dir="rtl"] .sm-hero,[dir="rtl"] .sm-hero-grid,[dir="rtl"] .sm-table-wrap,[dir="rtl"] .container{max-width:100%;box-sizing:border-box;}
[dir="rtl"] .sm-pkg-badge {right: auto;left: 14px;}
[dir="rtl"] .sm-pkg-body h3 {padding-right: 0;padding-left: 100px;}
@media (max-width:700px) {[dir="rtl"] .sm-pkg-body h3 {padding-left: 0;padding-right:0;}[dir="rtl"] .sm-pkg-badge {right:auto;left:auto;position:static;}}

@media(max-width:480px){
  .sm-pkg-body{padding:20px 16px 22px;}
  .sm-pkg-body h3{font-size:1.15rem;}
  .sm-pkg-price{font-size:1.5rem;}
  .sm-hero{padding-block:32px 28px;}
  .container{padding-inline:16px;}
  .sm-pkg-img{height:180px;min-height:180px;max-height:180px;}
}