/* =========================================================
   PakHerbal Online Hakeem Consultation
   File: public/css/frontend/home/hakeem-online.css
   ========================================================= */

.pakherbal-hakeem-online,
.pakherbal-hakeem-online *,
.pakherbal-hakeem-online *::before,
.pakherbal-hakeem-online *::after {
    box-sizing: border-box;
}

.pakherbal-hakeem-online {
    --hakeem-primary: var(
        --pakherbal-theme-primary,
        #79c943
    );

    --hakeem-primary-dark: #4e9728;
    --hakeem-hover-green: #3f7f22;
    --hakeem-navy: #071827;
    --hakeem-text: #26342d;
    --hakeem-muted: #53645a;
    --hakeem-page-background: #eef4e9;
    --hakeem-section-background: #d6e5cf;
    --hakeem-card-background: #ffffff;
    --hakeem-border: rgba(45, 84, 52, 0.15);

    position: relative;
    width: 100%;
    min-width: 0;
    padding: 38px 0 48px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 7% 16%,
            rgba(121, 201, 67, 0.1),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 84%,
            rgba(41, 100, 50, 0.07),
            transparent 27%
        ),
        var(--hakeem-page-background);
}

/* =========================================================
   Raised Main Section
   ========================================================= */

.pakherbal-hakeem-online__container {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(280px, 0.92fr)
        minmax(0, 2.25fr);
    align-items: stretch;
    gap: clamp(34px, 4vw, 60px);

    width: min(calc(100% - 56px), 1320px);
    min-width: 0;
    margin: 0 auto;
    padding: 48px 28px;

    background:
        radial-gradient(
            circle at 5% 12%,
            rgba(255, 255, 255, 0.34),
            transparent 28%
        ),
        radial-gradient(
            circle at 96% 88%,
            rgba(121, 201, 67, 0.17),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #e2eddc 0%,
            #d2e3cb 48%,
            #c4dbbd 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 0;

    box-shadow:
        0 24px 48px rgba(46, 86, 51, 0.17),
        0 0 38px rgba(121, 201, 67, 0.15);

    isolation: isolate;
}

.pakherbal-hakeem-online__container::before {
    position: absolute;
    z-index: -1;
    right: 4%;
    bottom: -18px;

    width: 92%;
    height: 38px;

    content: "";

    background: rgba(66, 123, 64, 0.18);
    border-radius: 50%;
    filter: blur(22px);
}

.pakherbal-hakeem-online__container::after {
    position: absolute;
    z-index: -1;
    top: -13px;
    left: 5%;

    width: 60%;
    height: 30px;

    content: "";

    background: rgba(121, 201, 67, 0.12);
    border-radius: 50%;
    filter: blur(20px);
}

/* =========================================================
   Introduction
   ========================================================= */

.pakherbal-hakeem-online__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    padding: 7px 0;
}

.pakherbal-hakeem-online__title {
    display: grid;
    gap: 2px;

    max-width: 390px;
    margin: 0;

    color: var(--hakeem-navy);

    font-size: clamp(32px, 3vw, 43px);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.038em;

    overflow-wrap: anywhere;
}

.pakherbal-hakeem-online__title span {
    display: block;
}

.pakherbal-hakeem-online__urdu-text {
    width: 100%;
    max-width: 415px;
    margin: 40px 0 0;

    color: var(--hakeem-hover-green);

    font-family: var(--pakherbal-font-urdu, serif);

    font-size: 16px;
    font-weight: 700;
    line-height: 2.2;
    text-align: right;

    overflow-wrap: anywhere;
}

.pakherbal-hakeem-online__description {
    max-width: 410px;
    margin: 32px 0 0;

    color: #43574c;

    font-size: 15px;
    line-height: 1.72;

    overflow-wrap: anywhere;
}

/* =========================================================
   Main Consultation Button
   ========================================================= */

.pakherbal-hakeem-online__main-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 240px;
    min-height: 50px;
    margin-top: auto;
    padding: 12px 22px;

    color: #ffffff;
    background: var(--hakeem-navy);

    border: 1px solid var(--hakeem-navy);
    border-radius: 0;

    box-shadow:
        0 11px 23px rgba(7, 24, 39, 0.17);

    font-size: 13px;
    font-weight: 850;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.pakherbal-hakeem-online__main-button svg {
    flex: 0 0 auto;
    color: #ffffff;
    transition: transform 160ms ease;
}

.pakherbal-hakeem-online__main-button:hover {
    color: #ffffff;
    background: var(--hakeem-hover-green);
    border-color: var(--hakeem-hover-green);

    box-shadow:
        0 14px 27px rgba(63, 127, 34, 0.26);

    transform: translateY(-2px);
}

.pakherbal-hakeem-online__main-button:hover svg {
    color: #ffffff;
    transform: translateX(3px);
}

.pakherbal-hakeem-online__main-button:focus-visible {
    outline: 3px solid rgba(121, 201, 67, 0.45);
    outline-offset: 4px;
}

/* =========================================================
   Services Grid
   ========================================================= */

.pakherbal-hakeem-online__services {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;

    min-width: 0;
}

/* =========================================================
   Service Card
   ========================================================= */

.pakherbal-hakeem-service-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;
    overflow: hidden;

    background: var(--hakeem-card-background);

    border: 1px solid var(--hakeem-border);
    border-top: 3px solid var(--hakeem-primary-dark);
    border-radius: 0;

    box-shadow:
        0 14px 28px rgba(31, 68, 42, 0.11);

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.pakherbal-hakeem-service-card:hover {
    border-right-color: rgba(63, 127, 34, 0.3);
    border-bottom-color: rgba(63, 127, 34, 0.3);
    border-left-color: rgba(63, 127, 34, 0.3);

    box-shadow:
        0 21px 39px rgba(31, 68, 42, 0.18);

    transform: translateY(-5px);
}

/* =========================================================
   Service Image
   ========================================================= */

.pakherbal-hakeem-service-card__media {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 1.4 / 0.82;

    overflow: hidden;

    background: #e5efdf;
    border-radius: 0;

    text-decoration: none;
}

.pakherbal-hakeem-service-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 0;

    transition: transform 320ms ease;
}

.pakherbal-hakeem-service-card:hover
.pakherbal-hakeem-service-card__image {
    transform: scale(1.035);
}

/* =========================================================
   Placeholder Foundation
   ========================================================= */

.pakherbal-hakeem-service-card__placeholder {
    position: relative;
    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
    border-radius: 0;
}

.pakherbal-hakeem-service-card__placeholder--consultation {
    background:
        radial-gradient(
            circle at 78% 19%,
            rgba(255, 255, 255, 0.62),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #dcecdc,
            #9fc999
        );
}

.pakherbal-hakeem-service-card__placeholder--pansar {
    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(255, 255, 255, 0.5),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #eee5c9,
            #c8a85d
        );
}

.pakherbal-hakeem-service-card__placeholder--diet {
    background:
        radial-gradient(
            circle at 78% 19%,
            rgba(255, 255, 255, 0.5),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #dcebd4,
            #9fca87
        );
}

.pakherbal-hakeem-service-card__placeholder-glow {
    position: absolute;
    top: -28%;
    left: -18%;

    width: 78%;
    height: 130%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0)
        );
}

.pakherbal-hakeem-service-card__placeholder-shadow {
    position: absolute;
    right: 50%;
    bottom: 10%;

    width: 55%;
    height: 8%;

    background: rgba(28, 56, 39, 0.19);
    border-radius: 50%;

    filter: blur(9px);

    transform: translateX(50%);
}

/* =========================================================
   Consultation Placeholder
   ========================================================= */

.pakherbal-hakeem-service-card__doctor {
    position: absolute;
    z-index: 2;
    right: 50%;
    bottom: 10%;

    width: 45%;
    height: 72%;

    transform: translateX(50%);
}

.pakherbal-hakeem-service-card__doctor-head {
    position: absolute;
    top: 7%;
    left: 50%;

    width: 34%;
    height: 28%;

    background: #d4a475;
    border-radius: 50%;

    transform: translateX(-50%);
}

.pakherbal-hakeem-service-card__doctor-head::before {
    position: absolute;
    top: -12%;
    left: -6%;

    width: 112%;
    height: 47%;

    content: "";

    background: #ffffff;
    border-radius: 50% 50% 20% 20%;
}

.pakherbal-hakeem-service-card__doctor-body {
    position: absolute;
    right: 50%;
    bottom: 0;

    width: 88%;
    height: 66%;

    background: #ffffff;
    border: 1px solid rgba(28, 64, 44, 0.1);

    transform: translateX(50%);
}

.pakherbal-hakeem-service-card__doctor-body::before {
    position: absolute;
    top: 13%;
    left: 50%;

    width: 37%;
    height: 52%;

    content: "";

    border: 3px solid #174532;
    border-top: 0;
    border-radius: 0 0 50% 50%;

    transform: translateX(-50%);
}

.pakherbal-hakeem-service-card__doctor-cross {
    position: absolute;
    right: 8%;
    bottom: 13%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: var(--hakeem-navy);
    background: var(--hakeem-primary);

    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.pakherbal-hakeem-service-card__chat-bubble {
    position: absolute;
    z-index: 3;
    top: 21%;
    right: 12%;

    display: grid;
    gap: 4px;

    width: 29%;
    padding: 10px;

    background: var(--hakeem-navy);
}

.pakherbal-hakeem-service-card__chat-bubble::after {
    position: absolute;
    bottom: -8px;
    left: 12px;

    width: 0;
    height: 0;

    content: "";

    border-top: 9px solid var(--hakeem-navy);
    border-right: 9px solid transparent;
}

.pakherbal-hakeem-service-card__chat-bubble span {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   Pansar Placeholder
   ========================================================= */

.pakherbal-hakeem-service-card__pansar-bowl {
    position: absolute;
    z-index: 3;
    right: 50%;
    bottom: 14%;

    width: 43%;
    height: 28%;

    background:
        linear-gradient(
            180deg,
            #a66831,
            #63401f
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            81% 100%,
            19% 100%
        );

    box-shadow:
        0 16px 25px rgba(72, 48, 26, 0.2);

    transform: translateX(50%);
}

.pakherbal-hakeem-service-card__pansar-jar {
    position: absolute;
    bottom: 18%;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(229, 221, 192, 0.94)
        );

    border: 1px solid rgba(69, 57, 33, 0.12);

    box-shadow:
        0 15px 24px rgba(68, 53, 31, 0.16);
}

.pakherbal-hakeem-service-card__pansar-jar::before {
    position: absolute;
    top: -12%;
    left: -4%;

    width: 108%;
    height: 14%;

    content: "";

    background: #5e472a;
}

.pakherbal-hakeem-service-card__pansar-jar--one {
    right: 16%;
    width: 24%;
    height: 48%;
}

.pakherbal-hakeem-service-card__pansar-jar--two {
    left: 14%;
    width: 20%;
    height: 39%;
}

.pakherbal-hakeem-service-card__leaf {
    position: absolute;
    z-index: 2;

    width: 28%;
    height: 14%;

    background: rgba(48, 121, 65, 0.73);
    border-radius: 100% 0 100% 0;
}

.pakherbal-hakeem-service-card__leaf--one {
    top: 19%;
    right: 13%;
    transform: rotate(-25deg);
}

.pakherbal-hakeem-service-card__leaf--two {
    top: 31%;
    left: 15%;
    width: 23%;
    background: rgba(104, 146, 66, 0.68);
    transform: rotate(25deg);
}

/* =========================================================
   Diet Placeholder
   ========================================================= */

.pakherbal-hakeem-service-card__diet-plate {
    position: absolute;
    z-index: 2;
    right: 50%;
    bottom: 14%;

    width: 48%;
    aspect-ratio: 1;

    background:
        radial-gradient(
            circle,
            #f5f7ec 0%,
            #f5f7ec 56%,
            #d9e4d2 57%,
            #ffffff 72%
        );

    border: 1px solid rgba(48, 74, 50, 0.12);
    border-radius: 50%;

    box-shadow:
        0 16px 27px rgba(41, 69, 47, 0.16);

    transform: translateX(50%);
}

.pakherbal-hakeem-service-card__diet-leaf {
    position: absolute;
    z-index: 3;

    width: 29%;
    height: 15%;

    background: #5fa34d;
    border-radius: 100% 0 100% 0;
}

.pakherbal-hakeem-service-card__diet-leaf--one {
    top: 36%;
    right: 31%;
    transform: rotate(-23deg);
}

.pakherbal-hakeem-service-card__diet-leaf--two {
    top: 48%;
    left: 29%;
    width: 24%;
    background: #87bd59;
    transform: rotate(30deg);
}

.pakherbal-hakeem-service-card__diet-glass {
    position: absolute;
    z-index: 4;
    right: 15%;
    bottom: 18%;

    width: 16%;
    height: 40%;

    background:
        linear-gradient(
            180deg,
            rgba(214, 239, 197, 0.88),
            rgba(112, 176, 72, 0.92)
        );

    border: 1px solid rgba(50, 96, 50, 0.13);

    clip-path:
        polygon(
            8% 0,
            92% 0,
            80% 100%,
            20% 100%
        );
}

/* =========================================================
   Card Content
   ========================================================= */

.pakherbal-hakeem-service-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;

    min-width: 0;
    padding: 21px 17px 17px;

    text-align: center;
}

.pakherbal-hakeem-service-card__title {
    min-height: 48px;
    margin: 0;

    font-size: 16px;
    font-weight: 850;
    line-height: 1.42;
}

.pakherbal-hakeem-service-card__title a {
    display: -webkit-box;

    overflow: hidden;

    color: var(--hakeem-text);
    text-decoration: none;

    line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.pakherbal-hakeem-service-card__title a:hover {
    color: var(--hakeem-hover-green);
}

.pakherbal-hakeem-service-card__description {
    display: -webkit-box;

    min-height: 69px;
    margin: 14px 0 0;

    overflow: hidden;

    color: var(--hakeem-muted);

    font-size: 13px;
    line-height: 1.72;

    line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* =========================================================
   Service Card Buttons
   Theme Style
   ========================================================= */

.pakherbal-hakeem-service-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 165px;
    min-height: 42px;
    margin-top: auto;
    padding: 9px 15px;

    color: #ffffff;
    background: var(--hakeem-navy);

    border: 1px solid var(--hakeem-navy);
    border-radius: 0;

    box-shadow:
        0 9px 18px rgba(7, 24, 39, 0.14);

    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.pakherbal-hakeem-service-card__description
+ .pakherbal-hakeem-service-card__button {
    margin-top: 18px;
}

.pakherbal-hakeem-service-card__button svg {
    flex: 0 0 auto;
    color: #ffffff;
    transition: transform 160ms ease;
}

.pakherbal-hakeem-service-card__button:hover {
    color: #ffffff;
    background: var(--hakeem-hover-green);
    border-color: var(--hakeem-hover-green);

    box-shadow:
        0 12px 22px rgba(63, 127, 34, 0.25);

    transform: translateY(-2px);
}

.pakherbal-hakeem-service-card__button:hover svg {
    color: #ffffff;
    transform: translateX(3px);
}

.pakherbal-hakeem-service-card__button:focus-visible {
    outline: 3px solid rgba(121, 201, 67, 0.42);
    outline-offset: 3px;
}

/* =========================================================
   Medium Desktop
   ========================================================= */

@media (max-width: 1100px) {
    .pakherbal-hakeem-online__container {
        grid-template-columns:
            minmax(240px, 0.8fr)
            minmax(0, 2.2fr);

        gap: 28px;
        padding-right: 22px;
        padding-left: 22px;
    }

    .pakherbal-hakeem-online__services {
        gap: 13px;
    }

    .pakherbal-hakeem-service-card__content {
        padding-right: 13px;
        padding-left: 13px;
    }

    .pakherbal-hakeem-service-card__title {
        font-size: 14px;
    }

    .pakherbal-hakeem-service-card__description {
        font-size: 12px;
    }

    .pakherbal-hakeem-service-card__button {
        min-width: 145px;
    }
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 900px) {
    .pakherbal-hakeem-online {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .pakherbal-hakeem-online__container {
        grid-template-columns: minmax(0, 1fr);

        gap: 34px;

        width: min(calc(100% - 40px), 1320px);
        padding: 42px 24px;
    }

    .pakherbal-hakeem-online__intro {
        align-items: center;
        text-align: center;
    }

    .pakherbal-hakeem-online__title {
        max-width: 620px;
        text-align: center;
    }

    .pakherbal-hakeem-online__urdu-text {
        max-width: 620px;
        margin-top: 23px;
        text-align: center;
    }

    .pakherbal-hakeem-online__description {
        max-width: 650px;
        margin-top: 20px;
        text-align: center;
    }

    .pakherbal-hakeem-online__main-button {
        margin-top: 25px;
    }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
    .pakherbal-hakeem-online {
        padding: 22px 0 32px;
    }

    .pakherbal-hakeem-online__container {
        gap: 30px;

        width: calc(100% - 20px);
        padding: 34px 12px;
    }

    .pakherbal-hakeem-online__title {
        font-size: clamp(28px, 8vw, 38px);
        line-height: 1.06;
    }

    .pakherbal-hakeem-online__urdu-text {
        margin-top: 19px;

        font-size: 14px;
        line-height: 2.1;
    }

    .pakherbal-hakeem-online__description {
        margin-top: 16px;

        font-size: 14px;
        line-height: 1.65;
    }

    .pakherbal-hakeem-online__main-button {
        min-width: 0;
        min-height: 46px;
        margin-top: 22px;
        padding: 10px 18px;

        font-size: 12px;
    }

    .pakherbal-hakeem-online__services {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;

        width: min(100%, 520px);
        margin: 0 auto;
    }

    .pakherbal-hakeem-service-card {
        display: grid;
        grid-template-columns:
            minmax(145px, 0.82fr)
            minmax(0, 1.18fr);
    }

    .pakherbal-hakeem-service-card__media {
        height: 100%;
        min-height: 220px;
        aspect-ratio: auto;
    }

    .pakherbal-hakeem-service-card__content {
        align-items: flex-start;
        justify-content: center;

        padding: 16px 14px;

        text-align: left;
    }

    .pakherbal-hakeem-service-card__title {
        min-height: auto;

        font-size: 14px;
    }

    .pakherbal-hakeem-service-card__description {
        min-height: auto;
        margin-top: 9px;

        font-size: 11px;
        line-height: 1.55;

        line-clamp: 4;
        -webkit-line-clamp: 4;
    }

    .pakherbal-hakeem-service-card__description
    + .pakherbal-hakeem-service-card__button {
        margin-top: 13px;
    }

    .pakherbal-hakeem-service-card__button {
        min-width: 0;
        min-height: 37px;
        padding: 8px 11px;

        font-size: 10px;
    }
}

/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 430px) {
    .pakherbal-hakeem-online {
        padding-top: 18px;
        padding-bottom: 26px;
    }

    .pakherbal-hakeem-online__container {
        width: calc(100% - 16px);
        padding: 29px 9px;
    }

    .pakherbal-hakeem-online__title {
        font-size: 29px;
    }

    .pakherbal-hakeem-online__main-button {
        width: 100%;
    }

    .pakherbal-hakeem-service-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .pakherbal-hakeem-service-card__media {
        min-height: 205px;
        aspect-ratio: 1.55 / 1;
    }

    .pakherbal-hakeem-service-card__content {
        align-items: center;

        padding: 16px 13px;

        text-align: center;
    }

    .pakherbal-hakeem-service-card__description {
        max-width: 360px;
    }

    .pakherbal-hakeem-service-card__button {
        min-width: 155px;
    }
}

/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .pakherbal-hakeem-online__main-button,
    .pakherbal-hakeem-online__main-button svg,
    .pakherbal-hakeem-service-card,
    .pakherbal-hakeem-service-card__image,
    .pakherbal-hakeem-service-card__button,
    .pakherbal-hakeem-service-card__button svg {
        transition: none;
    }

    .pakherbal-hakeem-online__main-button:hover,
    .pakherbal-hakeem-online__main-button:hover svg,
    .pakherbal-hakeem-service-card:hover,
    .pakherbal-hakeem-service-card:hover
    .pakherbal-hakeem-service-card__image,
    .pakherbal-hakeem-service-card__button:hover,
    .pakherbal-hakeem-service-card__button:hover svg {
        transform: none;
    }
}