/*
 * Treatment Pages – Stylesheet
 * Theme: Estatika Clean
 * Prefix: .trmt-
 */

/* ── CSS Variables ── */
:root {
    --trmt-ivory      : #F6F4F1;
    --trmt-white      : #FFFFFF;
    --trmt-beige      : #EAE6E1;
    --trmt-green      : #7FB13D;
    --trmt-gold       : #C7A87A;
    --trmt-charcoal   : #333333;
    --trmt-body       : #4a4a4a;
    --trmt-muted      : #888888;
    --trmt-radius     : 6px;
    --trmt-shadow     : 0 4px 28px rgba(0,0,0,0.07);
    --trmt-shadow-hv  : 0 8px 36px rgba(0,0,0,0.12);
    --trmt-trans      : all 0.3s ease;
    --trmt-section-py : 80px;
}

/* ── Base wrapper ── */
.trmt-wrap {
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 48px;
    text-align: center;
}

/* ── Section label ── */
.trmt-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 10.5px;
    font-weight    : 700;
    letter-spacing : 3.5px;
    text-transform : uppercase;
    color          : var(--trmt-gold);
    margin-bottom  : 12px;
}

/* ── Section headings ── */
.trmt-section-hd {
    margin-bottom : 56px;
}
.trmt-section-hd--center {
    text-align   : center;
    max-width    : 680px;
    margin-left  : auto;
    margin-right : auto;
    margin-bottom: 56px;
}
.trmt-section-hd--left {
    max-width : 680px;
}
.trmt-section-hd h2 {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : clamp(28px, 2.8vw, 40px);
    font-weight : 700;
    color       : var(--trmt-charcoal);
    line-height : 1.2;
    margin      : 0 0 14px;
}
.trmt-section-hd__sub {
    font-size   : 14.5px;
    color       : var(--trmt-muted);
    line-height : 1.7;
    margin-top  : 10px;
}

/* ── Shared buttons ── */
.trmt-btn {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 13.5px;
    font-weight    : 500;
    letter-spacing : 0.5px;
    border-radius  : var(--trmt-radius);
    padding        : 15px 38px;
    border         : 2px solid transparent;
    transition     : var(--trmt-trans);
    cursor         : pointer;
    text-decoration: none;
}
.trmt-btn--gold {
    background  : var(--trmt-gold);
    color       : #fff !important;
    border-color: var(--trmt-gold);
}
.trmt-btn--gold:hover {
    background  : #b89068;
    border-color: #b89068;
    color       : #fff;
}
.trmt-btn--outline {
    background  : transparent;
    color       : var(--trmt-charcoal);
    border-color: var(--trmt-charcoal);
}
.trmt-btn--outline:hover {
    background : var(--trmt-charcoal);
    color      : #fff;
}
.trmt-btn--whatsapp {
    background   : #4a8c2a;
    color        : #fff !important;
    border-color : #4a8c2a;
    display      : inline-flex;
    align-items  : center;
    gap          : 8px;
}
.trmt-btn--whatsapp:hover {
    background   : #3d7522;
    border-color : #3d7522;
    color        : #fff;
}


/* =============================================================
   1. OVERVIEW
============================================================= */
.trmt-overview {
    background : #ffffff;
    padding    : var(--trmt-section-py) 0;
}
.trmt-overview__inner {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 72px;
    align-items           : center;
}
/* .trmt-overview__inner--no-image removed — visual column now always rendered with placeholder */
.trmt-overview__text {
    max-width  : 560px;
    text-align : left;
}
.trmt-overview__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : clamp(32px, 3.4vw, 50px);
    font-weight : 700;
    color       : var(--trmt-charcoal);
    line-height : 1.15;
    margin      : 0 0 28px;
}
.trmt-overview__body {
    font-size   : 16px;
    line-height : 1.8;
    color       : var(--trmt-body);
    font-weight : 300;
    text-align  : left;
}
.trmt-overview__body p {
    margin : 0 0 18px;
}
.trmt-overview__body p:last-child { margin-bottom: 0; }
.trmt-overview__visual { position: relative; }
.trmt-overview__img-frame {
    border-radius : 12px;
    overflow      : hidden;
    box-shadow    : var(--trmt-shadow-hv);
    aspect-ratio  : 4 / 5;
}
.trmt-overview__img-frame img {
    width       : 100%;
    height      : 100%;
    object-fit  : cover;
    display     : block;
    transition  : transform 0.6s ease;
}
.trmt-overview__img-frame:hover img { transform: scale(1.03); }

.trmt-overview__img-frame--placeholder {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    gap              : 14px;
    background       : linear-gradient(145deg, #F7F2ED 0%, #EDE5DA 100%);
    border           : 1.5px dashed var(--trmt-beige);
    box-shadow       : none;
}
.trmt-overview__img-frame--placeholder::before {
    content           : '';
    display           : block;
    width             : 56px;
    height            : 56px;
    background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8927A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    background-size   : contain;
    background-repeat : no-repeat;
    background-position: center;
    opacity           : 0.7;
}
.trmt-overview__img-frame--placeholder::after {
    content        : 'Add Photo';
    font-family    : 'Inter', sans-serif;
    font-size      : 0.6875rem;
    font-weight    : 500;
    color          : #A8927A;
    letter-spacing : 0.12em;
    text-transform : uppercase;
}


/* =============================================================
   2. PROCESS / HOW IT WORKS
============================================================= */
.trmt-process {
    background : var(--trmt-white);
    padding    : var(--trmt-section-py) 0;
    border-top : 1px solid var(--trmt-beige);
}
.trmt-steps {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 32px;
    list-style            : none;
    padding               : 0;
    margin                : 0;
}
.trmt-step {
    background    : var(--trmt-ivory);
    border-radius : 10px;
    padding       : 40px 36px;
    position      : relative;
    border        : 1px solid var(--trmt-beige);
    transition    : var(--trmt-trans);
}
.trmt-step:hover {
    box-shadow : var(--trmt-shadow-hv);
    transform  : translateY(-4px);
}
.trmt-step__num {
    font-family  : 'Playfair Display', Georgia, serif;
    font-size    : 48px;
    font-weight  : 700;
    color        : rgba(199, 168, 122, 0.40);
    line-height  : 1;
    margin-bottom: 20px;
    display      : block;
    user-select  : none;
}
.trmt-step__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 20px;
    font-weight : 600;
    color       : var(--trmt-charcoal);
    margin      : 0 0 12px;
    line-height : 1.25;
}
.trmt-step__desc {
    font-size   : 14.5px;
    line-height : 1.75;
    color       : var(--trmt-body);
    margin      : 0;
}


/* =============================================================
   3. BENEFITS
============================================================= */
.trmt-benefits {
    background : var(--trmt-ivory);
    padding    : var(--trmt-section-py) 0;
    border-top : 1px solid var(--trmt-beige);
}
.trmt-benefits__list {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 18px 48px;
    list-style            : none;
    padding               : 0;
    margin                : 0 auto;
    max-width             : 860px;
}
.trmt-benefit {
    display     : flex;
    align-items : flex-start;
    gap         : 14px;
    padding     : 18px 0;
    border-bottom: 1px solid var(--trmt-beige);
}
.trmt-benefit:last-child,
.trmt-benefit:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.trmt-benefit__icon {
    flex-shrink : 0;
    margin-top  : 2px;
}
.trmt-benefit__text {
    font-size   : 15px;
    line-height : 1.65;
    color       : var(--trmt-body);
    text-align  : left;
}


/* =============================================================
   4. RESULTS / BEFORE & AFTER
============================================================= */
.trmt-results {
    background : var(--trmt-white);
    padding    : var(--trmt-section-py) 0;
    border-top : 1px solid var(--trmt-beige);
}
.trmt-results__grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 28px;
}
.trmt-result-card {
    margin        : 0;
    border-radius : 10px;
    overflow      : hidden;
    background    : var(--trmt-ivory);
    border        : 1px solid var(--trmt-beige);
    box-shadow    : var(--trmt-shadow);
    transition    : var(--trmt-trans);
}
.trmt-result-card:hover {
    box-shadow : var(--trmt-shadow-hv);
    transform  : translateY(-4px);
}
.trmt-result-card__img {
    aspect-ratio : 4 / 3;
    overflow     : hidden;
}
.trmt-result-card__img img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform 0.5s ease;
}
.trmt-result-card:hover .trmt-result-card__img img { transform: scale(1.05); }

.trmt-result-card__img--placeholder {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    gap              : 12px;
    background       : linear-gradient(145deg, #F7F2ED 0%, #EDE5DA 100%);
    border-bottom    : 1.5px dashed var(--trmt-beige);
}
.trmt-result-card__img--placeholder::before {
    content           : '';
    display           : block;
    width             : 44px;
    height            : 44px;
    background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8927A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    background-size   : contain;
    background-repeat : no-repeat;
    background-position: center;
    opacity           : 0.7;
}
.trmt-result-card__img--placeholder::after {
    content        : 'Add Photo';
    font-family    : 'Inter', sans-serif;
    font-size      : 0.6875rem;
    font-weight    : 500;
    color          : #A8927A;
    letter-spacing : 0.12em;
    text-transform : uppercase;
}
.trmt-result-card__caption {
    padding      : 16px 20px;
    font-size    : 13px;
    color        : var(--trmt-muted);
    font-family  : 'Inter', sans-serif;
    letter-spacing: 0.3px;
    text-align   : center;
    border-top   : 1px solid var(--trmt-beige);
}

.trmt-results__grid:has(.trmt-result-card:nth-child(2):last-child) {
    grid-template-columns : repeat(2, 1fr);
    max-width             : 780px;
    margin-left           : auto;
    margin-right          : auto;
}


/* =============================================================
   5. PRICING
============================================================= */
.trmt-pricing {
    background : var(--trmt-ivory);
    padding    : var(--trmt-section-py) 0;
    border-top : 1px solid var(--trmt-beige);
}
.trmt-pricing__inner {
    max-width : 760px;
}
.trmt-pricing__grid {
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 24px;
    margin                : 32px 0 28px;
}
@media (max-width: 600px) {
    .trmt-pricing__grid { grid-template-columns: 1fr; }
}
.trmt-pricing__block {
    background     : #fff;
    border         : 1px solid var(--trmt-beige);
    border-radius  : 8px;
    padding        : 28px 24px;
    display        : flex;
    flex-direction : column;
    gap            : 8px;
    border-top     : 3px solid var(--trmt-gold);
}
.trmt-pricing__icon {
    color   : var(--trmt-gold);
    display : flex;
}
.trmt-pricing__label {
    font-family    : 'Inter', sans-serif;
    font-size      : 0.75rem;
    font-weight    : 700;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    color          : var(--trmt-muted);
}
.trmt-pricing__value {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 1.25rem;
    font-weight : 600;
    color       : var(--trmt-charcoal);
    line-height : 1.3;
}
.trmt-pricing__note {
    font-size   : 0.875rem;
    color       : var(--trmt-muted);
    line-height : 1.7;
    margin      : 0 0 28px;
    font-style  : italic;
    text-align  : center;
}


/* =============================================================
   6. FAQ ACCORDION  (White bg, native details/summary)
============================================================= */
.trmt-faq {
    background : var(--trmt-ivory);
    padding    : var(--trmt-section-py) 0;
    border-top : 1px solid var(--trmt-beige);
}
.trmt-faq__list {
    max-width : 820px;
    margin    : 0 auto;
}
.trmt-faq__item {
    border-bottom : 1px solid var(--trmt-beige);
}
.trmt-faq__item:first-child { border-top: 1px solid var(--trmt-beige); }

.trmt-faq__question {
    list-style      : none;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 30px 4px;
    font-family     : 'Inter', sans-serif;
    font-size       : 1.2rem;
    font-weight     : 500;
    color           : var(--trmt-charcoal);
    cursor          : pointer;
    user-select     : none;
    transition      : color 0.2s ease;
    line-height     : 1.55;
    gap             : 20px;
}
.trmt-faq__question::-webkit-details-marker { display: none; }
.trmt-faq__question::after {
    content    : '+';
    flex-shrink: 0;
    font-size  : 1.8rem;
    font-weight: 300;
    color      : var(--trmt-gold);
    line-height: 1;
    transition : transform 0.25s ease;
    min-width  : 24px;
    text-align : center;
}
.trmt-faq__item[open] > .trmt-faq__question { color: var(--trmt-charcoal); }
.trmt-faq__item[open] > .trmt-faq__question::after {
    content   : '−';
    transform : none;
}
.trmt-faq__question:hover { color: var(--trmt-gold); }

.trmt-faq__answer {
    padding   : 0 4px 36px;
    animation : faqFadeIn 0.2s ease;
    text-align: left;
}
.trmt-faq__answer p {
    font-family : 'Inter', sans-serif;
    font-size   : 17px;
    line-height : 2.0;
    color       : var(--trmt-body);
    margin      : 0 0 8px;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================
   7. FINAL CTA
============================================================= */
.trmt-cta {
    background : var(--trmt-white);
    padding    : var(--trmt-section-py) 0;
    border-top : 1px solid var(--trmt-beige);
}
.trmt-cta__inner {
    max-width : 620px;
    margin    : 0 auto;
    text-align: center;
    padding   : 0 24px;
}
.trmt-cta__heading {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : clamp(26px, 2.8vw, 38px);
    font-weight : 700;
    color       : var(--trmt-charcoal);
    line-height : 1.2;
    margin      : 0 0 20px;
}
.trmt-cta__sub {
    font-size   : 15.5px;
    line-height : 1.75;
    color       : var(--trmt-body);
    margin      : 0 0 36px;
    font-weight : 300;
}
.trmt-cta__actions {
    display         : flex;
    gap             : 14px;
    justify-content : center;
    flex-wrap       : wrap;
}


/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1024px) {
    :root { --trmt-section-py: 56px; }
    .trmt-wrap { padding: 0 32px; }
    .trmt-overview__inner { gap: 48px; }
    .trmt-section-hd { margin-bottom: 40px; }
    .trmt-section-hd--center { margin-bottom: 40px; }
}

@media (max-width: 900px) {
    .trmt-steps {
        grid-template-columns : 1fr;
        max-width             : 520px;
        margin-left           : auto;
        margin-right          : auto;
    }
    .trmt-results__grid { grid-template-columns: repeat(2, 1fr); }
    .trmt-benefits__list { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 760px) {
    :root { --trmt-section-py: 60px; }
    .trmt-overview__inner {
        grid-template-columns : 1fr;
        gap                   : 36px;
    }
    .trmt-overview__visual  { display: block; }
    .trmt-overview__img-frame { aspect-ratio: 16 / 9; }
    .trmt-overview__text    { max-width: 100%; }
    .trmt-overview__title   { font-size: clamp(26px, 7vw, 32px); }
    .trmt-results__grid     { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .trmt-faq__question     { font-size: 16px; padding: 22px 4px; }
    .trmt-pricing__grid     { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .trmt-wrap     { padding: 0 20px; }
    .trmt-step     { padding: 28px 24px; }
    .trmt-cta__actions  { flex-direction: column; align-items: stretch; gap: 10px; }
    .trmt-cta__sub { margin-bottom: 28px; }
}

@media (max-width: 480px) {
    :root { --trmt-section-py: 52px; }
    .trmt-wrap          { padding: 0 18px; }
    .trmt-steps         { max-width: 100%; }
    .trmt-results__grid { max-width: 100%; }
}


/* =============================================================
   TYPOGRAPHY PASS — mobile
============================================================= */
@media (max-width: 768px) {
    .trmt-label              { font-size: 13px; }
    .trmt-overview__title    { font-size: clamp(26px, 7vw, 32px); }
    .trmt-section-hd h2      { font-size: clamp(20px, 5vw, 24px); }
    .trmt-cta__heading       { font-size: clamp(22px, 5.5vw, 26px); }
    .trmt-step__desc         { font-size: 15px; }
    .trmt-pricing__label     { font-size: 13px; }
    .trmt-btn                { font-size: 14px; }
}

@media (max-width: 480px) {
    .trmt-overview__title    { font-size: clamp(24px, 6.5vw, 28px); }
    .trmt-section-hd h2      { font-size: 20px; }
    .trmt-cta__heading       { font-size: 22px; }
}

/* =============================================================
   RELATED TREATMENTS
============================================================= */
.trmt-related {
    padding    : var(--trmt-section-py) 0;
    background : var(--trmt-white);
    border-top : 1px solid var(--trmt-beige);
}

.trmt-related__grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 20px;
    text-align            : left;
    margin-top            : 48px;
}

.trmt-related-card {
    background    : var(--trmt-white);
    border        : 1px solid var(--trmt-beige);
    border-top    : 3px solid var(--trmt-gold);
    border-radius : var(--trmt-radius);
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    transition    : box-shadow var(--trmt-trans), transform var(--trmt-trans);
}

.trmt-related-card--concern {
    border-top-color: var(--trmt-green);
}

.trmt-related-card:hover {
    box-shadow : var(--trmt-shadow-hv);
    transform  : translateY(-3px);
}

.trmt-related-card__inner {
    padding : 22px 22px 0;
    flex    : 1;
}

.trmt-related-card__tag {
    display       : inline-block;
    font-size     : 0.625rem;
    font-weight   : 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color         : var(--trmt-gold);
    margin-bottom : 8px;
}

.trmt-related-card--concern .trmt-related-card__tag {
    color: var(--trmt-green);
}

.trmt-related-card__title {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 17px;
    font-weight : 600;
    color       : var(--trmt-charcoal);
    margin      : 0 0 10px;
    line-height : 1.35;
}

.trmt-related-card__desc {
    font-size  : 14px;
    color      : var(--trmt-body);
    line-height: 1.6;
    margin     : 0;
}

.trmt-related-card__cta {
    display        : flex;
    align-items    : center;
    gap            : 6px;
    margin         : 16px 22px 20px;
    font-size      : 13px;
    font-weight    : 600;
    color          : var(--trmt-gold);
    text-decoration: none;
    letter-spacing : 0.02em;
    transition     : gap var(--trmt-trans), color var(--trmt-trans);
}

.trmt-related-card--concern .trmt-related-card__cta {
    color: var(--trmt-green);
}

.trmt-related-card__cta:hover {
    gap  : 10px;
    color: var(--trmt-charcoal);
}

@media (max-width: 960px) {
    .trmt-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .trmt-related__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
    .trmt-related-card__inner { padding: 16px 16px 0; }
    .trmt-related-card__cta   { margin: 14px 16px 18px; }
    .trmt-related-card__title { font-size: 15px; }
}

@media (max-width: 380px) {
    .trmt-related__grid { grid-template-columns: 1fr; }
}

/* ── Video Section ─────────────────────────────────────────────────────────── */
.trmt-video {
    padding:    var(--trmt-section-py) 0;
    background: var(--beige, #FAF8F5);
}

.trmt-video__frame {
    position:      relative;
    padding-bottom: 56.25%;
    height:        0;
    overflow:      hidden;
    border-radius: 14px;
    box-shadow:    0 8px 48px rgba(0,0,0,0.12);
    max-width:     900px;
    margin:        0 auto;
}

.trmt-video__frame iframe {
    position:      absolute;
    top:           0;
    left:          0;
    width:         100%;
    height:        100%;
    border-radius: 14px;
    border:        0;
}