/* =========================================================
   PAHO – PMX Unified Styles v3.0 (Blocksy Safe)
   Scope: mostly .pmx-article to avoid breaking theme
   ========================================================= */

/* ========== Tokens ========== */
:root{
  --paho-primary:#8b5cf6;
  --paho-primary-dark:#6d28d9;
  --paho-bg-light:#f9fafb;
  --paho-text:#334155;
  --paho-shadow:0 8px 25px rgba(0,0,0,.08);
  --paho-radius:.875rem;
  --paho-transition:all .3s cubic-bezier(.4,0,.2,1);
  --primary-gold:#b99579;

  /* Helpers */
  --txt:var(--paho-text);
  --bg:var(--paho-bg-light);
  --card:#fff;
  --bd:#e2e8f0;
  --sh:var(--paho-shadow);
  --sh-hover:0 16px 40px rgba(139,92,246,.15);
  --grad-primary:linear-gradient(120deg,var(--paho-primary),var(--paho-primary-dark));
  --grad-gold:linear-gradient(90deg,var(--primary-gold),#e0c8af);

  /* Typography */
  --font-family:'Vazirmatn',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-fa:'IRANSans',var(--font-family),system-ui,sans-serif;

  /* Article spacing */
  --pmx-pad:1.75rem;
  --pmx-max:1200px;
}

/* ========== Fonts (swap) ========== */
@font-face{
  font-family:'IRANSans';
  src:url('/wp-content/themes/blocksy-child/assets/fonts/woff2/IRANSansWeb.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSans';
  src:url('/wp-content/themes/blocksy-child/assets/fonts/woff2/IRANSansWeb_Light.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSans';
  src:url('/wp-content/themes/blocksy-child/assets/fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSans';
  src:url('/wp-content/themes/blocksy-child/assets/fonts/woff2/IRANSansWeb_Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   PMX ARTICLE (Core)
   ========================================================= */
.pmx-article{
  direction:rtl;
  text-align:right;
  font-family:var(--font-fa);
  background:var(--bg);
  color:var(--txt);
  padding:var(--pmx-pad);
  line-height:1.85;
  max-width:var(--pmx-max);
  margin:0 auto;
  border-radius:var(--paho-radius);
  box-shadow:var(--sh);
  isolation:isolate;

  /* perf */
  content-visibility:auto;
  contain-intrinsic-size:1px 1000px;
}

/* box sizing only for PMX area */
.pmx-article, .pmx-article *{ box-sizing:border-box; }

/* typography */
.pmx-article p,
.pmx-article li{
  text-align:justify;
  margin:0 0 1rem;
  color:var(--txt);
}
.pmx-article ul,
.pmx-article ol{
  padding-inline-start:1.25rem;
  margin:0 0 1rem;
}
.pmx-article ul{ list-style:disc; }
.pmx-article ul li::before{ content:none !important; }
.pmx-article ul li{ padding-inline-start:0 !important; }

/* IMPORTANT: override any global red links just inside pmx */
.pmx-article a{
  color:#2563eb !important;
  text-decoration:none !important;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.pmx-article a:hover{
  color:#1d4ed8 !important;
  text-decoration:underline !important;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

/* headings */
.pmx-article h1,
.pmx-article h2,
.pmx-article h3{
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:center;
  font-weight:800;
  margin:2rem 0 1.25rem;
  position:relative;
  scroll-margin-top:90px;
}
.pmx-article h1::after,
.pmx-article h2::after,
.pmx-article h3::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:3px;
  background:var(--grad-primary);
  border-radius:2px;
}

/* =========================================================
   Breadcrumb
   ========================================================= */
.pmx-breadcrumb{ margin:8px 0; }
.pmx-breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
  color:#64748b;
  list-style:none;
  padding:0;
  margin:0;
}
.pmx-breadcrumb a{ color:#2563eb !important; text-decoration:none !important; }
.pmx-breadcrumb a:hover{ text-decoration:underline !important; }

/* =========================================================
   Standard Blocks (Hero / TOC / Note / Warning)
   ========================================================= */
.pmx-hero{ margin:10px 0 20px; }
.pmx-updated{ font-size:13px; color:#64748b; margin-top:6px; }
.pmx-muted{ color:#64748b; }

.pmx-block{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:calc(var(--paho-radius) + 4px);
  padding:16px;
  margin:18px 0;
  box-shadow:0 8px 25px rgba(15,23,42,.06);
}
.pmx-takeaways{ background:#f8fafc; border-inline-start:6px solid var(--paho-primary); }
.pmx-toc{ background:#fff7ed; border-inline-start:6px solid #f59e0b; }
.pmx-note{
  background:#ecfdf5;
  border-inline-start:6px solid #10b981;
  padding:14px;
  border-radius:12px;
  line-height:1.9;
}
.pmx-warning{
  background:#fff1f2;
  border-inline-start:6px solid #e11d48;
  padding:14px;
  border-radius:12px;
  line-height:1.9;
}

/* =========================================================
   PMX CTA Buttons (Scoped)
   - grid + responsive + 6-color cycle
   ========================================================= */
.pmx-article .pmx-cta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin:16px 0 24px;
}
.pmx-article .pmx-cta a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  line-height:1.35;
  min-height:54px;
  width:100%;
  text-decoration:none !important;
  border:1px solid transparent;
  box-shadow:0 10px 22px rgba(15,23,42,.10);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pmx-article .pmx-cta a:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(15,23,42,.14);
  filter:saturate(1.2) contrast(1.06);
}

/* 6-color cycle */
.pmx-article .pmx-cta a:nth-child(6n+1){background:linear-gradient(135deg,#e0f2fe 0%, #dbeafe 45%, #bfdbfe 100%); color:#1d4ed8 !important; border-color:#60a5fa;}
.pmx-article .pmx-cta a:nth-child(6n+2){background:linear-gradient(135deg,#ede9fe 0%, #e9d5ff 50%, #ddd6fe 100%); color:#6d28d9 !important; border-color:#a78bfa;}
.pmx-article .pmx-cta a:nth-child(6n+3){background:linear-gradient(135deg,#dcfce7 0%, #d1fae5 55%, #bbf7d0 100%); color:#047857 !important; border-color:#34d399;}
.pmx-article .pmx-cta a:nth-child(6n+4){background:linear-gradient(135deg,#ffedd5 0%, #fde68a 55%, #fcd34d 100%); color:#b45309 !important; border-color:#f59e0b;}
.pmx-article .pmx-cta a:nth-child(6n+5){background:linear-gradient(135deg,#ffe4e6 0%, #fecdd3 55%, #fda4af 100%); color:#be123c !important; border-color:#fb7185;}
.pmx-article .pmx-cta a:nth-child(6n+6){background:linear-gradient(135deg,#cffafe 0%, #bae6fd 55%, #a5f3fc 100%); color:#0e7490 !important; border-color:#22d3ee;}

@media (max-width: 820px){
  .pmx-article .pmx-cta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pmx-article .pmx-cta a:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:min(420px, 100%);
  }
}
@media (max-width: 380px){
  .pmx-article .pmx-cta{ grid-template-columns:1fr; }
  .pmx-article .pmx-cta a:last-child:nth-child(odd){ width:100%; }
}

/* =========================================================
   Cards (Artist / Salon)
   ========================================================= */
.artist-card,
.salon-card{
  background:var(--card);
  border-radius:var(--paho-radius);
  padding:1.5rem;
  margin:1.5rem 0;
  box-shadow:var(--sh);
  border-inline-start:4px solid var(--paho-primary);
  transition:var(--paho-transition);
  position:relative;
  overflow:hidden;
}
.artist-card::before,
.salon-card::before{
  content:'';
  position:absolute;
  inset-inline-end:0;
  top:0;
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(139,92,246,.08), transparent);
  transform:translate(40%,-40%);
}
.artist-card:hover,
.salon-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-hover);
  border-inline-start-color:var(--paho-primary-dark);
}

/* inside-card headings: align start */
.artist-card h3,
.salon-card h3{
  margin-top:0;
  font-size:1.25rem;
  font-weight:900;
  background:var(--grad-primary);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-align:start;
  position:relative;
  padding-bottom:.5rem;
}
.artist-card h3::after,
.salon-card h3::after{
  content:'';
  position:absolute;
  bottom:0;
  inset-inline-start:0;
  width:52px;
  height:3px;
  background:var(--grad-primary);
  border-radius:2px;
}

/* =========================================================
   Tables (Responsive)
   ========================================================= */
.pmx-article .table-wrapper{
  overflow-x:auto;
  margin:2rem 0;
  border-radius:var(--paho-radius);
  box-shadow:var(--sh);
  -webkit-overflow-scrolling:touch;
}
.pmx-article table{
  width:100%;
  min-width:600px;
  border-collapse:collapse;
  background:var(--card);
  margin:0;
}
.pmx-article th{
  background:var(--grad-primary);
  color:#fff;
  padding:1rem;
  text-align:center;
  font-weight:800;
  white-space:nowrap;
}
.pmx-article td{
  padding:.9rem;
  text-align:center;
  border-bottom:1px solid var(--bd);
  white-space:nowrap;
}
.pmx-article tr:hover td{ background:#f9f5ff; }

@media (max-width:768px){
  .pmx-article .table-wrapper{
    margin:1.5rem -1rem;
    padding:0 1rem;
    border-radius:0;
    box-shadow:none;
  }
  .pmx-article table{ font-size:.9rem; }
  .pmx-article th,
  .pmx-article td{ padding:.75rem .5rem; }
}

/* =========================================================
   Images & Video (No 850px forced heights!)
   ========================================================= */
.pmx-article .wp-block-image,
.pmx-article .wp-block-video{
  border-radius:var(--paho-radius) !important;
  overflow:hidden !important;
  margin:1.5rem 0 !important;
  box-shadow:var(--sh) !important;
  max-width:100% !important;
  position:relative;
}

.pmx-article .wp-block-image img,
.pmx-article .wp-block-video video{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius:var(--paho-radius) !important;
  transition:var(--paho-transition);
  pointer-events:auto !important;
}

/* Desktop media container sizing (your fix, cleaned) */
@media (min-width:769px){
  .pmx-article figure.wp-block-image,
  .pmx-article figure.wp-block-video{
    max-width:min(900px, 100%);
    margin-inline:auto !important;
  }

  .pmx-article .wp-block-image img{
    max-height:min(70vh, 620px) !important;
    object-fit:contain !important;
    background:#fff;
  }

  .pmx-article .wp-block-video video{
    max-height:min(70vh, 620px) !important;
    object-fit:contain !important;
  }

  .pmx-article .wp-block-image.is-resized img{
    width:100% !important;
    height:auto !important;
  }
}
@media (min-width:1200px){
  .pmx-article figure.wp-block-image,
  .pmx-article figure.wp-block-video{
    max-width:860px;
  }
}

/* =========================================================
   Portfolio Grid
   ========================================================= */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:16px;
}
.portfolio-grid img,
.portfolio-grid video{
  width:100% !important;
  aspect-ratio: 1 / 1;
  height:auto !important;
  object-fit:cover;
  border-radius:var(--paho-radius);
  background:#f8f8f8;
  transition:transform .3s ease;
}
.portfolio-grid img:hover,
.portfolio-grid video:hover{ transform:scale(1.03); }

@media (max-width:1024px){ .portfolio-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .portfolio-grid{ grid-template-columns:1fr;} }

/* =========================================================
   Map
   ========================================================= */
.map-container{
  margin:15px 0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  max-width:100%;
}
.map-container iframe{
  width:100%;
  height:240px;
  border:0;
}
@media (max-width:768px){
  .map-container iframe{ height:180px; }
}

/* =========================================================
   Accordion (details/summary)
   ========================================================= */
.accordion-container{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  margin:2rem 0;
}
.accordion-item{
  border-radius:var(--paho-radius);
  background:var(--card);
  box-shadow:var(--sh);
  overflow:hidden;
  transition:var(--paho-transition);
}
.accordion-header{
  cursor:pointer;
  background:var(--grad-primary);
  color:#fff;
  font-weight:900;
  font-size:1.02rem;
  padding:1.1rem 1.4rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  user-select:none;
}
.accordion-header::after{
  content:"▾";
  font-size:1.3rem;
  transition:transform .3s ease;
}
details.accordion-item[open] .accordion-header::after{ transform:rotate(180deg); }
.accordion-content{
  padding:1.2rem 1.4rem;
  border-top:1px solid #e0e7ff;
  animation: fadeSlide .35s ease;
}
@keyframes fadeSlide{
  from{opacity:0; transform:translateY(-10px);}
  to{opacity:1; transform:translateY(0);}
}

/* =========================================================
   WP Button (CTA)
   ========================================================= */
.pmx-article .wp-block-button{
  text-align:center;
  margin:2rem auto;
}
.pmx-article .wp-block-button .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--grad-primary);
  color:#fff !important;
  font-family:var(--font-fa);
  font-weight:800;
  font-size:1.02rem;
  padding:14px 32px;
  border-radius:40px !important;
  box-shadow:0 8px 24px rgba(139,92,246,.3);
  transition:var(--paho-transition);
  position:relative;
  overflow:hidden;
}
.pmx-article .wp-block-button .wp-block-button__link::before{
  content:"📞";
  animation:pulsePhone 1.8s infinite;
}
.pmx-article .wp-block-button .wp-block-button__link:hover{
  background:linear-gradient(120deg,var(--paho-primary-dark),var(--paho-primary));
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(109,40,217,.35);
}
@keyframes pulsePhone{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.25);opacity:.7;}
}

/* =========================================================
   Latest Beauty Articles Section (Optional component)
   ========================================================= */
.article-section{
  padding:3rem 1rem;
  background:#fafafa;
  border-radius:1.5rem;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  max-width:1200px;
  margin:3rem auto;
  direction:rtl;
  text-align:right;
}
.section-title{
  font-size:1.8rem;
  text-align:center;
  color:#222;
  margin-bottom:2rem;
  position:relative;
  font-weight:900;
}
.section-title::after{
  content:"";
  display:block;
  width:80px;
  height:3px;
  background:var(--grad-gold);
  margin:.75rem auto 0;
  border-radius:2px;
}
.article-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:1.8rem;
}
.article-card{
  background:var(--card);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 3px 15px rgba(0,0,0,.06);
  transition:.3s ease;
  display:flex;
  flex-direction:column;
}
.article-card:hover{
  transform:translateY(-6px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.article-img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition:transform .4s ease;
}
.article-card:hover .article-img{ transform:scale(1.05); }
.article-content{
  padding:1.2rem 1.5rem 1.5rem;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.article-title{
  font-size:1.1rem;
  line-height:1.6;
  font-weight:900;
  color:#333;
  margin-bottom:.8rem;
}
.article-excerpt{
  font-size:.92rem;
  color:#666;
  line-height:1.8;
  margin-bottom:1rem;
  flex-grow:1;
}
.read-more{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:800;
  color:var(--primary-gold);
  transition:.25s ease;
}
.read-more:hover{ color:#000; transform:translateX(-3px); }

/* =========================================================
   Page description (Optional)
   ========================================================= */
.page-description{
  background:#f0f9ff;
  border-right:5px solid #0ea5e9;
  padding:20px;
  margin:25px 0;
  border-radius:12px;
  font-size:16px;
  line-height:1.9;
  color:#1e293b;
  box-shadow:0 4px 15px rgba(14,165,233,.1);
}
.page-description::before{
  content:"در یک نگاه";
  display:block;
  font-weight:900;
  font-size:17px;
  margin-bottom:12px;
  color:#0369a1;
}

/* =========================================================
   Popup Button Fixes (kept)
   ========================================================= */
#global-popup-body button,
#global-popup-body input[type="submit"],
#global-popup-body .cr-ajax-pagination-btn,
#global-popup-body .cr-load-more-reviews-btn{
  background-color: var(--theme, #8e44ad) !important;
  color:#fff !important;
  border:none !important;
  padding:12px 30px !important;
  border-radius:50px !important;
  font-family: var(--font-family) !important;
  font-size:14px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  transition: var(--paho-transition) !important;
  margin-top:20px !important;
  display:inline-block !important;
  box-shadow:0 4px 15px rgba(0,0,0,.15) !important;
  line-height:1 !important;
}
#global-popup-body button:hover,
#global-popup-body input[type="submit"]:hover,
#global-popup-body .cr-ajax-pagination-btn:hover{
  background-color: var(--theme-dark, #6c3483) !important;
  transform:translateY(-3px) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.2) !important;
}
#global-popup-body ol,
#global-popup-body ul{
  padding:0 10px !important;
  list-style:none !important;
}
#global-popup-body li{
  border-bottom:1px solid #f0f0f0 !important;
  padding-bottom:15px !important;
  margin-bottom:15px !important;
}
#global-popup-body button.loading{
  opacity:.7;
  cursor:wait;
}

/* =========================================================
   Easy TOC mobile toggle hide (optional)
   ========================================================= */
@media (max-width:768px){
  .ez-toc-mobile-toggle-btn{ display:none !important; }
}