/* _content/PopProject.BlazorSSR/Components/Features/About/AboutBrandBannerSection.razor.rz.scp.css */
.vetban-showcase[b-ahnd2xl8gq] {
    position: relative;

    padding: 36px 0 96px;

    overflow: hidden;

    direction: rtl;

    background: #fff;
}


.showcase-banner[b-ahnd2xl8gq] {
    position: relative;

    min-height: 430px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    align-items: center;

    overflow: hidden;
    isolation: isolate;

    border-radius:
        35px 65px 35px 65px;

    background:
        linear-gradient(
            125deg,
            #347f49 0%,
            #1f5c34 45%,
            #164b2d 100%);

    background-size:
        190% 190%;

    box-shadow:
        0 28px 68px rgba(27, 78, 43, .23);

    animation:
        showcase-gradient-b-ahnd2xl8gq 16s ease-in-out infinite;
}


.showcase-banner[b-ahnd2xl8gq]::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset: -45%;

    background:
        radial-gradient(
            circle at 19% 28%,
            rgba(117, 193, 130, .3),
            transparent 24%),
        radial-gradient(
            circle at 72% 21%,
            rgba(255, 255, 255, .105),
            transparent 23%),
        radial-gradient(
            circle at 50% 84%,
            rgba(7, 48, 26, .48),
            transparent 29%),
        radial-gradient(
            circle at 89% 73%,
            rgba(86, 164, 105, .23),
            transparent 25%);

    filter: blur(25px);

    animation:
        showcase-aurora-b-ahnd2xl8gq 19s ease-in-out infinite;
}


.showcase-banner[b-ahnd2xl8gq]::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size:
        48px 48px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .2),
            transparent 76%);

    opacity: .6;
}


.showcase-shape[b-ahnd2xl8gq] {
    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-ahnd2xl8gq] {
    width: 360px;
    height: 360px;

    top: -235px;
    right: -105px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        shape-one-motion-b-ahnd2xl8gq 12s ease-in-out infinite;
}


.shape-two[b-ahnd2xl8gq] {
    width: 310px;
    height: 310px;

    bottom: -210px;
    left: 35%;

    background:
        rgba(109, 190, 123, .1);

    animation:
        shape-two-motion-b-ahnd2xl8gq 14s ease-in-out infinite;
}


.shape-three[b-ahnd2xl8gq] {
    width: 210px;
    height: 210px;

    top: 42%;
    right: 44%;

    border:
        1px solid rgba(255, 255, 255, .075);

    animation:
        shape-three-motion-b-ahnd2xl8gq 18s linear infinite;
}


.showcase-content[b-ahnd2xl8gq] {
    position: relative;
    z-index: 4;

    padding: 57px 66px 57px 42px;

    color: #fff;

    text-align: right;
}


.showcase-badge[b-ahnd2xl8gq] {
    min-height: 41px;
    padding: 0 18px;

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

    border:
        1px solid rgba(255, 255, 255, .22);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .105);

    color:
        rgba(255, 255, 255, .97);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;

    backdrop-filter: blur(8px);
}


.showcase-content h2[b-ahnd2xl8gq] {
    max-width: 740px;

    margin: 20px 0 0;

    color: #fff;

    font-size:
        clamp(35px, 3.7vw, 47px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.4px;

    text-wrap: balance;

    text-shadow:
        0 5px 22px rgba(7, 38, 20, .13);
}


.showcase-content p[b-ahnd2xl8gq] {
    max-width: 690px;

    margin: 17px 0 0;

    color:
        rgba(255, 255, 255, .9);

    font-size: 18px;
    font-weight: 500;
    line-height: 2.15;

    text-wrap: balance;
}


.showcase-actions[b-ahnd2xl8gq] {
    margin-top: 29px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 13px;
}


.showcase-action[b-ahnd2xl8gq] {
    min-height: 55px;
    padding: 0 23px;

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

    gap: 9px;

    border:
        1px solid rgba(255, 255, 255, .9);

    border-radius: 14px;

    font-family: inherit;
    font-size: 16px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.showcase-action.primary[b-ahnd2xl8gq] {
    background: #fff;
    color: var(--green);

    box-shadow:
        0 13px 30px rgba(8, 42, 23, .14);
}


.showcase-action.secondary[b-ahnd2xl8gq] {
    border-color:
        rgba(255, 255, 255, .34);

    background:
        rgba(255, 255, 255, .09);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07);

    backdrop-filter: blur(8px);
}


.showcase-action svg[b-ahnd2xl8gq] {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.showcase-action:hover[b-ahnd2xl8gq] {
    transform: translateY(-3px);
}


.showcase-action.primary:hover[b-ahnd2xl8gq] {
    border-color:
        rgba(255, 255, 255, .7);

    background:
        rgba(255, 255, 255, .12);

    color: #fff;

    box-shadow:
        0 17px 36px rgba(8, 42, 23, .2);
}


.showcase-action.secondary:hover[b-ahnd2xl8gq] {
    border-color:
        rgba(255, 255, 255, .76);

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        0 14px 30px rgba(8, 42, 23, .14);
}


.showcase-action:hover svg[b-ahnd2xl8gq] {
    transform: translateX(-3px);
}


.showcase-action:focus-visible[b-ahnd2xl8gq] {
    outline:
        4px solid rgba(255, 255, 255, .2);

    outline-offset: 4px;
}


.showcase-visual[b-ahnd2xl8gq] {
    position: relative;
    z-index: 3;

    min-width: 0;
    min-height: 430px;

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

    direction: ltr;
    overflow: hidden;
}


.showcase-visual[b-ahnd2xl8gq]::before {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .15),
            rgba(255, 255, 255, .035) 52%,
            transparent 71%);

    animation:
        visual-glow-b-ahnd2xl8gq 7s ease-in-out infinite;
}


.brand-stage[b-ahnd2xl8gq] {
    position: relative;
    z-index: 4;

    width: 270px;
    height: 270px;

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

    border:
        1px solid rgba(255, 255, 255, .35);

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 14px rgba(255, 255, 255, .05),
        0 24px 57px rgba(5, 39, 20, .24),
        inset 0 1px 0 #fff;

    animation:
        brand-stage-float-b-ahnd2xl8gq 6s ease-in-out infinite;
}


.brand-glow[b-ahnd2xl8gq] {
    position: absolute;
    z-index: -1;

    inset: -23px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137, 211, 148, .22),
            transparent 68%);

    animation:
        brand-glow-pulse-b-ahnd2xl8gq 5s ease-in-out infinite;
}


.vetban-logo[b-ahnd2xl8gq] {
    width: 82%;
    height: 82%;

    display: block;

    object-fit: contain;
    mix-blend-mode: multiply;

    filter:
        contrast(1.02)
        saturate(.95);

    transition:
        transform .45s ease,
        filter .45s ease;
}


.brand-stage:hover
.vetban-logo[b-ahnd2xl8gq] {
    transform: scale(1.035);

    filter:
        contrast(1.04)
        saturate(1.02);
}


.brand-orbit[b-ahnd2xl8gq] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-outer[b-ahnd2xl8gq] {
    width: 370px;
    height: 370px;

    border:
        1px dashed rgba(255, 255, 255, .25);

    animation:
        orbit-clockwise-b-ahnd2xl8gq 30s linear infinite;
}


.orbit-middle[b-ahnd2xl8gq] {
    width: 320px;
    height: 320px;

    border:
        1px solid rgba(255, 255, 255, .12);

    animation:
        orbit-counter-clockwise-b-ahnd2xl8gq 24s linear infinite;
}


.orbit-node[b-ahnd2xl8gq] {
    position: absolute;
    z-index: 5;

    width: 50px;
    height: 50px;

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

    border:
        1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .14);

    color: #fff;

    box-shadow:
        0 10px 25px rgba(7, 42, 22, .16),
        inset 0 1px 0 rgba(255, 255, 255, .13);

    backdrop-filter: blur(9px);

    animation:
        node-float-b-ahnd2xl8gq 5s ease-in-out infinite;
}


.orbit-node svg[b-ahnd2xl8gq] {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.consultation-node[b-ahnd2xl8gq] {
    top: 42px;
    right: 75px;

    animation-delay: -.8s;
}


.prescription-node[b-ahnd2xl8gq] {
    right: 47px;
    bottom: 53px;

    animation-delay: -2.4s;
}


.pharmacy-node[b-ahnd2xl8gq] {
    bottom: 44px;
    left: 63px;

    animation-delay: -3.6s;
}


.visual-dot[b-ahnd2xl8gq] {
    position: absolute;
    z-index: 3;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .62);

    box-shadow:
        0 0 15px rgba(255, 255, 255, .28);

    animation:
        dot-breathe-b-ahnd2xl8gq 4s ease-in-out infinite;
}


.dot-one[b-ahnd2xl8gq] {
    width: 7px;
    height: 7px;

    top: 25%;
    left: 16%;
}


.dot-two[b-ahnd2xl8gq] {
    width: 5px;
    height: 5px;

    top: 17%;
    right: 22%;

    animation-delay: -1.1s;
}


.dot-three[b-ahnd2xl8gq] {
    width: 8px;
    height: 8px;

    right: 12%;
    bottom: 25%;

    animation-delay: -2.1s;
}


.dot-four[b-ahnd2xl8gq] {
    width: 4px;
    height: 4px;

    bottom: 17%;
    left: 20%;

    animation-delay: -3s;
}


@keyframes showcase-gradient-b-ahnd2xl8gq {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


@keyframes showcase-aurora-b-ahnd2xl8gq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate3d(2%, -1%, 0)
            rotate(8deg)
            scale(1.07);
    }
}


@keyframes shape-one-motion-b-ahnd2xl8gq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-17px, 14px, 0)
            scale(1.06);
    }
}


@keyframes shape-two-motion-b-ahnd2xl8gq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(18px, -13px, 0)
            scale(1.08);
    }
}


@keyframes shape-three-motion-b-ahnd2xl8gq {

    to {
        transform: rotate(360deg);
    }
}


@keyframes visual-glow-b-ahnd2xl8gq {

    0%,
    100% {
        transform: scale(.96);
        opacity: .72;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}


@keyframes brand-stage-float-b-ahnd2xl8gq {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-8px)
            rotate(-1deg);
    }
}


@keyframes brand-glow-pulse-b-ahnd2xl8gq {

    0%,
    100% {
        opacity: .65;
        transform: scale(.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}


@keyframes orbit-clockwise-b-ahnd2xl8gq {

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbit-counter-clockwise-b-ahnd2xl8gq {

    to {
        transform: rotate(-360deg);
    }
}


@keyframes node-float-b-ahnd2xl8gq {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


@keyframes dot-breathe-b-ahnd2xl8gq {

    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}


@media (max-width: 1000px) {

    .showcase-banner[b-ahnd2xl8gq] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .82fr);
    }


    .showcase-content[b-ahnd2xl8gq] {
        padding:
            49px 44px 49px 30px;
    }


    .showcase-content h2[b-ahnd2xl8gq] {
        font-size:
            clamp(32px, 4vw, 41px);
    }


    .brand-stage[b-ahnd2xl8gq] {
        width: 225px;
        height: 225px;
    }


    .orbit-outer[b-ahnd2xl8gq] {
        width: 315px;
        height: 315px;
    }


    .orbit-middle[b-ahnd2xl8gq] {
        width: 275px;
        height: 275px;
    }
}


@media (max-width: 820px) {

    .vetban-showcase[b-ahnd2xl8gq] {
        padding: 28px 0 80px;
    }


    .showcase-banner[b-ahnd2xl8gq] {
        grid-template-columns: 1fr;

        min-height: auto;

        border-radius:
            30px 52px 30px 52px;
    }


    .showcase-content[b-ahnd2xl8gq] {
        padding:
            47px 38px 22px;

        text-align: center;
    }


    .showcase-content h2[b-ahnd2xl8gq],
    .showcase-content p[b-ahnd2xl8gq] {
        margin-right: auto;
        margin-left: auto;
    }


    .showcase-actions[b-ahnd2xl8gq] {
        justify-content: center;
    }


    .showcase-visual[b-ahnd2xl8gq] {
        min-height: 360px;
    }


    .shape-three[b-ahnd2xl8gq] {
        display: none;
    }
}


@media (max-width: 620px) {

    .vetban-showcase[b-ahnd2xl8gq] {
        padding: 20px 0 68px;
    }


    .showcase-banner[b-ahnd2xl8gq] {
        border-radius:
            24px 40px 24px 40px;
    }


    .showcase-content[b-ahnd2xl8gq] {
        padding:
            38px 21px 19px;
    }


    .showcase-badge[b-ahnd2xl8gq] {
        min-height: 37px;
        padding: 0 14px;

        font-size: 14px;
    }


    .showcase-content h2[b-ahnd2xl8gq] {
        margin-top: 17px;

        font-size: 29px;
        line-height: 1.7;
    }


    .showcase-content p[b-ahnd2xl8gq] {
        margin-top: 13px;

        font-size: 16px;
        line-height: 2.05;
    }


    .showcase-actions[b-ahnd2xl8gq] {
        margin-top: 23px;

        align-items: stretch;
        flex-direction: column;
    }


    .showcase-action[b-ahnd2xl8gq] {
        width: 100%;
        min-height: 52px;

        font-size: 15px;
    }


    .showcase-visual[b-ahnd2xl8gq] {
        min-height: 310px;
    }


    .brand-stage[b-ahnd2xl8gq] {
        width: 185px;
        height: 185px;
    }


    .orbit-outer[b-ahnd2xl8gq] {
        width: 260px;
        height: 260px;
    }


    .orbit-middle[b-ahnd2xl8gq] {
        width: 225px;
        height: 225px;
    }


    .orbit-node[b-ahnd2xl8gq] {
        width: 41px;
        height: 41px;
    }


    .orbit-node svg[b-ahnd2xl8gq] {
        width: 20px;
        height: 20px;
    }


    .consultation-node[b-ahnd2xl8gq] {
        top: 25px;
        right: 52px;
    }


    .prescription-node[b-ahnd2xl8gq] {
        right: 29px;
        bottom: 38px;
    }


    .pharmacy-node[b-ahnd2xl8gq] {
        bottom: 31px;
        left: 40px;
    }
}


@media (max-width: 380px) {

    .showcase-content[b-ahnd2xl8gq] {
        padding:
            34px 17px 15px;
    }


    .showcase-content h2[b-ahnd2xl8gq] {
        font-size: 26px;
    }


    .showcase-content p[b-ahnd2xl8gq] {
        font-size: 15px;
    }


    .showcase-visual[b-ahnd2xl8gq] {
        min-height: 285px;
    }


    .brand-stage[b-ahnd2xl8gq] {
        width: 165px;
        height: 165px;
    }


    .orbit-outer[b-ahnd2xl8gq] {
        width: 235px;
        height: 235px;
    }


    .orbit-middle[b-ahnd2xl8gq] {
        width: 205px;
        height: 205px;
    }
}


@media (hover: none) {

    .showcase-action:hover[b-ahnd2xl8gq] {
        transform: none;
    }


    .showcase-action.primary:hover[b-ahnd2xl8gq] {
        border-color:
            rgba(255, 255, 255, .9);

        background: #fff;
        color: var(--green);
    }


    .showcase-action.secondary:hover[b-ahnd2xl8gq] {
        border-color:
            rgba(255, 255, 255, .34);

        background:
            rgba(255, 255, 255, .09);

        color: #fff;
    }
}


@media (prefers-reduced-motion: reduce) {

    .showcase-banner[b-ahnd2xl8gq],
    .showcase-banner[b-ahnd2xl8gq]::before,
    .showcase-shape[b-ahnd2xl8gq],
    .showcase-visual[b-ahnd2xl8gq]::before,
    .brand-stage[b-ahnd2xl8gq],
    .brand-glow[b-ahnd2xl8gq],
    .brand-orbit[b-ahnd2xl8gq],
    .orbit-node[b-ahnd2xl8gq],
    .visual-dot[b-ahnd2xl8gq] {
        animation: none;
    }


    .showcase-action[b-ahnd2xl8gq],
    .showcase-action svg[b-ahnd2xl8gq],
    .vetban-logo[b-ahnd2xl8gq] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutContactSection.razor.rz.scp.css */
.about-contact[b-vjnbkx5vqp] {
    position: relative;
    padding: 92px 0 100px;
    overflow: hidden;
    direction: rtl;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(36, 89, 166, .055),
            transparent 28%),
        radial-gradient(
            circle at 88% 82%,
            rgba(58, 125, 68, .055),
            transparent 30%),
        #fafbfc;
}


.contact-layout[b-vjnbkx5vqp] {
    display: grid;
    grid-template-columns:
        minmax(340px, .76fr)
        minmax(0, 1.24fr);
    align-items: start;
    gap: 28px;
}


.contact-information[b-vjnbkx5vqp],
.contact-form-card[b-vjnbkx5vqp] {
    min-width: 0;
    align-self: start;
    border: 1px solid rgba(31, 41, 55, .085);
    border-radius: 32px;
}


.contact-information[b-vjnbkx5vqp] {
    padding: 43px 38px;

    background:
        linear-gradient(
            145deg,
            #f1f4f7,
            #f7f9fb);

    box-shadow:
        0 20px 48px rgba(31, 41, 55, .06);
}


.contact-badge[b-vjnbkx5vqp] {
    min-height: 34px;
    padding: 0 14px;

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

    border-radius: 999px;

    background: rgba(36, 89, 166, .09);
    color: #2459a6;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.contact-information h2[b-vjnbkx5vqp] {
    margin: 18px 0 0;

    color: var(--text);

    font-size: clamp(30px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.6;
}


.contact-description[b-vjnbkx5vqp] {
    margin: 15px 0 0;

    color: #4c596b;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.05;
}


.contact-details[b-vjnbkx5vqp] {
    margin-top: 34px;

    display: flex;
    flex-direction: column;
    gap: 14px;
}


.contact-detail[b-vjnbkx5vqp] {
    min-width: 0;
    padding: 18px;

    display: flex;
    align-items: flex-start;
    gap: 15px;

    border: 1px solid rgba(31, 41, 55, .07);
    border-radius: 19px;

    background: rgba(255, 255, 255, .72);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease;
}


.contact-detail:hover[b-vjnbkx5vqp] {
    transform: translateY(-2px);

    border-color: rgba(58, 125, 68, .2);
    background: #fff;
}


.detail-icon[b-vjnbkx5vqp] {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;

    border-radius: 15px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);
}


.contact-detail:nth-child(even) .detail-icon[b-vjnbkx5vqp] {
    background: rgba(36, 89, 166, .09);
    color: #2459a6;
}


.detail-icon svg[b-vjnbkx5vqp] {
    width: 24px;
    height: 24px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.contact-detail > div[b-vjnbkx5vqp] {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}


.contact-detail strong[b-vjnbkx5vqp] {
    color: var(--text);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.75;
}


.contact-detail a[b-vjnbkx5vqp],
.contact-detail > div > span[b-vjnbkx5vqp] {
    color: #4d5a6b;

    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.95;

    overflow-wrap: anywhere;

    text-decoration: none;
}


.contact-detail a:hover[b-vjnbkx5vqp] {
    color: var(--green);
}


.contact-form-card[b-vjnbkx5vqp] {
    height: auto;
    min-height: 0;
    padding: 43px 42px 32px;

    background: #fff;

    box-shadow:
        0 22px 54px rgba(31, 41, 55, .075);
}


.form-heading[b-vjnbkx5vqp] {
    margin-bottom: 30px;
}


.form-heading > span[b-vjnbkx5vqp] {
    display: block;
    margin-bottom: 8px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.form-heading h2[b-vjnbkx5vqp] {
    margin: 0;

    color: var(--text);

    font-size: clamp(28px, 2.8vw, 37px);
    font-weight: 900;
    line-height: 1.65;
}


.form-heading p[b-vjnbkx5vqp] {
    max-width: 720px;
    margin: 11px 0 0;

    color: #526071;

    font-size: 16.5px;
    font-weight: 500;
    line-height: 2;
}


.contact-form[b-vjnbkx5vqp],
.contact-form-scope[b-vjnbkx5vqp] {
    display: block;
}


.form-grid[b-vjnbkx5vqp] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 21px 18px;
}


.form-field[b-vjnbkx5vqp] {
    min-width: 0;
}


.field-full[b-vjnbkx5vqp] {
    grid-column: 1 / -1;
}


.form-field label[b-vjnbkx5vqp],
.otp-input-wrap label[b-vjnbkx5vqp] {
    margin: 0 0 9px;

    display: block;

    color: #273244;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;

    text-align: right;
}


.form-field label > span[b-vjnbkx5vqp] {
    margin-right: 2px;

    color: #d92d3e;

    font-size: 17px;
    font-weight: 900;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control {
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 0 17px;

    display: block;

    border: 1px solid #d3dbe5;
    border-radius: 14px;
    outline: none;

    background: #fbfcfd;
    color: #202b3c;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;

    text-align: right;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control::placeholder {
    color: #737f90;
    opacity: 1;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control:hover:not(:disabled) {
    border-color: rgba(36, 89, 166, .42);
    background: #fff;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control:focus {
    border-color: #3a7d44;
    background: #fff;

    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .11);
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control:disabled {
    border-color: #dfe4ea;

    background: #f3f5f7;
    color: #687383;

    cursor: not-allowed;
    opacity: 1;
}


.contact-form-scope[b-vjnbkx5vqp]  input[type="email"],
.contact-form-scope[b-vjnbkx5vqp]  input[type="tel"] {
    direction: ltr;
    text-align: left;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-select {
    min-height: 56px;
    padding: 0 17px 0 44px;

    direction: rtl;

    background-color: #fbfcfd;

    cursor: pointer;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-select:focus {
    background-color: #fff;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-textarea {
    min-height: 145px;
    padding: 15px 17px;

    line-height: 2;

    resize: vertical;
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control.modified.invalid {
    border-color: rgba(201, 54, 70, .72);

    background: rgba(201, 54, 70, .025);

    box-shadow:
        0 0 0 4px rgba(201, 54, 70, .075);
}


.contact-form-scope[b-vjnbkx5vqp]  .form-control.modified.valid {
    border-color: rgba(58, 125, 68, .52);
    background: #fff;
}


.contact-form-scope[b-vjnbkx5vqp]  .validation-message {
    margin: 7px 2px 0;

    display: block;

    color: #c62f40;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;

    text-align: right;
}


.form-button[b-vjnbkx5vqp] {
    min-height: 56px;
    padding: 0 25px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 16.5px;
    font-weight: 900;
    line-height: 1.5;

    text-align: center;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


.form-button.primary[b-vjnbkx5vqp] {
    background: var(--green);
    color: #fff;

    box-shadow:
        0 12px 27px rgba(58, 125, 68, .17);
}


.form-button.primary:hover:not(:disabled)[b-vjnbkx5vqp] {
    transform: translateY(-2px);

    background: #326f3c;

    box-shadow:
        0 16px 31px rgba(58, 125, 68, .22);
}


.form-button.secondary[b-vjnbkx5vqp] {
    border-color: rgba(36, 89, 166, .26);

    background: #fff;
    color: #2459a6;
}


.form-button.secondary:hover:not(:disabled)[b-vjnbkx5vqp] {
    border-color: rgba(36, 89, 166, .55);

    background: rgba(36, 89, 166, .035);
}


.form-button:disabled[b-vjnbkx5vqp] {
    cursor: wait;
    opacity: .68;
}


.submit-button[b-vjnbkx5vqp] {
    min-width: 245px;
    margin-top: 25px;
}


.form-button:focus-visible[b-vjnbkx5vqp],
.resend-button:focus-visible[b-vjnbkx5vqp] {
    outline: 3px solid rgba(36, 89, 166, .18);
    outline-offset: 3px;
}


/* OTP verification */

.otp-panel[b-vjnbkx5vqp] {
    width: min(100%, 620px);
    margin: 28px auto 0;
    padding: 30px 34px 28px;

    display: flex;
    align-items: center;
    flex-direction: column;

    border: 1px solid rgba(36, 89, 166, .16);
    border-radius: 23px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(36, 89, 166, .055),
            transparent 50%),
        linear-gradient(
            145deg,
            rgba(247, 250, 254, .98),
            rgba(248, 252, 249, .97));

    box-shadow:
        0 13px 32px rgba(31, 41, 55, .045);

    text-align: center;

    animation:
        otp-reveal-b-vjnbkx5vqp .3s ease both;
}


.otp-heading[b-vjnbkx5vqp] {
    width: 100%;

    display: flex;
    align-items: center;
    flex-direction: column;

    gap: 12px;

    text-align: center;
}


.otp-symbol[b-vjnbkx5vqp] {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;

    border: 1px solid rgba(36, 89, 166, .08);
    border-radius: 16px;

    background: #fff;
    color: #2459a6;

    box-shadow:
        0 9px 22px rgba(31, 41, 55, .075);
}


.otp-symbol svg[b-vjnbkx5vqp] {
    width: 25px;
    height: 25px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.otp-heading > div[b-vjnbkx5vqp] {
    width: 100%;
}


.otp-heading strong[b-vjnbkx5vqp] {
    display: block;

    color: var(--text);

    font-size: 20px;
    font-weight: 900;
    line-height: 1.7;

    text-align: center;
}


.otp-heading p[b-vjnbkx5vqp] {
    max-width: 470px;
    margin: 5px auto 0;

    color: #526071;

    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.95;

    text-align: center;
}


.otp-content[b-vjnbkx5vqp] {
    width: 100%;
    margin-top: 22px;

    display: flex;
    align-items: center;
    flex-direction: column;

    gap: 10px;
}


.otp-input-wrap[b-vjnbkx5vqp] {
    width: min(100%, 350px);

    display: flex;
    align-items: center;
    flex-direction: column;
}


.otp-input-wrap label[b-vjnbkx5vqp] {
    width: 100%;
    margin: 0 0 9px;

    text-align: center;
}


.otp-input[b-vjnbkx5vqp] {
    width: 100%;
    height: 60px;
    padding: 0 18px;

    border: 1px solid #cfd8e4;
    border-radius: 15px;
    outline: none;

    background: #fff;
    color: #202b3c;

    direction: ltr;

    font-family:
        Arial,
        sans-serif;

    font-size: 23px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 9px;
    text-align: center;

    box-shadow:
        0 7px 18px rgba(31, 41, 55, .035);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.otp-input[b-vjnbkx5vqp]::placeholder {
    color: #8490a0;
    opacity: 1;
}


.otp-input:hover:not(:disabled)[b-vjnbkx5vqp] {
    border-color: rgba(36, 89, 166, .44);
}


.otp-input:focus[b-vjnbkx5vqp] {
    border-color: #2459a6;
    background: #fff;

    box-shadow:
        0 0 0 4px rgba(36, 89, 166, .11);
}


.otp-input.invalid[b-vjnbkx5vqp] {
    border-color: rgba(201, 54, 70, .72);

    background: rgba(201, 54, 70, .025);

    box-shadow:
        0 0 0 4px rgba(201, 54, 70, .075);
}


.otp-input:disabled[b-vjnbkx5vqp] {
    background: #f3f5f7;

    cursor: not-allowed;
    opacity: .72;
}


.otp-error[b-vjnbkx5vqp] {
    width: 100%;
    margin: 8px 0 0;

    display: block;

    color: #c62f40;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;

    text-align: center;
}


.resend-button[b-vjnbkx5vqp] {
    min-height: 40px;
    margin: 1px auto 0;
    padding: 0 12px;

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

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #2459a6;

    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.7;

    text-align: center;

    cursor: pointer;

    transition:
        color .2s ease,
        background-color .2s ease;
}


.resend-button:hover:not(:disabled)[b-vjnbkx5vqp] {
    background: rgba(36, 89, 166, .055);
    color: var(--green);
}


.resend-button:disabled[b-vjnbkx5vqp] {
    color: #758093;

    cursor: default;
}


.otp-actions[b-vjnbkx5vqp] {
    width: 100%;
    margin-top: 21px;

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

    gap: 13px;
}


.otp-actions .form-button[b-vjnbkx5vqp] {
    width: min(100%, 190px);
    min-width: 0;
    padding: 0 18px;

    flex: 0 1 190px;
}


.button-spinner[b-vjnbkx5vqp] {
    width: 19px;
    height: 19px;

    display: inline-block;

    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #fff;
    border-radius: 50%;

    animation:
        spin-b-vjnbkx5vqp .7s linear infinite;
}


.contact-toast[b-vjnbkx5vqp] {
    position: fixed;
    z-index: 1300;

    top: 96px;
    left: 24px;

    width: min(430px, calc(100vw - 32px));
    padding: 17px 18px;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    border: 1px solid rgba(58, 125, 68, .2);
    border-radius: 18px;

    background: rgba(247, 253, 248, .98);

    box-shadow:
        0 18px 45px rgba(31, 41, 55, .14);

    animation:
        toast-enter-b-vjnbkx5vqp .35s ease both;

    backdrop-filter: blur(12px);
}


.toast-icon[b-vjnbkx5vqp] {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;

    border-radius: 13px;

    background: rgba(58, 125, 68, .12);
    color: var(--green);
}


.toast-icon svg[b-vjnbkx5vqp] {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.contact-toast strong[b-vjnbkx5vqp] {
    display: block;

    color: #255d30;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.contact-toast div > span[b-vjnbkx5vqp] {
    display: block;
    margin-top: 2px;

    color: #496052;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;
}


@keyframes otp-reveal-b-vjnbkx5vqp {
    from {
        opacity: 0;

        transform:
            translateY(-8px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes toast-enter-b-vjnbkx5vqp {
    from {
        opacity: 0;

        transform:
            translateY(-12px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes spin-b-vjnbkx5vqp {
    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 1050px) {
    .contact-layout[b-vjnbkx5vqp] {
        grid-template-columns:
            minmax(300px, .8fr)
            minmax(0, 1.2fr);

        gap: 20px;
    }


    .contact-information[b-vjnbkx5vqp] {
        padding: 34px 29px;

        border-radius: 27px;
    }


    .contact-form-card[b-vjnbkx5vqp] {
        padding: 34px 29px 28px;

        border-radius: 27px;
    }


    .form-grid[b-vjnbkx5vqp] {
        grid-template-columns: 1fr;
    }


    .field-full[b-vjnbkx5vqp] {
        grid-column: auto;
    }


    .otp-panel[b-vjnbkx5vqp] {
        width: min(100%, 580px);
    }
}


@media (max-width: 820px) {
    .about-contact[b-vjnbkx5vqp] {
        padding: 74px 0 82px;
    }


    .contact-layout[b-vjnbkx5vqp] {
        grid-template-columns: 1fr;
    }


    .contact-information[b-vjnbkx5vqp] {
        order: 1;
    }


    .contact-form-card[b-vjnbkx5vqp] {
        order: 2;
    }


    .contact-details[b-vjnbkx5vqp] {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .otp-panel[b-vjnbkx5vqp] {
        width: min(100%, 620px);
    }
}


@media (max-width: 620px) {
    .about-contact[b-vjnbkx5vqp] {
        padding: 60px 0 68px;
    }


    .contact-information[b-vjnbkx5vqp] {
        padding: 27px 20px;

        border-radius: 23px;
    }


    .contact-form-card[b-vjnbkx5vqp] {
        padding: 27px 20px 24px;

        border-radius: 23px;
    }


    .contact-information h2[b-vjnbkx5vqp],
    .form-heading h2[b-vjnbkx5vqp] {
        font-size: 28px;
    }


    .contact-description[b-vjnbkx5vqp],
    .form-heading p[b-vjnbkx5vqp] {
        font-size: 16px;
        line-height: 2;
    }


    .contact-details[b-vjnbkx5vqp] {
        grid-template-columns: 1fr;

        margin-top: 27px;
    }


    .contact-detail[b-vjnbkx5vqp] {
        padding: 16px;
    }


    .form-heading[b-vjnbkx5vqp] {
        margin-bottom: 25px;
    }


    .form-grid[b-vjnbkx5vqp] {
        gap: 18px;
    }


    .contact-form-scope[b-vjnbkx5vqp]  .form-control {
        min-height: 54px;

        font-size: 16px;
    }


    .contact-form-scope[b-vjnbkx5vqp]  .form-textarea {
        min-height: 135px;
    }


    .submit-button[b-vjnbkx5vqp],
    .form-button[b-vjnbkx5vqp] {
        width: 100%;
    }


    .submit-button[b-vjnbkx5vqp] {
        min-width: 0;
        margin-top: 23px;
    }


    .otp-panel[b-vjnbkx5vqp] {
        width: 100%;
        padding: 24px 17px 20px;

        border-radius: 19px;
    }


    .otp-heading[b-vjnbkx5vqp] {
        gap: 10px;
    }


    .otp-heading strong[b-vjnbkx5vqp] {
        font-size: 19px;
    }


    .otp-heading p[b-vjnbkx5vqp] {
        font-size: 15px;
    }


    .otp-content[b-vjnbkx5vqp] {
        margin-top: 19px;
    }


    .otp-input-wrap[b-vjnbkx5vqp] {
        width: min(100%, 330px);
    }


    .otp-input[b-vjnbkx5vqp] {
        height: 58px;

        font-size: 21px;
        letter-spacing: 7px;
    }


    .otp-actions[b-vjnbkx5vqp] {
        align-items: stretch;
        flex-direction: column;

        gap: 10px;
    }


    .otp-actions .form-button[b-vjnbkx5vqp] {
        width: 100%;

        flex: none;
    }


    .contact-toast[b-vjnbkx5vqp] {
        top: 82px;
        left: 16px;
    }
}


@media (max-width: 400px) {
    .contact-information[b-vjnbkx5vqp] {
        padding: 24px 16px;
    }


    .contact-form-card[b-vjnbkx5vqp] {
        padding: 24px 16px 22px;
    }


    .contact-information h2[b-vjnbkx5vqp],
    .form-heading h2[b-vjnbkx5vqp] {
        font-size: 25px;
    }


    .contact-detail[b-vjnbkx5vqp] {
        gap: 12px;
    }


    .detail-icon[b-vjnbkx5vqp],
    .otp-symbol[b-vjnbkx5vqp] {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .otp-panel[b-vjnbkx5vqp] {
        padding:
            22px 13px 18px;
    }


    .otp-input[b-vjnbkx5vqp] {
        font-size: 20px;
        letter-spacing: 6px;
    }
}


@media (hover: none) {
    .contact-detail:hover[b-vjnbkx5vqp],
    .form-button.primary:hover[b-vjnbkx5vqp] {
        transform: none;
    }


    .contact-form-scope[b-vjnbkx5vqp]  .form-control:hover:not(:disabled),
    .otp-input:hover:not(:disabled)[b-vjnbkx5vqp] {
        border-color: #d3dbe5;
    }
}


@media (prefers-reduced-motion: reduce) {
    .contact-detail[b-vjnbkx5vqp],
    .form-button[b-vjnbkx5vqp],
    .contact-form-scope[b-vjnbkx5vqp]  .form-control,
    .otp-input[b-vjnbkx5vqp],
    .otp-panel[b-vjnbkx5vqp],
    .contact-toast[b-vjnbkx5vqp],
    .button-spinner[b-vjnbkx5vqp] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

.form-api-error[b-vjnbkx5vqp] {
    margin-top: 22px;
    padding: 13px 16px;

    border:
        1px solid rgba(198, 47, 64, .2);

    border-radius: 12px;

    background:
        rgba(198, 47, 64, .055);

    color: #b42334;

    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.9;

    text-align: right;
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutDesignValuesSection.razor.rz.scp.css */
.design-values[b-lww4d05lt7] {
    position: relative;

    padding: 84px 0 92px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #f3f6f9 0%,
            #f6f8fa 48%,
            #f1f6f3 100%);
}


.design-values[b-lww4d05lt7]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .045) 0 3px,
            transparent 4px),
        radial-gradient(
            circle,
            rgba(36, 89, 166, .04) 0 3px,
            transparent 4px);

    background-position:
        0 0,
        70px 70px;

    background-size:
        140px 140px;

    opacity: .28;
}


.values-shape[b-lww4d05lt7] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-lww4d05lt7] {
    width: 350px;
    height: 350px;

    top: -245px;
    right: -125px;

    background:
        rgba(58, 125, 68, .05);
}


.shape-two[b-lww4d05lt7] {
    width: 310px;
    height: 310px;

    bottom: -225px;
    left: -105px;

    background:
        rgba(36, 89, 166, .05);
}


.values-container[b-lww4d05lt7] {
    position: relative;
    z-index: 2;
}


.values-heading[b-lww4d05lt7] {
    max-width: 900px;

    margin: 0 auto 49px;

    text-align: center;
}


.values-label[b-lww4d05lt7] {
    min-height: 42px;
    padding: 0 17px;

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

    gap: 9px;

    border:
        1px solid rgba(36, 89, 166, .11);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .92);

    color: var(--green);

    box-shadow:
        0 10px 25px rgba(31, 41, 55, .05);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.85;
}


.values-label > span[b-lww4d05lt7] {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #2459a6;

    box-shadow:
        0 0 0 5px rgba(36, 89, 166, .07);
}


.values-heading h2[b-lww4d05lt7] {
    margin: 20px 0 0;

    color: #465164;

    font-size:
        clamp(34px, 4vw, 47px);

    font-weight: 900;
    line-height: 1.6;

    letter-spacing: -.4px;

    text-wrap: balance;
}


.values-heading p[b-lww4d05lt7] {
    max-width: 850px;

    margin: 16px auto 0;

    color: #46556a;

    font-size: 19px;
    font-weight: 500;
    line-height: 2.15;
}


.values-grid[b-lww4d05lt7] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.value-card[b-lww4d05lt7] {
    position: relative;

    min-width: 0;
    min-height: 275px;
    padding: 34px 27px 29px;

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, .095);

    border-radius:
        24px 31px 24px 31px;

    background:
        rgba(255, 255, 255, .95);

    box-shadow:
        0 14px 36px rgba(31, 41, 55, .05);

    text-align: right;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


.value-card[b-lww4d05lt7]::before {
    content: "";

    position: absolute;

    width: 135px;
    height: 135px;

    bottom: -95px;
    left: -85px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .055);

    pointer-events: none;

    transition:
        transform .3s ease;
}


.value-card:nth-child(even)[b-lww4d05lt7]::before {
    background:
        rgba(36, 89, 166, .055);
}


.value-card:hover[b-lww4d05lt7] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .24);

    box-shadow:
        0 21px 45px rgba(31, 41, 55, .085);
}


.value-card:nth-child(even):hover[b-lww4d05lt7] {
    border-color:
        rgba(36, 89, 166, .23);
}


.value-card:hover[b-lww4d05lt7]::before {
    transform: scale(1.2);
}


.value-number[b-lww4d05lt7] {
    position: absolute;

    top: 24px;
    left: 25px;

    color:
        rgba(58, 125, 68, .13);

    font-family:
        Arial,
        sans-serif;

    font-size: 43px;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;

    transition:
        color .24s ease,
        transform .24s ease;
}


.value-card:nth-child(even)
.value-number[b-lww4d05lt7] {
    color:
        rgba(36, 89, 166, .13);
}


.value-card:hover
.value-number[b-lww4d05lt7] {
    color:
        rgba(58, 125, 68, .2);

    transform: translateY(-2px);
}


.value-card:nth-child(even):hover
.value-number[b-lww4d05lt7] {
    color:
        rgba(36, 89, 166, .2);
}


.value-accent[b-lww4d05lt7] {
    width: 49px;
    height: 4px;

    margin-bottom: 51px;

    display: block;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            rgba(58, 125, 68, .22));
}


.value-card:nth-child(even)
.value-accent[b-lww4d05lt7] {
    background:
        linear-gradient(
            90deg,
            #2459a6,
            rgba(36, 89, 166, .22));
}


.value-card h3[b-lww4d05lt7] {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #354257;

    font-size: 23px;
    font-weight: 900;
    line-height: 1.75;
}


.value-card p[b-lww4d05lt7] {
    position: relative;
    z-index: 2;

    margin: 15px 0 0;

    color: #46556a;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.12;
}


@media (max-width: 1050px) {

    .values-grid[b-lww4d05lt7] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .value-card[b-lww4d05lt7] {
        min-height: 245px;
    }
}


@media (max-width: 620px) {

    .design-values[b-lww4d05lt7] {
        padding: 68px 0 74px;
    }


    .values-heading[b-lww4d05lt7] {
        margin-bottom: 34px;
    }


    .values-label[b-lww4d05lt7] {
        min-height: 39px;
        padding: 0 14px;

        font-size: 15px;
    }


    .values-heading h2[b-lww4d05lt7] {
        margin-top: 16px;

        font-size: 30px;
        line-height: 1.7;
    }


    .values-heading p[b-lww4d05lt7] {
        margin-top: 13px;

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


    .values-grid[b-lww4d05lt7] {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .value-card[b-lww4d05lt7] {
        min-height: 0;
        padding: 28px 23px 26px;

        border-radius:
            21px 28px 21px 28px;
    }


    .value-number[b-lww4d05lt7] {
        top: 21px;
        left: 21px;

        font-size: 38px;
    }


    .value-accent[b-lww4d05lt7] {
        width: 44px;

        margin-bottom: 42px;
    }


    .value-card h3[b-lww4d05lt7] {
        font-size: 21px;
    }


    .value-card p[b-lww4d05lt7] {
        margin-top: 12px;

        font-size: 16px;
        line-height: 2.08;
    }
}


@media (hover: none) {

    .value-card:hover[b-lww4d05lt7],
    .value-card:hover
    .value-number[b-lww4d05lt7] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .value-card[b-lww4d05lt7],
    .value-card[b-lww4d05lt7]::before,
    .value-number[b-lww4d05lt7] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutExperienceVisionSection.razor.rz.scp.css */
.experience-vision[b-ysy1o7ydiw] {
    position: relative;

    padding: 82px 0 90px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fbfcfd 50%,
            #fff 100%);
}


.experience-vision[b-ysy1o7ydiw]::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    top: -300px;
    right: -170px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .045);

    pointer-events: none;
}


.experience-vision[b-ysy1o7ydiw]::after {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    bottom: -285px;
    left: -130px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .04);

    pointer-events: none;
}


.vision-layout[b-ysy1o7ydiw] {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(430px, .84fr)
        minmax(0, 1.16fr);

    align-items: stretch;

    gap: 28px;

    direction: rtl;
}


.vision-panel[b-ysy1o7ydiw] {
    position: relative;

    min-width: 0;
    padding: 52px 45px 44px;

    overflow: hidden;

    border-radius:
        31px 47px 31px 47px;

    background:
        linear-gradient(
            145deg,
            #2c62aa 0%,
            #24599b 48%,
            #214f8d 100%);

    color: #fff;

    box-shadow:
        0 24px 58px rgba(36, 89, 166, .2);

    text-align: right;

    isolation: isolate;
}


.vision-panel[b-ysy1o7ydiw]::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 310px;
    height: 310px;

    top: -190px;
    left: -130px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .07);
}


.vision-panel[b-ysy1o7ydiw]::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 270px;
    height: 270px;

    right: -170px;
    bottom: -160px;

    border-radius: 50%;

    background:
        rgba(112, 186, 127, .08);
}


.vision-label[b-ysy1o7ydiw] {
    display: block;

    color:
        rgba(255, 255, 255, .84);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.9;
}


.vision-panel h2[b-ysy1o7ydiw] {
    margin: 23px 0 0;

    color: #fff;

    font-size:
        clamp(34px, 3.6vw, 45px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.4px;

    text-wrap: balance;
}


.vision-panel > p[b-ysy1o7ydiw] {
    margin: 19px 0 0;

    color:
        rgba(255, 255, 255, .88);

    font-size: 18px;
    font-weight: 500;
    line-height: 2.15;
}


.vision-checklist[b-ysy1o7ydiw] {
    margin-top: 34px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}


.check-item[b-ysy1o7ydiw] {
    min-height: 62px;
    padding: 10px 15px;

    display: flex;
    align-items: center;

    gap: 13px;

    border:
        1px solid rgba(255, 255, 255, .17);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, .075);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .04);

    backdrop-filter: blur(8px);

    transition:
        transform .22s ease,
        background-color .22s ease,
        border-color .22s ease;
}


.check-item:hover[b-ysy1o7ydiw] {
    transform: translateX(-3px);

    border-color:
        rgba(255, 255, 255, .28);

    background:
        rgba(255, 255, 255, .11);
}


.check-mark[b-ysy1o7ydiw] {
    width: 34px;
    height: 34px;

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

    flex: 0 0 34px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .16);

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;
    font-weight: 900;
}


.check-item strong[b-ysy1o7ydiw] {
    color: #fff;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.9;
}


.vision-steps[b-ysy1o7ydiw] {
    min-width: 0;

    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;
}


.vision-step[b-ysy1o7ydiw] {
    position: relative;

    min-width: 0;
    min-height: 145px;
    padding: 25px 26px;

    display: flex;
    align-items: center;

    gap: 22px;

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, .1);

    border-radius:
        23px 31px 23px 31px;

    background:
        rgba(255, 255, 255, .96);

    box-shadow:
        0 12px 32px rgba(31, 41, 55, .045);

    text-align: right;

    transition:
        transform .23s ease,
        border-color .23s ease,
        box-shadow .23s ease;
}


.vision-step[b-ysy1o7ydiw]::after {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    left: -82px;
    bottom: -80px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .045);

    pointer-events: none;
}


.vision-step:hover[b-ysy1o7ydiw] {
    transform: translateY(-4px);

    border-color:
        rgba(36, 89, 166, .22);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, .075);
}


.step-number[b-ysy1o7ydiw] {
    width: 66px;
    height: 66px;

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

    flex: 0 0 66px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #fff6ef,
            #fbf0e8);

    color: #2459a6;

    font-family:
        Arial,
        sans-serif;

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


.vision-step:nth-child(even)
.step-number[b-ysy1o7ydiw] {
    background:
        linear-gradient(
            145deg,
            #eef5fb,
            #e7f0f8);
}


.step-content[b-ysy1o7ydiw] {
    position: relative;
    z-index: 2;

    min-width: 0;
}


.step-content h3[b-ysy1o7ydiw] {
    margin: 0;

    color: #3e4b5f;

    font-size: 22px;
    font-weight: 900;
    line-height: 1.75;
}


.step-content p[b-ysy1o7ydiw] {
    margin: 9px 0 0;

    color: #4c5c70;

    font-size: 16.5px;
    font-weight: 500;
    line-height: 2.05;
}


@media (max-width: 1050px) {

    .vision-layout[b-ysy1o7ydiw] {
        grid-template-columns:
            minmax(380px, .9fr)
            minmax(0, 1.1fr);

        gap: 22px;
    }


    .vision-panel[b-ysy1o7ydiw] {
        padding: 42px 32px 36px;
    }


    .vision-panel h2[b-ysy1o7ydiw] {
        font-size:
            clamp(31px, 3.5vw, 39px);
    }


    .vision-step[b-ysy1o7ydiw] {
        padding: 22px;
    }
}


@media (max-width: 850px) {

    .experience-vision[b-ysy1o7ydiw] {
        padding: 74px 0 80px;
    }


    .vision-layout[b-ysy1o7ydiw] {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .vision-panel[b-ysy1o7ydiw] {
        grid-row: 1;
    }


    .vision-steps[b-ysy1o7ydiw] {
        grid-row: 2;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .vision-step[b-ysy1o7ydiw] {
        min-height: 205px;

        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 620px) {

    .experience-vision[b-ysy1o7ydiw] {
        padding: 64px 0 70px;
    }


    .vision-layout[b-ysy1o7ydiw] {
        gap: 24px;
    }


    .vision-panel[b-ysy1o7ydiw] {
        padding: 35px 22px 27px;

        border-radius:
            25px 37px 25px 37px;
    }


    .vision-label[b-ysy1o7ydiw] {
        font-size: 15px;
    }


    .vision-panel h2[b-ysy1o7ydiw] {
        margin-top: 16px;

        font-size: 30px;
        line-height: 1.7;
    }


    .vision-panel > p[b-ysy1o7ydiw] {
        margin-top: 13px;

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


    .vision-checklist[b-ysy1o7ydiw] {
        margin-top: 25px;

        gap: 10px;
    }


    .check-item[b-ysy1o7ydiw] {
        min-height: 57px;
        padding: 9px 12px;

        gap: 10px;

        border-radius: 14px;
    }


    .check-mark[b-ysy1o7ydiw] {
        width: 31px;
        height: 31px;

        flex-basis: 31px;

        font-size: 16px;
    }


    .check-item strong[b-ysy1o7ydiw] {
        font-size: 14px;
        line-height: 1.9;
    }


    .vision-steps[b-ysy1o7ydiw] {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .vision-step[b-ysy1o7ydiw] {
        min-height: 0;
        padding: 21px 19px;

        flex-direction: row;

        gap: 15px;

        border-radius:
            20px 27px 20px 27px;
    }


    .step-number[b-ysy1o7ydiw] {
        width: 55px;
        height: 55px;

        flex-basis: 55px;

        border-radius: 17px;

        font-size: 18px;
    }


    .step-content h3[b-ysy1o7ydiw] {
        font-size: 19px;
    }


    .step-content p[b-ysy1o7ydiw] {
        margin-top: 7px;

        font-size: 15px;
        line-height: 2;
    }
}


@media (hover: none) {

    .vision-step:hover[b-ysy1o7ydiw],
    .check-item:hover[b-ysy1o7ydiw] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .vision-step[b-ysy1o7ydiw],
    .check-item[b-ysy1o7ydiw] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutHeroSection.razor.rz.scp.css */
.about-hero[b-wysjmwnmn7] {
    position: relative;
    min-height: calc(100vh - 78px);
    padding: 26px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    direction: rtl;
    background:
        linear-gradient(
            135deg,
            #fbfcfd 0%,
            #f8fafc 46%,
            #f2f7fa 100%);
}

.about-hero[b-wysjmwnmn7]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .72),
            transparent 43%,
            rgba(255, 255, 255, .2));
    opacity: .85;
}

.hero-glow[b-wysjmwnmn7] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}

.glow-blue[b-wysjmwnmn7] {
    width: 590px;
    height: 590px;
    top: -265px;
    right: -125px;
    background:
        radial-gradient(
            circle,
            rgba(36, 89, 166, .13),
            transparent 69%);
}

.glow-green[b-wysjmwnmn7] {
    width: 560px;
    height: 560px;
    bottom: -320px;
    left: -125px;
    background:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .14),
            transparent 69%);
}

.glow-warm[b-wysjmwnmn7] {
    width: 410px;
    height: 410px;
    top: -205px;
    left: 13%;
    background:
        radial-gradient(
            circle,
            rgba(224, 145, 76, .08),
            transparent 70%);
}

.about-hero-container[b-wysjmwnmn7] {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns:
        minmax(0, .86fr)
        minmax(540px, 1.14fr);
    align-items: center;
    gap: clamp(38px, 4.7vw, 76px);
}

.about-hero-content[b-wysjmwnmn7] {
    min-width: 0;
    text-align: right;
}

.about-badge[b-wysjmwnmn7] {
    min-height: 46px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid rgba(36, 89, 166, .11);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--green);
    box-shadow:
        0 12px 30px rgba(31, 41, 55, .065),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.85;
    backdrop-filter: blur(10px);
}

.about-badge > span[b-wysjmwnmn7] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #2459a6;
    box-shadow:
        0 0 0 5px rgba(36, 89, 166, .075);
}

.about-hero-content h1[b-wysjmwnmn7] {
    max-width: 720px;
    margin: 21px 0 0;
    color: #4a5568;
    font-size: clamp(43px, 4.8vw, 62px);
    font-weight: 900;
    line-height: 1.53;
    letter-spacing: -.65px;
    text-wrap: balance;
}

.about-hero-content h1 strong[b-wysjmwnmn7] {
    display: block;
    color: #2459a6;
    font: inherit;
}

.about-description[b-wysjmwnmn7] {
    max-width: 720px;
    margin: 19px 0 0;
    color: #46566b;
    font-size: 26px;
    font-weight: 600;
    line-height: 2.2;
}

.about-actions[b-wysjmwnmn7] {
    margin-top: 27px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.about-button[b-wysjmwnmn7] {
    min-width: 185px;
    min-height: 57px;
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 14px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.8;
    text-align: center;
    text-decoration: none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}

.about-button:hover[b-wysjmwnmn7] {
    transform: translateY(-3px);
}

.about-button.primary[b-wysjmwnmn7] {
    border-color: #2459a6;
    background: #2459a6;
    color: #fff;
    box-shadow:
        0 13px 29px rgba(36, 89, 166, .19);
}

.about-button.primary:hover[b-wysjmwnmn7] {
    background: #1f4f97;
    box-shadow:
        0 17px 35px rgba(36, 89, 166, .24);
}

.about-button.outline[b-wysjmwnmn7] {
    border-color: rgba(36, 89, 166, .4);
    background: rgba(255, 255, 255, .78);
    color: #2459a6;
}

.about-button.outline:hover[b-wysjmwnmn7] {
    border-color: #2459a6;
    background: #fff;
}

.about-button:focus-visible[b-wysjmwnmn7],
.video-play:focus-visible[b-wysjmwnmn7] {
    outline: 4px solid rgba(36, 89, 166, .17);
    outline-offset: 3px;
}

.about-tags[b-wysjmwnmn7] {
    margin-top: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.about-tags span[b-wysjmwnmn7] {
    min-height: 44px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(31, 41, 55, .04);
    border-radius: 999px;
    background: rgba(233, 239, 245, .9);
    color: #334258;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.85;
    white-space: nowrap;
}

.about-video-card[b-wysjmwnmn7] {
    width: 100%;
    min-width: 0;
    padding: 16px 16px 20px;
    justify-self: start;
    overflow: hidden;
    border: 1px solid rgba(36, 89, 166, .11);
    border-radius: 31px 44px 31px 44px;
    background: rgba(255, 255, 255, .95);
    box-shadow:
        0 27px 68px rgba(31, 41, 55, .14);
    direction: rtl;
}

.video-frame[b-wysjmwnmn7] {
    position: relative;
    width: 100%;
    min-height: 350px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 23px 32px 23px 32px;
    background:
        linear-gradient(
            145deg,
            #060b14,
            #0b1422);
    isolation: isolate;
}

.video-frame[b-wysjmwnmn7]::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(2, 8, 17, .07),
            rgba(2, 8, 17, .4));
}

.video-frame video[b-wysjmwnmn7] {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    color-scheme: dark;
}

.video-presentation[b-wysjmwnmn7] {
    position: absolute;
    z-index: 3;
    top: 42%;
    right: 50%;
    width: calc(100% - 52px);
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    color: #fff;
    text-align: center;
    pointer-events: none;
    transform: translate(50%, -50%);
}

.video-play[b-wysjmwnmn7] {
    width: 88px;
    height: 88px;
    padding: 0;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow:
        0 15px 38px rgba(0, 0, 0, .27),
        inset 0 1px 0 rgba(255, 255, 255, .2);
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(9px);
    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.video-play:hover[b-wysjmwnmn7] {
    transform: scale(1.07);
    background: rgba(255, 255, 255, .24);
    box-shadow:
        0 19px 43px rgba(0, 0, 0, .32),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}

.video-play svg[b-wysjmwnmn7] {
    width: 39px;
    height: 39px;
    margin-right: -3px;
    fill: currentColor;
    stroke: currentColor;
    stroke-linejoin: round;
}

.video-presentation strong[b-wysjmwnmn7] {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 900;
    line-height: 1.7;
    text-shadow:
        0 4px 16px rgba(0, 0, 0, .42);
}

.video-presentation > span[b-wysjmwnmn7] {
    color: rgba(255, 255, 255, .84);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
}

.video-meta[b-wysjmwnmn7] {
    min-height: 53px;
    padding: 13px 13px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.video-meta strong[b-wysjmwnmn7] {
    color: #38475b;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}

.video-meta > span[b-wysjmwnmn7] {
    color: #58677b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
}

@media (min-width: 1001px) and (max-height: 820px) {
    .about-hero[b-wysjmwnmn7] {
        min-height: calc(100vh - 78px);
        padding: 16px 0;
    }

    .about-hero-container[b-wysjmwnmn7] {
        grid-template-columns:
            minmax(0, .88fr)
            minmax(510px, 1.12fr);
        gap: clamp(32px, 4vw, 62px);
    }

    .about-badge[b-wysjmwnmn7] {
        min-height: 40px;
        padding: 0 16px;
        font-size: 16px;
    }

    .about-hero-content h1[b-wysjmwnmn7] {
        margin-top: 13px;
        font-size: clamp(39px, 4vw, 51px);
        line-height: 1.47;
    }

    .about-description[b-wysjmwnmn7] {
        margin-top: 10px;
        font-size: 18px;
        line-height: 1.95;
    }

    .about-actions[b-wysjmwnmn7] {
        margin-top: 17px;
    }

    .about-button[b-wysjmwnmn7] {
        min-width: 170px;
        min-height: 49px;
        padding: 0 20px;
        font-size: 17px;
    }

    .about-tags[b-wysjmwnmn7] {
        margin-top: 14px;
        gap: 7px;
    }

    .about-tags span[b-wysjmwnmn7] {
        min-height: 37px;
        padding: 0 12px;
        font-size: 14px;
    }

    .about-video-card[b-wysjmwnmn7] {
        padding: 12px 12px 15px;
    }

    .video-frame[b-wysjmwnmn7] {
        min-height: 315px;
    }

    .video-play[b-wysjmwnmn7] {
        width: 74px;
        height: 74px;
    }

    .video-play svg[b-wysjmwnmn7] {
        width: 34px;
        height: 34px;
    }

    .video-meta[b-wysjmwnmn7] {
        min-height: 43px;
        padding-top: 9px;
    }

    .video-meta strong[b-wysjmwnmn7] {
        font-size: 15px;
    }

    .video-meta > span[b-wysjmwnmn7] {
        font-size: 14px;
    }
}

@media (min-width: 1500px) {
    .about-hero-container[b-wysjmwnmn7] {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(600px, 1.1fr);
        gap: clamp(65px, 6vw, 110px);
    }

    .about-video-card[b-wysjmwnmn7] {
        max-width: 760px;
    }

    .video-frame[b-wysjmwnmn7] {
        min-height: 395px;
    }
}

@media (max-width: 1100px) and (min-width: 1001px) {
    .about-hero-container[b-wysjmwnmn7] {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(480px, 1.05fr);
        gap: 35px;
    }

    .about-description[b-wysjmwnmn7] {
        font-size: 17px;
    }

    .about-tags span[b-wysjmwnmn7] {
        font-size: 13px;
    }

    .video-frame[b-wysjmwnmn7] {
        min-height: 300px;
    }
}

@media (max-width: 1000px) {
    .about-hero[b-wysjmwnmn7] {
        min-height: auto;
        padding: 76px 0;
    }

    .about-hero-container[b-wysjmwnmn7] {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-hero-content[b-wysjmwnmn7] {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }

    .about-hero-content h1[b-wysjmwnmn7],
    .about-description[b-wysjmwnmn7] {
        margin-right: auto;
        margin-left: auto;
    }

    .about-actions[b-wysjmwnmn7],
    .about-tags[b-wysjmwnmn7] {
        justify-content: center;
    }

    .about-video-card[b-wysjmwnmn7] {
        width: 100%;
        max-width: 840px;
        margin: 0 auto;
        justify-self: center;
    }

    .video-frame[b-wysjmwnmn7] {
        min-height: 0;
    }
}

@media (max-width: 650px) {
    .about-hero[b-wysjmwnmn7] {
        padding: 60px 0 66px;
    }

    .about-hero-container[b-wysjmwnmn7] {
        gap: 39px;
    }

    .about-badge[b-wysjmwnmn7] {
        min-height: 41px;
        padding: 0 15px;
        font-size: 15px;
    }

    .about-hero-content h1[b-wysjmwnmn7] {
        margin-top: 18px;
        font-size: 36px;
        line-height: 1.64;
        letter-spacing: 0;
    }

    .about-description[b-wysjmwnmn7] {
        margin-top: 14px;
        font-size: 17px;
        line-height: 2.1;
    }

    .about-actions[b-wysjmwnmn7] {
        margin-top: 24px;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .about-button[b-wysjmwnmn7] {
        width: 100%;
        min-height: 54px;
        font-size: 17px;
    }

    .about-tags[b-wysjmwnmn7] {
        margin-top: 21px;
        gap: 8px;
    }

    .about-tags span[b-wysjmwnmn7] {
        min-height: 41px;
        padding: 0 13px;
        flex: 1 1 145px;
        font-size: 14px;
        white-space: normal;
    }

    .about-video-card[b-wysjmwnmn7] {
        padding: 10px 10px 16px;
        border-radius: 23px 32px 23px 32px;
    }

    .video-frame[b-wysjmwnmn7] {
        min-height: 0;
        border-radius: 17px 24px 17px 24px;
    }

    .video-presentation[b-wysjmwnmn7] {
        top: 39%;
        width: calc(100% - 30px);
        gap: 5px;
    }

    .video-play[b-wysjmwnmn7] {
        width: 61px;
        height: 61px;
        margin-bottom: 3px;
    }

    .video-play svg[b-wysjmwnmn7] {
        width: 28px;
        height: 28px;
    }

    .video-presentation strong[b-wysjmwnmn7] {
        font-size: 17px;
    }

    .video-presentation > span[b-wysjmwnmn7] {
        font-size: 13px;
    }

    .video-meta[b-wysjmwnmn7] {
        min-height: 46px;
        padding: 11px 7px 0;
    }

    .video-meta strong[b-wysjmwnmn7] {
        font-size: 14px;
    }

    .video-meta > span[b-wysjmwnmn7] {
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .about-hero-content h1[b-wysjmwnmn7] {
        font-size: 32px;
    }

    .about-tags[b-wysjmwnmn7] {
        flex-direction: column;
    }

    .about-tags span[b-wysjmwnmn7] {
        width: 100%;
        flex-basis: auto;
    }

    .video-presentation > span[b-wysjmwnmn7] {
        display: none;
    }
}

@media (hover: none) {
    .about-button:hover[b-wysjmwnmn7],
    .video-play:hover[b-wysjmwnmn7] {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-button[b-wysjmwnmn7],
    .video-play[b-wysjmwnmn7] {
        transition-duration: .01ms !important;
    }
}
button.about-button[b-wysjmwnmn7] {
    font-family: inherit;
    cursor: pointer;
}

button.about-button.primary[b-wysjmwnmn7] {
    border: 1px solid transparent;
}

button.about-button:focus-visible[b-wysjmwnmn7] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutTeamSection.razor.rz.scp.css */
.team-section[b-tlay2fn6d2] {
    padding: 80px 0;
    direction: rtl;
    background:
        radial-gradient(circle at 10% 20%, rgba(36, 89, 166, .045), transparent 30%),
        linear-gradient(145deg, #fff, #f7faf8);
}

.team-heading[b-tlay2fn6d2] {
    max-width: 850px;
    margin: 0 auto 24px;
    text-align: center;
}

.team-label[b-tlay2fn6d2] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(58, 125, 68, .15);
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font-size: 16px;
    font-weight: 900;
}

.team-heading h2[b-tlay2fn6d2] {
    margin: 20px 0 12px;
    color: #465164;
    font-size: clamp(29px, 4vw, 43px);
    font-weight: 900;
    line-height: 1.7;
}

.team-heading p[b-tlay2fn6d2] {
    margin: 0;
    color: #4f5e72;
    font-size: 19px;
    line-height: 2;
}

.team-navigation[b-tlay2fn6d2] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-bottom: 16px;
}

.slider-button[b-tlay2fn6d2] {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(58, 125, 68, .2);
    border-radius: 13px;
    background: #fff;
    color: var(--green);
    font: inherit;
    font-size: 24px;
    cursor: pointer;
}

.slider-button:hover[b-tlay2fn6d2] {
    background: var(--green);
    color: #fff;
}

.team-slider[b-tlay2fn6d2] {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding: 8px 2px 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #a6c5ad #edf2ee;
}

.team-card[b-tlay2fn6d2] {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 44px) / 3);
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, .1);
    border-radius: 26px 36px 26px 36px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 41, 55, .045);
    font-family: inherit;
    text-align: right;
    scroll-snap-align: start;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

.team-card:hover[b-tlay2fn6d2] {
    transform: translateY(-4px);
    border-color: rgba(58, 125, 68, .4);
}

.team-image-wrap[b-tlay2fn6d2] {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eef4f0;
}

.team-image-wrap img[b-tlay2fn6d2] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.team-card-content[b-tlay2fn6d2] {
    padding: 22px;
}

.team-card h3[b-tlay2fn6d2] {
    margin: 0 0 8px;
    color: #3f4b5e;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.7;
}

.team-card-content > span[b-tlay2fn6d2] {
    display: block;
    color: #4f5e72;
    font-size: 17px;
    line-height: 1.8;
}

.team-card-content > strong[b-tlay2fn6d2] {
    display: block;
    margin-top: 18px;
    color: var(--green);
    font-size: 16px;
}

.team-dialog[b-tlay2fn6d2] {
    box-sizing: border-box;
    width: min(650px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 24px;
    background: #fff;
    color: #465164;
    direction: rtl;
    box-shadow: 0 25px 90px rgba(15, 23, 42, .25);
}

.team-dialog[b-tlay2fn6d2]::backdrop {
    background: rgba(15, 23, 42, .65);
}

.team-dialog-content[b-tlay2fn6d2] {
    position: relative;
    padding: 46px 30px 30px;
}

.dialog-close[b-tlay2fn6d2] {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #f2f4f7;
    color: #475467;
    font: inherit;
    font-size: 28px;
    cursor: pointer;
}

.dialog-profile[b-tlay2fn6d2] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.dialog-profile img[b-tlay2fn6d2] {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: 20px;
    object-fit: cover;
}

.dialog-profile h3[b-tlay2fn6d2] {
    margin: 0 0 8px;
    font-size: 25px;
    line-height: 1.7;
}

.dialog-profile span[b-tlay2fn6d2] {
    color: var(--green);
    font-size: 18px;
}

.member-description[b-tlay2fn6d2] {
    margin: 25px 0;
    color: #4f5e72;
    font-size: 18px;
    line-height: 2.2;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.member-phone[b-tlay2fn6d2] {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 12px;
    background: #f0f7f2;
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.team-card:focus-visible[b-tlay2fn6d2],
.slider-button:focus-visible[b-tlay2fn6d2],
.dialog-close:focus-visible[b-tlay2fn6d2],
.member-phone:focus-visible[b-tlay2fn6d2] {
    outline: 3px solid #2459a6;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .team-card[b-tlay2fn6d2] {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 620px) {
    .team-section[b-tlay2fn6d2] {
        padding: 60px 0;
    }

    .team-heading p[b-tlay2fn6d2] {
        font-size: 16px;
    }

    .team-card[b-tlay2fn6d2] {
        flex-basis: 85%;
    }

    .team-card-content[b-tlay2fn6d2] {
        padding: 18px;
    }

    .team-card h3[b-tlay2fn6d2] {
        font-size: 21px;
    }

    .team-dialog-content[b-tlay2fn6d2] {
        padding: 48px 20px 22px;
    }

    .dialog-profile[b-tlay2fn6d2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-description[b-tlay2fn6d2] {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-card[b-tlay2fn6d2] {
        transition: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutUnifiedExperienceSection.razor.rz.scp.css */
.unified-experience[b-wbit4kcvc8] {
    position: relative;

    padding: 82px 0 92px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #f3f6f9 0%,
            #f6f8fa 48%,
            #f1f6f3 100%);
}


.unified-experience[b-wbit4kcvc8]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .05) 0 3px,
            transparent 4px),
        radial-gradient(
            circle,
            rgba(36, 89, 166, .045) 0 3px,
            transparent 4px);

    background-position:
        0 0,
        68px 68px;

    background-size:
        136px 136px;

    opacity: .3;
}


.experience-shape[b-wbit4kcvc8] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-wbit4kcvc8] {
    width: 350px;
    height: 350px;

    top: -245px;
    right: -135px;

    background:
        rgba(58, 125, 68, .05);
}


.shape-two[b-wbit4kcvc8] {
    width: 310px;
    height: 310px;

    bottom: -225px;
    left: -110px;

    background:
        rgba(36, 89, 166, .05);
}


.experience-container[b-wbit4kcvc8] {
    position: relative;
    z-index: 2;
}


.experience-heading[b-wbit4kcvc8] {
    max-width: 900px;

    margin: 0 auto 48px;

    text-align: center;
}


.experience-label[b-wbit4kcvc8] {
    min-height: 42px;
    padding: 0 17px;

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

    gap: 9px;

    border:
        1px solid rgba(36, 89, 166, .11);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .92);

    color: var(--green);

    box-shadow:
        0 10px 25px rgba(31, 41, 55, .05);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.85;
}


.experience-label > span[b-wbit4kcvc8] {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #2459a6;

    box-shadow:
        0 0 0 5px rgba(36, 89, 166, .07);
}


.experience-heading h2[b-wbit4kcvc8] {
    margin: 20px 0 0;

    color: #465164;

    font-size:
        clamp(34px, 4vw, 47px);

    font-weight: 900;
    line-height: 1.6;

    letter-spacing: -.4px;

    text-wrap: balance;
}


.experience-heading p[b-wbit4kcvc8] {
    max-width: 820px;

    margin: 16px auto 0;

    color: #46556a;

    font-size: 19px;
    font-weight: 500;
    line-height: 2.15;
}


.experience-grid[b-wbit4kcvc8] {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    align-items: stretch;

    gap: 16px;
}


.experience-card[b-wbit4kcvc8] {
    position: relative;

    min-width: 0;
    min-height: 280px;
    padding: 31px 22px 28px;

    display: flex;
    align-items: center;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, .095);

    border-radius: 24px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 13px 34px rgba(31, 41, 55, .05);

    text-align: center;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


.experience-card[b-wbit4kcvc8]::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -78px;
    bottom: -82px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .05);

    transition:
        transform .3s ease;
}


.experience-card:nth-child(even)[b-wbit4kcvc8]::after {
    background:
        rgba(36, 89, 166, .055);
}


.experience-card:hover[b-wbit4kcvc8] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .24);

    box-shadow:
        0 20px 43px rgba(31, 41, 55, .085);
}


.experience-card:nth-child(even):hover[b-wbit4kcvc8] {
    border-color:
        rgba(36, 89, 166, .23);
}


.experience-card:hover[b-wbit4kcvc8]::after {
    transform: scale(1.2);
}


.experience-icon[b-wbit4kcvc8] {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

    margin-bottom: 23px;

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

    flex: 0 0 64px;

    border-radius: 19px;

    background:
        rgba(36, 89, 166, .085);

    color: #2459a6;

    transition:
        transform .24s ease,
        background-color .24s ease;
}


.experience-card:nth-child(even)
.experience-icon[b-wbit4kcvc8] {
    background:
        rgba(58, 125, 68, .09);

    color: var(--green);
}


.experience-card:hover
.experience-icon[b-wbit4kcvc8] {
    transform: translateY(-2px) scale(1.04);

    background:
        rgba(36, 89, 166, .12);
}


.experience-card:nth-child(even):hover
.experience-icon[b-wbit4kcvc8] {
    background:
        rgba(58, 125, 68, .13);
}


.experience-icon svg[b-wbit4kcvc8] {
    width: 31px;
    height: 31px;

    display: block;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.experience-card h3[b-wbit4kcvc8] {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #354257;

    font-size: 22px;
    font-weight: 900;
    line-height: 1.75;
}


.experience-card p[b-wbit4kcvc8] {
    position: relative;
    z-index: 2;

    margin: 16px 0 0;

    color: #46556a;

    font-size: 16.5px;
    font-weight: 500;
    line-height: 2.1;
}


@media (max-width: 1180px) {

    .experience-grid[b-wbit4kcvc8] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .experience-card[b-wbit4kcvc8] {
        min-height: 265px;
    }


    .experience-card:nth-child(4)[b-wbit4kcvc8] {
        grid-column: 1 / 2;
    }


    .experience-card:nth-child(5)[b-wbit4kcvc8] {
        grid-column: 2 / 3;
    }
}


@media (max-width: 820px) {

    .experience-grid[b-wbit4kcvc8] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .experience-card:nth-child(4)[b-wbit4kcvc8],
    .experience-card:nth-child(5)[b-wbit4kcvc8] {
        grid-column: auto;
    }


    .experience-card:last-child[b-wbit4kcvc8] {
        grid-column: 1 / -1;

        max-width: 430px;
        width: 100%;

        justify-self: center;
    }
}


@media (max-width: 620px) {

    .unified-experience[b-wbit4kcvc8] {
        padding: 68px 0 74px;
    }


    .experience-heading[b-wbit4kcvc8] {
        margin-bottom: 34px;
    }


    .experience-label[b-wbit4kcvc8] {
        min-height: 39px;
        padding: 0 14px;

        font-size: 15px;
    }


    .experience-heading h2[b-wbit4kcvc8] {
        margin-top: 16px;

        font-size: 30px;
        line-height: 1.7;
    }


    .experience-heading p[b-wbit4kcvc8] {
        margin-top: 13px;

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


    .experience-grid[b-wbit4kcvc8] {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .experience-card[b-wbit4kcvc8],
    .experience-card:last-child[b-wbit4kcvc8] {
        min-height: 0;
        max-width: none;
        padding: 27px 22px 26px;

        grid-column: auto;

        border-radius: 21px;
    }


    .experience-icon[b-wbit4kcvc8] {
        width: 58px;
        height: 58px;

        margin-bottom: 20px;

        flex-basis: 58px;

        border-radius: 17px;
    }


    .experience-icon svg[b-wbit4kcvc8] {
        width: 28px;
        height: 28px;
    }


    .experience-card h3[b-wbit4kcvc8] {
        font-size: 21px;
    }


    .experience-card p[b-wbit4kcvc8] {
        margin-top: 13px;

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


@media (hover: none) {

    .experience-card:hover[b-wbit4kcvc8],
    .experience-card:hover
    .experience-icon[b-wbit4kcvc8] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .experience-card[b-wbit4kcvc8],
    .experience-card[b-wbit4kcvc8]::after,
    .experience-icon[b-wbit4kcvc8] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/About/AboutWhyVetbanSection.razor.rz.scp.css */
.why-vetban[b-p4ns6vk52f] {
    position: relative;

    padding: 82px 0 90px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #fff 0%,
            #fbfcfd 52%,
            #fff 100%);
}


.why-vetban[b-p4ns6vk52f]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(58, 125, 68, .045),
            transparent 24%),
        radial-gradient(
            circle at 91% 82%,
            rgba(36, 89, 166, .045),
            transparent 25%);
}


.why-shape[b-p4ns6vk52f] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-blue[b-p4ns6vk52f] {
    width: 340px;
    height: 340px;

    top: -245px;
    left: -125px;

    background:
        rgba(36, 89, 166, .035);
}


.shape-green[b-p4ns6vk52f] {
    width: 300px;
    height: 300px;

    right: -210px;
    bottom: -190px;

    background:
        rgba(58, 125, 68, .04);
}


.why-container[b-p4ns6vk52f] {
    position: relative;
    z-index: 2;
}


.why-heading[b-p4ns6vk52f] {
    max-width: 940px;

    margin: 0 auto 50px;

    text-align: center;
}


.why-label[b-p4ns6vk52f] {
    min-height: 40px;
    padding: 0 16px;

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

    gap: 9px;

    border:
        1px solid rgba(36, 89, 166, .11);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .9);

    color: var(--green);

    box-shadow:
        0 10px 26px rgba(31, 41, 55, .05);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.why-label > span[b-p4ns6vk52f] {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #2459a6;

    box-shadow:
        0 0 0 5px rgba(36, 89, 166, .07);
}


.why-heading h2[b-p4ns6vk52f] {
    max-width: 900px;

    margin: 20px auto 0;

    color: #465164;

    font-size:
        clamp(34px, 4vw, 47px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.45px;

    text-wrap: balance;
}


.why-heading p[b-p4ns6vk52f] {
    max-width: 890px;

    margin: 17px auto 0;

    color: #4f5e72;

    font-size: 20px;
    font-weight: 600;
    line-height: 2.15;

    text-wrap: balance;
}


.why-grid[b-p4ns6vk52f] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;

    gap: 24px;
}


.why-card[b-p4ns6vk52f] {
    position: relative;

    min-width: 0;
    min-height: 315px;
    padding: 40px 38px 35px;

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, .1);

    border-radius:
        28px 40px 28px 40px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(249, 252, 250, .94));

    box-shadow:
        0 16px 42px rgba(31, 41, 55, .055);

    text-align: right;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.why-card[b-p4ns6vk52f]::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -165px;
    right: -110px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .065);

    pointer-events: none;
}


.owner-card[b-p4ns6vk52f] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(255, 249, 243, .9));
}


.owner-card[b-p4ns6vk52f]::before {
    background:
        rgba(224, 145, 76, .07);
}


.provider-card[b-p4ns6vk52f] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(245, 250, 247, .94));
}


.why-card:hover[b-p4ns6vk52f] {
    transform: translateY(-5px);

    border-color:
        rgba(58, 125, 68, .22);

    box-shadow:
        0 22px 48px rgba(31, 41, 55, .085);
}


.owner-card:hover[b-p4ns6vk52f] {
    border-color:
        rgba(224, 145, 76, .25);
}


.card-icon[b-p4ns6vk52f] {
    position: relative;
    z-index: 2;

    width: 68px;
    height: 68px;

    margin-bottom: 26px;

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

    border-radius: 20px;

    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;
}


.owner-card .card-icon[b-p4ns6vk52f] {
    background:
        rgba(58, 125, 68, .09);

    color: var(--green);
}


.card-icon svg[b-p4ns6vk52f] {
    width: 32px;
    height: 32px;

    display: block;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.why-card h3[b-p4ns6vk52f] {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #3f4b5e;

    font-size: 25px;
    font-weight: 900;
    line-height: 1.7;
}


.why-card p[b-p4ns6vk52f] {
    position: relative;
    z-index: 2;

    max-width: 650px;

    margin: 16px 0 0;

    color: #4f5e72;

    font-size: 19px;
    font-weight: 500;
    line-height: 2.2;
}


@media (max-width: 900px) {

    .why-vetban[b-p4ns6vk52f] {
        padding: 74px 0 80px;
    }


    .why-heading[b-p4ns6vk52f] {
        margin-bottom: 40px;
    }


    .why-grid[b-p4ns6vk52f] {
        grid-template-columns: 1fr;
    }


    .why-card[b-p4ns6vk52f] {
        min-height: 0;
    }
}


@media (max-width: 620px) {

    .why-vetban[b-p4ns6vk52f] {
        padding: 64px 0 70px;
    }


    .why-heading[b-p4ns6vk52f] {
        margin-bottom: 32px;
    }


    .why-label[b-p4ns6vk52f] {
        min-height: 38px;
        padding: 0 14px;

        font-size: 15px;
    }


    .why-heading h2[b-p4ns6vk52f] {
        margin-top: 16px;

        font-size: 30px;
        line-height: 1.7;
    }


    .why-heading p[b-p4ns6vk52f] {
        margin-top: 13px;

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


    .why-grid[b-p4ns6vk52f] {
        gap: 15px;
    }


    .why-card[b-p4ns6vk52f] {
        padding: 29px 24px 27px;

        border-radius:
            22px 31px 22px 31px;
    }


    .card-icon[b-p4ns6vk52f] {
        width: 58px;
        height: 58px;

        margin-bottom: 21px;

        border-radius: 17px;
    }


    .card-icon svg[b-p4ns6vk52f] {
        width: 28px;
        height: 28px;
    }


    .why-card h3[b-p4ns6vk52f] {
        font-size: 22px;
    }


    .why-card p[b-p4ns6vk52f] {
        margin-top: 12px;

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


@media (hover: none) {

    .why-card:hover[b-p4ns6vk52f] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .why-card[b-p4ns6vk52f] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Components/ArticleMediaManager.razor.rz.scp.css */
.article-media-manager[b-tlsvg0nq2a] {
    margin-top: 24px;
    direction: rtl;
}

.media-fields[b-tlsvg0nq2a] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.media-card[b-tlsvg0nq2a] {
    margin-bottom: 20px;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    color: var(--text);
}

.media-heading[b-tlsvg0nq2a] {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.media-heading h3[b-tlsvg0nq2a] {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 900;
}

.media-heading p[b-tlsvg0nq2a] {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
}

.media-count[b-tlsvg0nq2a] {
    padding: 7px 12px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #f0f7f2;
    color: var(--green);
    font-weight: 800;
}

.gallery-upload[b-tlsvg0nq2a],
.video-file-row[b-tlsvg0nq2a],
.item-actions[b-tlsvg0nq2a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.gallery-upload[b-tlsvg0nq2a] {
    margin-bottom: 24px;
}

.gallery-grid[b-tlsvg0nq2a] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery-item[b-tlsvg0nq2a] {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fafbfc;
}

.gallery-item img[b-tlsvg0nq2a] {
    width: 100%;
    height: 170px;
    margin-bottom: 14px;
    display: block;
    border-radius: 10px;
    object-fit: cover;
}

.gallery-item label[b-tlsvg0nq2a],
.field-group label[b-tlsvg0nq2a] {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: 800;
}

.gallery-item input[b-tlsvg0nq2a],
.field-group input[b-tlsvg0nq2a],
.field-group textarea[b-tlsvg0nq2a] {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--soft);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
}

.field-group textarea[b-tlsvg0nq2a] {
    resize: vertical;
}

.primary-button[b-tlsvg0nq2a],
.secondary-button[b-tlsvg0nq2a],
.file-button[b-tlsvg0nq2a] {
    min-height: 40px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.primary-button[b-tlsvg0nq2a] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.file-button[b-tlsvg0nq2a] {
    border-color: var(--green);
    color: var(--green);
}

.danger[b-tlsvg0nq2a] {
    color: #b42318;
}

.video-preview[b-tlsvg0nq2a] {
    width: 100%;
    max-height: 430px;
    margin-bottom: 22px;
    display: block;
    border-radius: 14px;
    background: #111827;
}

.video-file-row[b-tlsvg0nq2a] {
    margin-bottom: 20px;
}

.file-name[b-tlsvg0nq2a] {
    overflow-wrap: anywhere;
}

.media-empty[b-tlsvg0nq2a] {
    padding: 30px 16px;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}

.media-message[b-tlsvg0nq2a],
.media-progress[b-tlsvg0nq2a] {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.media-message.error[b-tlsvg0nq2a] {
    background: #fff1f1;
    color: #b42318;
}

.media-message.success[b-tlsvg0nq2a],
.media-progress[b-tlsvg0nq2a] {
    background: #ecfdf3;
    color: #027a48;
}

button:disabled[b-tlsvg0nq2a],
.media-fields:disabled .file-button[b-tlsvg0nq2a] {
    opacity: .6;
    cursor: not-allowed;
}

@media (max-width: 1000px) {
    .gallery-grid[b-tlsvg0nq2a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .gallery-grid[b-tlsvg0nq2a] {
        grid-template-columns: 1fr;
    }

    .media-card[b-tlsvg0nq2a] {
        padding: 18px;
    }

    .media-heading[b-tlsvg0nq2a] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/AccessDenied.razor.rz.scp.css */
.access-denied-page[b-0qzmqc103w] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.access-denied-card[b-0qzmqc103w] {
    width: 100%;
    max-width: 560px;
    padding: 48px 32px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.access-denied-icon[b-0qzmqc103w] {
    font-size: 50px;
    margin-bottom: 20px;
}

.access-denied-content span[b-0qzmqc103w] {
    color: #b42318;
    font-weight: 700;
    font-size: 14px;
}

.access-denied-content h1[b-0qzmqc103w] {
    margin: 12px 0;
    font-size: 28px;
}

.access-denied-content p[b-0qzmqc103w] {
    color: #667085;
    line-height: 2;
    margin-bottom: 30px;
}

.access-denied-actions[b-0qzmqc103w] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.access-denied-primary[b-0qzmqc103w],
.access-denied-secondary[b-0qzmqc103w] {
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
}

.access-denied-primary[b-0qzmqc103w] {
    background: #198754;
    color: #fff;
}

.access-denied-secondary[b-0qzmqc103w] {
    border: 1px solid #d0d5dd;
    color: #344054;
    background: #fff;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Permissions/Details.razor.rz.scp.css */
.permission-details-page[b-j04kzdyxcq] {
    width: 100%;
}

.page-head[b-j04kzdyxcq] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-j04kzdyxcq] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-j04kzdyxcq] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-j04kzdyxcq] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.back-button[b-j04kzdyxcq],
.primary-button[b-j04kzdyxcq] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.back-button[b-j04kzdyxcq] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.primary-button[b-j04kzdyxcq] {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
}

.back-button:hover[b-j04kzdyxcq] {
    border-color: var(--green);
    color: var(--green);
}

.primary-button:hover[b-j04kzdyxcq] {
    color: #fff;
    filter: brightness(.96);
}

.details-grid[b-j04kzdyxcq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.details-card[b-j04kzdyxcq] {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-j04kzdyxcq] {
    grid-column: 1 / -1;
}

.details-card h3[b-j04kzdyxcq] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.details-card p[b-j04kzdyxcq] {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 2;
}

.permission-profile[b-j04kzdyxcq] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.permission-icon[b-j04kzdyxcq] {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 22px;
    font-weight: 900;
}

.permission-profile h2[b-j04kzdyxcq] {
    margin: 0;
    color: var(--text);
    font-size: 23px;
    font-weight: 900;
}

.permission-code[b-j04kzdyxcq] {
    display: block;
    margin-top: 7px;
    direction: ltr;
    text-align: right;
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
}

.info-grid[b-j04kzdyxcq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.info-item[b-j04kzdyxcq] {
    min-height: 82px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.info-item span[b-j04kzdyxcq] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.info-item strong[b-j04kzdyxcq] {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
}

.form-error[b-j04kzdyxcq] {
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 13px;
}

@media (max-width: 800px) {
    .page-head[b-j04kzdyxcq],
    .permission-profile[b-j04kzdyxcq] {
        flex-direction: column;
    }

    .details-grid[b-j04kzdyxcq],
    .info-grid[b-j04kzdyxcq] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-j04kzdyxcq] {
        grid-column: auto;
    }

    .permission-profile[b-j04kzdyxcq] {
        align-items: flex-start;
    }

    .back-button[b-j04kzdyxcq] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Permissions/ManagePermissions.razor.rz.scp.css */
.permissions-page[b-l8nlp7e6l3] {
    width: 100%;
}

.permission-cell[b-l8nlp7e6l3] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.permission-icon[b-l8nlp7e6l3] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.permission-cell > div:last-child[b-l8nlp7e6l3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.permission-cell strong[b-l8nlp7e6l3] {
    font-size: 13px;
}

.permission-cell span[b-l8nlp7e6l3] {
    color: var(--muted);
    font-size: 10px;
}

.ltr-value[b-l8nlp7e6l3] {
    direction: ltr;
    text-align: right !important;
}

.status-badge[b-l8nlp7e6l3] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-l8nlp7e6l3] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-l8nlp7e6l3] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-l8nlp7e6l3] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-l8nlp7e6l3] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-l8nlp7e6l3] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-l8nlp7e6l3] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-l8nlp7e6l3] {
    border-color: var(--green);
    color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Permissions/RolePermissions.razor.rz.scp.css */
.role-permissions-page[b-72qbytz5c6] {
    width: 100%;
}

.page-head[b-72qbytz5c6] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-72qbytz5c6] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-72qbytz5c6] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head h1 strong[b-72qbytz5c6] {
    margin-right: 6px;

    color: var(--green);
}

.page-head p[b-72qbytz5c6] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-72qbytz5c6] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-72qbytz5c6] {
    border-color: var(--green);
    color: var(--green);
}

.toolbar[b-72qbytz5c6] {
    margin-bottom: 18px;
    padding: 14px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
}

.toolbar input[b-72qbytz5c6] {
    width: 100%;
    max-width: 420px;
    min-height: 42px;

    padding: 0 12px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

.toolbar input:focus[b-72qbytz5c6] {
    border-color: var(--green);
}

.toolbar span[b-72qbytz5c6] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.permission-groups[b-72qbytz5c6] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.permissions-card[b-72qbytz5c6] {
    min-width: 0;

    padding: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.group-head[b-72qbytz5c6] {
    margin-bottom: 15px;

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

    gap: 12px;
}

.group-head h3[b-72qbytz5c6] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.group-head > div:first-child > span[b-72qbytz5c6] {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
}

.group-status[b-72qbytz5c6] {
    min-width: 44px;
    min-height: 28px;

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

    border-radius: 999px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.permissions-list[b-72qbytz5c6] {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.permission-item[b-72qbytz5c6] {
    min-height: 74px;
    padding: 12px 13px;

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

    gap: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.permission-info[b-72qbytz5c6] {
    min-width: 0;
}

.permission-info strong[b-72qbytz5c6] {
    display: block;

    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.permission-code[b-72qbytz5c6] {
    display: block;

    margin-top: 3px;

    direction: ltr;
    text-align: right;

    color: var(--green);

    font-size: 10px;
    font-weight: 700;
}

.permission-info p[b-72qbytz5c6] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.8;
}

.permission-action[b-72qbytz5c6] {
    flex: 0 0 auto;
}

.permission-switch[b-72qbytz5c6] {
    position: relative;

    width: 44px;
    height: 24px;

    display: block;

    cursor: pointer;
}

.permission-switch input[b-72qbytz5c6] {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}

.permission-switch span[b-72qbytz5c6] {
    position: absolute;
    inset: 0;

    border-radius: 999px;

    background: #d0d5dd;

    transition: .2s;
}

.permission-switch span[b-72qbytz5c6]::after {
    content: "";

    position: absolute;
    top: 3px;
    right: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #fff;

    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

    transition: .2s;
}

.permission-switch input:checked + span[b-72qbytz5c6] {
    background: var(--green);
}

.permission-switch input:checked + span[b-72qbytz5c6]::after {
    transform: translateX(-20px);
}

.permission-switch input:disabled + span[b-72qbytz5c6] {
    opacity: .55;

    cursor: not-allowed;
}

.form-error[b-72qbytz5c6],
.form-success[b-72qbytz5c6] {
    margin-bottom: 16px;
    padding: 13px 15px;

    border-radius: 11px;

    font-size: 12px;
}

.form-error[b-72qbytz5c6] {
    border: 1px solid #fecdca;

    background: #fff2f2;
    color: #b42318;
}

.form-success[b-72qbytz5c6] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
    color: #027a48;
}

.loading-card[b-72qbytz5c6] {
    color: var(--muted);

    font-size: 13px;
}

@media (max-width: 900px) {

    .permission-groups[b-72qbytz5c6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .page-head[b-72qbytz5c6],
    .toolbar[b-72qbytz5c6] {
        flex-direction: column;
        align-items: stretch;
    }

    .back-button[b-72qbytz5c6],
    .toolbar input[b-72qbytz5c6] {
        width: 100%;
        max-width: none;

        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Permissions/Roles.razor.rz.scp.css */
.permission-roles-page[b-3im7cnbv2o] {
    width: 100%;
}

.page-head[b-3im7cnbv2o] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-3im7cnbv2o] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-3im7cnbv2o] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-3im7cnbv2o] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.back-button[b-3im7cnbv2o] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-3im7cnbv2o] {
    border-color: var(--green);
    color: var(--green);
}

.roles-card[b-3im7cnbv2o] {
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.card-head[b-3im7cnbv2o] {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-head h3[b-3im7cnbv2o] {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.card-head span[b-3im7cnbv2o] {
    min-height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
}

.roles-list[b-3im7cnbv2o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role-item[b-3im7cnbv2o] {
    min-height: 72px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.role-icon[b-3im7cnbv2o] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
}

.role-info[b-3im7cnbv2o] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.role-info strong[b-3im7cnbv2o] {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.role-info span[b-3im7cnbv2o] {
    color: var(--muted);
    font-size: 10px;
}

.action-link[b-3im7cnbv2o] {
    min-height: 34px;
    padding: 0 11px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.action-link:hover[b-3im7cnbv2o] {
    border-color: var(--green);
    color: var(--green);
}

.empty-state[b-3im7cnbv2o] {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.form-error[b-3im7cnbv2o] {
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 13px;
}

@media (max-width: 700px) {
    .page-head[b-3im7cnbv2o] {
        flex-direction: column;
    }

    .back-button[b-3im7cnbv2o] {
        width: 100%;
        box-sizing: border-box;
    }

    .role-item[b-3im7cnbv2o] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .action-link[b-3im7cnbv2o] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Roles/Create.razor.rz.scp.css */
.role-form-page[b-82wrdy0r00] {
    width: 100%;
}

.page-head[b-82wrdy0r00] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-82wrdy0r00] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-82wrdy0r00] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-82wrdy0r00] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-82wrdy0r00] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-82wrdy0r00] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-82wrdy0r00] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-82wrdy0r00] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-82wrdy0r00] {
    grid-column: 1 / -1;
}

.form-card h3[b-82wrdy0r00] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.fields-grid[b-82wrdy0r00] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-82wrdy0r00] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-82wrdy0r00] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.field-group input[b-82wrdy0r00],
.field-group textarea[b-82wrdy0r00] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.field-group input[b-82wrdy0r00] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-82wrdy0r00] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-82wrdy0r00],
.field-group textarea:focus[b-82wrdy0r00] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.loading-card[b-82wrdy0r00] {
    color: var(--muted);

    font-size: 13px;
}

.form-error[b-82wrdy0r00] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 12px;
}

.submit-card[b-82wrdy0r00] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-82wrdy0r00] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-82wrdy0r00] {
    color: var(--text);

    font-size: 14px;
}

.submit-card span[b-82wrdy0r00] {
    color: var(--muted);

    font-size: 11px;
}

.submit-button[b-82wrdy0r00] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:disabled[b-82wrdy0r00] {
    opacity: .55;

    cursor: not-allowed;
}

@media (max-width: 800px) {

    .page-head[b-82wrdy0r00] {
        flex-direction: column;
    }

    .back-button[b-82wrdy0r00] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-82wrdy0r00],
    .fields-grid[b-82wrdy0r00] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-82wrdy0r00] {
        grid-column: auto;
    }

    .submit-card[b-82wrdy0r00] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-82wrdy0r00] {
        width: 100%;

        box-sizing: border-box;
    }
}

@media (max-width: 520px) {

    .form-card[b-82wrdy0r00] {
        padding: 16px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Roles/Details.razor.rz.scp.css */
.role-details-page[b-sfy1oecebg] {
    width: 100%;
}

.page-head[b-sfy1oecebg] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-sfy1oecebg] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-sfy1oecebg] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-sfy1oecebg] {
    margin: 9px 0 0;

    color: var(--muted);

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

.head-actions[b-sfy1oecebg] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-sfy1oecebg],
.primary-button[b-sfy1oecebg] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.back-button[b-sfy1oecebg] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-sfy1oecebg] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.details-grid[b-sfy1oecebg] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-sfy1oecebg] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-sfy1oecebg] {
    grid-column: 1 / -1;
}

.details-card h3[b-sfy1oecebg] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.profile-card[b-sfy1oecebg] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.role-avatar[b-sfy1oecebg] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-info[b-sfy1oecebg] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-sfy1oecebg] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.5;
}

.profile-name[b-sfy1oecebg] {
    display: block;

    margin-top: 6px;

    direction: ltr;

    color: var(--green);

    font-size: 14px;
    font-weight: 800;
}

.profile-meta[b-sfy1oecebg] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-sfy1oecebg] {
    color: var(--muted);

    font-size: 13px;
}

.profile-meta strong[b-sfy1oecebg] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.info-grid[b-sfy1oecebg] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-sfy1oecebg] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-sfy1oecebg] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.info-item strong[b-sfy1oecebg] {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.description-box[b-sfy1oecebg] {
    min-height: 120px;
    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box p[b-sfy1oecebg] {
    margin: 0;

    color: var(--text);

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

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.actions-card[b-sfy1oecebg] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.secondary-action[b-sfy1oecebg] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.secondary-action:hover[b-sfy1oecebg] {
    border-color: var(--green);

    color: var(--green);
}

.loading-card[b-sfy1oecebg] {
    color: var(--muted);

    font-size: 14px;
}

.form-error[b-sfy1oecebg] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 13px;
}

@media (max-width: 800px) {

    .page-head[b-sfy1oecebg],
    .profile-card[b-sfy1oecebg] {
        flex-direction: column;
    }

    .head-actions[b-sfy1oecebg] {
        width: 100%;
    }

    .head-actions a[b-sfy1oecebg] {
        flex: 1;
    }

    .details-grid[b-sfy1oecebg],
    .info-grid[b-sfy1oecebg] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-sfy1oecebg] {
        grid-column: auto;
    }

    .profile-card[b-sfy1oecebg] {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {

    .details-card[b-sfy1oecebg] {
        padding: 17px;
    }

    .head-actions[b-sfy1oecebg],
    .actions-card[b-sfy1oecebg] {
        flex-direction: column;
    }

    .head-actions a[b-sfy1oecebg],
    .actions-card a[b-sfy1oecebg] {
        width: 100%;

        box-sizing: border-box;
    }

    .page-head h1[b-sfy1oecebg] {
        font-size: 25px;
    }

    .profile-info h2[b-sfy1oecebg] {
        font-size: 21px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Roles/Edit.razor.rz.scp.css */
.role-form-page[b-4cx6jq0nfr] {
    width: 100%;
}

.page-head[b-4cx6jq0nfr] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-4cx6jq0nfr] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-4cx6jq0nfr] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-4cx6jq0nfr] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-4cx6jq0nfr] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-4cx6jq0nfr] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-4cx6jq0nfr] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-4cx6jq0nfr] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-4cx6jq0nfr] {
    grid-column: 1 / -1;
}

.form-card h3[b-4cx6jq0nfr] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.fields-grid[b-4cx6jq0nfr] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-4cx6jq0nfr] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-4cx6jq0nfr] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.field-group input[b-4cx6jq0nfr],
.field-group textarea[b-4cx6jq0nfr] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.field-group input[b-4cx6jq0nfr] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-4cx6jq0nfr] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-4cx6jq0nfr],
.field-group textarea:focus[b-4cx6jq0nfr] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.loading-card[b-4cx6jq0nfr] {
    color: var(--muted);

    font-size: 13px;
}

.form-error[b-4cx6jq0nfr] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 12px;
}

.submit-card[b-4cx6jq0nfr] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-4cx6jq0nfr] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-4cx6jq0nfr] {
    color: var(--text);

    font-size: 14px;
}

.submit-card span[b-4cx6jq0nfr] {
    color: var(--muted);

    font-size: 11px;
}

.submit-button[b-4cx6jq0nfr] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:disabled[b-4cx6jq0nfr] {
    opacity: .55;

    cursor: not-allowed;
}

@media (max-width: 800px) {

    .page-head[b-4cx6jq0nfr] {
        flex-direction: column;
    }

    .back-button[b-4cx6jq0nfr] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-4cx6jq0nfr],
    .fields-grid[b-4cx6jq0nfr] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-4cx6jq0nfr] {
        grid-column: auto;
    }

    .submit-card[b-4cx6jq0nfr] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-4cx6jq0nfr] {
        width: 100%;

        box-sizing: border-box;
    }
}

@media (max-width: 520px) {

    .form-card[b-4cx6jq0nfr] {
        padding: 16px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Roles/ManageRoles.razor.rz.scp.css */
.roles-page[b-c2rhczgc89] {
    width: 100%;
}

.create-role-button[b-c2rhczgc89] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-role-button span[b-c2rhczgc89] {
    font-size: 20px;
    line-height: 1;
}

.create-role-button:hover[b-c2rhczgc89] {
    color: #fff;
    filter: brightness(.96);
}

.role-cell[b-c2rhczgc89] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.role-icon[b-c2rhczgc89] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.role-cell > div:last-child[b-c2rhczgc89] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.role-cell strong[b-c2rhczgc89] {
    font-size: 13px;
}

.role-cell span[b-c2rhczgc89] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-c2rhczgc89] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-c2rhczgc89] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-c2rhczgc89] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-c2rhczgc89] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-c2rhczgc89] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-c2rhczgc89] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-c2rhczgc89] {
    border-color: var(--green);
    color: var(--green);
}

@media (max-width: 700px) {

    .create-role-button[b-c2rhczgc89] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Access/Roles/Users.razor.rz.scp.css */
.role-users-page[b-urx0ujgaha] {
    width: 100%;
}

.page-head[b-urx0ujgaha] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-urx0ujgaha] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-urx0ujgaha] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head h1 strong[b-urx0ujgaha] {
    margin-right: 6px;
    color: var(--green);
}

.page-head p[b-urx0ujgaha] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.back-button[b-urx0ujgaha] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-urx0ujgaha] {
    border-color: var(--green);
    color: var(--green);
}

.user-cell[b-urx0ujgaha] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-icon[b-urx0ujgaha] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
}

.user-cell > div:last-child[b-urx0ujgaha] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-cell strong[b-urx0ujgaha] {
    font-size: 13px;
}

.user-cell span[b-urx0ujgaha] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-urx0ujgaha] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-urx0ujgaha] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-urx0ujgaha] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-urx0ujgaha] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.action-link[b-urx0ujgaha] {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.action-link:hover[b-urx0ujgaha] {
    border-color: var(--green);
    color: var(--green);
}

.ltr-value[b-urx0ujgaha] {
    direction: ltr;
    text-align: right;
}

@media (max-width: 700px) {
    .page-head[b-urx0ujgaha] {
        flex-direction: column;
    }

    .back-button[b-urx0ujgaha] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/AdminDashboard.razor.rz.scp.css */
.admin-dashboard[b-iwde0uvicm] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.admin-dashboard *[b-iwde0uvicm] {
    box-sizing: border-box;
}

.dashboard-intro[b-iwde0uvicm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid #dce9df;
    border-radius: 22px;
    background: linear-gradient(120deg, #f1f8f2, #fff);
}

.dashboard-intro > div[b-iwde0uvicm] {
    min-width: 0;
}

.dashboard-eyebrow[b-iwde0uvicm],
.section-eyebrow[b-iwde0uvicm] {
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
}

.dashboard-intro h1[b-iwde0uvicm] {
    margin: 9px 0;
    color: #344054;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.6;
}

.dashboard-intro p[b-iwde0uvicm] {
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 2;
}

.dashboard-button[b-iwde0uvicm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 46px;
    padding: 11px 17px;
    border: 1px solid #dfe5e1;
    border-radius: 11px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
    text-decoration: none;
}

.dashboard-intro > .dashboard-button[b-iwde0uvicm] {
    flex-shrink: 0;
}

.dashboard-button.primary[b-iwde0uvicm] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.section-heading[b-iwde0uvicm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.section-heading h2[b-iwde0uvicm] {
    margin: 0;
    color: #344054;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.8;
}

.section-heading > span[b-iwde0uvicm] {
    color: #667085;
    font-size: 16px;
}

.section-heading .section-eyebrow[b-iwde0uvicm] {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.quick-access-grid[b-iwde0uvicm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.quick-access-card[b-iwde0uvicm] {
    --card-color: #3a7d44;
    --card-soft: #eef7f0;

    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 23px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.quick-access-card.blue[b-iwde0uvicm] {
    --card-color: #2459a6;
    --card-soft: #eef4ff;
}

.quick-access-card.orange[b-iwde0uvicm] {
    --card-color: #b54708;
    --card-soft: #fff5e9;
}

.quick-access-card.purple[b-iwde0uvicm] {
    --card-color: #6941c6;
    --card-soft: #f4f0ff;
}

.quick-card-top[b-iwde0uvicm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.quick-card-icon[b-iwde0uvicm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--card-soft);
    color: var(--card-color);
    font-size: 25px;
    font-weight: 900;
    direction: ltr;
}

.quick-card-arrow[b-iwde0uvicm] {
    color: #98a2b3;
    font-size: 25px;
}

.quick-access-card > strong[b-iwde0uvicm] {
    color: #344054;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.8;
}

.quick-access-card p[b-iwde0uvicm] {
    flex: 1;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.quick-card-action[b-iwde0uvicm] {
    margin-top: 5px;
    color: var(--card-color);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-sections[b-iwde0uvicm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.dashboard-section[b-iwde0uvicm] {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
}

.dashboard-link-list[b-iwde0uvicm] {
    display: flex;
    flex-direction: column;
}

.dashboard-link-list > a[b-iwde0uvicm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #eef0f3;
    color: inherit;
    text-decoration: none;
}

.dashboard-link-list > a:last-child[b-iwde0uvicm] {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-link-list > a > span:first-child[b-iwde0uvicm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dashboard-link-list strong[b-iwde0uvicm] {
    color: #344054;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-link-list small[b-iwde0uvicm] {
    color: #667085;
    font-size: 16px;
    line-height: 1.9;
}

.link-arrow[b-iwde0uvicm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #f7f9fa;
    color: #667085;
    font-size: 27px;
}

.support-section[b-iwde0uvicm] {
    background: linear-gradient(135deg, #fff, #f8fbff);
}

.support-description[b-iwde0uvicm] {
    margin: 0;
    color: #667085;
    font-size: 17px;
    line-height: 2;
}

.support-actions[b-iwde0uvicm] {
    margin-top: 22px;
}

.dashboard-tip[b-iwde0uvicm] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #dce5f3;
    border-radius: 17px;
    background: #f3f7fd;
}

.tip-icon[b-iwde0uvicm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #e5edfb;
    color: #2459a6;
    font-size: 24px;
    font-weight: 900;
}

.dashboard-tip > div[b-iwde0uvicm] {
    flex: 1;
    min-width: 0;
}

.dashboard-tip strong[b-iwde0uvicm] {
    color: #344054;
    font-size: 18px;
}

.dashboard-tip p[b-iwde0uvicm] {
    margin: 6px 0 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.dashboard-tip > a[b-iwde0uvicm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.9;
}

.admin-dashboard a:focus-visible[b-iwde0uvicm] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}

@media (hover: hover) {
    .quick-access-card:hover[b-iwde0uvicm] {
        transform: translateY(-3px);
        border-color: var(--card-color);
        box-shadow: 0 10px 25px rgba(16, 24, 40, .06);
    }

    .dashboard-link-list > a:hover strong[b-iwde0uvicm] {
        color: var(--green, #3a7d44);
    }

    .dashboard-button:hover[b-iwde0uvicm] {
        filter: brightness(.97);
    }
}

@media (max-width: 1200px) {
    .quick-access-grid[b-iwde0uvicm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .dashboard-sections[b-iwde0uvicm] {
        grid-template-columns: 1fr;
    }

    .dashboard-intro[b-iwde0uvicm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-tip[b-iwde0uvicm] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-tip > a[b-iwde0uvicm] {
        margin-right: 60px;
    }
}

@media (max-width: 520px) {
    .admin-dashboard[b-iwde0uvicm] {
        gap: 23px;
    }

    .dashboard-intro[b-iwde0uvicm],
    .dashboard-section[b-iwde0uvicm],
    .quick-access-card[b-iwde0uvicm] {
        padding: 19px;
    }

    .dashboard-intro h1[b-iwde0uvicm] {
        font-size: 27px;
    }

    .dashboard-intro p[b-iwde0uvicm] {
        font-size: 17px;
    }

    .quick-access-grid[b-iwde0uvicm] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dashboard-tip[b-iwde0uvicm] {
        padding: 18px;
        gap: 12px;
    }

    .dashboard-tip > a[b-iwde0uvicm] {
        margin-right: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-access-card[b-iwde0uvicm] {
        transition: none;
    }

    .quick-access-card:hover[b-iwde0uvicm] {
        transform: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Brands/BrandDetails.razor.rz.scp.css */
.brand-details-page[b-h6i2gnx7xm] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-h6i2gnx7xm] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-h6i2gnx7xm] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-h6i2gnx7xm] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-h6i2gnx7xm] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-h6i2gnx7xm] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-h6i2gnx7xm],
.primary-button[b-h6i2gnx7xm] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

.back-button[b-h6i2gnx7xm] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-h6i2gnx7xm] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Layout
========================= */

.details-grid[b-h6i2gnx7xm] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-h6i2gnx7xm] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-h6i2gnx7xm] {
    grid-column: 1 / -1;
}

.details-card h3[b-h6i2gnx7xm] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}


/* =========================
   Profile
========================= */

.profile-card[b-h6i2gnx7xm] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.profile-logo[b-h6i2gnx7xm] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-logo img[b-h6i2gnx7xm] {
    width: 100%;
    height: 100%;

    padding: 8px;

    box-sizing: border-box;

    object-fit: contain;
}

.profile-info[b-h6i2gnx7xm] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-h6i2gnx7xm] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.5;
}

.profile-type[b-h6i2gnx7xm] {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 19px;
    font-weight: 800;
}

.profile-meta[b-h6i2gnx7xm] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-h6i2gnx7xm] {
    color: var(--muted);

    font-size: 18px;
}

.profile-meta strong[b-h6i2gnx7xm] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.profile-statuses[b-h6i2gnx7xm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}


/* =========================
   Status
========================= */

.status-badge[b-h6i2gnx7xm] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-h6i2gnx7xm] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-h6i2gnx7xm] {
    background: #fff1f1;
    color: #b42318;
}


/* =========================
   Info
========================= */

.info-list[b-h6i2gnx7xm] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-h6i2gnx7xm] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-h6i2gnx7xm] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 700;
}

.info-item strong[b-h6i2gnx7xm] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;

    overflow-wrap: anywhere;
}


/* =========================
   Status List
========================= */

.status-list[b-h6i2gnx7xm] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.status-row[b-h6i2gnx7xm] {
    min-height: 58px;
    padding: 0 15px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-h6i2gnx7xm] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.status-row strong[b-h6i2gnx7xm] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}


/* =========================
   Description
========================= */

.description-box[b-h6i2gnx7xm] {
    min-height: 150px;
    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box span[b-h6i2gnx7xm] {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;
}

.description-box p[b-h6i2gnx7xm] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 500;

    line-height: 2.1;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =========================
   Messages
========================= */

.loading-card[b-h6i2gnx7xm] {
    color: var(--muted);

    font-size: 19px;
}

.form-error[b-h6i2gnx7xm] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .page-head[b-h6i2gnx7xm],
    .profile-card[b-h6i2gnx7xm] {
        flex-direction: column;
    }

    .head-actions[b-h6i2gnx7xm] {
        width: 100%;
    }

    .head-actions a[b-h6i2gnx7xm] {
        flex: 1;
    }

    .details-grid[b-h6i2gnx7xm],
    .info-list[b-h6i2gnx7xm] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-h6i2gnx7xm] {
        grid-column: auto;
    }

    .profile-card[b-h6i2gnx7xm] {
        align-items: flex-start;
    }

    .profile-statuses[b-h6i2gnx7xm] {
        align-items: flex-start;

        flex-direction: row;
        flex-wrap: wrap;
    }
}


@media (max-width: 520px) {

    .details-card[b-h6i2gnx7xm] {
        padding: 17px;
    }

    .head-actions[b-h6i2gnx7xm] {
        flex-direction: column;
    }

    .head-actions a[b-h6i2gnx7xm] {
        width: 100%;

        box-sizing: border-box;
    }

    .page-head h1[b-h6i2gnx7xm] {
        font-size: 25px;
    }

    .profile-info h2[b-h6i2gnx7xm] {
        font-size: 21px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Brands/Brands.razor.rz.scp.css */
.brands-page[b-2hnxjh87dz] {
    width: 100%;
}


/* =========================
   Create Button
========================= */

.create-brand-button[b-2hnxjh87dz] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-brand-button span[b-2hnxjh87dz] {
    font-size: 20px;
    font-weight: 400;

    line-height: 1;
}

.create-brand-button:hover[b-2hnxjh87dz] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Brand Cell
========================= */

.brand-cell[b-2hnxjh87dz] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.brand-logo[b-2hnxjh87dz] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    object-fit: contain;

    background: rgba(58, 125, 68, .09);
}

.brand-logo-placeholder[b-2hnxjh87dz] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.brand-cell > div:last-child[b-2hnxjh87dz] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.brand-cell strong[b-2hnxjh87dz] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.brand-cell span[b-2hnxjh87dz] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Description
========================= */

.brand-description[b-2hnxjh87dz] {
    max-width: 360px;

    display: -webkit-box;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.9;

    overflow: hidden;

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


/* =========================
   Status
========================= */

.status-badge[b-2hnxjh87dz] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-2hnxjh87dz] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-2hnxjh87dz] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-2hnxjh87dz] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Row Actions
========================= */

.row-actions[b-2hnxjh87dz] {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-2hnxjh87dz] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-2hnxjh87dz] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .create-brand-button[b-2hnxjh87dz] {
        flex: 1;
    }

    .brand-description[b-2hnxjh87dz] {
        max-width: 220px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Brands/CreateBrand.razor.rz.scp.css */
.brand-form-page[b-y566ih1ske] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-y566ih1ske] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-y566ih1ske] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-y566ih1ske] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-y566ih1ske] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-y566ih1ske] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-y566ih1ske] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Layout
========================= */

.form-grid[b-y566ih1ske] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-y566ih1ske] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-y566ih1ske] {
    grid-column: 1 / -1;
}

.form-card h3[b-y566ih1ske] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.section-description[b-y566ih1ske] {
    margin: -10px 0 18px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}


/* =========================
   Fields
========================= */

.fields-grid[b-y566ih1ske] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.fields-grid.single[b-y566ih1ske] {
    grid-template-columns: 1fr;
}

.field-group[b-y566ih1ske] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-y566ih1ske] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.required[b-y566ih1ske] {
    color: #b42318;
}

.field-group input[b-y566ih1ske],
.field-group select[b-y566ih1ske],
.field-group textarea[b-y566ih1ske] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-y566ih1ske],
.field-group select[b-y566ih1ske] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-y566ih1ske] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-y566ih1ske],
.field-group select:focus[b-y566ih1ske],
.field-group textarea:focus[b-y566ih1ske] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Switches
========================= */

.switch-list[b-y566ih1ske] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-y566ih1ske] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-y566ih1ske] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-y566ih1ske] {
    color: var(--text);

    font-size: 17px;
}

.switch-item span[b-y566ih1ske] {
    color: var(--muted);

    font-size: 15px;
}

.switch-item input[b-y566ih1ske] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);

    flex: 0 0 auto;
}


/* =========================
   Upload
========================= */

.upload-placeholder[b-y566ih1ske] {
    min-height: 120px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.logo-preview-box[b-y566ih1ske] {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    border-radius: 16px;

    background: rgba(58, 125, 68, .09);
}

.logo-preview[b-y566ih1ske] {
    width: 100%;
    height: 100%;

    display: block;

    padding: 5px;

    box-sizing: border-box;

    object-fit: contain;
}

.upload-icon[b-y566ih1ske] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

.upload-info[b-y566ih1ske] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-y566ih1ske] {
    color: var(--text);

    font-size: 17px;
}

.upload-info span[b-y566ih1ske] {
    color: var(--muted);

    font-size: 15px;
}

.selected-file[b-y566ih1ske] {
    margin-top: 4px;

    color: var(--green) !important;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.secondary-button[b-y566ih1ske] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-y566ih1ske] {
    border-color: var(--green);

    color: var(--green);
}

.secondary-button input[b-y566ih1ske] {
    display: none;
}

.upload-error[b-y566ih1ske] {
    margin-top: 10px;

    color: #b42318;

    font-size: 16px;
    font-weight: 700;
}


/* =========================
   Errors
========================= */

.form-error[b-y566ih1ske] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}


/* =========================
   Submit
========================= */

.submit-card[b-y566ih1ske] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-y566ih1ske] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-y566ih1ske] {
    color: var(--text);

    font-size: 19px;
}

.submit-card span[b-y566ih1ske] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-y566ih1ske] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:disabled[b-y566ih1ske] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .page-head[b-y566ih1ske] {
        flex-direction: column;
    }

    .back-button[b-y566ih1ske] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-y566ih1ske],
    .fields-grid[b-y566ih1ske] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-y566ih1ske] {
        grid-column: auto;
    }

    .upload-placeholder[b-y566ih1ske],
    .submit-card[b-y566ih1ske] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-y566ih1ske],
    .submit-button[b-y566ih1ske] {
        width: 100%;

        box-sizing: border-box;
    }
}


@media (max-width: 520px) {

    .form-card[b-y566ih1ske] {
        padding: 16px;
    }

    .logo-preview-box[b-y566ih1ske] {
        width: 68px;
        height: 68px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Brands/EditBrand.razor.rz.scp.css */
.brand-form-page[b-tmnb1z9tbp] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-tmnb1z9tbp] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-tmnb1z9tbp] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-tmnb1z9tbp] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-tmnb1z9tbp] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.head-actions[b-tmnb1z9tbp] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-tmnb1z9tbp] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-tmnb1z9tbp] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Layout
========================= */

.form-grid[b-tmnb1z9tbp] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-tmnb1z9tbp] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-tmnb1z9tbp] {
    grid-column: 1 / -1;
}

.form-card h3[b-tmnb1z9tbp] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.section-description[b-tmnb1z9tbp] {
    margin: -10px 0 18px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}

.loading-card[b-tmnb1z9tbp] {
    color: var(--muted);

    font-size: 18px;
}


/* =========================
   Fields
========================= */

.fields-grid[b-tmnb1z9tbp] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.fields-grid.single[b-tmnb1z9tbp] {
    grid-template-columns: 1fr;
}

.field-group[b-tmnb1z9tbp] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-tmnb1z9tbp] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.required[b-tmnb1z9tbp] {
    color: #b42318;
}

.field-group input[b-tmnb1z9tbp],
.field-group select[b-tmnb1z9tbp],
.field-group textarea[b-tmnb1z9tbp] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-tmnb1z9tbp],
.field-group select[b-tmnb1z9tbp] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-tmnb1z9tbp] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-tmnb1z9tbp],
.field-group select:focus[b-tmnb1z9tbp],
.field-group textarea:focus[b-tmnb1z9tbp] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Switches
========================= */

.switch-list[b-tmnb1z9tbp] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-tmnb1z9tbp] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-tmnb1z9tbp] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-tmnb1z9tbp] {
    color: var(--text);

    font-size: 17px;
}

.switch-item span[b-tmnb1z9tbp] {
    color: var(--muted);

    font-size: 15px;
}

.switch-item input[b-tmnb1z9tbp] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);

    flex: 0 0 auto;
}


/* =========================
   Upload
========================= */

.upload-placeholder[b-tmnb1z9tbp] {
    min-height: 120px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.logo-preview-box[b-tmnb1z9tbp] {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    border-radius: 16px;

    background: rgba(58, 125, 68, .09);
}

.logo-preview[b-tmnb1z9tbp] {
    width: 100%;
    height: 100%;

    display: block;

    padding: 5px;

    box-sizing: border-box;

    object-fit: contain;
}

.upload-icon[b-tmnb1z9tbp] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

.upload-info[b-tmnb1z9tbp] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-tmnb1z9tbp] {
    color: var(--text);

    font-size: 17px;
}

.upload-info span[b-tmnb1z9tbp] {
    color: var(--muted);

    font-size: 15px;
}

.selected-file[b-tmnb1z9tbp] {
    margin-top: 4px;

    color: var(--green) !important;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.secondary-button[b-tmnb1z9tbp] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-tmnb1z9tbp] {
    border-color: var(--green);

    color: var(--green);
}

.secondary-button input[b-tmnb1z9tbp] {
    display: none;
}

.upload-error[b-tmnb1z9tbp] {
    margin-top: 10px;

    color: #b42318;

    font-size: 16px;
    font-weight: 700;
}

.logo-actions[b-tmnb1z9tbp] {
    margin-top: 12px;

    display: flex;
    align-items: center;
}

.remove-logo-button[b-tmnb1z9tbp] {
    min-height: 40px;
    padding: 0 14px;

    border: 1px solid #fecdca;
    border-radius: 9px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.remove-logo-button:hover:not(:disabled)[b-tmnb1z9tbp] {
    background: #fff2f2;
}

.remove-logo-button:disabled[b-tmnb1z9tbp] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Errors
========================= */

.form-error[b-tmnb1z9tbp] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}


/* =========================
   Submit
========================= */

.submit-card[b-tmnb1z9tbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-tmnb1z9tbp] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-tmnb1z9tbp] {
    color: var(--text);

    font-size: 19px;
}

.submit-card span[b-tmnb1z9tbp] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-tmnb1z9tbp] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:disabled[b-tmnb1z9tbp] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .page-head[b-tmnb1z9tbp] {
        flex-direction: column;
    }

    .head-actions[b-tmnb1z9tbp] {
        width: 100%;
    }

    .head-actions a[b-tmnb1z9tbp] {
        flex: 1;
    }

    .form-grid[b-tmnb1z9tbp],
    .fields-grid[b-tmnb1z9tbp] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-tmnb1z9tbp] {
        grid-column: auto;
    }

    .upload-placeholder[b-tmnb1z9tbp],
    .submit-card[b-tmnb1z9tbp] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-tmnb1z9tbp],
    .submit-button[b-tmnb1z9tbp] {
        width: 100%;

        box-sizing: border-box;
    }
}


@media (max-width: 520px) {

    .form-card[b-tmnb1z9tbp] {
        padding: 16px;
    }

    .head-actions[b-tmnb1z9tbp] {
        flex-direction: column;
    }

    .head-actions a[b-tmnb1z9tbp] {
        width: 100%;

        box-sizing: border-box;
    }

    .logo-preview-box[b-tmnb1z9tbp] {
        width: 68px;
        height: 68px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/ContactRequests/ContactRequestDetails.razor.rz.scp.css */
.contact-request-details-page[b-zahb7f2idd] {
    display: flex;
    flex-direction: column;

    gap: 24px;

    direction: rtl;
}


.page-head[b-zahb7f2idd] {
    padding: 26px 28px;

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

    gap: 24px;

    border:
        1px solid rgba(31, 41, 55, .08);

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .045);
}


.page-head > div:first-child[b-zahb7f2idd] {
    min-width: 0;
}


.page-head > div:first-child > span[b-zahb7f2idd] {
    display: block;

    margin-bottom: 5px;

    color: #2459a6;

    font-size: 18px;
    font-weight: 900;
}


.page-head h1[b-zahb7f2idd] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
    line-height: 1.6;
}


.page-head p[b-zahb7f2idd] {
    margin: 6px 0 0;

    color: #667085;

    font-size: 19px;
    font-weight: 600;
    line-height: 1.9;
}


.head-actions[b-zahb7f2idd] {
    flex: 0 0 auto;
}


.back-button[b-zahb7f2idd] {
    min-height: 43px;
    padding: 0 17px;

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

    border:
        1px solid rgba(36, 89, 166, .25);

    border-radius: 11px;

    background: #fff;
    color: #2459a6;

    font-size: 18px;
    font-weight: 900;

    text-decoration: none;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}


.back-button:hover[b-zahb7f2idd] {
    transform: translateY(-1px);

    border-color:
        rgba(36, 89, 166, .55);

    background:
        rgba(36, 89, 166, .035);
}


.page-message[b-zahb7f2idd] {
    padding: 14px 17px;

    border-radius: 13px;

    font-size: 19px;
    font-weight: 800;
    line-height: 1.9;
}


.page-message.error[b-zahb7f2idd] {
    border:
        1px solid rgba(198, 47, 64, .18);

    background:
        rgba(198, 47, 64, .055);

    color: #b42334;
}


.page-message.success[b-zahb7f2idd] {
    border:
        1px solid rgba(58, 125, 68, .2);

    background:
        rgba(58, 125, 68, .06);

    color: #326f3c;
}


.details-state[b-zahb7f2idd] {
    min-height: 230px;
    padding: 30px;

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

    gap: 15px;

    border:
        1px solid rgba(31, 41, 55, .08);

    border-radius: 22px;

    background: #fff;

    color: #526071;

    text-align: center;
}


.details-state strong[b-zahb7f2idd] {
    font-size: 19px;
    font-weight: 900;
}


.details-state a[b-zahb7f2idd] {
    color: #2459a6;

    font-size: 19px;
    font-weight: 800;
}


.loading-spinner[b-zahb7f2idd],
.button-spinner[b-zahb7f2idd] {
    width: 22px;
    height: 22px;

    display: inline-block;

    border:
        3px solid rgba(36, 89, 166, .16);

    border-top-color: #2459a6;
    border-radius: 50%;

    animation:
        spin-b-zahb7f2idd .75s linear infinite;
}


.button-spinner[b-zahb7f2idd] {
    width: 18px;
    height: 18px;

    border-color:
        rgba(255, 255, 255, .35);

    border-top-color: #fff;
}


.request-summary[b-zahb7f2idd] {
    padding: 25px 28px;

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

    gap: 20px;

    border:
        1px solid rgba(36, 89, 166, .1);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(247, 250, 254, .96));

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .045);
}


.summary-eyebrow[b-zahb7f2idd] {
    display: block;

    margin-bottom: 5px;

    color: #2459a6;

    font-size: 12.5px;
    font-weight: 900;
}


.request-summary h2[b-zahb7f2idd] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;
    line-height: 1.6;
}


.subject-title[b-zahb7f2idd] {
    display: block;

    margin-top: 4px;

    color: #667085;

    font-size: 14px;
    font-weight: 700;
}


.summary-badges[b-zahb7f2idd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 9px;
}


.status-badge[b-zahb7f2idd] {
    min-height: 32px;
    padding: 0 12px;

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

    border-radius: 999px;

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.status-badge.info[b-zahb7f2idd] {
    background:
        rgba(36, 89, 166, .1);

    color: #2459a6;
}


.status-badge.warning[b-zahb7f2idd] {
    background:
        rgba(217, 137, 28, .12);

    color: #9a5b08;
}


.status-badge.success[b-zahb7f2idd] {
    background:
        rgba(58, 125, 68, .11);

    color: #326f3c;
}


.status-badge.danger[b-zahb7f2idd] {
    background:
        rgba(198, 47, 64, .1);

    color: #b42334;
}


.status-badge.neutral[b-zahb7f2idd] {
    background:
        rgba(102, 112, 133, .11);

    color: #596273;
}


.details-grid[b-zahb7f2idd] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.details-card[b-zahb7f2idd] {
    min-width: 0;
    padding: 25px;

    border:
        1px solid rgba(31, 41, 55, .08);

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 10px 26px rgba(31, 41, 55, .04);
}


.details-card.full[b-zahb7f2idd] {
    grid-column: 1 / -1;
}


.card-heading[b-zahb7f2idd] {
    margin-bottom: 20px;
}


.card-heading > span[b-zahb7f2idd] {
    display: block;

    margin-bottom: 4px;

    color: #2459a6;

    font-size: 17px;
    font-weight: 900;
}


.card-heading h3[b-zahb7f2idd] {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
    line-height: 1.7;
}


.card-heading p[b-zahb7f2idd] {
    margin: 5px 0 0;

    color: #667085;

    font-size: 17.5px;
    font-weight: 600;
    line-height: 1.9;
}


.details-list[b-zahb7f2idd] {
    display: flex;
    flex-direction: column;
}


.detail-row[b-zahb7f2idd] {
    min-height: 52px;
    padding: 10px 0;

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

    gap: 18px;

    border-bottom:
        1px solid rgba(31, 41, 55, .065);
}


.detail-row:last-child[b-zahb7f2idd] {
    border-bottom: 0;
}


.detail-row > span:first-child[b-zahb7f2idd] {
    color: #667085;

    font-size: 18px;
    font-weight: 700;
}


.detail-row strong[b-zahb7f2idd],
.detail-row a[b-zahb7f2idd] {
    max-width: 65%;

    overflow-wrap: anywhere;

    color: #344054;

    font-size: 17.5px;
    font-weight: 800;

    text-align: left;
    text-decoration: none;
}


.detail-row a:hover[b-zahb7f2idd] {
    color: #2459a6;
}


.ltr-value[b-zahb7f2idd] {
    direction: ltr;

    unicode-bidi: plaintext;
}


.message-card[b-zahb7f2idd] {
    border-color:
        rgba(58, 125, 68, .12);

    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(248, 252, 249, .75));
}


.message-content[b-zahb7f2idd] {
    margin: 0;
    padding: 20px;

    border:
        1px solid rgba(31, 41, 55, .07);

    border-radius: 14px;

    background: #fafbfc;
    color: #344054;

    font-size: 19px;
    font-weight: 500;
    line-height: 2.1;

    overflow-wrap: anywhere;
    white-space: pre-wrap;
}


.status-card[b-zahb7f2idd] {
    border-color:
        rgba(36, 89, 166, .13);
}


.status-form[b-zahb7f2idd] {
    display: grid;
    grid-template-columns:
        minmax(220px, .42fr)
        minmax(0, 1fr);

    gap: 20px;
}


.form-field[b-zahb7f2idd] {
    min-width: 0;
}


.form-field.full[b-zahb7f2idd] {
    grid-column: auto;
}


.form-field label[b-zahb7f2idd] {
    margin-bottom: 8px;

    display: block;

    color: #344054;

    font-size: 17.5px;
    font-weight: 900;
}


.form-field select[b-zahb7f2idd],
.form-field textarea[b-zahb7f2idd] {
    width: 100%;

    border:
        1px solid #d5dce5;

    border-radius: 12px;

    outline: none;

    background: #fbfcfd;
    color: #344054;

    font-family: inherit;
    font-size: 19px;
    font-weight: 600;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.form-field select[b-zahb7f2idd] {
    min-height: 49px;
    padding: 0 14px;
}


.form-field textarea[b-zahb7f2idd] {
    min-height: 125px;
    padding: 13px 14px;

    line-height: 1.9;

    resize: vertical;
}


.form-field select:focus[b-zahb7f2idd],
.form-field textarea:focus[b-zahb7f2idd] {
    border-color: #2459a6;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(36, 89, 166, .09);
}


.form-field select:disabled[b-zahb7f2idd],
.form-field textarea:disabled[b-zahb7f2idd] {
    background: #f2f4f7;

    cursor: not-allowed;
}


.field-help[b-zahb7f2idd] {
    display: block;

    margin-top: 6px;

    color: #7a8493;

    font-size: 17px;
    font-weight: 600;
}


.form-actions[b-zahb7f2idd] {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-end;
}


.save-button[b-zahb7f2idd] {
    min-width: 175px;
    min-height: 47px;
    padding: 0 21px;

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

    gap: 9px;

    border: 0;
    border-radius: 11px;

    background: #2459a6;
    color: #fff;

    font-family: inherit;
    font-size: 17.5px;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 10px 22px rgba(36, 89, 166, .16);

    transition:
        transform .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}


.save-button:hover:not(:disabled)[b-zahb7f2idd] {
    transform: translateY(-1px);

    background: #1f4e92;

    box-shadow:
        0 13px 26px rgba(36, 89, 166, .22);
}


.save-button:disabled[b-zahb7f2idd] {
    cursor: wait;

    opacity: .68;
}


.back-button:focus-visible[b-zahb7f2idd],
.save-button:focus-visible[b-zahb7f2idd],
.form-field select:focus-visible[b-zahb7f2idd],
.form-field textarea:focus-visible[b-zahb7f2idd] {
    outline:
        3px solid rgba(36, 89, 166, .15);

    outline-offset: 3px;
}


@keyframes spin-b-zahb7f2idd {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 900px) {

    .details-grid[b-zahb7f2idd] {
        grid-template-columns: 1fr;
    }


    .details-card.full[b-zahb7f2idd] {
        grid-column: auto;
    }


    .status-form[b-zahb7f2idd] {
        grid-template-columns: 1fr;
    }


    .form-actions[b-zahb7f2idd] {
        grid-column: auto;
    }
}


@media (max-width: 680px) {

    .contact-request-details-page[b-zahb7f2idd] {
        gap: 17px;
    }


    .page-head[b-zahb7f2idd],
    .request-summary[b-zahb7f2idd] {
        padding: 21px;

        align-items: flex-start;
        flex-direction: column;
    }


    .head-actions[b-zahb7f2idd],
    .back-button[b-zahb7f2idd] {
        width: 100%;
    }


    .summary-badges[b-zahb7f2idd] {
        justify-content: flex-start;
    }


    .details-card[b-zahb7f2idd] {
        padding: 20px;

        border-radius: 17px;
    }


    .detail-row[b-zahb7f2idd] {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }


    .detail-row strong[b-zahb7f2idd],
    .detail-row a[b-zahb7f2idd] {
        max-width: 100%;

        text-align: right;
    }


    .message-content[b-zahb7f2idd] {
        padding: 16px;

        font-size: 14px;
    }


    .save-button[b-zahb7f2idd] {
        width: 100%;
    }
}


@media (hover: none) {

    .back-button:hover[b-zahb7f2idd],
    .save-button:hover[b-zahb7f2idd] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .back-button[b-zahb7f2idd],
    .save-button[b-zahb7f2idd],
    .form-field select[b-zahb7f2idd],
    .form-field textarea[b-zahb7f2idd],
    .loading-spinner[b-zahb7f2idd],
    .button-spinner[b-zahb7f2idd] {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/ContactRequests/ContactRequests.razor.rz.scp.css */
.contact-requests-page[b-k80rubq78a] {
    display: flex;
    flex-direction: column;

    gap: 24px;

    direction: rtl;
}


.requester-cell[b-k80rubq78a] {
    min-width: 210px;

    display: flex;
    align-items: center;

    gap: 12px;
}


.requester-avatar[b-k80rubq78a] {
    width: 43px;
    height: 43px;

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

    flex: 0 0 43px;

    border-radius: 13px;

    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;

    font-size: 17px;
    font-weight: 900;
}


.requester-cell > div[b-k80rubq78a] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.requester-cell strong[b-k80rubq78a] {
    max-width: 190px;

    overflow: hidden;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.requester-cell span:not(.requester-avatar)[b-k80rubq78a] {
    color: #7a8493;

    font-size: 17px;
    font-weight: 600;
}


.contact-cell[b-k80rubq78a] {
    min-width: 185px;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.contact-cell a[b-k80rubq78a] {
    width: fit-content;
    max-width: 220px;

    overflow: hidden;

    color: #344054;

    font-size: 18px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}


.contact-cell a:hover[b-k80rubq78a] {
    color: #2459a6;
}


.contact-cell span[b-k80rubq78a] {
    color: #8a94a3;

    font-size: 17.5px;
    font-weight: 600;
}


.subject-value[b-k80rubq78a] {
    min-width: 125px;

    display: inline-block;

    color: #344054;

    font-size: 17.5px;
    font-weight: 800;
}


.status-badge[b-k80rubq78a] {
    min-height: 31px;
    padding: 0 11px;

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

    border-radius: 999px;

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.status-badge.info[b-k80rubq78a] {
    background:
        rgba(36, 89, 166, .1);

    color: #2459a6;
}


.status-badge.warning[b-k80rubq78a] {
    background:
        rgba(217, 137, 28, .12);

    color: #9a5b08;
}


.status-badge.success[b-k80rubq78a] {
    background:
        rgba(58, 125, 68, .11);

    color: #326f3c;
}


.status-badge.danger[b-k80rubq78a] {
    background:
        rgba(198, 47, 64, .1);

    color: #b42334;
}


.status-badge.neutral[b-k80rubq78a] {
    background:
        rgba(102, 112, 133, .11);

    color: #596273;
}


.date-cell[b-k80rubq78a] {
    min-width: 105px;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.date-cell strong[b-k80rubq78a] {
    color: #344054;

    font-size: 18px;
    font-weight: 800;
}


.date-cell span[b-k80rubq78a] {
    color: #7a8493;

    direction: ltr;

    font-size: 17px;
    font-weight: 600;

    text-align: right;
}


.row-actions[b-k80rubq78a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.action-link[b-k80rubq78a] {
    min-height: 34px;
    padding: 0 13px;

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

    border:
        1px solid rgba(36, 89, 166, .2);

    border-radius: 9px;

    background: #fff;
    color: #2459a6;

    font-family: inherit;
    font-size: 12.5px;
    font-weight: 900;

    cursor: pointer;

    white-space: nowrap;
    text-decoration: none;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.action-link:hover[b-k80rubq78a] {
    transform: translateY(-1px);

    border-color:
        rgba(36, 89, 166, .48);

    background:
        rgba(36, 89, 166, .04);
}


.action-link:focus-visible[b-k80rubq78a] {
    outline:
        3px solid rgba(36, 89, 166, .14);

    outline-offset: 2px;
}


@media (max-width: 720px) {

    .contact-requests-page[b-k80rubq78a] {
        gap: 18px;
    }


    .requester-cell[b-k80rubq78a] {
        min-width: 175px;
    }


    .requester-cell strong[b-k80rubq78a] {
        max-width: 150px;
    }
}


@media (hover: none) {

    .action-link:hover[b-k80rubq78a] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .action-link[b-k80rubq78a] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Articles/Create.razor.rz.scp.css */
.article-form-page[b-0qu1p8d26q] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-0qu1p8d26q] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.page-head > div:first-child > span[b-0qu1p8d26q] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-0qu1p8d26q] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-0qu1p8d26q] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-0qu1p8d26q] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.back-button:hover[b-0qu1p8d26q] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Loading / Error
========================= */

.loading-card[b-0qu1p8d26q] {
    min-height: 180px;

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

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
    color: var(--muted);

    font-size: 18px;
}

.form-error[b-0qu1p8d26q] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
}


/* =========================
   Form Grid
========================= */

.form-grid[b-0qu1p8d26q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-0qu1p8d26q] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.form-card.full[b-0qu1p8d26q] {
    grid-column: 1 / -1;
}

.form-card h3[b-0qu1p8d26q] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.form-card > p[b-0qu1p8d26q] {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}


/* =========================
   Fields Layout
========================= */

.two-column-fields[b-0qu1p8d26q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.two-column-fields.compact[b-0qu1p8d26q] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-group[b-0qu1p8d26q] {
    min-width: 0;
    margin-bottom: 17px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group:last-child[b-0qu1p8d26q] {
    margin-bottom: 0;
}

.field-group label[b-0qu1p8d26q] {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.field-group label span[b-0qu1p8d26q] {
    color: #b42318;
}


/* =========================
   Blazor Input Components
========================= */

.field-group[b-0qu1p8d26q]  input,
.field-group[b-0qu1p8d26q]  textarea,
.field-group[b-0qu1p8d26q]  select {
    width: 100%;
    min-width: 0;
    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group[b-0qu1p8d26q]  textarea {
    min-height: 105px;

    resize: vertical;

    line-height: 1.9;
}

.field-group[b-0qu1p8d26q]  input:focus,
.field-group[b-0qu1p8d26q]  textarea:focus,
.field-group[b-0qu1p8d26q]  select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-group[b-0qu1p8d26q]  input::placeholder,
.field-group[b-0qu1p8d26q]  textarea::placeholder {
    color: #98a2b3;
}

.field-group[b-0qu1p8d26q]  input[type="file"] {
    min-height: 46px;
    padding: 7px;

    cursor: pointer;
}

.field-group[b-0qu1p8d26q]  input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-left: 10px;
    padding: 0 12px;

    border: 0;
    border-radius: 8px;

    background: #edf4ef;
    color: var(--green);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}

.field-group[b-0qu1p8d26q]  input.invalid,
.field-group[b-0qu1p8d26q]  textarea.invalid,
.field-group[b-0qu1p8d26q]  select.invalid {
    border-color: #f04438;
}

.field-group[b-0qu1p8d26q]  input.valid.modified,
.field-group[b-0qu1p8d26q]  textarea.valid.modified,
.field-group[b-0qu1p8d26q]  select.valid.modified {
    border-color: #12b76a;
}

.field-help[b-0qu1p8d26q] {
    display: block;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.editor-help[b-0qu1p8d26q] {
    margin-top: 9px;
}

.ltr-input[b-0qu1p8d26q] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

.ltr-value[b-0qu1p8d26q] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

.validation-message[b-0qu1p8d26q],
[b-0qu1p8d26q] .validation-message {
    color: #b42318;

    font-size: 15px;
    font-weight: 700;
}


/* =========================
   Selected File
========================= */

.selected-file[b-0qu1p8d26q] {
    padding: 11px 13px;

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

    gap: 10px;

    border: 1px solid #abefc6;
    border-radius: 10px;

    background: #ecfdf3;
    color: #027a48;
}

.selected-file strong[b-0qu1p8d26q] {
    min-width: 0;

    overflow: hidden;

    font-size: 16px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-file span[b-0qu1p8d26q] {
    flex: 0 0 auto;

    font-size: 15px;
}


/* =========================
   Pet Categories
========================= */

.category-options[b-0qu1p8d26q] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.category-option[b-0qu1p8d26q] {
    min-width: 0;
    min-height: 50px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 9px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
    color: var(--text);

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.category-option:hover[b-0qu1p8d26q] {
    border-color: var(--green);

    background: rgba(58, 125, 68, .04);
}

.category-option:has(input:checked)[b-0qu1p8d26q] {
    border-color: var(--green);

    background: rgba(58, 125, 68, .08);
}

.category-option input[b-0qu1p8d26q] {
    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    margin: 0;

    accent-color: var(--green);
}

.category-option > span[b-0qu1p8d26q] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.category-option strong[b-0qu1p8d26q] {
    overflow: hidden;

    color: var(--text);

    font-size: 16px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-option small[b-0qu1p8d26q] {
    overflow: hidden;

    color: var(--muted);

    direction: ltr;

    font-size: 14px;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-categories[b-0qu1p8d26q] {
    padding: 18px;

    border: 1px dashed var(--soft);
    border-radius: 11px;

    color: var(--muted);

    font-size: 16px;
    text-align: center;
}


/* =========================
   Toggle Fields
========================= */

.toggle-field[b-0qu1p8d26q] {
    min-height: 72px;
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;

    cursor: pointer;
}

.toggle-field[b-0qu1p8d26q]  input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: var(--green);
}

.toggle-field > span[b-0qu1p8d26q] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.toggle-field strong[b-0qu1p8d26q] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.toggle-field small[b-0qu1p8d26q] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   Submit
========================= */

.submit-card[b-0qu1p8d26q] {
    grid-column: 1 / -1;

    padding: 18px 22px;

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

    gap: 16px;
}

.submit-card > div[b-0qu1p8d26q] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-0qu1p8d26q] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.submit-card span[b-0qu1p8d26q] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.submit-button[b-0qu1p8d26q] {
    min-width: 145px;
    min-height: 45px;
    padding: 0 18px;

    flex: 0 0 auto;

    border: 0;
    border-radius: 11px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s;
}

.submit-button:hover:not(:disabled)[b-0qu1p8d26q] {
    filter: brightness(.96);
}

.submit-button:disabled[b-0qu1p8d26q] {
    cursor: not-allowed;
    opacity: .65;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .category-options[b-0qu1p8d26q] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .form-grid[b-0qu1p8d26q] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-0qu1p8d26q],
    .submit-card[b-0qu1p8d26q] {
        grid-column: auto;
    }
}

@media (max-width: 650px) {

    .page-head[b-0qu1p8d26q] {
        flex-direction: column;
    }

    .back-button[b-0qu1p8d26q] {
        width: 100%;
    }

    .two-column-fields[b-0qu1p8d26q],
    .two-column-fields.compact[b-0qu1p8d26q],
    .category-options[b-0qu1p8d26q] {
        grid-template-columns: 1fr;
    }

    .submit-card[b-0qu1p8d26q] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-0qu1p8d26q] {
        width: 100%;
    }
}

/* =========================
   Pet Categories
========================= */

.category-options[b-0qu1p8d26q] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.category-option[b-0qu1p8d26q] {
    position: relative;

    min-width: 0;
    min-height: 76px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 11px;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfc;
    color: var(--text);

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.category-option:hover[b-0qu1p8d26q] {
    border-color: rgba(58, 125, 68, .45);

    background: rgba(58, 125, 68, .035);

    transform: translateY(-1px);
}

.category-option:has(input:checked)[b-0qu1p8d26q] {
    border-color: var(--green);

    background: rgba(58, 125, 68, .08);

    box-shadow:
        0 0 0 2px rgba(58, 125, 68, .07);
}

.category-option > input[b-0qu1p8d26q] {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

.category-image[b-0qu1p8d26q] {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    overflow: hidden;

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

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
}

.category-image img[b-0qu1p8d26q] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.category-image-placeholder[b-0qu1p8d26q] {
    width: 100%;
    height: 100%;

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

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

.category-info[b-0qu1p8d26q] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.category-info strong[b-0qu1p8d26q] {
    overflow: hidden;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-info small[b-0qu1p8d26q] {
    overflow: hidden;

    color: var(--muted);

    direction: ltr;

    font-size: 14px;

    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-selected-mark[b-0qu1p8d26q] {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

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

    border: 1px solid var(--soft);
    border-radius: 7px;

    background: #fff;
    color: transparent;

    font-size: 17px;
    font-weight: 900;

    transition: .15s;
}

.category-option:has(input:checked)
.category-selected-mark[b-0qu1p8d26q] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.category-option:has(input:checked)
.category-info strong[b-0qu1p8d26q] {
    color: var(--green);
}

.empty-categories[b-0qu1p8d26q] {
    padding: 18px;

    border: 1px dashed var(--soft);
    border-radius: 11px;

    color: var(--muted);

    font-size: 16px;
    text-align: center;
}

@media (max-width: 950px) {

    .category-options[b-0qu1p8d26q] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .category-options[b-0qu1p8d26q] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Articles/Details.razor.rz.scp.css */
.article-details-page[b-yopiczwouz] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-yopiczwouz] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.page-head > div:first-child > span[b-yopiczwouz] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-yopiczwouz] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-yopiczwouz] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.header-actions[b-yopiczwouz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


/* =========================
   Loading / Empty / Error
========================= */

.loading-card[b-yopiczwouz] {
    min-height: 180px;

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

    color: var(--muted);

    font-size: 18px;
}

.empty-card[b-yopiczwouz] {
    min-height: 220px;

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

    gap: 10px;
}

.empty-card strong[b-yopiczwouz] {
    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.empty-card span[b-yopiczwouz] {
    color: var(--muted);

    font-size: 16px;
}

.form-error[b-yopiczwouz] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
}


/* =========================
   Grid / Cards
========================= */

.details-grid[b-yopiczwouz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-yopiczwouz] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.details-card.full[b-yopiczwouz] {
    grid-column: 1 / -1;
}

.details-card h3[b-yopiczwouz] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}


/* =========================
   Identity
========================= */

.identity-card[b-yopiczwouz] {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 18px;
}

.cover-image[b-yopiczwouz] {
    width: 128px;
    height: 92px;

    flex: 0 0 128px;

    overflow: hidden;

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

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.cover-image img[b-yopiczwouz] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.identity-info[b-yopiczwouz] {
    min-width: 0;
    flex: 1;
}

.identity-info h2[b-yopiczwouz] {
    margin: 0;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;
}

.article-slug[b-yopiczwouz] {
    display: inline-block;

    max-width: 100%;
    margin-top: 4px;

    overflow: hidden;

    color: var(--green);

    direction: ltr;

    font-size: 15px;

    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-slug:hover[b-yopiczwouz] {
    text-decoration: underline;
}

.identity-badges[b-yopiczwouz] {
    margin-top: 10px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.identity-meta[b-yopiczwouz] {
    min-width: 120px;
    padding: 13px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.identity-meta span[b-yopiczwouz] {
    color: var(--muted);

    font-size: 14px;
}

.identity-meta strong[b-yopiczwouz] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-yopiczwouz] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-yopiczwouz] {
    min-height: 50px;
    padding: 9px 0;

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

    gap: 15px;

    border-bottom: 1px solid #f1f2f4;
}

.detail-item:last-child[b-yopiczwouz] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-yopiczwouz] {
    color: var(--muted);

    font-size: 16px;
}

.detail-item strong[b-yopiczwouz] {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.reference-link[b-yopiczwouz] {
    max-width: 70%;

    overflow: hidden;

    color: var(--green);

    direction: ltr;

    font-size: 16px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================
   Status
========================= */

.status-badge[b-yopiczwouz] {
    min-height: 28px;
    padding: 0 10px;

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

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-yopiczwouz] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-yopiczwouz] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-yopiczwouz] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-yopiczwouz] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-yopiczwouz] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Summary / Categories
========================= */

.summary-box[b-yopiczwouz] {
    min-height: 72px;
    padding: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
    color: var(--text);

    font-size: 17px;
    line-height: 2;
}

.category-list[b-yopiczwouz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.category-badge[b-yopiczwouz] {
    min-height: 37px;
    padding: 5px 11px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    border: 1px solid #abefc6;
    border-radius: 999px;

    background: #ecfdf3;
    color: #027a48;

    font-size: 15px;
    font-weight: 800;
}

.category-badge img[b-yopiczwouz] {
    width: 23px;
    height: 23px;

    border-radius: 50%;

    object-fit: cover;
}

.empty-value[b-yopiczwouz] {
    color: var(--muted);
}


/* =========================
   Rich Article Content
========================= */

.article-content[b-yopiczwouz] {
    min-height: 160px;
    padding: 20px;

    overflow-wrap: anywhere;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfc;
    color: var(--text);

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

.article-content[b-yopiczwouz]  h2 {
    margin: 24px 0 10px;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.article-content[b-yopiczwouz]  h2:first-child {
    margin-top: 0;
}

.article-content[b-yopiczwouz]  h3 {
    margin: 20px 0 9px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.article-content[b-yopiczwouz]  p {
    margin: 0 0 13px;
}

.article-content[b-yopiczwouz]  ul,
.article-content[b-yopiczwouz]  ol {
    margin: 10px 0 16px;

    padding-right: 25px;
    padding-left: 0;
}

.article-content[b-yopiczwouz]  blockquote {
    margin: 16px 0;
    padding: 13px 16px;

    border-right: 4px solid var(--green);
    border-radius: 8px;

    background: rgba(58, 125, 68, .07);
    color: var(--text);
}

.article-content[b-yopiczwouz]  a {
    color: var(--green);

    text-decoration: underline;
}

.article-content[b-yopiczwouz]  img {
    max-width: 100%;
    height: auto;
    margin: 18px auto;

    display: block;

    border-radius: 13px;
}


/* =========================
   Actions
========================= */

.actions-card[b-yopiczwouz] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.actions-card h3[b-yopiczwouz] {
    margin-bottom: 5px;
}

.actions-card > div:first-child > span[b-yopiczwouz] {
    color: var(--muted);

    font-size: 15px;
}

.article-actions[b-yopiczwouz] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-yopiczwouz] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    text-decoration: none;
    cursor: pointer;

    transition: .2s;
}

.action-button:hover:not(:disabled)[b-yopiczwouz] {
    border-color: var(--green);
    color: var(--green);
}

.action-button.primary[b-yopiczwouz] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.action-button.primary:hover[b-yopiczwouz] {
    color: #fff;

    filter: brightness(.96);
}

.action-button.danger[b-yopiczwouz] {
    border-color: #fecdca;
    color: #b42318;
}

.action-button.danger:hover:not(:disabled)[b-yopiczwouz] {
    border-color: #b42318;

    background: #fff1f1;
    color: #b42318;
}

.action-button:disabled[b-yopiczwouz] {
    cursor: not-allowed;
    opacity: .6;
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {

    .details-grid[b-yopiczwouz] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-yopiczwouz],
    .identity-card[b-yopiczwouz] {
        grid-column: auto;
    }

    .actions-card[b-yopiczwouz] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 700px) {

    .page-head[b-yopiczwouz] {
        flex-direction: column;
    }

    .header-actions[b-yopiczwouz] {
        width: 100%;
    }

    .header-actions .action-button[b-yopiczwouz] {
        flex: 1;
    }

    .identity-card[b-yopiczwouz] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .identity-meta[b-yopiczwouz] {
        width: 100%;
    }
}

@media (max-width: 520px) {

    .identity-card[b-yopiczwouz] {
        flex-direction: column;
    }

    .cover-image[b-yopiczwouz] {
        width: 100%;
        height: 180px;
    }

    .detail-item[b-yopiczwouz] {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .reference-link[b-yopiczwouz] {
        max-width: 100%;
    }

    .article-actions[b-yopiczwouz] {
        width: 100%;

        align-items: stretch;
        flex-direction: column;
    }

    .article-actions .action-button[b-yopiczwouz] {
        width: 100%;
    }
}
.article-media-wrapper[b-yopiczwouz] {
    width: 100%;
    min-width: 0;
    margin-top: 22px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Articles/Edit.razor.rz.scp.css */
.article-form-page[b-1gg7xbf3rf] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-1gg7xbf3rf] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.page-head > div:first-child > span[b-1gg7xbf3rf] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-1gg7xbf3rf] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-1gg7xbf3rf] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-1gg7xbf3rf] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.back-button:hover[b-1gg7xbf3rf] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Loading / Empty / Error
========================= */

.loading-card[b-1gg7xbf3rf] {
    min-height: 180px;

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

    color: var(--muted);

    font-size: 18px;
}

.empty-card[b-1gg7xbf3rf] {
    min-height: 210px;

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

    gap: 10px;
}

.empty-card strong[b-1gg7xbf3rf] {
    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.empty-card span[b-1gg7xbf3rf] {
    color: var(--muted);

    font-size: 16px;
}

.empty-card .back-button[b-1gg7xbf3rf] {
    margin-top: 8px;
}

.form-error[b-1gg7xbf3rf] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
}


/* =========================
   Form Grid
========================= */

.form-grid[b-1gg7xbf3rf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-1gg7xbf3rf] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.form-card.full[b-1gg7xbf3rf] {
    grid-column: 1 / -1;
}

.form-card h3[b-1gg7xbf3rf] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}


/* =========================
   Fields
========================= */

.two-column-fields[b-1gg7xbf3rf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.two-column-fields.compact[b-1gg7xbf3rf] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-group[b-1gg7xbf3rf] {
    min-width: 0;
    margin-bottom: 17px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group:last-child[b-1gg7xbf3rf] {
    margin-bottom: 0;
}

.field-group label[b-1gg7xbf3rf] {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.field-group[b-1gg7xbf3rf]  input,
.field-group[b-1gg7xbf3rf]  textarea,
.field-group[b-1gg7xbf3rf]  select {
    width: 100%;
    min-width: 0;
    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group[b-1gg7xbf3rf]  textarea {
    min-height: 105px;

    resize: vertical;

    line-height: 1.9;
}

.field-group[b-1gg7xbf3rf]  input:focus,
.field-group[b-1gg7xbf3rf]  textarea:focus,
.field-group[b-1gg7xbf3rf]  select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-group[b-1gg7xbf3rf]  input::placeholder,
.field-group[b-1gg7xbf3rf]  textarea::placeholder {
    color: #98a2b3;
}

.field-group[b-1gg7xbf3rf]  input[type="file"] {
    min-height: 46px;
    padding: 7px;

    cursor: pointer;
}

.field-group[b-1gg7xbf3rf]  input[type="file"]::file-selector-button {
    min-height: 30px;
    margin-left: 10px;
    padding: 0 12px;

    border: 0;
    border-radius: 8px;

    background: #edf4ef;
    color: var(--green);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}

.field-group[b-1gg7xbf3rf]  input.invalid,
.field-group[b-1gg7xbf3rf]  textarea.invalid,
.field-group[b-1gg7xbf3rf]  select.invalid {
    border-color: #f04438;
}

.field-group[b-1gg7xbf3rf]  input.valid.modified,
.field-group[b-1gg7xbf3rf]  textarea.valid.modified,
.field-group[b-1gg7xbf3rf]  select.valid.modified {
    border-color: #12b76a;
}

.field-help[b-1gg7xbf3rf] {
    display: block;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.editor-help[b-1gg7xbf3rf] {
    margin-top: 9px;
}

.ltr-input[b-1gg7xbf3rf],
.ltr-value[b-1gg7xbf3rf] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

.validation-message[b-1gg7xbf3rf],
[b-1gg7xbf3rf] .validation-message {
    color: #b42318;

    font-size: 15px;
    font-weight: 700;
}


/* =========================
   Current Cover
========================= */

.current-cover[b-1gg7xbf3rf] {
    margin-bottom: 18px;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfc;
}

.current-cover > img[b-1gg7xbf3rf] {
    width: 100%;
    height: 210px;

    display: block;

    object-fit: cover;
}

.current-cover-actions[b-1gg7xbf3rf] {
    padding: 11px 13px;

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

    gap: 12px;
}

.current-cover-actions span[b-1gg7xbf3rf] {
    color: var(--muted);

    font-size: 15px;
}

.remove-cover-button[b-1gg7xbf3rf] {
    min-height: 32px;
    padding: 0 10px;

    border: 1px solid #fecdca;
    border-radius: 8px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    transition: .15s;
}

.remove-cover-button:hover:not(:disabled)[b-1gg7xbf3rf] {
    background: #fff1f1;
}

.remove-cover-button:disabled[b-1gg7xbf3rf] {
    cursor: not-allowed;
    opacity: .6;
}

.cover-placeholder[b-1gg7xbf3rf] {
    min-height: 120px;
    margin-bottom: 18px;
    padding: 16px;

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

    border: 1px dashed var(--soft);
    border-radius: 12px;

    background: #fafbfc;
    color: var(--muted);

    font-size: 16px;
    text-align: center;
}


/* =========================
   Selected File
========================= */

.selected-file[b-1gg7xbf3rf] {
    padding: 11px 13px;

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

    gap: 10px;

    border: 1px solid #abefc6;
    border-radius: 10px;

    background: #ecfdf3;
    color: #027a48;
}

.selected-file strong[b-1gg7xbf3rf] {
    min-width: 0;

    overflow: hidden;

    font-size: 16px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-file span[b-1gg7xbf3rf] {
    flex: 0 0 auto;
    font-size: 15px;
}


/* =========================
   Pet Categories
========================= */

.category-options[b-1gg7xbf3rf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.category-option[b-1gg7xbf3rf] {
    position: relative;

    min-width: 0;
    min-height: 76px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 11px;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfc;
    color: var(--text);

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.category-option:hover[b-1gg7xbf3rf] {
    border-color: rgba(58, 125, 68, .45);

    background: rgba(58, 125, 68, .035);

    transform: translateY(-1px);
}

.category-option:has(input:checked)[b-1gg7xbf3rf] {
    border-color: var(--green);

    background: rgba(58, 125, 68, .08);

    box-shadow:
        0 0 0 2px rgba(58, 125, 68, .07);
}

.category-option > input[b-1gg7xbf3rf] {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

.category-image[b-1gg7xbf3rf] {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    overflow: hidden;

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

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
}

.category-image img[b-1gg7xbf3rf] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.category-image-placeholder[b-1gg7xbf3rf] {
    width: 100%;
    height: 100%;

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

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.category-info[b-1gg7xbf3rf] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.category-info strong[b-1gg7xbf3rf] {
    overflow: hidden;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-info small[b-1gg7xbf3rf] {
    overflow: hidden;

    color: var(--muted);

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-selected-mark[b-1gg7xbf3rf] {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

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

    border: 1px solid var(--soft);
    border-radius: 7px;

    background: #fff;
    color: transparent;

    font-size: 17px;
    font-weight: 900;

    transition: .15s;
}

.category-option:has(input:checked)
.category-selected-mark[b-1gg7xbf3rf] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.category-option:has(input:checked)
.category-info strong[b-1gg7xbf3rf] {
    color: var(--green);
}

.empty-categories[b-1gg7xbf3rf] {
    padding: 18px;

    border: 1px dashed var(--soft);
    border-radius: 11px;

    color: var(--muted);

    font-size: 16px;
    text-align: center;
}


/* =========================
   Toggle
========================= */

.toggle-field[b-1gg7xbf3rf] {
    min-height: 72px;
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;

    cursor: pointer;
}

.toggle-field[b-1gg7xbf3rf]  input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: var(--green);
}

.toggle-field > span[b-1gg7xbf3rf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.toggle-field strong[b-1gg7xbf3rf] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.toggle-field small[b-1gg7xbf3rf] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   Submit
========================= */

.submit-card[b-1gg7xbf3rf] {
    grid-column: 1 / -1;

    padding: 18px 22px;

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

    gap: 16px;
}

.submit-card > div[b-1gg7xbf3rf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-1gg7xbf3rf] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.submit-card span[b-1gg7xbf3rf] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.submit-button[b-1gg7xbf3rf] {
    min-width: 145px;
    min-height: 45px;
    padding: 0 18px;

    flex: 0 0 auto;

    border: 0;
    border-radius: 11px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s;
}

.submit-button:hover:not(:disabled)[b-1gg7xbf3rf] {
    filter: brightness(.96);
}

.submit-button:disabled[b-1gg7xbf3rf] {
    cursor: not-allowed;
    opacity: .65;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .category-options[b-1gg7xbf3rf] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .form-grid[b-1gg7xbf3rf] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-1gg7xbf3rf],
    .submit-card[b-1gg7xbf3rf] {
        grid-column: auto;
    }
}

@media (max-width: 650px) {

    .page-head[b-1gg7xbf3rf] {
        flex-direction: column;
    }

    .back-button[b-1gg7xbf3rf] {
        width: 100%;
    }

    .two-column-fields[b-1gg7xbf3rf],
    .two-column-fields.compact[b-1gg7xbf3rf],
    .category-options[b-1gg7xbf3rf] {
        grid-template-columns: 1fr;
    }

    .submit-card[b-1gg7xbf3rf] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-1gg7xbf3rf] {
        width: 100%;
    }
}

.article-media-wrapper[b-1gg7xbf3rf] {
    width: 100%;
    min-width: 0;
    margin-top: 22px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Articles/ManageArticles.razor.rz.scp.css */
.articles-page[b-0s151alnke] {
    width: 100%;
}

.create-article-button[b-0s151alnke] {
    min-height: 58px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;
    text-decoration: none;

    transition: .2s;
}

.create-article-button span[b-0s151alnke] {
    font-size: 20px;
    line-height: 1;
}

.create-article-button:hover[b-0s151alnke] {
    color: #fff;
    filter: brightness(.96);
}

.article-cell[b-0s151alnke] {
    min-width: 250px;

    display: flex;
    align-items: center;
    gap: 11px;
}

.article-icon[b-0s151alnke],
.article-image-shell[b-0s151alnke],
[b-0s151alnke] .article-order-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    overflow: hidden;

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

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

[b-0s151alnke] .article-order-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.article-image[b-0s151alnke] {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.article-cell > div:last-child[b-0s151alnke] {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.article-cell strong[b-0s151alnke] {
    max-width: 310px;

    overflow: hidden;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-cell span[b-0s151alnke],
.article-cell small[b-0s151alnke] {
    max-width: 310px;

    overflow: hidden;

    color: var(--muted);

    font-size: 14px;

    direction: ltr;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-list[b-0s151alnke] {
    max-width: 250px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.category-badge[b-0s151alnke] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    background: #f2f4f7;
    color: #475467;

    font-size: 14px;
    font-weight: 800;

    white-space: nowrap;
}

.category-badge.more[b-0s151alnke] {
    background: #eff8ff;
    color: #175cd3;
}

.publish-info[b-0s151alnke] {
    display: flex;
    flex-direction: column;
    gap: 4px;

    white-space: nowrap;
}

.publish-info strong[b-0s151alnke] {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.publish-info span[b-0s151alnke] {
    color: var(--muted);

    font-size: 14px;
}

.status-badge[b-0s151alnke] {
    min-height: 27px;
    padding: 0 9px;

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

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-0s151alnke] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-0s151alnke] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-0s151alnke] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-0s151alnke] {
    background: #f2f4f7;
    color: #667085;
}

.display-order-value[b-0s151alnke] {
    min-width: 34px;
    min-height: 30px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fbfcfd;
    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.row-actions[b-0s151alnke] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-0s151alnke] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color .15s ease,
        color .15s ease,
        background-color .15s ease;
}

.action-link:hover[b-0s151alnke] {
    border-color: var(--green);
    color: var(--green);
}

.action-link:disabled[b-0s151alnke] {
    background: #f7f8f9;
    color: #98a2b3;

    cursor: not-allowed;
}

.danger-action[b-0s151alnke] {
    color: #b42318;
}

.danger-action:hover[b-0s151alnke] {
    border-color: #b42318;
    color: #b42318;
}

@media (max-width: 700px) {
    .create-article-button[b-0s151alnke] {
        flex: 1;
    }

    .row-actions[b-0s151alnke] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-link[b-0s151alnke] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Faqs/Create.razor.rz.scp.css */
.faq-form-page[b-3p0vjc1g96] {
    width: 100%;
}

.page-head[b-3p0vjc1g96] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-3p0vjc1g96] {
    display: block;
    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-3p0vjc1g96] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-3p0vjc1g96] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-3p0vjc1g96] {
    min-height: 44px;
    padding: 0 16px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
    text-decoration: none;

    transition: .2s;
}

.back-button:hover[b-3p0vjc1g96] {
    border-color: var(--green);
    color: var(--green);
}

.form-error[b-3p0vjc1g96] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}

.form-grid[b-3p0vjc1g96] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-card[b-3p0vjc1g96] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card.full[b-3p0vjc1g96] {
    grid-column: 1 / -1;
}

.form-card h3[b-3p0vjc1g96] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.field-group[b-3p0vjc1g96] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group + .field-group[b-3p0vjc1g96] {
    margin-top: 20px;
}

.field-group label[b-3p0vjc1g96] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group textarea[b-3p0vjc1g96],
.field-group select[b-3p0vjc1g96] {
    width: 100%;
    box-sizing: border-box;

    padding: 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;
    line-height: 2;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group select[b-3p0vjc1g96] {
    min-height: 48px;
    padding-block: 0;
}

.field-group textarea[b-3p0vjc1g96] {
    resize: vertical;
}

.field-group textarea:focus[b-3p0vjc1g96],
.field-group select:focus[b-3p0vjc1g96] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.field-help[b-3p0vjc1g96] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.validation-message[b-3p0vjc1g96] {
    color: #b42318;
    font-size: 16px;
}

.toggle-field[b-3p0vjc1g96] {
    min-height: 88px;
    padding: 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    cursor: pointer;
}

.toggle-field input[b-3p0vjc1g96] {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;

    accent-color: var(--green);
}

.toggle-field > span[b-3p0vjc1g96] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.toggle-field strong[b-3p0vjc1g96] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.toggle-field small[b-3p0vjc1g96] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.submit-card[b-3p0vjc1g96] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-3p0vjc1g96] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submit-card > div strong[b-3p0vjc1g96] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.submit-card > div span[b-3p0vjc1g96] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.submit-button[b-3p0vjc1g96] {
    min-height: 46px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

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

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.submit-button:hover:not(:disabled)[b-3p0vjc1g96] {
    filter: brightness(.96);
}

.submit-button:disabled[b-3p0vjc1g96] {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .page-head[b-3p0vjc1g96],
    .submit-card[b-3p0vjc1g96] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid[b-3p0vjc1g96] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-3p0vjc1g96] {
        grid-column: auto;
    }

    .back-button[b-3p0vjc1g96],
    .submit-button[b-3p0vjc1g96] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Faqs/Details.razor.rz.scp.css */
.faq-details-page[b-v94rvxm6oy] {
    width: 100%;
}

.page-head[b-v94rvxm6oy] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-v94rvxm6oy] {
    display: block;
    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-v94rvxm6oy] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-v94rvxm6oy] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-v94rvxm6oy] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.primary-button[b-v94rvxm6oy],
.back-button[b-v94rvxm6oy] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 17px;
    font-weight: 800;
    text-decoration: none;

    transition: .2s;
}

.primary-button[b-v94rvxm6oy] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.primary-button:hover[b-v94rvxm6oy] {
    color: #fff;
    filter: brightness(.96);
}

.back-button[b-v94rvxm6oy] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.back-button:hover[b-v94rvxm6oy] {
    border-color: var(--green);
    color: var(--green);
}

.details-grid[b-v94rvxm6oy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.details-card[b-v94rvxm6oy] {
    min-width: 0;
    padding: 24px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card.full[b-v94rvxm6oy] {
    grid-column: 1 / -1;
}

.details-card h3[b-v94rvxm6oy] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.loading-card[b-v94rvxm6oy] {
    min-height: 220px;

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

    color: var(--muted);

    font-size: 18px;
}

.form-error[b-v94rvxm6oy] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}

.faq-content-card[b-v94rvxm6oy] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-title-row[b-v94rvxm6oy] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.faq-icon[b-v94rvxm6oy] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

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

    border-radius: 13px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.faq-title-row > div:last-child[b-v94rvxm6oy] {
    min-width: 0;
}

.faq-title-row span[b-v94rvxm6oy] {
    display: block;
    margin-bottom: 5px;

    color: var(--green);

    font-size: 16px;
    font-weight: 800;
}

.faq-title-row h2[b-v94rvxm6oy] {
    margin: 0;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.9;

    overflow-wrap: anywhere;
}

.answer-box[b-v94rvxm6oy] {
    padding: 20px;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fbfcfd;
}

.answer-box strong[b-v94rvxm6oy] {
    display: block;
    margin-bottom: 10px;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.answer-box p[b-v94rvxm6oy] {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    line-height: 2.2;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.details-list[b-v94rvxm6oy] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-v94rvxm6oy] {
    min-height: 58px;
    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: 1px solid #f1f2f4;
}

.detail-row:last-child[b-v94rvxm6oy] {
    border-bottom: 0;
}

.detail-row > span:first-child[b-v94rvxm6oy] {
    color: var(--muted);

    font-size: 17px;
}

.detail-row strong[b-v94rvxm6oy] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;

    text-align: left;
}

.order-value[b-v94rvxm6oy] {
    min-width: 34px;
    min-height: 30px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fbfcfd;
}

.status-badge[b-v94rvxm6oy] {
    min-height: 29px;
    padding: 0 10px;

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

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-v94rvxm6oy] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-v94rvxm6oy] {
    background: #fff1f1;
    color: #b42318;
}

@media (max-width: 800px) {
    .page-head[b-v94rvxm6oy] {
        flex-direction: column;
        align-items: stretch;
    }

    .details-grid[b-v94rvxm6oy] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-v94rvxm6oy] {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .head-actions[b-v94rvxm6oy] {
        width: 100%;
        flex-direction: column;
    }

    .primary-button[b-v94rvxm6oy],
    .back-button[b-v94rvxm6oy] {
        width: 100%;
        box-sizing: border-box;
    }

    .faq-title-row[b-v94rvxm6oy] {
        flex-direction: column;
    }

    .detail-row[b-v94rvxm6oy] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Faqs/Edit.razor.rz.scp.css */
.faq-form-page[b-drt8cl0nye] {
    width: 100%;
}

.page-head[b-drt8cl0nye] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-drt8cl0nye] {
    display: block;
    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-drt8cl0nye] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-drt8cl0nye] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-drt8cl0nye] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.view-button[b-drt8cl0nye],
.back-button[b-drt8cl0nye] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 17px;
    font-weight: 800;
    text-decoration: none;

    transition: .2s;
}

.view-button[b-drt8cl0nye] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.view-button:hover[b-drt8cl0nye] {
    color: #fff;
    filter: brightness(.96);
}

.back-button[b-drt8cl0nye] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.back-button:hover[b-drt8cl0nye] {
    border-color: var(--green);
    color: var(--green);
}

.form-error[b-drt8cl0nye] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}

.form-grid[b-drt8cl0nye] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-card[b-drt8cl0nye] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card.full[b-drt8cl0nye] {
    grid-column: 1 / -1;
}

.form-card h3[b-drt8cl0nye] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.loading-card[b-drt8cl0nye] {
    min-height: 220px;

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

    color: var(--muted);

    font-size: 18px;
}

.field-group[b-drt8cl0nye] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group + .field-group[b-drt8cl0nye] {
    margin-top: 20px;
}

.field-group label[b-drt8cl0nye] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group textarea[b-drt8cl0nye],
.field-group select[b-drt8cl0nye] {
    width: 100%;
    box-sizing: border-box;

    padding: 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;
    line-height: 2;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group select[b-drt8cl0nye] {
    min-height: 48px;
    padding-block: 0;
}

.field-group textarea[b-drt8cl0nye] {
    resize: vertical;
}

.field-group textarea:focus[b-drt8cl0nye],
.field-group select:focus[b-drt8cl0nye] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.field-help[b-drt8cl0nye] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.validation-message[b-drt8cl0nye] {
    color: #b42318;
    font-size: 16px;
}

.toggle-field[b-drt8cl0nye] {
    min-height: 88px;
    padding: 16px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    cursor: pointer;
}

.toggle-field input[b-drt8cl0nye] {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;

    accent-color: var(--green);
}

.toggle-field > span[b-drt8cl0nye] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.toggle-field strong[b-drt8cl0nye] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.toggle-field small[b-drt8cl0nye] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.submit-card[b-drt8cl0nye] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-drt8cl0nye] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submit-card > div strong[b-drt8cl0nye] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.submit-card > div span[b-drt8cl0nye] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.submit-button[b-drt8cl0nye] {
    min-height: 46px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

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

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.submit-button:hover:not(:disabled)[b-drt8cl0nye] {
    filter: brightness(.96);
}

.submit-button:disabled[b-drt8cl0nye] {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .page-head[b-drt8cl0nye],
    .submit-card[b-drt8cl0nye] {
        flex-direction: column;
        align-items: stretch;
    }

    .head-actions[b-drt8cl0nye] {
        width: 100%;
    }

    .form-grid[b-drt8cl0nye] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-drt8cl0nye] {
        grid-column: auto;
    }
}

@media (max-width: 600px) {
    .head-actions[b-drt8cl0nye] {
        flex-direction: column;
    }

    .view-button[b-drt8cl0nye],
    .back-button[b-drt8cl0nye],
    .submit-button[b-drt8cl0nye] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/Faqs/ManageFaqs.razor.rz.scp.css */
.faqs-page[b-3k3dextiqm] {
    width: 100%;
}

.create-faq-button[b-3k3dextiqm] {
    min-height: 58px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;
    text-decoration: none;

    transition: .2s;
}

.create-faq-button span[b-3k3dextiqm] {
    font-size: 20px;
    line-height: 1;
}

.create-faq-button:hover[b-3k3dextiqm] {
    color: #fff;
    filter: brightness(.96);
}

.order-empty[b-3k3dextiqm] {
    margin-bottom: 20px;
    min-height: 92px;
    padding: 18px;

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

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fff;
    color: var(--muted);

    font-size: 17px;
    text-align: center;
}

.faq-cell[b-3k3dextiqm] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.faq-icon[b-3k3dextiqm],
[b-3k3dextiqm] .faq-order-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

[b-3k3dextiqm] .faq-order-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.faq-cell > div:last-child[b-3k3dextiqm] {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.faq-cell strong[b-3k3dextiqm] {
    max-width: 420px;

    overflow: hidden;

    color: var(--text);

    font-size: 18px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.faq-cell span[b-3k3dextiqm] {
    max-width: 420px;

    overflow: hidden;

    color: var(--muted);

    font-size: 15px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge[b-3k3dextiqm] {
    min-height: 27px;
    padding: 0 9px;

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

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-3k3dextiqm] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-3k3dextiqm] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-3k3dextiqm] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-3k3dextiqm] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-3k3dextiqm] {
    background: #f2f4f7;
    color: #667085;
}

.display-order-value[b-3k3dextiqm] {
    min-width: 34px;
    min-height: 30px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fbfcfd;
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.row-actions[b-3k3dextiqm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-3k3dextiqm] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;

    transition:
        border-color .15s ease,
        color .15s ease,
        background-color .15s ease;
}

.action-link:hover[b-3k3dextiqm] {
    border-color: var(--green);
    color: var(--green);
}

.action-link:disabled[b-3k3dextiqm] {
    border-color: var(--soft);

    background: #f7f8f9;
    color: #98a2b3;

    cursor: not-allowed;
}

.danger-action[b-3k3dextiqm] {
    color: #b42318;
}

.danger-action:hover[b-3k3dextiqm] {
    border-color: #b42318;
    color: #b42318;
}

@media (max-width: 700px) {
    .create-faq-button[b-3k3dextiqm] {
        flex: 1;
    }

    .faq-cell strong[b-3k3dextiqm],
    .faq-cell span[b-3k3dextiqm] {
        max-width: 220px;
    }

    .row-actions[b-3k3dextiqm] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-link[b-3k3dextiqm] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/TeamMembers/Create.razor.rz.scp.css */
.member-form-page[b-twg35s24jv] {
    width: 100%;
}

.page-head[b-twg35s24jv] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-twg35s24jv] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-twg35s24jv] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.back-button[b-twg35s24jv] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-twg35s24jv] {
    border-color: var(--green);
    color: var(--green);
}

.form-error[b-twg35s24jv] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 18px;
    line-height: 1.8;
}

.form-fields[b-twg35s24jv] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-grid[b-twg35s24jv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.form-card[b-twg35s24jv] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-twg35s24jv] {
    grid-column: 1 / -1;
}

.form-card h2[b-twg35s24jv] {
    margin: 0 0 22px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.field-group[b-twg35s24jv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group + .field-group[b-twg35s24jv] {
    margin-top: 20px;
}

.field-group label[b-twg35s24jv] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group[b-twg35s24jv]  input,
.field-group[b-twg35s24jv]  textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
    outline: none;
}

.field-group[b-twg35s24jv]  textarea {
    resize: vertical;
}

.field-group[b-twg35s24jv]  input:focus,
.field-group[b-twg35s24jv]  textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.image-upload-box[b-twg35s24jv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.image-preview[b-twg35s24jv],
.image-placeholder[b-twg35s24jv] {
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #f8fafb;
}

.image-preview[b-twg35s24jv] {
    display: block;
    object-fit: cover;
}

.image-placeholder[b-twg35s24jv] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 19px;
}

.upload-button[b-twg35s24jv] {
    min-height: 43px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: rgba(58, 125, 68, .06);
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.selected-file[b-twg35s24jv] {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 16px;
}

.image-upload-box small[b-twg35s24jv] {
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

.toggle-field[b-twg35s24jv] {
    margin-top: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.toggle-field[b-twg35s24jv]  input {
    width: 19px;
    height: 19px;
    accent-color: var(--green);
}

.submit-card[b-twg35s24jv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.9;
}

.submit-button[b-twg35s24jv] {
    min-height: 46px;
    padding: 0 22px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.form-fields:disabled .submit-button[b-twg35s24jv],
.form-fields:disabled .upload-button[b-twg35s24jv] {
    opacity: .65;
    cursor: not-allowed;
}

.state-card[b-twg35s24jv] {
    padding: 50px 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

@media (max-width: 800px) {
    .page-head[b-twg35s24jv],
    .submit-card[b-twg35s24jv] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid[b-twg35s24jv] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-twg35s24jv] {
        grid-column: auto;
    }

    .back-button[b-twg35s24jv],
    .submit-button[b-twg35s24jv] {
        box-sizing: border-box;
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/TeamMembers/Edit.razor.rz.scp.css */
.member-form-page[b-wxd5jnp8x1] {
    width: 100%;
}

.page-head[b-wxd5jnp8x1] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-wxd5jnp8x1] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-wxd5jnp8x1] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.back-button[b-wxd5jnp8x1] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-wxd5jnp8x1] {
    border-color: var(--green);
    color: var(--green);
}

.form-error[b-wxd5jnp8x1] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 18px;
    line-height: 1.8;
}

.form-fields[b-wxd5jnp8x1] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-grid[b-wxd5jnp8x1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.form-card[b-wxd5jnp8x1] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-wxd5jnp8x1] {
    grid-column: 1 / -1;
}

.form-card h2[b-wxd5jnp8x1] {
    margin: 0 0 22px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.field-group[b-wxd5jnp8x1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group + .field-group[b-wxd5jnp8x1] {
    margin-top: 20px;
}

.field-group label[b-wxd5jnp8x1] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group[b-wxd5jnp8x1]  input,
.field-group[b-wxd5jnp8x1]  textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
    outline: none;
}

.field-group[b-wxd5jnp8x1]  textarea {
    resize: vertical;
}

.field-group[b-wxd5jnp8x1]  input:focus,
.field-group[b-wxd5jnp8x1]  textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.image-upload-box[b-wxd5jnp8x1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.image-preview[b-wxd5jnp8x1],
.image-placeholder[b-wxd5jnp8x1] {
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #f8fafb;
}

.image-preview[b-wxd5jnp8x1] {
    display: block;
    object-fit: cover;
}

.image-placeholder[b-wxd5jnp8x1] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 19px;
}

.upload-button[b-wxd5jnp8x1] {
    min-height: 43px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: rgba(58, 125, 68, .06);
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.selected-file[b-wxd5jnp8x1] {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 16px;
}

.image-upload-box small[b-wxd5jnp8x1] {
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

.toggle-field[b-wxd5jnp8x1] {
    margin-top: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.toggle-field[b-wxd5jnp8x1]  input {
    width: 19px;
    height: 19px;
    accent-color: var(--green);
}

.submit-card[b-wxd5jnp8x1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.9;
}

.submit-button[b-wxd5jnp8x1] {
    min-height: 46px;
    padding: 0 22px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.form-fields:disabled .submit-button[b-wxd5jnp8x1],
.form-fields:disabled .upload-button[b-wxd5jnp8x1] {
    opacity: .65;
    cursor: not-allowed;
}

.state-card[b-wxd5jnp8x1] {
    padding: 50px 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

@media (max-width: 800px) {
    .page-head[b-wxd5jnp8x1],
    .submit-card[b-wxd5jnp8x1] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid[b-wxd5jnp8x1] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-wxd5jnp8x1] {
        grid-column: auto;
    }

    .back-button[b-wxd5jnp8x1],
    .submit-button[b-wxd5jnp8x1] {
        box-sizing: border-box;
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/TeamMembers/ManageTeamMembers.razor.rz.scp.css */
.members-page[b-yvgysyu88u],
.licenses-page[b-yvgysyu88u] {
    width: 100%;
}

.create-button[b-yvgysyu88u] {
    min-height: 58px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.create-button:hover[b-yvgysyu88u] {
    color: #fff;
    filter: brightness(.96);
}

.item-image[b-yvgysyu88u],
.image-placeholder[b-yvgysyu88u],
[b-yvgysyu88u] .order-image,
[b-yvgysyu88u] .order-placeholder {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fff;
}

.item-image[b-yvgysyu88u],
[b-yvgysyu88u] .order-image {
    display: block;
    object-fit: cover;
}

.licenses-page .item-image[b-yvgysyu88u],
.licenses-page[b-yvgysyu88u]  .order-image {
    object-fit: contain;
}

.image-placeholder[b-yvgysyu88u],
[b-yvgysyu88u] .order-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .08);
    color: var(--green);
}

.url-value[b-yvgysyu88u] {
    display: block;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.status-badge[b-yvgysyu88u] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-yvgysyu88u] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-yvgysyu88u] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-yvgysyu88u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-link[b-yvgysyu88u] {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: .15s;
}

.action-link:hover[b-yvgysyu88u] {
    border-color: var(--green);
    color: var(--green);
}

.action-link:disabled[b-yvgysyu88u] {
    opacity: .6;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .create-button[b-yvgysyu88u] {
        flex: 1;
    }

    .row-actions[b-yvgysyu88u] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-link[b-yvgysyu88u] {
        width: 100%;
    }

    .url-value[b-yvgysyu88u] {
        max-width: 210px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/TrustLicenses/Create.razor.rz.scp.css */
.license-form-page[b-dwk7j9tdss] {
    width: 100%;
}

.page-head[b-dwk7j9tdss] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-dwk7j9tdss] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-dwk7j9tdss] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.back-button[b-dwk7j9tdss] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-dwk7j9tdss] {
    border-color: var(--green);
    color: var(--green);
}

.form-error[b-dwk7j9tdss] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 18px;
    line-height: 1.8;
}

.form-fields[b-dwk7j9tdss] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-grid[b-dwk7j9tdss] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.form-card[b-dwk7j9tdss] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-dwk7j9tdss] {
    grid-column: 1 / -1;
}

.form-card h2[b-dwk7j9tdss] {
    margin: 0 0 22px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.field-group[b-dwk7j9tdss] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group + .field-group[b-dwk7j9tdss] {
    margin-top: 20px;
}

.field-group label[b-dwk7j9tdss] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group[b-dwk7j9tdss]  input,
.field-group[b-dwk7j9tdss]  textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
    outline: none;
}

.field-group[b-dwk7j9tdss]  textarea {
    resize: vertical;
}

.field-group[b-dwk7j9tdss]  input:focus,
.field-group[b-dwk7j9tdss]  textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.image-upload-box[b-dwk7j9tdss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.image-preview[b-dwk7j9tdss],
.image-placeholder[b-dwk7j9tdss] {
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #f8fafb;
}

.image-preview[b-dwk7j9tdss] {
    display: block;
    object-fit: cover;
}

.image-placeholder[b-dwk7j9tdss] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 19px;
}

.upload-button[b-dwk7j9tdss] {
    min-height: 43px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: rgba(58, 125, 68, .06);
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.selected-file[b-dwk7j9tdss] {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 16px;
}

.image-upload-box small[b-dwk7j9tdss] {
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

.toggle-field[b-dwk7j9tdss] {
    margin-top: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.toggle-field[b-dwk7j9tdss]  input {
    width: 19px;
    height: 19px;
    accent-color: var(--green);
}

.submit-card[b-dwk7j9tdss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.9;
}

.submit-button[b-dwk7j9tdss] {
    min-height: 46px;
    padding: 0 22px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.form-fields:disabled .submit-button[b-dwk7j9tdss],
.form-fields:disabled .upload-button[b-dwk7j9tdss] {
    opacity: .65;
    cursor: not-allowed;
}

.state-card[b-dwk7j9tdss] {
    padding: 50px 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

@media (max-width: 800px) {
    .page-head[b-dwk7j9tdss],
    .submit-card[b-dwk7j9tdss] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid[b-dwk7j9tdss] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-dwk7j9tdss] {
        grid-column: auto;
    }

    .back-button[b-dwk7j9tdss],
    .submit-button[b-dwk7j9tdss] {
        box-sizing: border-box;
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/TrustLicenses/Edit.razor.rz.scp.css */
.license-form-page[b-tjpet8l37q] {
    width: 100%;
}

.page-head[b-tjpet8l37q] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-tjpet8l37q] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-tjpet8l37q] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.back-button[b-tjpet8l37q] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-tjpet8l37q] {
    border-color: var(--green);
    color: var(--green);
}

.form-error[b-tjpet8l37q] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 18px;
    line-height: 1.8;
}

.form-fields[b-tjpet8l37q] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-grid[b-tjpet8l37q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.form-card[b-tjpet8l37q] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-tjpet8l37q] {
    grid-column: 1 / -1;
}

.form-card h2[b-tjpet8l37q] {
    margin: 0 0 22px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.field-group[b-tjpet8l37q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group + .field-group[b-tjpet8l37q] {
    margin-top: 20px;
}

.field-group label[b-tjpet8l37q] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group[b-tjpet8l37q]  input,
.field-group[b-tjpet8l37q]  textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
    outline: none;
}

.field-group[b-tjpet8l37q]  textarea {
    resize: vertical;
}

.field-group[b-tjpet8l37q]  input:focus,
.field-group[b-tjpet8l37q]  textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.image-upload-box[b-tjpet8l37q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.image-preview[b-tjpet8l37q],
.image-placeholder[b-tjpet8l37q] {
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #f8fafb;
}

.image-preview[b-tjpet8l37q] {
    display: block;
    object-fit: cover;
}

.image-placeholder[b-tjpet8l37q] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 19px;
}

.upload-button[b-tjpet8l37q] {
    min-height: 43px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: rgba(58, 125, 68, .06);
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.selected-file[b-tjpet8l37q] {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 16px;
}

.image-upload-box small[b-tjpet8l37q] {
    color: var(--muted);
    font-size: 15px;
    text-align: center;
}

.toggle-field[b-tjpet8l37q] {
    margin-top: 24px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.toggle-field[b-tjpet8l37q]  input {
    width: 19px;
    height: 19px;
    accent-color: var(--green);
}

.submit-card[b-tjpet8l37q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.9;
}

.submit-button[b-tjpet8l37q] {
    min-height: 46px;
    padding: 0 22px;
    flex-shrink: 0;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.form-fields:disabled .submit-button[b-tjpet8l37q],
.form-fields:disabled .upload-button[b-tjpet8l37q] {
    opacity: .65;
    cursor: not-allowed;
}

.state-card[b-tjpet8l37q] {
    padding: 50px 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

@media (max-width: 800px) {
    .page-head[b-tjpet8l37q],
    .submit-card[b-tjpet8l37q] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid[b-tjpet8l37q] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-tjpet8l37q] {
        grid-column: auto;
    }

    .back-button[b-tjpet8l37q],
    .submit-button[b-tjpet8l37q] {
        box-sizing: border-box;
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Content/TrustLicenses/ManageTrustLicenses.razor.rz.scp.css */
.members-page[b-or2h6og2n8],
.licenses-page[b-or2h6og2n8] {
    width: 100%;
}

.create-button[b-or2h6og2n8] {
    min-height: 58px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.create-button:hover[b-or2h6og2n8] {
    color: #fff;
    filter: brightness(.96);
}

.item-image[b-or2h6og2n8],
.image-placeholder[b-or2h6og2n8],
[b-or2h6og2n8] .order-image,
[b-or2h6og2n8] .order-placeholder {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fff;
}

.item-image[b-or2h6og2n8],
[b-or2h6og2n8] .order-image {
    display: block;
    object-fit: cover;
}

.licenses-page .item-image[b-or2h6og2n8],
.licenses-page[b-or2h6og2n8]  .order-image {
    object-fit: contain;
}

.image-placeholder[b-or2h6og2n8],
[b-or2h6og2n8] .order-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .08);
    color: var(--green);
}

.url-value[b-or2h6og2n8] {
    display: block;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.status-badge[b-or2h6og2n8] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-or2h6og2n8] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-or2h6og2n8] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-or2h6og2n8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-link[b-or2h6og2n8] {
    min-height: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: .15s;
}

.action-link:hover[b-or2h6og2n8] {
    border-color: var(--green);
    color: var(--green);
}

.action-link:disabled[b-or2h6og2n8] {
    opacity: .6;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .create-button[b-or2h6og2n8] {
        flex: 1;
    }

    .row-actions[b-or2h6og2n8] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-link[b-or2h6og2n8] {
        width: 100%;
    }

    .url-value[b-or2h6og2n8] {
        max-width: 210px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Couriers/Create.razor.rz.scp.css */
.courier-form-page[b-jx0l1ww38z] {
    width: 100%;
}

.page-head[b-jx0l1ww38z] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-jx0l1ww38z] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-jx0l1ww38z] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-jx0l1ww38z] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}

.back-button[b-jx0l1ww38z] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.form-grid[b-jx0l1ww38z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-card[b-jx0l1ww38z] {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-jx0l1ww38z] {
    grid-column: 1 / -1;
}

.form-card h3[b-jx0l1ww38z] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.fields-grid[b-jx0l1ww38z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field-group[b-jx0l1ww38z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.description-field[b-jx0l1ww38z] {
    margin-top: 18px;
}

.field-group label[b-jx0l1ww38z] {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.field-group input[b-jx0l1ww38z],
.field-group select[b-jx0l1ww38z],
.field-group textarea[b-jx0l1ww38z] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.field-group input[b-jx0l1ww38z],
.field-group select[b-jx0l1ww38z] {
    height: 48px;
    padding: 0 13px;
}

.field-group textarea[b-jx0l1ww38z] {
    min-height: 130px;
    padding: 12px 13px;
    resize: vertical;
    line-height: 2;
}

.field-group input:focus[b-jx0l1ww38z],
.field-group select:focus[b-jx0l1ww38z],
.field-group textarea:focus[b-jx0l1ww38z] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.upload-placeholder[b-jx0l1ww38z] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px dashed var(--soft);
    border-radius: 14px;
    background: #fafbfb;
}

.avatar-preview-box[b-jx0l1ww38z] {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(58, 125, 68, .09);
}

.avatar-preview[b-jx0l1ww38z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-icon[b-jx0l1ww38z] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-jx0l1ww38z] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upload-info strong[b-jx0l1ww38z] {
    font-size: 14px;
}

.upload-info span[b-jx0l1ww38z] {
    color: var(--muted);
    font-size: 12px;
}

.selected-file[b-jx0l1ww38z] {
    color: var(--green) !important;
    font-weight: 800;
}

.secondary-button[b-jx0l1ww38z] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.switch-row[b-jx0l1ww38z] {
    min-height: 68px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border: 1px solid var(--soft);
    border-radius: 12px;
}

.switch-row > div[b-jx0l1ww38z] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switch-row span[b-jx0l1ww38z] {
    color: var(--muted);
    font-size: 11px;
}

.switch-row input[b-jx0l1ww38z] {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

.submit-card[b-jx0l1ww38z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-jx0l1ww38z] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submit-card span[b-jx0l1ww38z] {
    color: var(--muted);
    font-size: 11px;
}

.submit-button[b-jx0l1ww38z] {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.submit-button:disabled[b-jx0l1ww38z] {
    opacity: .6;
}

.form-error[b-jx0l1ww38z] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 13px;
}

@media (max-width: 800px) {
    .page-head[b-jx0l1ww38z] {
        flex-direction: column;
    }

    .form-grid[b-jx0l1ww38z],
    .fields-grid[b-jx0l1ww38z] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-jx0l1ww38z] {
        grid-column: auto;
    }

    .upload-placeholder[b-jx0l1ww38z] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-card[b-jx0l1ww38z] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Couriers/Details.razor.rz.scp.css */
.courier-details-page[b-3zy2ptfh45] {
    width: 100%;
}

.page-head[b-3zy2ptfh45] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-3zy2ptfh45] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-3zy2ptfh45] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-3zy2ptfh45] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.head-actions[b-3zy2ptfh45] {
    display: flex;
    gap: 9px;
}

.back-button[b-3zy2ptfh45],
.primary-button[b-3zy2ptfh45] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.back-button[b-3zy2ptfh45] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.primary-button[b-3zy2ptfh45] {
    background: var(--green);
    color: #fff;
}

.details-grid[b-3zy2ptfh45] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.details-card[b-3zy2ptfh45] {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-3zy2ptfh45] {
    grid-column: 1 / -1;
}

.details-card h3[b-3zy2ptfh45] {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 900;
}

.profile-card[b-3zy2ptfh45] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar[b-3zy2ptfh45] {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 24px;
    font-weight: 900;
}

.profile-avatar img[b-3zy2ptfh45] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info[b-3zy2ptfh45] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-3zy2ptfh45] {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
}

.profile-specialty[b-3zy2ptfh45] {
    display: block;
    margin-top: 6px;
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
}

.profile-meta[b-3zy2ptfh45] {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.profile-meta span[b-3zy2ptfh45] {
    color: var(--muted);
    font-size: 13px;
}

.profile-meta strong[b-3zy2ptfh45] {
    color: var(--text);
}

.profile-statuses[b-3zy2ptfh45] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.status-badge[b-3zy2ptfh45] {
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-badge.success[b-3zy2ptfh45] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-3zy2ptfh45] {
    background: #fff1f1;
    color: #b42318;
}

.info-grid[b-3zy2ptfh45] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.info-item[b-3zy2ptfh45] {
    min-height: 82px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.info-item span[b-3zy2ptfh45] {
    color: var(--muted);
    font-size: 12px;
}

.info-item strong[b-3zy2ptfh45] {
    font-size: 15px;
    font-weight: 800;
}

.status-list[b-3zy2ptfh45] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-row[b-3zy2ptfh45] {
    min-height: 58px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-3zy2ptfh45] {
    color: var(--muted);
    font-size: 13px;
}

.status-row strong[b-3zy2ptfh45] {
    font-size: 14px;
    font-weight: 800;
}

.description-box[b-3zy2ptfh45] {
    min-height: 150px;
    padding: 17px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.description-box span[b-3zy2ptfh45] {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.description-box p[b-3zy2ptfh45] {
    margin: 0;
    font-size: 14px;
    line-height: 2.1;
    white-space: pre-wrap;
}

.loading-card[b-3zy2ptfh45] {
    color: var(--muted);
}

.form-error[b-3zy2ptfh45] {
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
}

@media (max-width: 800px) {
    .page-head[b-3zy2ptfh45],
    .profile-card[b-3zy2ptfh45] {
        flex-direction: column;
    }

    .details-grid[b-3zy2ptfh45],
    .info-grid[b-3zy2ptfh45] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-3zy2ptfh45] {
        grid-column: auto;
    }

    .profile-card[b-3zy2ptfh45] {
        align-items: flex-start;
    }

    .profile-statuses[b-3zy2ptfh45] {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Couriers/Edit.razor.rz.scp.css */
.edit-courier-page[b-0ot9zlqfa4] {
    width: 100%;
}

.page-head[b-0ot9zlqfa4] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-0ot9zlqfa4] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-0ot9zlqfa4] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-0ot9zlqfa4] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.back-button[b-0ot9zlqfa4] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.form-grid[b-0ot9zlqfa4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-card[b-0ot9zlqfa4] {
    min-width: 0;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-0ot9zlqfa4] {
    grid-column: 1 / -1;
}

.form-card h3[b-0ot9zlqfa4] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.fields-grid[b-0ot9zlqfa4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.field-group[b-0ot9zlqfa4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.description-field[b-0ot9zlqfa4] {
    margin-top: 18px;
}

.field-group input[b-0ot9zlqfa4],
.field-group textarea[b-0ot9zlqfa4] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--soft);
    border-radius: 11px;
    font-family: inherit;
    font-size: 13px;
}

.field-group input[b-0ot9zlqfa4] {
    height: 48px;
    padding: 0 13px;
}

.field-group textarea[b-0ot9zlqfa4] {
    padding: 12px 13px;
    resize: vertical;
    line-height: 2;
}

.courier-summary[b-0ot9zlqfa4] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.summary-avatar[b-0ot9zlqfa4] {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 16px;
    object-fit: cover;
}

.summary-avatar.placeholder[b-0ot9zlqfa4] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-weight: 900;
}

.courier-summary > div:last-child[b-0ot9zlqfa4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.courier-summary span[b-0ot9zlqfa4] {
    color: var(--muted);
    font-size: 12px;
}

.upload-placeholder[b-0ot9zlqfa4] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    border: 1px dashed var(--soft);
    border-radius: 14px;
    background: #fafbfb;
}

.avatar-preview-box[b-0ot9zlqfa4] {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    overflow: hidden;
    border-radius: 18px;
}

.avatar-preview[b-0ot9zlqfa4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-icon[b-0ot9zlqfa4] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-weight: 900;
}

.upload-info[b-0ot9zlqfa4] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.upload-info span[b-0ot9zlqfa4] {
    color: var(--muted);
    font-size: 12px;
}

.secondary-button[b-0ot9zlqfa4] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-weight: 800;
}

.switch-row[b-0ot9zlqfa4] {
    min-height: 68px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--soft);
    border-radius: 12px;
}

.switch-row > div[b-0ot9zlqfa4] {
    display: flex;
    flex-direction: column;
}

.switch-row span[b-0ot9zlqfa4] {
    color: var(--muted);
    font-size: 11px;
}

.submit-card[b-0ot9zlqfa4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submit-button[b-0ot9zlqfa4] {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
}

.form-error[b-0ot9zlqfa4] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
}

.state-card[b-0ot9zlqfa4] {
    min-height: 220px;
    padding: 30px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 800px) {
    .page-head[b-0ot9zlqfa4] {
        flex-direction: column;
    }

    .form-grid[b-0ot9zlqfa4],
    .fields-grid[b-0ot9zlqfa4] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-0ot9zlqfa4] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Couriers/ManageCouriers.razor.rz.scp.css */
.couriers-page[b-bqjvvlqqq6] {
    width: 100%;
}

.create-courier-button[b-bqjvvlqqq6] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.courier-cell[b-bqjvvlqqq6] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.courier-avatar[b-bqjvvlqqq6] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    object-fit: cover;
}

.courier-avatar-placeholder[b-bqjvvlqqq6] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.courier-cell > div:last-child[b-bqjvvlqqq6] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.courier-cell strong[b-bqjvvlqqq6] {
    font-size: 13px;
}

.courier-cell span[b-bqjvvlqqq6] {
    color: var(--muted);

    font-size: 10px;
}

.status-badge[b-bqjvvlqqq6] {
    min-height: 27px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.status-badge.success[b-bqjvvlqqq6] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-bqjvvlqqq6] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-bqjvvlqqq6] {
    display: flex;
    align-items: center;

    gap: 6px;
}

.action-link[b-bqjvvlqqq6] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    display: inline-flex;
    align-items: center;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
}

.ltr-value[b-bqjvvlqqq6] {
    direction: ltr;

    text-align: right !important;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Doctors/Create.razor.rz.scp.css */
.create-doctor-page[b-pfkjv5ct27] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-pfkjv5ct27] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-pfkjv5ct27] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-pfkjv5ct27] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-pfkjv5ct27] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-pfkjv5ct27] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-pfkjv5ct27] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Layout
========================= */

.form-grid[b-pfkjv5ct27] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-pfkjv5ct27] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-pfkjv5ct27] {
    grid-column: 1 / -1;
}

.form-card h3[b-pfkjv5ct27] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-description[b-pfkjv5ct27] {
    margin: -10px 0 18px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}

.loading-card[b-pfkjv5ct27] {
    color: var(--muted);

    font-size: 18px;
}


/* =========================
   Fields
========================= */

.fields-grid[b-pfkjv5ct27] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.fields-grid.single[b-pfkjv5ct27] {
    grid-template-columns: 1fr;
}

.description-grid[b-pfkjv5ct27] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-pfkjv5ct27] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-pfkjv5ct27] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-pfkjv5ct27],
.field-group select[b-pfkjv5ct27],
.field-group textarea[b-pfkjv5ct27] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-pfkjv5ct27],
.field-group select[b-pfkjv5ct27] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-pfkjv5ct27] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-pfkjv5ct27],
.field-group select:focus[b-pfkjv5ct27],
.field-group textarea:focus[b-pfkjv5ct27] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-pfkjv5ct27] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Switches
========================= */

.switch-list[b-pfkjv5ct27] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-pfkjv5ct27] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-pfkjv5ct27] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-pfkjv5ct27] {
    color: var(--text);

    font-size: 17px;
}

.switch-item span[b-pfkjv5ct27] {
    color: var(--muted);

    font-size: 15px;
}

.switch-item input[b-pfkjv5ct27] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);

    flex: 0 0 auto;
}

.featured-order-field[b-pfkjv5ct27] {
    margin-top: 4px;
}


/* =========================
   Categories
========================= */

.category-selector[b-pfkjv5ct27] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.category-option[b-pfkjv5ct27] {
    min-width: 0;
    min-height: 76px;

    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.category-option:hover[b-pfkjv5ct27] {
    border-color: rgba(58, 125, 68, .35);

    background: rgba(58, 125, 68, .025);
}

.category-option > input[b-pfkjv5ct27] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);

    flex: 0 0 auto;
}

.category-icon[b-pfkjv5ct27] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    overflow: hidden;

    border-radius: 11px;

    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-pfkjv5ct27] {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.category-icon span[b-pfkjv5ct27] {
    font-size: 20px;
}

.category-info[b-pfkjv5ct27] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.category-info strong[b-pfkjv5ct27] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.category-info span[b-pfkjv5ct27] {
    color: var(--muted);

    font-size: 15px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-section[b-pfkjv5ct27] {
    min-height: 70px;

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

    border: 1px dashed var(--soft);
    border-radius: 12px;

    color: var(--muted);
    font-size: 17px;
}


/* =========================
   Upload
========================= */

.upload-placeholder[b-pfkjv5ct27] {
    min-height: 120px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.avatar-preview-box[b-pfkjv5ct27] {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    border-radius: 16px;

    background: rgba(58, 125, 68, .09);
}

.avatar-preview[b-pfkjv5ct27] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.upload-icon[b-pfkjv5ct27] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

.upload-info[b-pfkjv5ct27] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-pfkjv5ct27] {
    color: var(--text);

    font-size: 17px;
}

.upload-info span[b-pfkjv5ct27] {
    color: var(--muted);

    font-size: 15px;
}

.selected-file[b-pfkjv5ct27] {
    margin-top: 4px;

    color: var(--green) !important;

    font-weight: 800;
}

.secondary-button[b-pfkjv5ct27] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-pfkjv5ct27] {
    border-color: var(--green);

    color: var(--green);
}

.secondary-button input[b-pfkjv5ct27] {
    display: none;
}


/* =========================
   Errors
========================= */

.form-error[b-pfkjv5ct27] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}


/* =========================
   Submit
========================= */

.submit-card[b-pfkjv5ct27] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-pfkjv5ct27] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-pfkjv5ct27] {
    color: var(--text);

    font-size: 19px;
}

.submit-card span[b-pfkjv5ct27] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-pfkjv5ct27] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:disabled[b-pfkjv5ct27] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .category-selector[b-pfkjv5ct27] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .page-head[b-pfkjv5ct27] {
        flex-direction: column;
    }

    .back-button[b-pfkjv5ct27] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-pfkjv5ct27],
    .fields-grid[b-pfkjv5ct27],
    .description-grid[b-pfkjv5ct27],
    .category-selector[b-pfkjv5ct27] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-pfkjv5ct27] {
        grid-column: auto;
    }

    .upload-placeholder[b-pfkjv5ct27],
    .submit-card[b-pfkjv5ct27] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-pfkjv5ct27],
    .submit-button[b-pfkjv5ct27] {
        width: 100%;

        box-sizing: border-box;
    }
}


@media (max-width: 520px) {

    .form-card[b-pfkjv5ct27] {
        padding: 16px;
    }

    .category-option[b-pfkjv5ct27] {
        min-height: 68px;
    }

    .avatar-preview-box[b-pfkjv5ct27] {
        width: 68px;
        height: 68px;
    }
}


/* =========================
   Price Input
========================= */

.price-input-wrapper[b-pfkjv5ct27] {
    position: relative;

    width: 100%;
}

.field-group .price-input[b-pfkjv5ct27] {
    width: 100%;

    box-sizing: border-box;

    padding-left: 12px;
    padding-right: 72px;

    direction: ltr;
    text-align: left;

    font-variant-numeric: tabular-nums;
}

.price-suffix[b-pfkjv5ct27] {
    position: absolute;

    top: 50%;
    right: 13px;

    transform: translateY(-50%);

    padding-left: 10px;

    border-left: 1px solid var(--soft);

    color: var(--muted);

    font-size: 16px;
    font-weight: 800;

    pointer-events: none;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Doctors/Details.razor.rz.scp.css */
.doctor-details-page[b-2gadv46sg3] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-2gadv46sg3] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-2gadv46sg3] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 19px;
    font-weight: 800;
}

.page-head h1[b-2gadv46sg3] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-2gadv46sg3] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 19px;
    line-height: 1.9;
}

.head-actions[b-2gadv46sg3] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-2gadv46sg3],
.primary-button[b-2gadv46sg3] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

.back-button[b-2gadv46sg3] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-2gadv46sg3] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Layout
========================= */

.details-grid[b-2gadv46sg3] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-2gadv46sg3] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-2gadv46sg3] {
    grid-column: 1 / -1;
}

.details-card h3[b-2gadv46sg3] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Profile
========================= */

.profile-card[b-2gadv46sg3] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.profile-avatar[b-2gadv46sg3] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-avatar img[b-2gadv46sg3] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-info[b-2gadv46sg3] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-2gadv46sg3] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.5;
}

.profile-specialty[b-2gadv46sg3] {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 19px;
    font-weight: 800;
}

.profile-meta[b-2gadv46sg3] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-2gadv46sg3] {
    color: var(--muted);

    font-size: 18px;
    line-height: 1.8;
}

.profile-meta strong[b-2gadv46sg3] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.profile-statuses[b-2gadv46sg3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}


/* =========================
   Status Badges
========================= */

.status-badge[b-2gadv46sg3] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-2gadv46sg3] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-2gadv46sg3] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.featured[b-2gadv46sg3] {
    background: #fffaeb;
    color: #b54708;
}


/* =========================
   Info
========================= */

.info-grid[b-2gadv46sg3] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-2gadv46sg3] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-2gadv46sg3] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 700;

    line-height: 1.7;
}

.info-item strong[b-2gadv46sg3] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================
   Prices
========================= */

.price-list[b-2gadv46sg3] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.price-item[b-2gadv46sg3] {
    min-height: 82px;
    padding: 15px 16px;

    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.price-item span[b-2gadv46sg3] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.price-item strong[b-2gadv46sg3] {
    direction: ltr;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.price-item small[b-2gadv46sg3] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 800;
}


/* =========================
   Status List
========================= */

.status-list[b-2gadv46sg3] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.status-row[b-2gadv46sg3] {
    min-height: 58px;
    padding: 0 15px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-2gadv46sg3] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.status-row strong[b-2gadv46sg3] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}


/* =========================
   Description
========================= */

.description-grid[b-2gadv46sg3] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.description-box[b-2gadv46sg3] {
    min-height: 150px;
    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box span[b-2gadv46sg3] {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;

    line-height: 1.7;
}

.description-box p[b-2gadv46sg3] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 500;

    line-height: 2.1;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.description-box.internal[b-2gadv46sg3] {
    background: #fffcf5;
}


/* =========================
   Categories
========================= */

.category-grid[b-2gadv46sg3] {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.category-card[b-2gadv46sg3] {
    min-height: 76px;
    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.category-icon[b-2gadv46sg3] {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    overflow: hidden;

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
}

.category-icon img[b-2gadv46sg3] {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.category-card strong[b-2gadv46sg3] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}

.empty-section[b-2gadv46sg3] {
    min-height: 74px;

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

    border: 1px dashed var(--soft);
    border-radius: 12px;

    color: var(--muted);

    font-size: 18px;
}


/* =========================
   Messages
========================= */

.loading-card[b-2gadv46sg3] {
    color: var(--muted);

    font-size: 19px;
}

.form-error[b-2gadv46sg3] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .info-grid[b-2gadv46sg3] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .category-grid[b-2gadv46sg3] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .page-head[b-2gadv46sg3],
    .profile-card[b-2gadv46sg3] {
        flex-direction: column;
    }

    .head-actions[b-2gadv46sg3] {
        width: 100%;
    }

    .head-actions a[b-2gadv46sg3] {
        flex: 1;
    }

    .details-grid[b-2gadv46sg3],
    .info-grid[b-2gadv46sg3],
    .description-grid[b-2gadv46sg3],
    .category-grid[b-2gadv46sg3] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-2gadv46sg3] {
        grid-column: auto;
    }

    .profile-card[b-2gadv46sg3] {
        align-items: flex-start;
    }

    .profile-statuses[b-2gadv46sg3] {
        align-items: flex-start;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-meta[b-2gadv46sg3] {
        gap: 8px 14px;
    }
}


@media (max-width: 520px) {

    .details-card[b-2gadv46sg3] {
        padding: 17px;
    }

    .head-actions[b-2gadv46sg3] {
        flex-direction: column;
    }

    .head-actions a[b-2gadv46sg3] {
        width: 100%;

        box-sizing: border-box;
    }

    .page-head h1[b-2gadv46sg3] {
        font-size: 25px;
    }

    .profile-info h2[b-2gadv46sg3] {
        font-size: 21px;
    }

    .profile-meta[b-2gadv46sg3] {
        flex-direction: column;

        gap: 5px;
    }

    .price-item[b-2gadv46sg3] {
        grid-template-columns: 1fr auto;
    }

    .price-item small[b-2gadv46sg3] {
        grid-column: 2;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Doctors/Edit.razor.rz.scp.css */
.edit-doctor-page[b-2qbqqvma3a] {
    width: 100%;
}

.page-head[b-2qbqqvma3a] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-2qbqqvma3a] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 19px;
    font-weight: 800;
}

.page-head h1[b-2qbqqvma3a] {
    margin: 0;

    color: var(--text);

    font-size: 29px;
    font-weight: 900;
}

.page-head p[b-2qbqqvma3a] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-2qbqqvma3a] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.form-grid[b-2qbqqvma3a] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-2qbqqvma3a] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-2qbqqvma3a] {
    grid-column: 1 / -1;
}

.form-card h3[b-2qbqqvma3a] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.section-description[b-2qbqqvma3a] {
    margin: -9px 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;
}

.fields-grid[b-2qbqqvma3a] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.fields-grid.single[b-2qbqqvma3a] {
    grid-template-columns: 1fr;
}

.description-grid[b-2qbqqvma3a] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-2qbqqvma3a] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-2qbqqvma3a] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.field-group input[b-2qbqqvma3a],
.field-group select[b-2qbqqvma3a],
.field-group textarea[b-2qbqqvma3a] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-2qbqqvma3a],
.field-group select[b-2qbqqvma3a] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-2qbqqvma3a] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-2qbqqvma3a],
.field-group select:focus[b-2qbqqvma3a],
.field-group textarea:focus[b-2qbqqvma3a] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.user-summary[b-2qbqqvma3a] {
    display: flex;
    align-items: center;

    gap: 14px;
}

.user-avatar[b-2qbqqvma3a] {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    overflow: hidden;

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

    border-radius: 16px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.user-avatar img[b-2qbqqvma3a] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.user-summary > div:last-child[b-2qbqqvma3a] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.user-summary strong[b-2qbqqvma3a] {
    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.user-summary span[b-2qbqqvma3a] {
    color: var(--muted);

    font-size: 17px;
}

.switch-list[b-2qbqqvma3a] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-2qbqqvma3a] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-2qbqqvma3a] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-2qbqqvma3a] {
    color: var(--text);

    font-size: 18px;
}

.switch-item span[b-2qbqqvma3a] {
    color: var(--muted);

    font-size: 16px;
}

.switch-item input[b-2qbqqvma3a] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}

.featured-order-field[b-2qbqqvma3a] {
    margin-top: 4px;
}

.category-selector[b-2qbqqvma3a] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.category-option[b-2qbqqvma3a] {
    min-height: 76px;
    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.category-option > input[b-2qbqqvma3a] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);
}

.category-icon[b-2qbqqvma3a] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    overflow: hidden;

    border-radius: 11px;

    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-2qbqqvma3a] {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.category-info[b-2qbqqvma3a] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.category-info strong[b-2qbqqvma3a] {
    color: var(--text);

    font-size: 18px;
}

.category-info span[b-2qbqqvma3a] {
    color: var(--muted);

    font-size: 16px;
}

.upload-placeholder[b-2qbqqvma3a] {
    min-height: 120px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.avatar-preview-box[b-2qbqqvma3a] {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    border-radius: 16px;
}

.avatar-preview[b-2qbqqvma3a] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.upload-icon[b-2qbqqvma3a] {
    width: 100%;
    height: 100%;

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

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-weight: 900;
}

.upload-info[b-2qbqqvma3a] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-2qbqqvma3a] {
    color: var(--text);

    font-size: 18px;
}

.upload-info span[b-2qbqqvma3a] {
    color: var(--muted);

    font-size: 16px;
}

.selected-file[b-2qbqqvma3a] {
    color: var(--green) !important;

    font-weight: 800;
}

.secondary-button[b-2qbqqvma3a] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button input[b-2qbqqvma3a] {
    display: none;
}

.price-input-wrapper[b-2qbqqvma3a] {
    position: relative;

    width: 100%;
}

.field-group .price-input[b-2qbqqvma3a] {
    padding-left: 12px;
    padding-right: 72px;

    direction: ltr;
    text-align: left;
}

.price-suffix[b-2qbqqvma3a] {
    position: absolute;

    top: 50%;
    right: 13px;

    transform: translateY(-50%);

    padding-left: 10px;

    border-left: 1px solid var(--soft);

    color: var(--muted);

    font-size: 16px;
    font-weight: 800;

    pointer-events: none;
}

.submit-card[b-2qbqqvma3a] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-2qbqqvma3a] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-2qbqqvma3a] {
    color: var(--text);

    font-size: 19px;
}

.submit-card span[b-2qbqqvma3a] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-2qbqqvma3a] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-2qbqqvma3a] {
    opacity: .55;
}

.form-error[b-2qbqqvma3a] {
    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}

.loading-card[b-2qbqqvma3a] {
    color: var(--muted);

    font-size: 18px;
}

@media (max-width: 1100px) {

    .category-selector[b-2qbqqvma3a] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-2qbqqvma3a] {
        flex-direction: column;
    }

    .form-grid[b-2qbqqvma3a],
    .fields-grid[b-2qbqqvma3a],
    .description-grid[b-2qbqqvma3a],
    .category-selector[b-2qbqqvma3a] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-2qbqqvma3a] {
        grid-column: auto;
    }

    .back-button[b-2qbqqvma3a],
    .secondary-button[b-2qbqqvma3a],
    .submit-button[b-2qbqqvma3a] {
        width: 100%;

        box-sizing: border-box;
    }

    .upload-placeholder[b-2qbqqvma3a],
    .submit-card[b-2qbqqvma3a] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Doctors/ManageDoctors.razor.rz.scp.css */
.doctors-page[b-cingnjw8oi] {
    width: 100%;
}


/* =========================
   Create Button
========================= */

.create-doctor-button[b-cingnjw8oi] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-doctor-button span[b-cingnjw8oi] {
    font-size: 20px;
    font-weight: 400;

    line-height: 1;
}

.create-doctor-button:hover[b-cingnjw8oi] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Doctor Cell
========================= */

.doctor-cell[b-cingnjw8oi] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.doctor-avatar[b-cingnjw8oi] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.doctor-cell > div:last-child[b-cingnjw8oi] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.doctor-cell strong[b-cingnjw8oi] {
    font-size: 18px;
}

.doctor-cell span[b-cingnjw8oi] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Display Order Item
========================= */

[b-cingnjw8oi] .doctor-order-avatar {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


/* =========================
   Status
========================= */

.status-badge[b-cingnjw8oi] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-cingnjw8oi] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-cingnjw8oi] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-cingnjw8oi] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Row Actions
========================= */

.row-actions[b-cingnjw8oi] {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-cingnjw8oi] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-cingnjw8oi] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Values
========================= */

.ltr-value[b-cingnjw8oi] {
    direction: ltr;

    text-align: right !important;
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .create-doctor-button[b-cingnjw8oi] {
        flex: 1;
    }
}

.pharmacy-avatar[b-cingnjw8oi] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    object-fit: cover;
}

.pharmacy-avatar-placeholder[b-cingnjw8oi] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Doctors/Schedule.razor.rz.scp.css */
.admin-doctor-schedule-page[b-ij43o1re7d] {
    width: 100%;
}

.page-head[b-ij43o1re7d] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div > span[b-ij43o1re7d] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-ij43o1re7d] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-ij43o1re7d] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-ij43o1re7d] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}


/* Doctor */

.doctor-summary-card[b-ij43o1re7d] {
    margin-bottom: 22px;
    padding: 20px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.doctor-summary-main[b-ij43o1re7d] {
    display: flex;
    align-items: center;

    gap: 14px;
}

.doctor-avatar[b-ij43o1re7d] {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

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

    overflow: hidden;

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.doctor-avatar img[b-ij43o1re7d] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.doctor-summary-main h2[b-ij43o1re7d] {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.doctor-summary-main span[b-ij43o1re7d],
.doctor-summary-main small[b-ij43o1re7d] {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 17px;
}


/* Section */

.section-head[b-ij43o1re7d] {
    margin: 28px 0 14px;

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

    gap: 20px;
}

.section-head h2[b-ij43o1re7d] {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.section-head p[b-ij43o1re7d] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 17px;
}


/* Schedule */

.admin-schedule-grid[b-ij43o1re7d] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.admin-day-card[b-ij43o1re7d] {
    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.admin-day-head[b-ij43o1re7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.admin-day-head > strong[b-ij43o1re7d] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.admin-period-list[b-ij43o1re7d] {
    margin-top: 14px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.admin-period[b-ij43o1re7d] {
    padding: 12px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fbfcfd;
}

.period-time[b-ij43o1re7d] {
    direction: ltr;

    display: flex;
    align-items: center;

    gap: 8px;
}

.period-time strong[b-ij43o1re7d] {
    color: var(--text);

    font-size: 18px;
}

.period-time span[b-ij43o1re7d] {
    color: var(--muted);

    font-size: 16px;
}

.admin-period small[b-ij43o1re7d] {
    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 16px;
}

.day-off[b-ij43o1re7d] {
    margin-top: 15px;

    color: var(--muted);

    font-size: 17px;
}


/* Review */

.review-card[b-ij43o1re7d] {
    margin-top: 20px;
    padding: 20px;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.review-title h3[b-ij43o1re7d] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.review-title p[b-ij43o1re7d] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 17px;
}

.reject-field[b-ij43o1re7d] {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.reject-field label[b-ij43o1re7d] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.reject-field textarea[b-ij43o1re7d] {
    width: 100%;
    min-height: 100px;

    padding: 12px;

    box-sizing: border-box;

    resize: vertical;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.reject-field textarea:focus[b-ij43o1re7d] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.review-actions[b-ij43o1re7d] {
    margin-top: 16px;

    display: flex;
    justify-content: flex-end;

    gap: 10px;
}

.approve-button[b-ij43o1re7d],
.reject-button[b-ij43o1re7d] {
    min-height: 44px;
    padding: 0 18px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.approve-button[b-ij43o1re7d] {
    border: 0;

    background: var(--green);
    color: #fff;
}

.reject-button[b-ij43o1re7d] {
    border: 1px solid #fecdca;

    background: #fff;
    color: #b42318;
}

.approve-button:disabled[b-ij43o1re7d],
.reject-button:disabled[b-ij43o1re7d] {
    opacity: .6;

    cursor: not-allowed;
}


/* Status */

.status-badge[b-ij43o1re7d] {
    min-height: 28px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
}

.status-badge.success[b-ij43o1re7d] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-ij43o1re7d] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-ij43o1re7d] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.pending[b-ij43o1re7d] {
    background: #fffaeb;
    color: #b54708;
}


/* Messages */

.schedule-message[b-ij43o1re7d],
.loading-card[b-ij43o1re7d],
.empty-review[b-ij43o1re7d] {
    margin-bottom: 18px;
    padding: 16px 18px;

    border-radius: 14px;

    font-size: 18px;
}

.schedule-message.error[b-ij43o1re7d] {
    border: 1px solid #fecdca;

    background: #fff2f2;
    color: #b42318;
}

.schedule-message.success[b-ij43o1re7d] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
    color: #027a48;
}

.loading-card[b-ij43o1re7d],
.empty-review[b-ij43o1re7d] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--muted);
}

.empty-review[b-ij43o1re7d] {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.empty-review strong[b-ij43o1re7d] {
    color: var(--text);

    font-size: 19px;
}

.empty-review span[b-ij43o1re7d] {
    font-size: 17px;
}

.approved-section[b-ij43o1re7d] {
    margin-top: 32px;
}


@media (max-width: 800px) {

    .page-head[b-ij43o1re7d],
    .doctor-summary-card[b-ij43o1re7d],
    .section-head[b-ij43o1re7d] {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-schedule-grid[b-ij43o1re7d] {
        grid-template-columns: 1fr;
    }

    .back-button[b-ij43o1re7d] {
        width: 100%;

        box-sizing: border-box;
    }
}


@media (max-width: 520px) {

    .doctor-summary-main[b-ij43o1re7d] {
        align-items: flex-start;
    }

    .review-actions[b-ij43o1re7d] {
        flex-direction: column;
    }

    .approve-button[b-ij43o1re7d],
    .reject-button[b-ij43o1re7d] {
        width: 100%;
    }
}

.current-approved-section[b-ij43o1re7d] {
    margin-bottom: 30px;
}

.editable-schedule-section[b-ij43o1re7d] {
    margin-top: 10px;
}

.section-head[b-ij43o1re7d] {
    margin-bottom: 14px;

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

    gap: 20px;
}

.section-head h2[b-ij43o1re7d] {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.section-head p[b-ij43o1re7d] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.9;
}

.version-badge[b-ij43o1re7d] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: #f2f4f7;
    color: #475467;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge[b-ij43o1re7d] {
    min-height: 28px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ij43o1re7d] {
    background: #ecfdf3;
    color: #027a48;
}

@media (max-width: 800px) {

    .section-head[b-ij43o1re7d] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Equipment/Create.razor.rz.scp.css */
.admin-equipment-form-page[b-wneuoqnrgo] {
    width: 100%;
}

.page-head[b-wneuoqnrgo] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-wneuoqnrgo] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-wneuoqnrgo] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-wneuoqnrgo] {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-wneuoqnrgo] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-wneuoqnrgo] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-wneuoqnrgo] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-card[b-wneuoqnrgo] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-wneuoqnrgo] {
    grid-column: 1 / -1;
}

.form-card h3[b-wneuoqnrgo] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.section-description[b-wneuoqnrgo] {
    margin: -10px 0 18px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.9;
}

.loading-card[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 13px;
}

.fields-grid[b-wneuoqnrgo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field-group[b-wneuoqnrgo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-group > label:first-child[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.field-group input[b-wneuoqnrgo],
.field-group select[b-wneuoqnrgo],
.field-group textarea[b-wneuoqnrgo] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.field-group input[b-wneuoqnrgo],
.field-group select[b-wneuoqnrgo] {
    min-height: 44px;
    padding: 0 12px;
}

.field-group textarea[b-wneuoqnrgo] {
    min-height: 145px;
    padding: 12px;
    resize: vertical;
    line-height: 1.9;
}

.field-group input:focus[b-wneuoqnrgo],
.field-group select:focus[b-wneuoqnrgo],
.field-group textarea:focus[b-wneuoqnrgo] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 10px;
}

.price-input-wrapper[b-wneuoqnrgo],
.percent-input-wrapper[b-wneuoqnrgo] {
    position: relative;
    width: 100%;
}

.price-input-wrapper input[b-wneuoqnrgo] {
    width: 100%;
    padding-left: 72px;
    direction: ltr;
    text-align: left;
}

.percent-input-wrapper input[b-wneuoqnrgo] {
    width: 100%;
    padding-left: 46px;
}

.price-input-wrapper > span[b-wneuoqnrgo],
.percent-input-wrapper > span[b-wneuoqnrgo] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

.commission-summary[b-wneuoqnrgo] {
    min-height: 70px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fafbfc;
}

.commission-summary > div[b-wneuoqnrgo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commission-summary span[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 10px;
}

.commission-summary strong[b-wneuoqnrgo] {
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
}

.rich-fields-grid[b-wneuoqnrgo] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.rich-field[b-wneuoqnrgo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rich-field > label[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.category-selector[b-wneuoqnrgo] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.category-option[b-wneuoqnrgo] {
    min-width: 0;
    min-height: 76px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.category-option:hover[b-wneuoqnrgo] {
    border-color: rgba(58, 125, 68, .35);
    background: rgba(58, 125, 68, .025);
}

.category-option:has(input:checked)[b-wneuoqnrgo] {
    border-color: rgba(58, 125, 68, .55);
    background: rgba(58, 125, 68, .055);
}

.category-option > input[b-wneuoqnrgo] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.category-icon[b-wneuoqnrgo] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-wneuoqnrgo] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-icon span[b-wneuoqnrgo] {
    font-size: 20px;
}

.category-info[b-wneuoqnrgo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-info strong[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.category-info span[b-wneuoqnrgo] {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
}

.empty-section[b-wneuoqnrgo] {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 12px;
}

.product-upload-box[b-wneuoqnrgo] {
    padding: 16px;
    border: 1px dashed var(--soft);
    border-radius: 14px;
    background: #fbfcfd;
}

.upload-head[b-wneuoqnrgo] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-symbol[b-wneuoqnrgo] {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 13px;
    font-weight: 900;
}

.upload-info[b-wneuoqnrgo] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload-info strong[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 12px;
}

.upload-info span[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 10px;
}

.secondary-button[b-wneuoqnrgo] {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.secondary-button:hover[b-wneuoqnrgo] {
    border-color: var(--green);
    color: var(--green);
}

.secondary-button input[b-wneuoqnrgo] {
    display: none;
}

.image-preview-grid[b-wneuoqnrgo] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.image-preview-card[b-wneuoqnrgo] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fff;
}

.image-preview-wrapper[b-wneuoqnrgo] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f8f9;
}

.image-preview-wrapper img[b-wneuoqnrgo] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.main-image-badge[b-wneuoqnrgo] {
    position: absolute;
    right: 7px;
    bottom: 7px;
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(58, 125, 68, .92);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

.image-preview-info[b-wneuoqnrgo] {
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.image-preview-info > div[b-wneuoqnrgo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.image-preview-info strong[b-wneuoqnrgo] {
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-preview-info span[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 8px;
}

.remove-image-button[b-wneuoqnrgo] {
    min-height: 28px;
    padding: 0 8px;
    flex: 0 0 auto;
    border: 1px solid #fecdca;
    border-radius: 7px;
    background: #fff1f1;
    color: #b42318;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.upload-empty-state[b-wneuoqnrgo] {
    min-height: 85px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #f0f1f2;
}

.upload-empty-state strong[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 11px;
}

.upload-empty-state span[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 9px;
}

.upload-error[b-wneuoqnrgo],
.form-error[b-wneuoqnrgo] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 12px;
}

.form-error[b-wneuoqnrgo] {
    margin-bottom: 18px;
}

.upload-error[b-wneuoqnrgo] {
    margin-bottom: 14px;
}

.switch-list[b-wneuoqnrgo] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-item[b-wneuoqnrgo] {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
}

.switch-item > div[b-wneuoqnrgo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.switch-item strong[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 12px;
}

.switch-item span[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 10px;
}

.switch-item input[b-wneuoqnrgo] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.submit-card[b-wneuoqnrgo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-wneuoqnrgo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submit-card strong[b-wneuoqnrgo] {
    color: var(--text);
    font-size: 14px;
}

.submit-card span[b-wneuoqnrgo] {
    color: var(--muted);
    font-size: 11px;
}

.submit-button[b-wneuoqnrgo] {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.submit-button:hover:not(:disabled)[b-wneuoqnrgo] {
    filter: brightness(.96);
}

.submit-button:disabled[b-wneuoqnrgo] {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .image-preview-grid[b-wneuoqnrgo] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .category-selector[b-wneuoqnrgo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-wneuoqnrgo] {
        flex-direction: column;
    }

    .back-button[b-wneuoqnrgo] {
        width: 100%;
        box-sizing: border-box;
    }

    .form-grid[b-wneuoqnrgo],
    .fields-grid[b-wneuoqnrgo],
    .category-selector[b-wneuoqnrgo] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-wneuoqnrgo] {
        grid-column: auto;
    }

    .upload-head[b-wneuoqnrgo],
    .submit-card[b-wneuoqnrgo] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-wneuoqnrgo],
    .submit-button[b-wneuoqnrgo] {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .image-preview-grid[b-wneuoqnrgo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .form-card[b-wneuoqnrgo] {
        padding: 16px;
    }

    .category-option[b-wneuoqnrgo] {
        min-height: 68px;
    }

    .image-preview-grid[b-wneuoqnrgo],
    .commission-summary[b-wneuoqnrgo] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Equipment/Details.razor.rz.scp.css */
.admin-equipment-details-page[b-qwrltdgumx] {
    width: 100%;
}

.page-head[b-qwrltdgumx] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-qwrltdgumx] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-qwrltdgumx] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-qwrltdgumx] {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.head-actions[b-qwrltdgumx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.primary-button[b-qwrltdgumx],
.back-button[b-qwrltdgumx] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.primary-button[b-qwrltdgumx] {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
}

.primary-button:hover[b-qwrltdgumx] {
    filter: brightness(.96);
    color: #fff;
}

.back-button[b-qwrltdgumx] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.back-button:hover[b-qwrltdgumx] {
    border-color: var(--green);
    color: var(--green);
}

.details-grid[b-qwrltdgumx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.details-card[b-qwrltdgumx] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.details-card.full[b-qwrltdgumx] {
    grid-column: 1 / -1;
}

.details-card h3[b-qwrltdgumx] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.product-head[b-qwrltdgumx] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.main-image-shell[b-qwrltdgumx],
.equipment-main-image[b-qwrltdgumx] {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    overflow: hidden;
    border-radius: 18px;
}

.main-image-shell[b-qwrltdgumx] {
    border: 1px solid var(--soft);
    background: #f7f8f9;
}

.equipment-main-image[b-qwrltdgumx] {
    display: block;
    object-fit: cover;
}

.equipment-main-image.placeholder[b-qwrltdgumx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 17px;
    font-weight: 900;
}

.product-info[b-qwrltdgumx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-type-label[b-qwrltdgumx] {
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
}

.product-info h2[b-qwrltdgumx] {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 900;
}

.product-info > span:not(.product-type-label):not(.english-name)[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 12px;
}

.english-name[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 11px;
    direction: ltr;
    text-align: right;
}

.badges[b-qwrltdgumx] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.status-badge[b-qwrltdgumx] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-qwrltdgumx] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-qwrltdgumx] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-qwrltdgumx] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-qwrltdgumx] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-qwrltdgumx] {
    background: #f2f4f7;
    color: #667085;
}

.details-list[b-qwrltdgumx] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-qwrltdgumx] {
    min-height: 45px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #f0f1f2;
}

.detail-row:last-child[b-qwrltdgumx] {
    border-bottom: 0;
}

.detail-row > span:first-child[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 11px;
}

.detail-row strong[b-qwrltdgumx] {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    text-align: left;
}

.ltr-value[b-qwrltdgumx] {
    direction: ltr;
    unicode-bidi: plaintext;
}

.price-value[b-qwrltdgumx],
.commission-value[b-qwrltdgumx] {
    color: var(--green) !important;
}

.equipment-info-grid[b-qwrltdgumx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.equipment-info-item[b-qwrltdgumx] {
    min-width: 0;
    min-height: 76px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
}

.equipment-info-item > span:first-child[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 10px;
}

.equipment-info-item strong[b-qwrltdgumx] {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.8;
}

.stats-grid[b-qwrltdgumx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stats-grid > div[b-qwrltdgumx] {
    min-height: 82px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
}

.stats-grid span[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 10px;
}

.stats-grid strong[b-qwrltdgumx] {
    color: var(--green);
    font-size: 20px;
    font-weight: 900;
}

.rich-detail-card[b-qwrltdgumx] {
    overflow: hidden;
}

.rich-content-box[b-qwrltdgumx] {
    color: var(--text);
    font-size: 13px;
    line-height: 2;
    overflow-wrap: anywhere;
}

.rich-content-box.warning-content[b-qwrltdgumx] {
    padding: 15px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffaeb;
    color: #7a2e0e;
}

.rich-content-box[b-qwrltdgumx]  p:first-child,
.rich-content-box[b-qwrltdgumx]  ul:first-child,
.rich-content-box[b-qwrltdgumx]  ol:first-child {
    margin-top: 0;
}

.rich-content-box[b-qwrltdgumx]  p:last-child,
.rich-content-box[b-qwrltdgumx]  ul:last-child,
.rich-content-box[b-qwrltdgumx]  ol:last-child {
    margin-bottom: 0;
}

.rich-content-box[b-qwrltdgumx]  ul,
.rich-content-box[b-qwrltdgumx]  ol {
    padding-right: 24px;
    padding-left: 0;
}

.section-title-row[b-qwrltdgumx] {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.section-title-row h3[b-qwrltdgumx] {
    margin: 0;
}

.section-title-row > span[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 10px;
}

.pet-category-list[b-qwrltdgumx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.pet-category-chip[b-qwrltdgumx] {
    min-height: 48px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
}

.pet-category-chip img[b-qwrltdgumx],
.pet-icon-placeholder[b-qwrltdgumx] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
}

.pet-category-chip img[b-qwrltdgumx] {
    object-fit: contain;
}

.pet-icon-placeholder[b-qwrltdgumx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .08);
    font-size: 16px;
}

.pet-category-chip strong[b-qwrltdgumx] {
    color: var(--text);
    font-size: 11px;
}

.equipment-gallery[b-qwrltdgumx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gallery-item[b-qwrltdgumx] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fff;
}

.gallery-image-shell[b-qwrltdgumx] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f8f9;
}

.gallery-image-shell img[b-qwrltdgumx],
.gallery-placeholder[b-qwrltdgumx] {
    width: 100%;
    height: 100%;
}

.gallery-image-shell img[b-qwrltdgumx] {
    display: block;
    object-fit: cover;
}

.gallery-placeholder[b-qwrltdgumx] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.main-image-badge[b-qwrltdgumx] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-height: 25px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(58, 125, 68, .92);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

.gallery-meta[b-qwrltdgumx] {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gallery-meta > div[b-qwrltdgumx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gallery-meta span[b-qwrltdgumx] {
    color: var(--muted);
    font-size: 8px;
}

.gallery-meta strong[b-qwrltdgumx] {
    color: var(--text);
    font-size: 10px;
}

.gallery-main-label[b-qwrltdgumx] {
    min-height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48 !important;
    font-size: 8px !important;
    font-weight: 800;
}

.empty-details[b-qwrltdgumx] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

.approval-card[b-qwrltdgumx] {
    border-color: #fedf89;
    background: #fffdf5;
}

.field-group[b-qwrltdgumx] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-group label[b-qwrltdgumx] {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.field-group textarea[b-qwrltdgumx] {
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;
    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-qwrltdgumx] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.approval-actions[b-qwrltdgumx] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.approve-button[b-qwrltdgumx],
.changes-button[b-qwrltdgumx],
.reject-button[b-qwrltdgumx] {
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.approve-button[b-qwrltdgumx] {
    background: var(--green);
    color: #fff;
}

.changes-button[b-qwrltdgumx] {
    background: #fffaeb;
    color: #b54708;
}

.reject-button[b-qwrltdgumx] {
    background: #fff1f1;
    color: #b42318;
}

.approve-button:disabled[b-qwrltdgumx],
.changes-button:disabled[b-qwrltdgumx],
.reject-button:disabled[b-qwrltdgumx] {
    opacity: .55;
    cursor: not-allowed;
}

.note-box[b-qwrltdgumx] {
    padding: 15px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
    color: var(--text);
    font-size: 12px;
    line-height: 1.9;
}

.form-error[b-qwrltdgumx] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .equipment-info-grid[b-qwrltdgumx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-gallery[b-qwrltdgumx] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .stats-grid[b-qwrltdgumx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-qwrltdgumx],
    .product-head[b-qwrltdgumx] {
        align-items: stretch;
        flex-direction: column;
    }

    .head-actions[b-qwrltdgumx] {
        width: 100%;
    }

    .primary-button[b-qwrltdgumx],
    .back-button[b-qwrltdgumx] {
        flex: 1;
    }

    .details-grid[b-qwrltdgumx],
    .equipment-info-grid[b-qwrltdgumx] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-qwrltdgumx] {
        grid-column: auto;
    }

    .main-image-shell[b-qwrltdgumx],
    .equipment-main-image[b-qwrltdgumx] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        flex-basis: auto;
    }

    .equipment-gallery[b-qwrltdgumx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .approval-actions[b-qwrltdgumx] {
        align-items: stretch;
        flex-direction: column;
    }

    .approve-button[b-qwrltdgumx],
    .changes-button[b-qwrltdgumx],
    .reject-button[b-qwrltdgumx] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .details-card[b-qwrltdgumx] {
        padding: 16px;
    }

    .stats-grid[b-qwrltdgumx],
    .equipment-gallery[b-qwrltdgumx] {
        grid-template-columns: 1fr;
    }

    .head-actions[b-qwrltdgumx] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Equipment/Edit.razor.rz.scp.css */
.admin-equipment-form-page[b-eoku6e5mtf] {
    width: 100%;
}

.page-head[b-eoku6e5mtf] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-eoku6e5mtf] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-eoku6e5mtf] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-eoku6e5mtf] {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-eoku6e5mtf] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-eoku6e5mtf] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-eoku6e5mtf] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-card[b-eoku6e5mtf] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-eoku6e5mtf] {
    grid-column: 1 / -1;
}

.form-card h3[b-eoku6e5mtf] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.section-description[b-eoku6e5mtf] {
    margin: -10px 0 18px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.9;
}

.loading-card[b-eoku6e5mtf] {
    color: var(--muted);
    font-size: 13px;
}

.fields-grid[b-eoku6e5mtf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field-group[b-eoku6e5mtf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-group > label:first-child[b-eoku6e5mtf] {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.field-group input[b-eoku6e5mtf],
.field-group select[b-eoku6e5mtf],
.field-group textarea[b-eoku6e5mtf] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.field-group input[b-eoku6e5mtf],
.field-group select[b-eoku6e5mtf] {
    min-height: 44px;
    padding: 0 12px;
}

.field-group textarea[b-eoku6e5mtf] {
    min-height: 145px;
    padding: 12px;
    resize: vertical;
    line-height: 1.9;
}

.field-group input:focus[b-eoku6e5mtf],
.field-group select:focus[b-eoku6e5mtf],
.field-group textarea:focus[b-eoku6e5mtf] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-eoku6e5mtf] {
    color: var(--muted);
    font-size: 10px;
}

.price-input-wrapper[b-eoku6e5mtf],
.percent-input-wrapper[b-eoku6e5mtf] {
    position: relative;
    width: 100%;
}

.price-input-wrapper input[b-eoku6e5mtf] {
    width: 100%;
    padding-left: 72px;
    direction: ltr;
    text-align: left;
}

.percent-input-wrapper input[b-eoku6e5mtf] {
    width: 100%;
    padding-left: 46px;
}

.price-input-wrapper > span[b-eoku6e5mtf],
.percent-input-wrapper > span[b-eoku6e5mtf] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

.commission-summary[b-eoku6e5mtf] {
    min-height: 70px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fafbfc;
}

.commission-summary > div[b-eoku6e5mtf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commission-summary span[b-eoku6e5mtf] {
    color: var(--muted);
    font-size: 10px;
}

.commission-summary strong[b-eoku6e5mtf] {
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
}

.rich-fields-grid[b-eoku6e5mtf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.rich-field[b-eoku6e5mtf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rich-field > label[b-eoku6e5mtf] {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.category-selector[b-eoku6e5mtf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.category-option[b-eoku6e5mtf] {
    min-width: 0;
    min-height: 76px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.category-option:hover[b-eoku6e5mtf] {
    border-color: rgba(58, 125, 68, .35);
    background: rgba(58, 125, 68, .025);
}

.category-option:has(input:checked)[b-eoku6e5mtf] {
    border-color: rgba(58, 125, 68, .55);
    background: rgba(58, 125, 68, .055);
}

.category-option > input[b-eoku6e5mtf] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.category-icon[b-eoku6e5mtf] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-eoku6e5mtf] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-icon span[b-eoku6e5mtf] {
    font-size: 20px;
}

.category-info[b-eoku6e5mtf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-info strong[b-eoku6e5mtf] {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.category-info span[b-eoku6e5mtf] {
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    text-overflow: ellipsis;
}

.empty-section[b-eoku6e5mtf] {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 12px;
}

.form-error[b-eoku6e5mtf] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 12px;
}

.switch-list[b-eoku6e5mtf] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-item[b-eoku6e5mtf] {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
}

.switch-item > div[b-eoku6e5mtf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.switch-item strong[b-eoku6e5mtf] {
    color: var(--text);
    font-size: 12px;
}

.switch-item span[b-eoku6e5mtf] {
    color: var(--muted);
    font-size: 10px;
}

.switch-item input[b-eoku6e5mtf] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.submit-card[b-eoku6e5mtf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-eoku6e5mtf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submit-card strong[b-eoku6e5mtf] {
    color: var(--text);
    font-size: 14px;
}

.submit-card span[b-eoku6e5mtf] {
    color: var(--muted);
    font-size: 11px;
}

.submit-button[b-eoku6e5mtf] {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.submit-button:hover:not(:disabled)[b-eoku6e5mtf] {
    filter: brightness(.96);
}

.submit-button:disabled[b-eoku6e5mtf] {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .category-selector[b-eoku6e5mtf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-eoku6e5mtf] {
        flex-direction: column;
    }

    .back-button[b-eoku6e5mtf] {
        width: 100%;
        box-sizing: border-box;
    }

    .form-grid[b-eoku6e5mtf],
    .fields-grid[b-eoku6e5mtf],
    .category-selector[b-eoku6e5mtf] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-eoku6e5mtf] {
        grid-column: auto;
    }

    .submit-card[b-eoku6e5mtf] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-eoku6e5mtf] {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 520px) {
    .form-card[b-eoku6e5mtf] {
        padding: 16px;
    }

    .category-option[b-eoku6e5mtf] {
        min-height: 68px;
    }

    .commission-summary[b-eoku6e5mtf] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Equipment/ManageEquipment.razor.rz.scp.css */
.admin-equipment-page[b-4r8ouk1y2d] {
    width: 100%;
}

.equipment-cell[b-4r8ouk1y2d] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.equipment-avatar[b-4r8ouk1y2d] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 9px;
    font-weight: 900;
}

.equipment-image-shell[b-4r8ouk1y2d] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #f7f8f9;
}

.equipment-image[b-4r8ouk1y2d] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.equipment-info[b-4r8ouk1y2d] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.equipment-info strong[b-4r8ouk1y2d] {
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.equipment-info span[b-4r8ouk1y2d],
.equipment-info small[b-4r8ouk1y2d] {
    color: var(--muted);
    font-size: 9px;
}

.equipment-info small span[b-4r8ouk1y2d] {
    font-size: inherit;
}

.status-badge[b-4r8ouk1y2d] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-4r8ouk1y2d] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-4r8ouk1y2d] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-4r8ouk1y2d] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-4r8ouk1y2d] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-4r8ouk1y2d] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-4r8ouk1y2d] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.action-link[b-4r8ouk1y2d] {
    min-height: 32px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-4r8ouk1y2d] {
    border-color: var(--green);
    color: var(--green);
}

.create-equipment-button[b-4r8ouk1y2d] {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.create-equipment-button span[b-4r8ouk1y2d] {
    color: inherit;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.create-equipment-button:hover[b-4r8ouk1y2d] {
    background: #2f743b;
    border-color: #2f743b;
    color: #fff;
    transform: translateY(-1px);
}

.create-equipment-button:active[b-4r8ouk1y2d] {
    transform: translateY(0);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Finance/AdminPaymentDetails.razor.rz.scp.css */
.admin-visit-payment-details[b-urhs8nne5z] {
    width: 100%;
    min-width: 0;

    color: var(--text, #475467);
    font-size: 17px;
}

.admin-visit-payment-details[b-urhs8nne5z],
.admin-visit-payment-details *[b-urhs8nne5z] {
    box-sizing: border-box;
}

.avp-head[b-urhs8nne5z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 24px;
}

.avp-head > div > span[b-urhs8nne5z] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

h1[b-urhs8nne5z] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

h2[b-urhs8nne5z] {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 900;
}

p[b-urhs8nne5z] {
    margin: 8px 0;

    color: var(--muted, #667085);

    font-size: 18px;
    line-height: 2;

    overflow-wrap: anywhere;
}

.avp-grid[b-urhs8nne5z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.avp-card[b-urhs8nne5z] {
    min-width: 0;
    padding: 24px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;

    background: #fff;
}

.avp-card.full[b-urhs8nne5z] {
    grid-column: 1 / -1;
}

dl[b-urhs8nne5z] {
    margin: 0 0 20px;
}

dl > div[b-urhs8nne5z] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    padding: 15px 0;

    border-bottom: 1px solid #eef0f3;

    font-size: 17px;
    line-height: 1.9;
}

dl > div:last-child[b-urhs8nne5z] {
    border-bottom: 0;
}

dt[b-urhs8nne5z] {
    flex-shrink: 0;
    color: var(--muted, #667085);
}

dd[b-urhs8nne5z] {
    min-width: 0;
    margin: 0;

    text-align: left;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.avp-state[b-urhs8nne5z] {
    padding: 40px 20px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;

    background: #fff;

    text-align: center;
    font-size: 18px;
    line-height: 2;
}

.avp-error[b-urhs8nne5z],
.avp-notice[b-urhs8nne5z] {
    padding: 16px 20px;
    margin-bottom: 20px;

    border: 1px solid;
    border-radius: 12px;

    font-size: 17px;
    line-height: 1.9;
}

.avp-error[b-urhs8nne5z] {
    border-color: #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.avp-notice[b-urhs8nne5z] {
    border-color: #fedf89;
    background: #fffcf5;
    color: #875408;
}

.avp-actions[b-urhs8nne5z] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.avp-button[b-urhs8nne5z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;

    background: #fff;
    color: var(--text, #475467);

    font: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.avp-button:hover[b-urhs8nne5z] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.avp-button:focus-visible[b-urhs8nne5z] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.history-badge[b-urhs8nne5z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.history-badge.success[b-urhs8nne5z] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-urhs8nne5z] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-urhs8nne5z] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-urhs8nne5z] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-urhs8nne5z] {
    background: #f2f4f7;
    color: #667085;
}

/* Logs */

.avp-logs[b-urhs8nne5z] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.avp-log[b-urhs8nne5z] {
    min-width: 0;
    padding: 18px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #fbfcfd;
}

.avp-log-head[b-urhs8nne5z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 12px;

    font-size: 17px;
}

.avp-log-head span[b-urhs8nne5z] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.avp-log-meta[b-urhs8nne5z] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-top: 10px;

    color: var(--muted, #667085);
    font-size: 15px;
}

details[b-urhs8nne5z] {
    margin-top: 15px;
}

summary[b-urhs8nne5z] {
    font-size: 16px;
    cursor: pointer;
}

summary:focus-visible[b-urhs8nne5z] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

pre[b-urhs8nne5z] {
    max-width: 100%;
    max-height: 350px;

    margin: 14px 0 0;
    padding: 15px;

    overflow: auto;

    border: 1px solid #e4e7ec;
    border-radius: 9px;

    background: #fff;
    color: #344054;

    direction: ltr;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .avp-grid[b-urhs8nne5z] {
        grid-template-columns: 1fr;
    }

    .avp-card.full[b-urhs8nne5z] {
        grid-column: auto;
    }
}

@media (max-width: 650px) {
    .avp-head[b-urhs8nne5z] {
        flex-direction: column;
        align-items: stretch;
    }

    .avp-card[b-urhs8nne5z] {
        padding: 19px;
    }

    dl > div[b-urhs8nne5z] {
        flex-direction: column;
        gap: 6px;
    }

    dd[b-urhs8nne5z] {
        text-align: right;
    }

    dt[b-urhs8nne5z] {
        flex-shrink: 1;
    }

    .avp-log[b-urhs8nne5z] {
        padding: 14px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Finance/ManageFinance.razor.rz.scp.css */
.admin-visit-payment-list[b-kfidz97lb2] {
    width: 100%;
    min-width: 0;
}

.admin-visit-payment-list[b-kfidz97lb2]  .data-table {
    table-layout: auto;
}

.admin-visit-payment-list[b-kfidz97lb2]  .data-table th,
.admin-visit-payment-list[b-kfidz97lb2]  .data-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.avp-cell[b-kfidz97lb2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: nowrap;
}

.avp-cell strong[b-kfidz97lb2] {
    color: var(--text, #475467);
    font-size: 18px;
}

.avp-cell span[b-kfidz97lb2] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.8;
}

.avp-cell .avp-test[b-kfidz97lb2] {
    color: #b54708;
}

.avp-muted[b-kfidz97lb2] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.avp-actions[b-kfidz97lb2] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    white-space: nowrap;
}

.avp-button[b-kfidz97lb2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;

    background: #fff;
    color: var(--text, #475467);

    font: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.avp-button:hover[b-kfidz97lb2] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.avp-button:focus-visible[b-kfidz97lb2] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.history-badge[b-kfidz97lb2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.history-badge.success[b-kfidz97lb2] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-kfidz97lb2] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-kfidz97lb2] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-kfidz97lb2] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-kfidz97lb2] {
    background: #f2f4f7;
    color: #667085;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Finance/ManagePayments.razor.rz.scp.css */
.admin-visit-payment-list[b-5ans7f9u5c] {
    width: 100%;
    min-width: 0;
}


/* =========================
   Table
========================= */

.admin-visit-payment-list[b-5ans7f9u5c]  .data-table {
    width: 100%;
    min-width: 1450px;

    table-layout: auto;
}

.admin-visit-payment-list[b-5ans7f9u5c]  .data-table th,
.admin-visit-payment-list[b-5ans7f9u5c]  .data-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.admin-visit-payment-list[b-5ans7f9u5c]  .data-table td {
    font-size: 17px;
}


/* =========================
   Cells
========================= */

.avp-cell[b-5ans7f9u5c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 4px;

    white-space: nowrap;
}

.avp-cell strong[b-5ans7f9u5c] {
    color: var(--text, #475467);

    font-size: 18px;
    font-weight: 800;

    white-space: nowrap;
}

.avp-cell span[b-5ans7f9u5c] {
    color: var(--muted, #667085);

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

    white-space: nowrap;
}

.avp-cell .avp-test[b-5ans7f9u5c] {
    color: #b54708;
}

.avp-muted[b-5ans7f9u5c] {
    color: var(--muted, #667085);
    font-size: 15px;
}

bdi[b-5ans7f9u5c] {
    display: inline-block;

    direction: ltr;
    unicode-bidi: isolate;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


/* =========================
   Status
========================= */

.history-badge[b-5ans7f9u5c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;
    padding: 4px 11px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;

    white-space: nowrap;
}

.history-badge.success[b-5ans7f9u5c] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-5ans7f9u5c] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-5ans7f9u5c] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-5ans7f9u5c] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-5ans7f9u5c] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.avp-actions[b-5ans7f9u5c] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 7px;

    white-space: nowrap;
}

.avp-button[b-5ans7f9u5c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    min-height: 38px;
    padding: 7px 13px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;

    background: #fff;
    color: var(--text, #475467);

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.avp-button:hover[b-5ans7f9u5c] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.avp-button:focus-visible[b-5ans7f9u5c] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Finance/ManageSettlements.razor.rz.scp.css */
.settlements-page[b-28xi38svte] {
    width: 100%;
    color: var(--text, #344054);
}

.settlements-page *[b-28xi38svte] {
    box-sizing: border-box;
}

.settlement-alert[b-28xi38svte] {
    margin: 16px 0;
    padding: 15px 18px;
    border: 1px solid;
    border-radius: 12px;
    line-height: 1.9;
}

.settlement-alert.error[b-28xi38svte] {
    background: #fff1f1;
    border-color: #fecdca;
    color: #b42318;
}

.settlement-alert.success[b-28xi38svte] {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #027a48;
}

.settlement-alert.warning[b-28xi38svte] {
    background: #fffaeb;
    border-color: #fedf89;
    color: #93370d;
}

.sync-bar[b-28xi38svte],
.selection-bar[b-28xi38svte],
.preview-head[b-28xi38svte] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.sync-bar[b-28xi38svte],
.selection-bar[b-28xi38svte] {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 16px;
    background: #fff;
}

.sync-bar p[b-28xi38svte] {
    margin: 8px 0 0;
    color: var(--muted, #667085);
    line-height: 1.9;
}

.selection-bar > div:first-child[b-28xi38svte] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selection-bar span[b-28xi38svte] {
    color: var(--muted, #667085);
    font-size: 13px;
}

.selection-actions[b-28xi38svte] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settlement-button[b-28xi38svte] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #344054);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.settlement-button.primary[b-28xi38svte] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.settlement-button.compact[b-28xi38svte] {
    min-height: 35px;
    padding: 6px 10px;
    white-space: nowrap;
}

.settlement-button:disabled[b-28xi38svte] {
    opacity: .5;
    cursor: not-allowed;
}

.settlement-button:focus-visible[b-28xi38svte],
.settlements-page input:focus-visible[b-28xi38svte],
.settlements-page textarea:focus-visible[b-28xi38svte] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.filter-date[b-28xi38svte] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.filter-date label[b-28xi38svte] {
    font-size: 13px;
    font-weight: 700;
}

.settlement-stats[b-28xi38svte] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0;
}

.settlement-stats article[b-28xi38svte] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 16px;
    background: #fff;
}

.settlement-stats article > span[b-28xi38svte] {
    color: var(--muted, #667085);
    font-size: 14px;
}

.settlement-stats strong[b-28xi38svte] {
    color: var(--green, #3a7d44);
    font-size: 21px;
    line-height: 1.8;
}

.settlement-stats small[b-28xi38svte] {
    color: var(--muted, #667085);
    line-height: 1.8;
}

.table-stack[b-28xi38svte] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 120px;
    line-height: 1.8;
}

.table-stack strong[b-28xi38svte] {
    font-size: 14px;
}

.table-stack span[b-28xi38svte],
.table-stack a[b-28xi38svte] {
    font-size: 13px;
}

.table-stack span[b-28xi38svte] {
    color: var(--muted, #667085);
}

.table-stack a[b-28xi38svte] {
    color: var(--green, #3a7d44);
    text-underline-offset: 4px;
}

.source-cell[b-28xi38svte] {
    min-width: 180px;
    max-width: 300px;
    overflow-wrap: anywhere;
}

.date-cell[b-28xi38svte] {
    min-width: 150px;
}

.amount-cell[b-28xi38svte] {
    white-space: nowrap;
    font-weight: 700;
}

.settlements-page input[type="checkbox"][b-28xi38svte] {
    width: 19px;
    height: 19px;
    accent-color: var(--green, #3a7d44);
}

.status-badge[b-28xi38svte] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.warning[b-28xi38svte] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.success[b-28xi38svte] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-28xi38svte] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-28xi38svte] {
    background: #f2f4f7;
    color: #667085;
}

.settlement-preview[b-28xi38svte] {
    margin-top: 28px;
    padding: 28px;
    border: 2px solid #cfe4d3;
    border-radius: 20px;
    background: #fff;
}

.preview-head h2[b-28xi38svte] {
    margin: 8px 0;
    font-size: 23px;
}

.preview-head span[b-28xi38svte] {
    color: var(--green, #3a7d44);
    font-weight: 700;
}

.preview-summary[b-28xi38svte] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 24px;
    margin: 22px 0;
    padding: 18px;
    border-radius: 12px;
    background: #f0f7f2;
    line-height: 1.9;
}

.preview-parties[b-28xi38svte] {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.preview-parties > div[b-28xi38svte] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f3;
}

.settlement-field[b-28xi38svte] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
    min-width: 0;
}

.settlement-field label[b-28xi38svte] {
    font-weight: 700;
}

.settlement-field textarea[b-28xi38svte] {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 12px;
    color: inherit;
    font: inherit;
    line-height: 1.9;
    resize: vertical;
}

.settlement-field small[b-28xi38svte] {
    color: var(--muted, #667085);
    overflow-wrap: anywhere;
    line-height: 1.8;
}

.receipt-grid[b-28xi38svte] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.confirm-payment[b-28xi38svte] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 24px;
    line-height: 2;
}

.confirm-payment input[b-28xi38svte] {
    flex-shrink: 0;
    margin-top: 6px;
}

@media (max-width: 1100px) {
    .settlement-stats[b-28xi38svte] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .selection-bar[b-28xi38svte] {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 650px) {
    .sync-bar[b-28xi38svte],
    .preview-head[b-28xi38svte] {
        align-items: stretch;
        flex-direction: column;
    }

    .settlement-stats[b-28xi38svte],
    .receipt-grid[b-28xi38svte] {
        grid-template-columns: 1fr;
    }

    .settlement-preview[b-28xi38svte] {
        padding: 18px;
    }

    .selection-actions[b-28xi38svte] {
        flex-direction: column;
    }

    .filter-date[b-28xi38svte] {
        min-width: 0;
        width: 100%;
    }
}
.settlement-filters[b-28xi38svte] {
    margin: 20px 0;
    padding: 22px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;
    background: #fff;
}

.settlement-filter-grid[b-28xi38svte] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 18px;
}

.settlement-filter-grid > *[b-28xi38svte] {
    min-width: 0;
}

.settlement-filter-grid > input[b-28xi38svte],
.settlement-filter-grid > select[b-28xi38svte] {
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 14px;
}

.settlement-filter-grid .filter-date[b-28xi38svte] {
    width: 100%;
    min-width: 0;
}

.settlement-filter-actions[b-28xi38svte] {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef0f3;
}

.settlement-filter-actions .settlement-button[b-28xi38svte] {
    min-height: 44px;
}

@media (max-width: 1100px) {
    .settlement-filter-grid[b-28xi38svte] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .settlement-filter-grid[b-28xi38svte] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .settlement-filters[b-28xi38svte] {
        padding: 16px;
    }

    .settlement-filter-grid[b-28xi38svte] {
        grid-template-columns: 1fr;
    }

    .settlement-filter-actions .settlement-button[b-28xi38svte] {
        flex: 1;
    }
}

.settlement-preview[b-28xi38svte] {
    scroll-margin-top: 110px;
}

.settlement-preview:focus[b-28xi38svte] {
    outline: none;
}

.receipt-upload-card[b-28xi38svte] {
    min-width: 0;
    padding: 20px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fff;
}

.receipt-upload-card > strong[b-28xi38svte] {
    font-size: 15px;
}

.receipt-optional[b-28xi38svte] {
    display: inline-block;
    margin-inline-start: 8px;
    color: var(--muted, #667085);
    font-size: 12px;
}

.receipt-picker[b-28xi38svte] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 155px;
    margin-top: 16px;
    padding: 20px;
    border: 2px dashed #cfe0d3;
    border-radius: 12px;
    background: #f7fbf8;
    text-align: center;
}

.receipt-picker:hover[b-28xi38svte] {
    border-color: var(--green, #3a7d44);
    background: #f0f7f2;
}

.receipt-picker-icon[b-28xi38svte] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #e7f1e9;
    color: var(--green, #3a7d44);
    font-size: 25px;
}

.receipt-picker-title[b-28xi38svte] {
    color: var(--green, #3a7d44);
    font-size: 15px;
    font-weight: 800;
}

.receipt-picker-hint[b-28xi38svte] {
    color: var(--muted, #667085);
    font-size: 12px;
    line-height: 1.9;
}

/* InputFile کامپوننت فرزند است؛ برای CSS isolation از deep استفاده می‌کنیم. */
.receipt-picker[b-28xi38svte]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.receipt-picker[b-28xi38svte]  input[type="file"]:disabled {
    cursor: not-allowed;
}

.receipt-picker:focus-within[b-28xi38svte] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.receipt-file-name[b-28xi38svte] {
    margin-top: 13px;
    color: var(--muted, #667085);
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.selected-receipt-preview[b-28xi38svte] {
    margin-top: 16px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Finance/SettlementBatchDetails.razor.rz.scp.css */
.batch-details[b-hkw4ow9dc7] {
    color: var(--text, #344054);
}

.batch-head[b-hkw4ow9dc7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.batch-head h1[b-hkw4ow9dc7] {
    margin: 10px 0;
    font-size: 26px;
}

.batch-head > div > span[b-hkw4ow9dc7] {
    color: var(--green, #3a7d44);
    font-weight: 700;
}

.batch-button[b-hkw4ow9dc7] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.batch-button:disabled[b-hkw4ow9dc7] {
    opacity: .5;
    cursor: not-allowed;
}

.batch-summary[b-hkw4ow9dc7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.batch-summary > div[b-hkw4ow9dc7],
.batch-card[b-hkw4ow9dc7] {
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
}

.batch-summary > div[b-hkw4ow9dc7] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.9;
}

.batch-summary span[b-hkw4ow9dc7] {
    color: var(--muted, #667085);
    font-size: 14px;
}

.batch-summary strong[b-hkw4ow9dc7] {
    color: var(--green, #3a7d44);
}

.batch-notice[b-hkw4ow9dc7],
.batch-error[b-hkw4ow9dc7],
.batch-state[b-hkw4ow9dc7] {
    margin: 22px 0;
    padding: 18px;
    border-radius: 12px;
    line-height: 2;
}

.batch-notice[b-hkw4ow9dc7] {
    border: 1px solid #cfe4d3;
    background: #f0f7f2;
    color: #286233;
}

.batch-error[b-hkw4ow9dc7] {
    background: #fff1f1;
    color: #b42318;
}

.batch-card[b-hkw4ow9dc7] {
    margin-top: 22px;
}

.batch-card h2[b-hkw4ow9dc7] {
    margin: 0 0 22px;
    font-size: 20px;
}

.batch-description[b-hkw4ow9dc7] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 2.1;
}

.batch-receipts[b-hkw4ow9dc7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.batch-table-scroll[b-hkw4ow9dc7] {
    overflow-x: auto;
}

table[b-hkw4ow9dc7] {
    width: 100%;
    border-collapse: collapse;
    min-width: 750px;
}

th[b-hkw4ow9dc7],
td[b-hkw4ow9dc7] {
    padding: 16px 12px;
    border-bottom: 1px solid #eef0f3;
    text-align: right;
    line-height: 1.9;
}

th[b-hkw4ow9dc7] {
    background: #f8fafc;
}

td a[b-hkw4ow9dc7] {
    color: var(--green, #3a7d44);
}

.batch-pagination[b-hkw4ow9dc7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
}

@media (max-width: 1000px) {
    .batch-summary[b-hkw4ow9dc7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .batch-summary[b-hkw4ow9dc7],
    .batch-receipts[b-hkw4ow9dc7] {
        grid-template-columns: 1fr;
    }

    .batch-card[b-hkw4ow9dc7] {
        padding: 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Fulfillments/ManageFulfillments.razor.rz.scp.css */
.fulfillments-page[b-ddbajzwmcj] {
    width: 100%;
}

.fulfillment-cell[b-ddbajzwmcj] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.fulfillment-icon[b-ddbajzwmcj] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.fulfillment-cell > div:last-child[b-ddbajzwmcj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fulfillment-cell strong[b-ddbajzwmcj] {
    font-size: 13px;
}

.fulfillment-cell span[b-ddbajzwmcj] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-ddbajzwmcj] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ddbajzwmcj] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-ddbajzwmcj] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-ddbajzwmcj] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-ddbajzwmcj] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-ddbajzwmcj] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-ddbajzwmcj] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-ddbajzwmcj] {
    border-color: var(--green);
    color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Inventory/ManageInventory.razor.rz.scp.css */
.inventory-page[b-ylnecoh34v] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.inventory-summary[b-ylnecoh34v] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-ylnecoh34v] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-ylnecoh34v] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-ylnecoh34v] {
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-ylnecoh34v] {
    color: var(--muted);
    font-size: 10px;
}


/* =========================
   Inventory Cell
========================= */

.inventory-cell[b-ylnecoh34v] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.inventory-icon[b-ylnecoh34v] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.inventory-cell > div:last-child[b-ylnecoh34v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inventory-cell strong[b-ylnecoh34v] {
    font-size: 13px;
}

.inventory-cell span[b-ylnecoh34v] {
    color: var(--muted);
    font-size: 10px;
}


/* =========================
   Status
========================= */

.status-badge[b-ylnecoh34v] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ylnecoh34v] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-ylnecoh34v] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-ylnecoh34v] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-ylnecoh34v] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-ylnecoh34v] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-ylnecoh34v] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-ylnecoh34v] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .inventory-summary[b-ylnecoh34v] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .inventory-summary[b-ylnecoh34v] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Operators/Create.razor.rz.scp.css */
.operator-form-page[b-whh0sa4pei] {
    width: 100%;
}

/* =========================
   Header
========================= */

.page-head[b-whh0sa4pei] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div > span[b-whh0sa4pei] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-whh0sa4pei] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-whh0sa4pei] {
    margin: 9px 0 0;

    color: var(--muted);

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

.back-button[b-whh0sa4pei] {
    min-height: 44px;
    padding: 0 16px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Form Layout
========================= */

.form-grid[b-whh0sa4pei] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-whh0sa4pei] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-whh0sa4pei] {
    grid-column: 1 / -1;
}

.form-card h3[b-whh0sa4pei] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Fields
========================= */

.field-group[b-whh0sa4pei] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.description-field[b-whh0sa4pei] {
    margin-top: 18px;
}

.field-group label[b-whh0sa4pei] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.field-group input[b-whh0sa4pei],
.field-group select[b-whh0sa4pei],
.field-group textarea[b-whh0sa4pei] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition: .2s;
}

.field-group input[b-whh0sa4pei],
.field-group select[b-whh0sa4pei] {
    height: 48px;

    padding: 0 13px;
}

.field-group textarea[b-whh0sa4pei] {
    min-height: 130px;

    padding: 12px 13px;

    resize: vertical;

    line-height: 2;
}

.field-group input:focus[b-whh0sa4pei],
.field-group select:focus[b-whh0sa4pei],
.field-group textarea:focus[b-whh0sa4pei] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Upload
========================= */

.upload-placeholder[b-whh0sa4pei] {
    padding: 18px;

    display: flex;
    align-items: center;

    gap: 18px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fafbfb;
}

.avatar-preview-box[b-whh0sa4pei] {
    width: 88px;
    height: 88px;

    flex: 0 0 88px;

    overflow: hidden;

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
}

.avatar-preview[b-whh0sa4pei] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.upload-icon[b-whh0sa4pei] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-whh0sa4pei] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.upload-info strong[b-whh0sa4pei] {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}

.upload-info span[b-whh0sa4pei] {
    color: var(--muted);

    font-size: 12px;
}

.selected-file[b-whh0sa4pei] {
    color: var(--green) !important;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.secondary-button[b-whh0sa4pei] {
    min-height: 42px;
    padding: 0 15px;

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-whh0sa4pei] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Status
========================= */

.switch-row[b-whh0sa4pei] {
    min-height: 68px;

    padding: 0 16px;

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

    gap: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-row > div[b-whh0sa4pei] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row strong[b-whh0sa4pei] {
    color: var(--text);

    font-size: 13px;
}

.switch-row span[b-whh0sa4pei] {
    color: var(--muted);

    font-size: 11px;
}

.switch-row input[b-whh0sa4pei] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);

    cursor: pointer;
}


/* =========================
   Submit
========================= */

.submit-card[b-whh0sa4pei] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-whh0sa4pei] {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.submit-card strong[b-whh0sa4pei] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.submit-card span[b-whh0sa4pei] {
    color: var(--muted);

    font-size: 11px;
}

.submit-button[b-whh0sa4pei] {
    min-height: 46px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-whh0sa4pei] {
    opacity: .6;

    cursor: not-allowed;
}


/* =========================
   Messages
========================= */

.form-error[b-whh0sa4pei] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 13px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .page-head[b-whh0sa4pei] {
        flex-direction: column;
    }

    .form-grid[b-whh0sa4pei] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-whh0sa4pei] {
        grid-column: auto;
    }

    .upload-placeholder[b-whh0sa4pei] {
        flex-direction: column;
        align-items: stretch;
    }

    .secondary-button[b-whh0sa4pei] {
        width: 100%;
    }

    .submit-card[b-whh0sa4pei] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-button[b-whh0sa4pei] {
        width: 100%;
    }
}

@media (max-width: 520px) {

    .form-card[b-whh0sa4pei] {
        padding: 17px;
    }

    .page-head h1[b-whh0sa4pei] {
        font-size: 25px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Operators/Details.razor.rz.scp.css */
.operator-details-page[b-ekjtkrdn9b] {
    width: 100%;
}

/* =========================
   Header
========================= */

.page-head[b-ekjtkrdn9b] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-ekjtkrdn9b] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-ekjtkrdn9b] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-ekjtkrdn9b] {
    margin: 9px 0 0;

    color: var(--muted);

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

.head-actions[b-ekjtkrdn9b] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-ekjtkrdn9b],
.primary-button[b-ekjtkrdn9b] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.back-button[b-ekjtkrdn9b] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-ekjtkrdn9b] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Layout
========================= */

.details-grid[b-ekjtkrdn9b] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-ekjtkrdn9b] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-ekjtkrdn9b] {
    grid-column: 1 / -1;
}

.details-card h3[b-ekjtkrdn9b] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Profile
========================= */

.profile-card[b-ekjtkrdn9b] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.profile-avatar[b-ekjtkrdn9b] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-avatar img[b-ekjtkrdn9b] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-info[b-ekjtkrdn9b] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-ekjtkrdn9b] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.5;
}

.profile-specialty[b-ekjtkrdn9b] {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 14px;
    font-weight: 800;
}

.profile-meta[b-ekjtkrdn9b] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-ekjtkrdn9b] {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.8;
}

.profile-meta strong[b-ekjtkrdn9b] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.profile-statuses[b-ekjtkrdn9b] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}


/* =========================
   Status Badges
========================= */

.status-badge[b-ekjtkrdn9b] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ekjtkrdn9b] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-ekjtkrdn9b] {
    background: #fff1f1;
    color: #b42318;
}


/* =========================
   Info Grid
========================= */

.info-grid[b-ekjtkrdn9b] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-ekjtkrdn9b] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-ekjtkrdn9b] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.7;
}

.info-item strong[b-ekjtkrdn9b] {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================
   Status List
========================= */

.status-list[b-ekjtkrdn9b] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.status-row[b-ekjtkrdn9b] {
    min-height: 58px;
    padding: 0 15px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-ekjtkrdn9b] {
    color: var(--muted);

    font-size: 13px;
    font-weight: 700;
}

.status-row strong[b-ekjtkrdn9b] {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}


/* =========================
   Description
========================= */

.description-box[b-ekjtkrdn9b] {
    min-height: 150px;

    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box span[b-ekjtkrdn9b] {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.7;
}

.description-box p[b-ekjtkrdn9b] {
    margin: 0;

    color: var(--text);

    font-size: 14px;
    font-weight: 500;

    line-height: 2.1;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* =========================
   Messages
========================= */

.loading-card[b-ekjtkrdn9b] {
    color: var(--muted);

    font-size: 14px;
}

.form-error[b-ekjtkrdn9b] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 13px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .info-grid[b-ekjtkrdn9b] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .page-head[b-ekjtkrdn9b],
    .profile-card[b-ekjtkrdn9b] {
        flex-direction: column;
    }

    .head-actions[b-ekjtkrdn9b] {
        width: 100%;
    }

    .head-actions a[b-ekjtkrdn9b] {
        flex: 1;
    }

    .details-grid[b-ekjtkrdn9b],
    .info-grid[b-ekjtkrdn9b] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-ekjtkrdn9b] {
        grid-column: auto;
    }

    .profile-card[b-ekjtkrdn9b] {
        align-items: flex-start;
    }

    .profile-statuses[b-ekjtkrdn9b] {
        align-items: flex-start;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-meta[b-ekjtkrdn9b] {
        gap: 8px 14px;
    }
}


@media (max-width: 520px) {

    .details-card[b-ekjtkrdn9b] {
        padding: 17px;
    }

    .head-actions[b-ekjtkrdn9b] {
        flex-direction: column;
    }

    .head-actions a[b-ekjtkrdn9b] {
        width: 100%;

        box-sizing: border-box;
    }

    .page-head h1[b-ekjtkrdn9b] {
        font-size: 25px;
    }

    .profile-info h2[b-ekjtkrdn9b] {
        font-size: 21px;
    }

    .profile-meta[b-ekjtkrdn9b] {
        flex-direction: column;

        gap: 5px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Operators/Edit.razor.rz.scp.css */
.edit-operator-page[b-oofrdf52kj] {
    width: 100%;
}

/* =========================
   Header
========================= */

.page-head[b-oofrdf52kj] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div > span[b-oofrdf52kj] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-oofrdf52kj] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-oofrdf52kj] {
    margin: 9px 0 0;

    color: var(--muted);

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

.back-button[b-oofrdf52kj] {
    min-height: 44px;
    padding: 0 16px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Layout
========================= */

.form-grid[b-oofrdf52kj] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-oofrdf52kj] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-oofrdf52kj] {
    grid-column: 1 / -1;
}

.form-card h3[b-oofrdf52kj] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Operator Summary
========================= */

.operator-summary[b-oofrdf52kj] {
    display: flex;
    align-items: center;

    gap: 14px;
}

.summary-avatar[b-oofrdf52kj] {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    overflow: hidden;

    border-radius: 16px;

    object-fit: cover;
}

.summary-avatar.placeholder[b-oofrdf52kj] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.operator-summary > div:last-child[b-oofrdf52kj] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.operator-summary strong[b-oofrdf52kj] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.operator-summary span[b-oofrdf52kj] {
    color: var(--muted);

    font-size: 12px;
}


/* =========================
   Fields
========================= */

.field-group[b-oofrdf52kj] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.description-field[b-oofrdf52kj] {
    margin-top: 18px;
}

.field-group label[b-oofrdf52kj] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.field-group input[b-oofrdf52kj],
.field-group textarea[b-oofrdf52kj] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;

    transition: .2s;
}

.field-group input[b-oofrdf52kj] {
    height: 48px;

    padding: 0 13px;
}

.field-group textarea[b-oofrdf52kj] {
    min-height: 130px;

    padding: 12px 13px;

    resize: vertical;

    line-height: 2;
}

.field-group input:focus[b-oofrdf52kj],
.field-group textarea:focus[b-oofrdf52kj] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Upload
========================= */

.section-description[b-oofrdf52kj] {
    margin: -8px 0 18px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.9;
}

.upload-placeholder[b-oofrdf52kj] {
    padding: 18px;

    display: flex;
    align-items: center;

    gap: 18px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fafbfb;
}

.avatar-preview-box[b-oofrdf52kj] {
    width: 88px;
    height: 88px;

    flex: 0 0 88px;

    overflow: hidden;

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
}

.avatar-preview[b-oofrdf52kj] {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.upload-icon[b-oofrdf52kj] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-oofrdf52kj] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.upload-info strong[b-oofrdf52kj] {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}

.upload-info span[b-oofrdf52kj] {
    color: var(--muted);

    font-size: 12px;
}

.selected-file[b-oofrdf52kj] {
    color: var(--green) !important;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.secondary-button[b-oofrdf52kj] {
    min-height: 42px;
    padding: 0 15px;

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-oofrdf52kj] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Status
========================= */

.switch-row[b-oofrdf52kj] {
    min-height: 68px;

    padding: 0 16px;

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

    gap: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-row > div[b-oofrdf52kj] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row strong[b-oofrdf52kj] {
    color: var(--text);

    font-size: 13px;
}

.switch-row span[b-oofrdf52kj] {
    color: var(--muted);

    font-size: 11px;
}

.switch-row input[b-oofrdf52kj] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}


/* =========================
   Submit
========================= */

.submit-card[b-oofrdf52kj] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-oofrdf52kj] {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.submit-card strong[b-oofrdf52kj] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.submit-card span[b-oofrdf52kj] {
    color: var(--muted);

    font-size: 11px;
}

.submit-button[b-oofrdf52kj] {
    min-height: 46px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-oofrdf52kj] {
    opacity: .6;

    cursor: not-allowed;
}


/* =========================
   States
========================= */

.form-error[b-oofrdf52kj] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 13px;
    line-height: 1.8;
}

.state-card[b-oofrdf52kj] {
    width: 100%;
    min-height: 220px;

    box-sizing: border-box;

    padding: 30px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-spinner[b-oofrdf52kj] {
    width: 32px;
    height: 32px;

    margin-bottom: 12px;

    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;

    animation: spin-b-oofrdf52kj .8s linear infinite;
}

@keyframes spin-b-oofrdf52kj {
    to {
        transform: rotate(360deg);
    }
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .page-head[b-oofrdf52kj] {
        flex-direction: column;
    }

    .form-grid[b-oofrdf52kj] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-oofrdf52kj] {
        grid-column: auto;
    }

    .upload-placeholder[b-oofrdf52kj] {
        flex-direction: column;
        align-items: stretch;
    }

    .secondary-button[b-oofrdf52kj] {
        width: 100%;
    }

    .submit-card[b-oofrdf52kj] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-button[b-oofrdf52kj] {
        width: 100%;
    }
}

@media (max-width: 520px) {

    .form-card[b-oofrdf52kj] {
        padding: 17px;
    }

    .page-head h1[b-oofrdf52kj] {
        font-size: 25px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Operators/ManageOperators.razor.rz.scp.css */
.operators-page[b-705bgr9ac6] {
    width: 100%;
}

.create-operator-button[b-705bgr9ac6] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.operator-cell[b-705bgr9ac6] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.operator-avatar[b-705bgr9ac6] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    object-fit: cover;
}

.operator-avatar-placeholder[b-705bgr9ac6] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.operator-cell > div:last-child[b-705bgr9ac6] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.operator-cell strong[b-705bgr9ac6] {
    font-size: 13px;
}

.operator-cell span[b-705bgr9ac6] {
    color: var(--muted);

    font-size: 10px;
}

.status-badge[b-705bgr9ac6] {
    min-height: 27px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.status-badge.success[b-705bgr9ac6] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-705bgr9ac6] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-705bgr9ac6] {
    display: flex;
    align-items: center;

    gap: 6px;
}

.action-link[b-705bgr9ac6] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    display: inline-flex;
    align-items: center;

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
}

.ltr-value[b-705bgr9ac6] {
    direction: ltr;

    text-align: right !important;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Orders/AdminOrderDetails.razor.rz.scp.css */
.admin-order-details-page[b-tyr0av4cvq] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Orders/ManageOrders.razor.rz.scp.css */
.admin-orders-page[b-eobwf2524g] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.admin-orders-page[b-eobwf2524g]  .data-table {
    min-width: 1350px;
}

.admin-orders-page[b-eobwf2524g]  .data-table th,
.admin-orders-page[b-eobwf2524g]  .data-table td {
    font-size: 16px;
    white-space: nowrap;
}

.order-cell[b-eobwf2524g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.8;
}

.order-cell strong[b-eobwf2524g] {
    color: var(--text, #475467);
    font-size: 17px;
    font-weight: 800;
}

.order-cell span[b-eobwf2524g],
.muted-value[b-eobwf2524g] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.order-money[b-eobwf2524g] {
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.delivery-line + .delivery-line[b-eobwf2524g] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef0f3;
}

.order-badge[b-eobwf2524g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.order-badge.success[b-eobwf2524g] {
    background: #ecfdf3;
    color: #027a48;
}

.order-badge.warning[b-eobwf2524g] {
    background: #fffaeb;
    color: #b54708;
}

.order-badge.info[b-eobwf2524g] {
    background: #eff8ff;
    color: #175cd3;
}

.order-badge.danger[b-eobwf2524g] {
    background: #fff1f1;
    color: #b42318;
}

.order-badge.neutral[b-eobwf2524g] {
    background: #f2f4f7;
    color: #667085;
}

.order-link[b-eobwf2524g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.order-link:hover[b-eobwf2524g] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.order-link:focus-visible[b-eobwf2524g] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/PartnershipRequests/Details.razor.rz.scp.css */
.request-details-page[b-s9qt73xry4] {
    width: 100%;
    direction: rtl;
}

.page-head[b-s9qt73xry4] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-s9qt73xry4] {
    display: block;
    margin-bottom: 7px;
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
}

.page-head h1[b-s9qt73xry4] {
    margin: 0;
    color: var(--text);
    font-size: 29px;
    font-weight: 900;
}

.back-button[b-s9qt73xry4] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.page-message[b-s9qt73xry4] {
    margin-bottom: 18px;
    padding: 15px 18px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.page-message.error[b-s9qt73xry4] {
    border-color: #fecdca;
    background: #fff2f2;
    color: #b42318;
}

.page-message.success[b-s9qt73xry4] {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #027a48;
}

.details-state[b-s9qt73xry4] {
    padding: 50px 24px;
    border: 1px solid var(--soft);
    border-radius: 17px;
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

.request-summary[b-s9qt73xry4] {
    margin-bottom: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--soft);
    border-radius: 17px;
    background: #fff;
}

.request-summary > div > span[b-s9qt73xry4] {
    color: var(--muted);
    font-size: 16px;
}

.request-summary h2[b-s9qt73xry4] {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 25px;
    font-weight: 900;
}

.status-badge[b-s9qt73xry4] {
    padding: 7px 14px;
    border-radius: 999px;
    background: #eff8ff;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.details-grid[b-s9qt73xry4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.details-card[b-s9qt73xry4] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 17px;
    background: #fff;
}

.details-card.full[b-s9qt73xry4] {
    grid-column: 1 / -1;
}

.details-card h3[b-s9qt73xry4] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.detail-row[b-s9qt73xry4] {
    padding: 13px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 17px;
    line-height: 1.9;
}

.detail-row:last-child[b-s9qt73xry4] {
    border-bottom: 0;
}

.detail-row > span[b-s9qt73xry4] {
    flex-shrink: 0;
    color: var(--muted);
}

.detail-row strong[b-s9qt73xry4],
.detail-row a[b-s9qt73xry4] {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.detail-row a:hover[b-s9qt73xry4] {
    color: var(--green);
}

.message-content[b-s9qt73xry4] {
    margin: 0;
    color: #475467;
    font-size: 18px;
    line-height: 2.1;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.selected-needs[b-s9qt73xry4] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selected-needs span[b-s9qt73xry4] {
    padding: 9px 15px;
    border-radius: 999px;
    background: #f0f7f2;
    color: var(--green);
    font-size: 17px;
    font-weight: 700;
}

.field-group[b-s9qt73xry4] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.field-group label[b-s9qt73xry4] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group select[b-s9qt73xry4],
.field-group textarea[b-s9qt73xry4] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
}

.field-group textarea[b-s9qt73xry4] {
    resize: vertical;
}

.field-group select:focus[b-s9qt73xry4],
.field-group textarea:focus[b-s9qt73xry4] {
    outline: 2px solid rgba(58, 125, 68, .2);
    border-color: var(--green);
}

.save-button[b-s9qt73xry4] {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.save-button:disabled[b-s9qt73xry4] {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .details-grid[b-s9qt73xry4] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-s9qt73xry4] {
        grid-column: auto;
    }

    .page-head[b-s9qt73xry4],
    .request-summary[b-s9qt73xry4] {
        align-items: stretch;
        flex-direction: column;
    }

    .status-badge[b-s9qt73xry4] {
        align-self: flex-start;
    }

    .detail-row[b-s9qt73xry4] {
        flex-direction: column;
        gap: 6px;
    }

    .save-button[b-s9qt73xry4] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/PartnershipRequests/ManagePartnershipRequests.razor.rz.scp.css */
.requests-page[b-pydfcjvhol] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    direction: rtl;
}

.requester-cell[b-pydfcjvhol] {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.requester-cell strong[b-pydfcjvhol] {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.requester-cell span[b-pydfcjvhol] {
    color: var(--muted);
    font-size: 15px;
}

.requests-page a:not(.action-link)[b-pydfcjvhol] {
    color: #344054;
    font-size: 17px;
    text-decoration: none;
}

.requests-page a:not(.action-link):hover[b-pydfcjvhol] {
    color: #2459a6;
}

.status-badge[b-pydfcjvhol] {
    min-height: 31px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.status-badge.info[b-pydfcjvhol] {
    background: rgba(36, 89, 166, .1);
    color: #2459a6;
}

.status-badge.warning[b-pydfcjvhol] {
    background: rgba(217, 137, 28, .12);
    color: #9a5b08;
}

.status-badge.success[b-pydfcjvhol] {
    background: rgba(58, 125, 68, .11);
    color: #326f3c;
}

.status-badge.neutral[b-pydfcjvhol] {
    background: rgba(102, 112, 133, .11);
    color: #596273;
}

.date-value[b-pydfcjvhol] {
    display: inline-block;
    white-space: nowrap;
    color: #344054;
    font-size: 17px;
}

.action-link[b-pydfcjvhol] {
    min-height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(36, 89, 166, .2);
    border-radius: 9px;
    background: #fff;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s;
}

.action-link:hover[b-pydfcjvhol] {
    border-color: rgba(36, 89, 166, .48);
    background: rgba(36, 89, 166, .04);
}

.action-link:focus-visible[b-pydfcjvhol] {
    outline: 3px solid rgba(36, 89, 166, .2);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .requests-page[b-pydfcjvhol] {
        gap: 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/PetCategories/CreatePetCategory.razor.rz.scp.css */
.pet-category-form-page[b-irk94jpsf2] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-irk94jpsf2] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.page-head > div:first-child > span[b-irk94jpsf2] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-irk94jpsf2] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-irk94jpsf2] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-irk94jpsf2] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.back-button:hover[b-irk94jpsf2] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Error
========================= */

.form-error[b-irk94jpsf2] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
}


/* =========================
   Form
========================= */

.form-grid[b-irk94jpsf2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-irk94jpsf2] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.form-card.full[b-irk94jpsf2] {
    grid-column: 1 / -1;
}

.form-card h2[b-irk94jpsf2] {
    margin: 0 0 6px;

    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.form-card > p[b-irk94jpsf2],
.card-title-row p[b-irk94jpsf2] {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}


/* =========================
   Fields
========================= */

.two-column-fields[b-irk94jpsf2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-irk94jpsf2] {
    min-width: 0;
    margin-bottom: 17px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group:last-child[b-irk94jpsf2] {
    margin-bottom: 0;
}

.field-group label[b-irk94jpsf2] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group label span[b-irk94jpsf2] {
    color: #b42318;
}

.field-group input[b-irk94jpsf2],
.field-group textarea[b-irk94jpsf2],
.field-group select[b-irk94jpsf2] {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group textarea[b-irk94jpsf2] {
    min-height: 105px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-irk94jpsf2],
.field-group textarea:focus[b-irk94jpsf2],
.field-group select:focus[b-irk94jpsf2] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-group small[b-irk94jpsf2],
.editor-help[b-irk94jpsf2] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.editor-help[b-irk94jpsf2] {
    display: block;

    margin-top: 9px;
}

.ltr-input[b-irk94jpsf2],
.ltr-value[b-irk94jpsf2] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}


/* =========================
   Content Images
========================= */

.content-images-section[b-irk94jpsf2] {
    margin-top: 18px;
    padding-top: 17px;

    border-top: 1px solid var(--soft);
}

.content-images-section > strong[b-irk94jpsf2] {
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.content-images-grid[b-irk94jpsf2] {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(150px, 1fr));

    gap: 11px;
}

.content-image-card[b-irk94jpsf2] {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.content-image-card > img[b-irk94jpsf2] {
    width: 100%;
    height: 110px;

    display: block;

    object-fit: cover;
}

.content-image-card > div[b-irk94jpsf2] {
    padding: 8px;

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

    gap: 7px;
}

.content-image-card span[b-irk94jpsf2] {
    min-width: 0;

    overflow: hidden;

    color: var(--muted);

    direction: ltr;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-image-card button[b-irk94jpsf2] {
    min-height: 28px;
    padding: 0 8px;

    flex: 0 0 auto;

    border: 1px solid #fecdca;
    border-radius: 7px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}


/* =========================
   Image Upload
========================= */

.image-upload-box[b-irk94jpsf2] {
    min-height: 240px;

    padding: 18px;

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

    gap: 12px;

    border: 1px dashed var(--soft);
    border-radius: 13px;

    background: #fafbfc;
}

.icon-preview[b-irk94jpsf2],
.icon-placeholder[b-irk94jpsf2] {
    width: 110px;
    height: 110px;

    flex: 0 0 110px;

    border: 1px solid var(--soft);
    border-radius: 22px;
}

.icon-preview[b-irk94jpsf2] {
    display: block;

    background: #fff;

    object-fit: cover;
}

.icon-placeholder[b-irk94jpsf2] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 36px;
}

.banner-upload-box[b-irk94jpsf2] {
    min-height: 240px;
}

.banner-preview[b-irk94jpsf2],
.banner-placeholder[b-irk94jpsf2] {
    width: 100%;
    height: 145px;

    border: 1px solid var(--soft);
    border-radius: 13px;
}

.banner-preview[b-irk94jpsf2] {
    display: block;

    background: #fff;

    object-fit: cover;
}

.banner-placeholder[b-irk94jpsf2] {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(58, 125, 68, .08),
            rgba(58, 125, 68, .02));

    color: var(--muted);

    font-size: 16px;
    font-weight: 800;
}

.upload-button[b-irk94jpsf2] {
    min-height: 39px;
    padding: 0 14px;

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

    border: 1px solid var(--green);
    border-radius: 10px;

    background: #fff;
    color: var(--green);

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.upload-button:hover[b-irk94jpsf2] {
    background: var(--green);
    color: #fff;
}

.selected-file[b-irk94jpsf2] {
    max-width: 100%;

    overflow: hidden;

    color: var(--muted);

    direction: ltr;

    font-size: 15px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.banner-alt-field[b-irk94jpsf2] {
    margin-top: 17px;
}


/* =========================
   Attributes
========================= */

.card-title-row[b-irk94jpsf2] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-title-row p[b-irk94jpsf2] {
    margin-bottom: 0;
}

.add-attribute-button[b-irk94jpsf2] {
    min-height: 39px;
    padding: 0 13px;

    flex: 0 0 auto;

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.empty-attributes[b-irk94jpsf2] {
    padding: 22px;

    border: 1px dashed var(--soft);
    border-radius: 12px;

    background: #fafbfc;
    color: var(--muted);

    font-size: 16px;
    text-align: center;
}

.attributes-list[b-irk94jpsf2] {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.attribute-row[b-irk94jpsf2] {
    padding: 13px;

    display: grid;
    grid-template-columns:
        36px minmax(0, 1fr) minmax(0, 1.5fr) auto;
    align-items: end;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.attribute-row .field-group[b-irk94jpsf2] {
    margin-bottom: 0;
}

.attribute-order[b-irk94jpsf2] {
    width: 36px;
    height: 44px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.remove-attribute-button[b-irk94jpsf2] {
    min-height: 44px;
    padding: 0 12px;

    border: 1px solid #fecdca;
    border-radius: 10px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}


/* =========================
   Toggle
========================= */

.toggle-fields[b-irk94jpsf2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.toggle-field[b-irk94jpsf2] {
    min-height: 70px;
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;

    cursor: pointer;
}

.toggle-field input[b-irk94jpsf2] {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: var(--green);
}

.toggle-field > div[b-irk94jpsf2] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.toggle-field strong[b-irk94jpsf2] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.toggle-field span[b-irk94jpsf2] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   Submit
========================= */

.submit-card[b-irk94jpsf2] {
    grid-column: 1 / -1;

    padding: 18px 22px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.submit-card > div[b-irk94jpsf2] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-irk94jpsf2] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.submit-card span[b-irk94jpsf2] {
    color: var(--muted);

    font-size: 15px;
}

.submit-button[b-irk94jpsf2] {
    min-width: 155px;
    min-height: 45px;
    padding: 0 18px;

    border: 0;
    border-radius: 11px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s;
}

.submit-button:hover:not(:disabled)[b-irk94jpsf2] {
    filter: brightness(.96);
}

.submit-button:disabled[b-irk94jpsf2] {
    cursor: not-allowed;

    opacity: .65;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .form-grid[b-irk94jpsf2] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-irk94jpsf2],
    .submit-card[b-irk94jpsf2] {
        grid-column: auto;
    }

    .attribute-row[b-irk94jpsf2] {
        grid-template-columns:
            36px minmax(0, 1fr) minmax(0, 1fr);

        align-items: end;
    }

    .remove-attribute-button[b-irk94jpsf2] {
        grid-column: 2 / -1;
    }
}

@media (max-width: 650px) {

    .page-head[b-irk94jpsf2] {
        flex-direction: column;
    }

    .back-button[b-irk94jpsf2] {
        width: 100%;
    }

    .two-column-fields[b-irk94jpsf2],
    .toggle-fields[b-irk94jpsf2] {
        grid-template-columns: 1fr;
    }

    .card-title-row[b-irk94jpsf2] {
        align-items: stretch;
        flex-direction: column;
    }

    .add-attribute-button[b-irk94jpsf2] {
        width: 100%;
    }

    .attribute-row[b-irk94jpsf2] {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .attribute-row .field-group[b-irk94jpsf2] {
        grid-column: 1 / -1;
    }

    .remove-attribute-button[b-irk94jpsf2] {
        grid-column: 1 / -1;
    }

    .content-images-grid[b-irk94jpsf2] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .submit-card[b-irk94jpsf2] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-irk94jpsf2] {
        width: 100%;
    }
}

@media (max-width: 430px) {

    .content-images-grid[b-irk94jpsf2] {
        grid-template-columns: 1fr;
    }
}

.field-group[b-irk94jpsf2]  input,
.field-group[b-irk94jpsf2]  textarea,
.field-group[b-irk94jpsf2]  select {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group[b-irk94jpsf2]  textarea {
    min-height: 105px;

    resize: vertical;

    line-height: 1.9;
}

.field-group[b-irk94jpsf2]  input:focus,
.field-group[b-irk94jpsf2]  textarea:focus,
.field-group[b-irk94jpsf2]  select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

[b-irk94jpsf2] .ltr-input,
.ltr-value[b-irk94jpsf2] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

.toggle-field[b-irk94jpsf2]  input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/PetCategories/EditPetCategory.razor.rz.scp.css */
.pet-category-form-page[b-y9lfchyw8q] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-y9lfchyw8q] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.page-head > div:first-child > span[b-y9lfchyw8q] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-y9lfchyw8q] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-y9lfchyw8q] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-y9lfchyw8q] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.back-button:hover[b-y9lfchyw8q] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   State / Error
========================= */

.state-card[b-y9lfchyw8q] {
    min-height: 170px;
    padding: 20px;

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

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
    color: var(--muted);

    font-size: 17px;
    text-align: center;
}

.state-card.error-state[b-y9lfchyw8q] {
    border-color: #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.form-error[b-y9lfchyw8q] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.9;
}


/* =========================
   Form
========================= */

.form-grid[b-y9lfchyw8q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-y9lfchyw8q] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.form-card.full[b-y9lfchyw8q] {
    grid-column: 1 / -1;
}

.form-card h2[b-y9lfchyw8q] {
    margin: 0 0 6px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.form-card > p[b-y9lfchyw8q],
.card-title-row p[b-y9lfchyw8q] {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}


/* =========================
   Fields
========================= */

.two-column-fields[b-y9lfchyw8q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-y9lfchyw8q] {
    min-width: 0;
    margin-bottom: 17px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group:last-child[b-y9lfchyw8q] {
    margin-bottom: 0;
}

.field-group label[b-y9lfchyw8q] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group label span[b-y9lfchyw8q] {
    color: #b42318;
}

.field-group input[b-y9lfchyw8q],
.field-group textarea[b-y9lfchyw8q],
.field-group select[b-y9lfchyw8q] {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group textarea[b-y9lfchyw8q] {
    min-height: 105px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-y9lfchyw8q],
.field-group textarea:focus[b-y9lfchyw8q],
.field-group select:focus[b-y9lfchyw8q] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-group small[b-y9lfchyw8q],
.editor-help[b-y9lfchyw8q] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.editor-help[b-y9lfchyw8q] {
    display: block;

    margin-top: 9px;
}

.ltr-input[b-y9lfchyw8q],
.ltr-value[b-y9lfchyw8q] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}


/* =========================
   Content Images
========================= */

.content-images-section[b-y9lfchyw8q] {
    margin-top: 18px;
    padding-top: 17px;

    border-top: 1px solid var(--soft);
}

.content-images-section > strong[b-y9lfchyw8q] {
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.content-images-grid[b-y9lfchyw8q] {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(150px, 1fr));

    gap: 11px;
}

.content-image-card[b-y9lfchyw8q] {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.content-image-card > img[b-y9lfchyw8q] {
    width: 100%;
    height: 110px;

    display: block;

    object-fit: cover;
}

.content-image-card > div[b-y9lfchyw8q] {
    padding: 8px;

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

    gap: 7px;
}

.content-image-card span[b-y9lfchyw8q] {
    min-width: 0;

    overflow: hidden;

    color: var(--muted);

    direction: ltr;

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-image-card button[b-y9lfchyw8q] {
    min-height: 28px;
    padding: 0 8px;

    flex: 0 0 auto;

    border: 1px solid #fecdca;
    border-radius: 7px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}


/* =========================
   Image Upload
========================= */

.image-upload-box[b-y9lfchyw8q] {
    min-height: 240px;
    padding: 18px;

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

    gap: 12px;

    border: 1px dashed var(--soft);
    border-radius: 13px;

    background: #fafbfc;
}

.icon-preview[b-y9lfchyw8q],
.icon-placeholder[b-y9lfchyw8q] {
    width: 110px;
    height: 110px;

    flex: 0 0 110px;

    border: 1px solid var(--soft);
    border-radius: 22px;
}

.icon-preview[b-y9lfchyw8q] {
    display: block;

    background: #fff;

    object-fit: cover;
}

.icon-placeholder[b-y9lfchyw8q] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 36px;
}

.banner-upload-box[b-y9lfchyw8q] {
    min-height: 240px;
}

.banner-preview[b-y9lfchyw8q],
.banner-placeholder[b-y9lfchyw8q] {
    width: 100%;
    height: 145px;

    border: 1px solid var(--soft);
    border-radius: 13px;
}

.banner-preview[b-y9lfchyw8q] {
    display: block;

    background: #fff;

    object-fit: cover;
}

.banner-placeholder[b-y9lfchyw8q] {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(58, 125, 68, .08),
            rgba(58, 125, 68, .02));

    color: var(--muted);

    font-size: 16px;
    font-weight: 800;
}

.image-actions[b-y9lfchyw8q] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;
}

.upload-button[b-y9lfchyw8q],
.delete-image-button[b-y9lfchyw8q] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 10px;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.upload-button[b-y9lfchyw8q] {
    border: 1px solid var(--green);

    background: #fff;
    color: var(--green);
}

.upload-button:hover[b-y9lfchyw8q] {
    background: var(--green);
    color: #fff;
}

.delete-image-button[b-y9lfchyw8q] {
    border: 1px solid #fecdca;

    background: #fff;
    color: #b42318;
}

.delete-image-button:hover:not(:disabled)[b-y9lfchyw8q] {
    background: #fff1f1;
}

.delete-image-button:disabled[b-y9lfchyw8q] {
    cursor: not-allowed;

    opacity: .6;
}

.selected-file[b-y9lfchyw8q] {
    max-width: 100%;

    overflow: hidden;

    color: var(--muted);

    direction: ltr;

    font-size: 15px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.banner-alt-field[b-y9lfchyw8q] {
    margin-top: 17px;
}


/* =========================
   Attributes
========================= */

.card-title-row[b-y9lfchyw8q] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-title-row p[b-y9lfchyw8q] {
    margin-bottom: 0;
}

.add-attribute-button[b-y9lfchyw8q] {
    min-height: 39px;
    padding: 0 13px;

    flex: 0 0 auto;

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.empty-attributes[b-y9lfchyw8q] {
    padding: 22px;

    border: 1px dashed var(--soft);
    border-radius: 12px;

    background: #fafbfc;
    color: var(--muted);

    font-size: 16px;
    text-align: center;
}

.attributes-list[b-y9lfchyw8q] {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.attribute-row[b-y9lfchyw8q] {
    padding: 13px;

    display: grid;
    grid-template-columns:
        36px minmax(0, 1fr) minmax(0, 1.5fr) auto;
    align-items: end;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.attribute-row .field-group[b-y9lfchyw8q] {
    margin-bottom: 0;
}

.attribute-order[b-y9lfchyw8q] {
    width: 36px;
    height: 44px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.remove-attribute-button[b-y9lfchyw8q] {
    min-height: 44px;
    padding: 0 12px;

    border: 1px solid #fecdca;
    border-radius: 10px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}


/* =========================
   Toggle
========================= */

.toggle-fields[b-y9lfchyw8q] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.toggle-field[b-y9lfchyw8q] {
    min-height: 70px;
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;

    cursor: pointer;
}

.toggle-field input[b-y9lfchyw8q] {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: var(--green);
}

.toggle-field > div[b-y9lfchyw8q] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.toggle-field strong[b-y9lfchyw8q] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.toggle-field span[b-y9lfchyw8q] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   Submit
========================= */

.submit-card[b-y9lfchyw8q] {
    grid-column: 1 / -1;

    padding: 18px 22px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.submit-card > div[b-y9lfchyw8q] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-y9lfchyw8q] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.submit-card span[b-y9lfchyw8q] {
    color: var(--muted);

    font-size: 15px;
}

.submit-button[b-y9lfchyw8q] {
    min-width: 155px;
    min-height: 45px;
    padding: 0 18px;

    border: 0;
    border-radius: 11px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    cursor: pointer;

    transition: .2s;
}

.submit-button:hover:not(:disabled)[b-y9lfchyw8q] {
    filter: brightness(.96);
}

.submit-button:disabled[b-y9lfchyw8q] {
    cursor: not-allowed;

    opacity: .65;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .form-grid[b-y9lfchyw8q] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-y9lfchyw8q],
    .submit-card[b-y9lfchyw8q] {
        grid-column: auto;
    }

    .attribute-row[b-y9lfchyw8q] {
        grid-template-columns:
            36px minmax(0, 1fr) minmax(0, 1fr);
    }

    .remove-attribute-button[b-y9lfchyw8q] {
        grid-column: 2 / -1;
    }
}

@media (max-width: 650px) {

    .page-head[b-y9lfchyw8q] {
        flex-direction: column;
    }

    .back-button[b-y9lfchyw8q] {
        width: 100%;
    }

    .two-column-fields[b-y9lfchyw8q],
    .toggle-fields[b-y9lfchyw8q] {
        grid-template-columns: 1fr;
    }

    .card-title-row[b-y9lfchyw8q] {
        align-items: stretch;
        flex-direction: column;
    }

    .add-attribute-button[b-y9lfchyw8q] {
        width: 100%;
    }

    .attribute-row[b-y9lfchyw8q] {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .attribute-row .field-group[b-y9lfchyw8q] {
        grid-column: 1 / -1;
    }

    .remove-attribute-button[b-y9lfchyw8q] {
        grid-column: 1 / -1;
    }

    .content-images-grid[b-y9lfchyw8q] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .submit-card[b-y9lfchyw8q] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-y9lfchyw8q] {
        width: 100%;
    }
}

@media (max-width: 430px) {

    .content-images-grid[b-y9lfchyw8q] {
        grid-template-columns: 1fr;
    }

    .image-actions[b-y9lfchyw8q] {
        width: 100%;

        flex-direction: column;
    }

    .upload-button[b-y9lfchyw8q],
    .delete-image-button[b-y9lfchyw8q] {
        width: 100%;
    }
}

.field-group[b-y9lfchyw8q]  input,
.field-group[b-y9lfchyw8q]  textarea,
.field-group[b-y9lfchyw8q]  select {
    width: 100%;
    min-height: 44px;

    box-sizing: border-box;

    padding: 10px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group[b-y9lfchyw8q]  textarea {
    min-height: 105px;

    resize: vertical;

    line-height: 1.9;
}

.field-group[b-y9lfchyw8q]  input:focus,
.field-group[b-y9lfchyw8q]  textarea:focus,
.field-group[b-y9lfchyw8q]  select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

[b-y9lfchyw8q] .ltr-input,
.ltr-value[b-y9lfchyw8q] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

.toggle-field[b-y9lfchyw8q]  input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    margin: 0;

    accent-color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/PetCategories/ManagePetCategories.razor.rz.scp.css */
.pet-categories-page[b-nudtmjgj00] {
    width: 100%;
}


/* =========================
   Create Button
========================= */

.create-category-button[b-nudtmjgj00] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-category-button span[b-nudtmjgj00] {
    font-size: 20px;
    line-height: 1;
}

.create-category-button:hover[b-nudtmjgj00] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Icons
========================= */

.category-icon[b-nudtmjgj00],
.category-placeholder[b-nudtmjgj00],
[b-nudtmjgj00] .order-item-icon,
[b-nudtmjgj00] .order-item-placeholder {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.category-icon[b-nudtmjgj00],
[b-nudtmjgj00] .order-item-icon {
    display: block;

    background: #fff;

    object-fit: cover;
}

.category-placeholder[b-nudtmjgj00],
[b-nudtmjgj00] .order-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 19px;
}


/* =========================
   Category
========================= */

.category-cell[b-nudtmjgj00] {
    min-width: 150px;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.category-cell strong[b-nudtmjgj00] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.category-cell span[b-nudtmjgj00] {
    color: var(--muted);

    font-size: 14px;
}


/* =========================
   Values
========================= */

.ltr-value[b-nudtmjgj00] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}


/* =========================
   Status
========================= */

.status-badge[b-nudtmjgj00] {
    min-height: 27px;
    padding: 0 9px;

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

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-nudtmjgj00] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-nudtmjgj00] {
    background: #fff1f1;
    color: #b42318;
}


/* =========================
   Actions
========================= */

.row-actions[b-nudtmjgj00] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-nudtmjgj00] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition: .15s;
}

.action-link:hover[b-nudtmjgj00] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .create-category-button[b-nudtmjgj00] {
        flex: 1;
    }

    .row-actions[b-nudtmjgj00] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-link[b-nudtmjgj00] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/PetCategories/ManagePetCategoryDetails.razor.rz.scp.css */
.pet-category-details-page[b-0k7aalhvi6] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-0k7aalhvi6] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.page-head > div:first-child > span[b-0k7aalhvi6] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 15px;
    font-weight: 800;
}

.page-head h1[b-0k7aalhvi6] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-0k7aalhvi6] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.9;
}

.back-button[b-0k7aalhvi6] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.back-button:hover[b-0k7aalhvi6] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   State
========================= */

.state-card[b-0k7aalhvi6] {
    min-height: 180px;
    padding: 24px;

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

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
    color: var(--muted);

    font-size: 17px;
    text-align: center;
}

.state-card strong[b-0k7aalhvi6] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.state-card.error-state[b-0k7aalhvi6] {
    border-color: #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.state-card.error-state strong[b-0k7aalhvi6] {
    color: #b42318;
}


/* =========================
   Grid / Cards
========================= */

.details-grid[b-0k7aalhvi6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-0k7aalhvi6] {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.details-card.full[b-0k7aalhvi6] {
    grid-column: 1 / -1;
}

.details-card h3[b-0k7aalhvi6] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.card-heading[b-0k7aalhvi6] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.card-heading h3[b-0k7aalhvi6] {
    margin-bottom: 5px;
}

.card-heading span[b-0k7aalhvi6] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================
   Profile
========================= */

.profile-card[b-0k7aalhvi6] {
    display: flex;
    align-items: center;

    gap: 17px;
}

.category-detail-icon[b-0k7aalhvi6],
.category-detail-placeholder[b-0k7aalhvi6] {
    width: 82px;
    height: 82px;

    flex: 0 0 82px;

    border: 1px solid var(--soft);
    border-radius: 19px;
}

.category-detail-icon[b-0k7aalhvi6] {
    display: block;

    background: #fff;

    object-fit: cover;
}

.category-detail-placeholder[b-0k7aalhvi6] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 29px;
}

.profile-info[b-0k7aalhvi6] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.profile-info h2[b-0k7aalhvi6] {
    margin: 0;

    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.profile-info span[b-0k7aalhvi6],
.profile-info small[b-0k7aalhvi6] {
    color: var(--muted);

    font-size: 15px;
}

.profile-card > .status-badge[b-0k7aalhvi6] {
    margin-right: auto;
}


/* =========================
   Banner
========================= */

.category-banner[b-0k7aalhvi6] {
    width: 100%;
    max-height: 420px;

    display: block;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fafbfc;

    object-fit: cover;
}

.image-alt[b-0k7aalhvi6] {
    display: block;

    margin-top: 10px;

    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Details
========================= */

.details-list[b-0k7aalhvi6] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-0k7aalhvi6] {
    min-height: 50px;
    padding: 10px 0;

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

    gap: 15px;

    border-bottom: 1px solid #f1f2f4;
}

.detail-item:last-child[b-0k7aalhvi6] {
    border-bottom: 0;
}

.detail-item.vertical[b-0k7aalhvi6] {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
}

.detail-item > span:first-child[b-0k7aalhvi6] {
    color: var(--muted);

    font-size: 16px;
}

.detail-item strong[b-0k7aalhvi6] {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.storage-value[b-0k7aalhvi6] {
    width: 100%;

    overflow-wrap: anywhere;

    color: var(--muted) !important;

    font-size: 14px !important;
}

.ltr-value[b-0k7aalhvi6] {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}


/* =========================
   Status
========================= */

.status-badge[b-0k7aalhvi6] {
    min-height: 28px;
    padding: 0 10px;

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

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-0k7aalhvi6] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-0k7aalhvi6] {
    background: #fff1f1;
    color: #b42318;
}


/* =========================
   Description
========================= */

.description-box[b-0k7aalhvi6],
.empty-box[b-0k7aalhvi6] {
    min-height: 78px;
    padding: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    font-size: 17px;
    line-height: 2;
}

.description-box[b-0k7aalhvi6] {
    background: #fafbfc;
    color: var(--text);

    white-space: pre-line;
}

.empty-box[b-0k7aalhvi6] {
    display: flex;
    align-items: center;
    justify-content: center;

    border-style: dashed;

    background: #fafbfc;
    color: var(--muted);

    font-size: 16px;
    text-align: center;
}


/* =========================
   Attributes
========================= */

.attributes-grid[b-0k7aalhvi6] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;
}

.attribute-item[b-0k7aalhvi6] {
    min-height: 78px;
    padding: 14px;

    display: flex;
    justify-content: center;
    flex-direction: column;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.attribute-item span[b-0k7aalhvi6] {
    color: var(--muted);

    font-size: 15px;
}

.attribute-item strong[b-0k7aalhvi6] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}


/* =========================
   Rich Content
========================= */

.rich-content[b-0k7aalhvi6] {
    min-height: 150px;
    padding: 20px;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfc;
    color: var(--text);

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

.rich-content[b-0k7aalhvi6]  h1,
.rich-content[b-0k7aalhvi6]  h2,
.rich-content[b-0k7aalhvi6]  h3 {
    margin: 22px 0 10px;

    color: var(--text);

    font-weight: 900;
    line-height: 1.6;
}

.rich-content[b-0k7aalhvi6]  h1:first-child,
.rich-content[b-0k7aalhvi6]  h2:first-child,
.rich-content[b-0k7aalhvi6]  h3:first-child {
    margin-top: 0;
}

.rich-content[b-0k7aalhvi6]  h2 {
    font-size: 20px;
}

.rich-content[b-0k7aalhvi6]  h3 {
    font-size: 16px;
}

.rich-content[b-0k7aalhvi6]  p {
    margin: 0 0 13px;
}

.rich-content[b-0k7aalhvi6]  ul,
.rich-content[b-0k7aalhvi6]  ol {
    margin: 12px 0;

    padding-right: 25px;
    padding-left: 0;
}

.rich-content[b-0k7aalhvi6]  blockquote {
    margin: 16px 0;
    padding: 12px 16px;

    border-right: 4px solid var(--green);
    border-radius: 8px;

    background: rgba(58, 125, 68, .06);
    color: var(--muted);
}

.rich-content[b-0k7aalhvi6]  a {
    color: var(--green);

    text-decoration: underline;
}

.rich-content[b-0k7aalhvi6]  img {
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 16px auto;

    display: block;

    border-radius: 12px;
}


/* =========================
   Actions
========================= */

.action-list[b-0k7aalhvi6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.action-button[b-0k7aalhvi6] {
    min-height: 41px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 16px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.action-button:hover[b-0k7aalhvi6] {
    border-color: var(--green);
    color: var(--green);
}

.action-button.primary-action[b-0k7aalhvi6] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.action-button.primary-action:hover[b-0k7aalhvi6] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .details-grid[b-0k7aalhvi6] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-0k7aalhvi6] {
        grid-column: auto;
    }

    .attributes-grid[b-0k7aalhvi6] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .page-head[b-0k7aalhvi6] {
        flex-direction: column;
    }

    .back-button[b-0k7aalhvi6] {
        width: 100%;
    }

    .profile-card[b-0k7aalhvi6] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-card > .status-badge[b-0k7aalhvi6] {
        margin-right: 0;
    }

    .attributes-grid[b-0k7aalhvi6] {
        grid-template-columns: 1fr;
    }

    .action-list[b-0k7aalhvi6] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-0k7aalhvi6] {
        width: 100%;
    }
}

@media (max-width: 450px) {

    .profile-card[b-0k7aalhvi6] {
        flex-direction: column;
    }

    .detail-item[b-0k7aalhvi6] {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Pharmacies/Create.razor.rz.scp.css */
.pharmacy-form-page[b-9rnzt14ka0] {
    width: 100%;
}

.page-head[b-9rnzt14ka0] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-9rnzt14ka0] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-9rnzt14ka0] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-9rnzt14ka0] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-9rnzt14ka0] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-9rnzt14ka0] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-9rnzt14ka0] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-9rnzt14ka0] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-9rnzt14ka0] {
    grid-column: 1 / -1;
}

.form-card h3[b-9rnzt14ka0] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.fields-grid[b-9rnzt14ka0] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-9rnzt14ka0] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group label[b-9rnzt14ka0] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-9rnzt14ka0],
.field-group select[b-9rnzt14ka0],
.field-group textarea[b-9rnzt14ka0] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-9rnzt14ka0],
.field-group select[b-9rnzt14ka0] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-9rnzt14ka0] {
    padding: 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-9rnzt14ka0],
.field-group select:focus[b-9rnzt14ka0],
.field-group textarea:focus[b-9rnzt14ka0] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.description-field[b-9rnzt14ka0] {
    margin-top: 16px;
}

.field-help[b-9rnzt14ka0] {
    color: var(--muted);

    font-size: 15px;
}

.upload-area[b-9rnzt14ka0] {
    min-height: 150px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 12px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.upload-area input[b-9rnzt14ka0] {
    font-family: inherit;
    font-size: 17px;
}

.selected-file[b-9rnzt14ka0] {
    padding: 10px 12px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
}

.selected-file strong[b-9rnzt14ka0] {
    color: var(--text);

    font-size: 16px;
}

.selected-file span[b-9rnzt14ka0],
.upload-help[b-9rnzt14ka0] {
    color: var(--muted);

    font-size: 15px;
}

.switch-row[b-9rnzt14ka0] {
    min-height: 72px;
    padding: 14px;

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

    gap: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.switch-row > div[b-9rnzt14ka0] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row strong[b-9rnzt14ka0] {
    color: var(--text);

    font-size: 17px;
}

.switch-row span[b-9rnzt14ka0] {
    color: var(--muted);

    font-size: 15px;
}

.switch-row input[b-9rnzt14ka0] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}

.submit-card[b-9rnzt14ka0] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-9rnzt14ka0] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-9rnzt14ka0] {
    color: var(--text);

    font-size: 19px;
}

.submit-card span[b-9rnzt14ka0] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-9rnzt14ka0] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-9rnzt14ka0] {
    opacity: .55;

    cursor: not-allowed;
}

.form-error[b-9rnzt14ka0] {
    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}

.loading-card[b-9rnzt14ka0] {
    color: var(--muted);

    font-size: 18px;
}

@media (max-width: 800px) {

    .page-head[b-9rnzt14ka0] {
        flex-direction: column;
    }

    .back-button[b-9rnzt14ka0] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-9rnzt14ka0],
    .fields-grid[b-9rnzt14ka0] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-9rnzt14ka0] {
        grid-column: auto;
    }

    .submit-card[b-9rnzt14ka0] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-9rnzt14ka0] {
        width: 100%;
    }
}

@media (max-width: 520px) {

    .form-card[b-9rnzt14ka0] {
        padding: 16px;
    }
}

.section-description[b-9rnzt14ka0] {
    margin: -9px 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;
}

.upload-placeholder[b-9rnzt14ka0] {
    min-height: 120px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.avatar-preview-box[b-9rnzt14ka0] {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    border-radius: 16px;
}

.avatar-preview[b-9rnzt14ka0] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.upload-icon[b-9rnzt14ka0] {
    width: 100%;
    height: 100%;

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

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-weight: 900;
}

.upload-info[b-9rnzt14ka0] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-9rnzt14ka0] {
    color: var(--text);

    font-size: 18px;
}

.upload-info span[b-9rnzt14ka0] {
    color: var(--muted);

    font-size: 16px;
}

.selected-file[b-9rnzt14ka0] {
    color: var(--green) !important;

    font-weight: 800;
}

.secondary-button[b-9rnzt14ka0] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button input[b-9rnzt14ka0] {
    display: none;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Pharmacies/Details.razor.rz.scp.css */
.pharmacy-details-page[b-z36lc946ar] {
    width: 100%;
}

/* =========================
   Header
========================= */

.page-head[b-z36lc946ar] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-z36lc946ar] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-z36lc946ar] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-z36lc946ar] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-z36lc946ar] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-z36lc946ar],
.primary-button[b-z36lc946ar] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

.back-button[b-z36lc946ar] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-z36lc946ar] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Layout
========================= */

.details-grid[b-z36lc946ar] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-z36lc946ar] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-z36lc946ar] {
    grid-column: 1 / -1;
}

.details-card h3[b-z36lc946ar] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}


/* =========================
   Profile
========================= */

.profile-card[b-z36lc946ar] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.profile-avatar[b-z36lc946ar] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-avatar img[b-z36lc946ar] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-info[b-z36lc946ar] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-z36lc946ar] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.5;
}

.profile-specialty[b-z36lc946ar] {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.profile-meta[b-z36lc946ar] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-z36lc946ar] {
    color: var(--muted);

    font-size: 18px;
    line-height: 1.8;
}

.profile-meta strong[b-z36lc946ar] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.profile-statuses[b-z36lc946ar] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}


/* =========================
   Status Badges
========================= */

.status-badge[b-z36lc946ar] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-z36lc946ar] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-z36lc946ar] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.featured[b-z36lc946ar] {
    background: #fffaeb;
    color: #b54708;
}


/* =========================
   Info
========================= */

.info-grid[b-z36lc946ar] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-z36lc946ar] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-z36lc946ar] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 700;

    line-height: 1.7;
}

.info-item strong[b-z36lc946ar] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================
   Prices
========================= */

.price-list[b-z36lc946ar] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.price-item[b-z36lc946ar] {
    min-height: 82px;
    padding: 15px 16px;

    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.price-item span[b-z36lc946ar] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.price-item strong[b-z36lc946ar] {
    direction: ltr;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.price-item small[b-z36lc946ar] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 800;
}


/* =========================
   Status List
========================= */

.status-list[b-z36lc946ar] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.status-row[b-z36lc946ar] {
    min-height: 58px;
    padding: 0 15px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-z36lc946ar] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.status-row strong[b-z36lc946ar] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}


/* =========================
   Description
========================= */

.description-grid[b-z36lc946ar] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.description-box[b-z36lc946ar] {
    min-height: 150px;
    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box span[b-z36lc946ar] {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;

    line-height: 1.7;
}

.description-box p[b-z36lc946ar] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 500;

    line-height: 2.1;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.description-box.internal[b-z36lc946ar] {
    background: #fffcf5;
}


/* =========================
   Categories
========================= */

.category-grid[b-z36lc946ar] {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.category-card[b-z36lc946ar] {
    min-height: 76px;
    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.category-icon[b-z36lc946ar] {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    overflow: hidden;

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
}

.category-icon img[b-z36lc946ar] {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.category-card strong[b-z36lc946ar] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}

.empty-section[b-z36lc946ar] {
    min-height: 74px;

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

    border: 1px dashed var(--soft);
    border-radius: 12px;

    color: var(--muted);

    font-size: 18px;
}


/* =========================
   Messages
========================= */

.loading-card[b-z36lc946ar] {
    color: var(--muted);

    font-size: 19px;
}

.form-error[b-z36lc946ar] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .info-grid[b-z36lc946ar] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .category-grid[b-z36lc946ar] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .page-head[b-z36lc946ar],
    .profile-card[b-z36lc946ar] {
        flex-direction: column;
    }

    .head-actions[b-z36lc946ar] {
        width: 100%;
    }

    .head-actions a[b-z36lc946ar] {
        flex: 1;
    }

    .details-grid[b-z36lc946ar],
    .info-grid[b-z36lc946ar],
    .description-grid[b-z36lc946ar],
    .category-grid[b-z36lc946ar] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-z36lc946ar] {
        grid-column: auto;
    }

    .profile-card[b-z36lc946ar] {
        align-items: flex-start;
    }

    .profile-statuses[b-z36lc946ar] {
        align-items: flex-start;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-meta[b-z36lc946ar] {
        gap: 8px 14px;
    }
}


@media (max-width: 520px) {

    .details-card[b-z36lc946ar] {
        padding: 17px;
    }

    .head-actions[b-z36lc946ar] {
        flex-direction: column;
    }

    .head-actions a[b-z36lc946ar] {
        width: 100%;

        box-sizing: border-box;
    }

    .page-head h1[b-z36lc946ar] {
        font-size: 25px;
    }

    .profile-info h2[b-z36lc946ar] {
        font-size: 21px;
    }

    .profile-meta[b-z36lc946ar] {
        flex-direction: column;

        gap: 5px;
    }

    .price-item[b-z36lc946ar] {
        grid-template-columns: 1fr auto;
    }

    .price-item small[b-z36lc946ar] {
        grid-column: 2;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Pharmacies/Edit.razor.rz.scp.css */
.edit-pharmacy-page[b-b9klxqqggc] {
    width: 100%;
}
.page-head[b-b9klxqqggc] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-b9klxqqggc] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 19px;
    font-weight: 800;
}

.page-head h1[b-b9klxqqggc] {
    margin: 0;

    color: var(--text);

    font-size: 29px;
    font-weight: 900;
}

.page-head p[b-b9klxqqggc] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-b9klxqqggc] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.form-grid[b-b9klxqqggc] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-b9klxqqggc] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-b9klxqqggc] {
    grid-column: 1 / -1;
}

.form-card h3[b-b9klxqqggc] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.section-description[b-b9klxqqggc] {
    margin: -9px 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;
}

.fields-grid[b-b9klxqqggc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.fields-grid.single[b-b9klxqqggc] {
    grid-template-columns: 1fr;
}

.description-grid[b-b9klxqqggc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-b9klxqqggc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-b9klxqqggc] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.field-group input[b-b9klxqqggc],
.field-group select[b-b9klxqqggc],
.field-group textarea[b-b9klxqqggc] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-b9klxqqggc],
.field-group select[b-b9klxqqggc] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-b9klxqqggc] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-b9klxqqggc],
.field-group select:focus[b-b9klxqqggc],
.field-group textarea:focus[b-b9klxqqggc] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.user-summary[b-b9klxqqggc] {
    display: flex;
    align-items: center;

    gap: 14px;
}

.user-avatar[b-b9klxqqggc] {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    overflow: hidden;

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

    border-radius: 16px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.user-avatar img[b-b9klxqqggc] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.user-summary > div:last-child[b-b9klxqqggc] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.user-summary strong[b-b9klxqqggc] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.user-summary span[b-b9klxqqggc] {
    color: var(--muted);

    font-size: 17px;
}

.switch-list[b-b9klxqqggc] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-b9klxqqggc] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-b9klxqqggc] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-b9klxqqggc] {
    color: var(--text);

    font-size: 18px;
}

.switch-item span[b-b9klxqqggc] {
    color: var(--muted);

    font-size: 16px;
}

.switch-item input[b-b9klxqqggc] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}

.upload-placeholder[b-b9klxqqggc] {
    min-height: 120px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 15px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.avatar-preview-box[b-b9klxqqggc] {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    overflow: hidden;

    border-radius: 16px;
}

.avatar-preview[b-b9klxqqggc] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.upload-icon[b-b9klxqqggc] {
    width: 100%;
    height: 100%;

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

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-weight: 900;
}

.upload-info[b-b9klxqqggc] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-b9klxqqggc] {
    color: var(--text);

    font-size: 18px;
}

.upload-info span[b-b9klxqqggc] {
    color: var(--muted);

    font-size: 16px;
}

.selected-file[b-b9klxqqggc] {
    color: var(--green) !important;

    font-weight: 800;
}

.secondary-button[b-b9klxqqggc] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button input[b-b9klxqqggc] {
    display: none;
}

.submit-card[b-b9klxqqggc] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-b9klxqqggc] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-b9klxqqggc] {
    color: var(--text);

    font-size: 19px;
}

.submit-card span[b-b9klxqqggc] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-b9klxqqggc] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-b9klxqqggc] {
    opacity: .55;
}

.form-error[b-b9klxqqggc] {
    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}

.loading-card[b-b9klxqqggc] {
    color: var(--muted);

    font-size: 18px;
}

@media (max-width: 1100px) {

    .category-selector[b-b9klxqqggc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-b9klxqqggc] {
        flex-direction: column;
    }

    .form-grid[b-b9klxqqggc],
    .fields-grid[b-b9klxqqggc],
    .description-grid[b-b9klxqqggc],
    .category-selector[b-b9klxqqggc] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-b9klxqqggc] {
        grid-column: auto;
    }

    .back-button[b-b9klxqqggc],
    .secondary-button[b-b9klxqqggc],
    .submit-button[b-b9klxqqggc] {
        width: 100%;

        box-sizing: border-box;
    }

    .upload-placeholder[b-b9klxqqggc],
    .submit-card[b-b9klxqqggc] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Pharmacies/ManagePharmacies.razor.rz.scp.css */
.pharmacies-page[b-7pd4sulhkq] {
    width: 100%;
}


/* =========================
   Create Button
========================= */

.create-pharmacy-button[b-7pd4sulhkq] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-pharmacy-button span[b-7pd4sulhkq] {
    font-size: 20px;
    font-weight: 400;

    line-height: 1;
}

.create-pharmacy-button:hover[b-7pd4sulhkq] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Pharmacy Cell
========================= */

.pharmacy-cell[b-7pd4sulhkq] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.pharmacy-avatar[b-7pd4sulhkq] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.pharmacy-cell > div:last-child[b-7pd4sulhkq] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pharmacy-cell strong[b-7pd4sulhkq] {
    font-size: 18px;
}

.pharmacy-cell span[b-7pd4sulhkq] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Status
========================= */

.status-badge[b-7pd4sulhkq] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-7pd4sulhkq] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-7pd4sulhkq] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-7pd4sulhkq] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Row Actions
========================= */

.row-actions[b-7pd4sulhkq] {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-7pd4sulhkq] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
}

.action-link:hover[b-7pd4sulhkq] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Values
========================= */

.ltr-value[b-7pd4sulhkq] {
    direction: ltr;

    text-align: right !important;
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .create-pharmacy-button[b-7pd4sulhkq] {
        flex: 1;
    }
}

.pharmacy-avatar-image[b-7pd4sulhkq] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    object-fit: cover;

    background: #f2f4f7;
}

.user-info[b-7pd4sulhkq] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.user-info strong[b-7pd4sulhkq] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.user-info span[b-7pd4sulhkq] {
    color: var(--muted);

    font-size: 15px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Prescriptions/ManagePrescriptions.razor.rz.scp.css */
.prescriptions-page[b-wtwd043sp9] {
    width: 100%;
    color: var(--text, #475467);
}

.prescription-cell[b-wtwd043sp9] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 160px;
}

.prescription-icon[b-wtwd043sp9] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef6f0;
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 900;
}

.prescription-cell > div:last-child[b-wtwd043sp9],
.patient-cell[b-wtwd043sp9],
.pharmacy-cell[b-wtwd043sp9],
.date-cell[b-wtwd043sp9] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.prescription-cell strong[b-wtwd043sp9],
.patient-cell strong[b-wtwd043sp9],
.pharmacy-cell strong[b-wtwd043sp9],
.date-cell strong[b-wtwd043sp9] {
    color: var(--text, #475467);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.8;
}

.prescription-cell span[b-wtwd043sp9],
.patient-cell span[b-wtwd043sp9],
.pharmacy-cell span[b-wtwd043sp9],
.date-cell span[b-wtwd043sp9] {
    color: var(--muted, #667085);
    font-size: 13px;
    line-height: 1.8;
}

.patient-cell[b-wtwd043sp9],
.pharmacy-cell[b-wtwd043sp9] {
    min-width: 150px;
}

.ltr-value[b-wtwd043sp9] {
    direction: ltr;
    unicode-bidi: isolate;
    align-self: flex-start;
}

.identifier-value[b-wtwd043sp9] {
    display: inline-block;
    max-width: 240px;
    direction: ltr;
    unicode-bidi: plaintext;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.9;
}

.date-cell[b-wtwd043sp9] {
    min-width: 100px;
    white-space: nowrap;
}

.status-badge[b-wtwd043sp9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
    white-space: nowrap;
}

.status-badge.success[b-wtwd043sp9] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-wtwd043sp9] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-wtwd043sp9] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-wtwd043sp9] {
    background: #eff6ff;
    color: #285e8e;
}

.status-badge.neutral[b-wtwd043sp9] {
    background: #f2f4f7;
    color: #667085;
}

.action-link[b-wtwd043sp9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;
    background: #fff;
    color: var(--green, #3a7d44);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.action-link:hover[b-wtwd043sp9] {
    background: #f0f7f2;
    border-color: var(--green, #3a7d44);
}

.action-link[b-wtwd043sp9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;
    background: #fff;
    color: var(--green, #3a7d44);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.action-link:hover[b-wtwd043sp9] {
    border-color: var(--green, #3a7d44);
    background: #f0f7f2;
}

.action-link:focus-visible[b-wtwd043sp9] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Drugs/Create.razor.rz.scp.css */
.admin-drug-form-page[b-1sp1jzqznu] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-1sp1jzqznu] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-1sp1jzqznu] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-1sp1jzqznu] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-1sp1jzqznu] {
    max-width: 700px;

    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-1sp1jzqznu] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-1sp1jzqznu] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Layout
========================= */

.form-grid[b-1sp1jzqznu] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-1sp1jzqznu] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-1sp1jzqznu] {
    grid-column: 1 / -1;
}

.form-card h3[b-1sp1jzqznu] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-description[b-1sp1jzqznu] {
    margin: -10px 0 18px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.9;
}

.loading-card[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 18px;
}


/* =========================
   Fields
========================= */

.fields-grid[b-1sp1jzqznu] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-1sp1jzqznu] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-1sp1jzqznu],
.field-group select[b-1sp1jzqznu],
.field-group textarea[b-1sp1jzqznu] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-1sp1jzqznu],
.field-group select[b-1sp1jzqznu] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-1sp1jzqznu] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-1sp1jzqznu],
.field-group select:focus[b-1sp1jzqznu],
.field-group textarea:focus[b-1sp1jzqznu] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 15px;
}

.description-field[b-1sp1jzqznu] {
    margin-top: 14px;
}


/* =========================
   Medical
========================= */

.medical-grid[b-1sp1jzqznu] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* =========================
   Switches
========================= */

.switch-list[b-1sp1jzqznu] {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-1sp1jzqznu] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-1sp1jzqznu] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 17px;
}

.switch-item span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 15px;
}

.switch-item input[b-1sp1jzqznu] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);

    flex: 0 0 auto;
}


/* =========================
   Pet Categories
========================= */

.category-selector[b-1sp1jzqznu] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.category-option[b-1sp1jzqznu] {
    min-width: 0;
    min-height: 76px;

    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.category-option:hover[b-1sp1jzqznu] {
    border-color: rgba(58, 125, 68, .35);

    background: rgba(58, 125, 68, .025);
}

.category-option:has(input:checked)[b-1sp1jzqznu] {
    border-color: rgba(58, 125, 68, .55);

    background: rgba(58, 125, 68, .055);
}

.category-option > input[b-1sp1jzqznu] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);

    flex: 0 0 auto;
}

.category-icon[b-1sp1jzqznu] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    overflow: hidden;

    border-radius: 11px;

    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-1sp1jzqznu] {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.category-icon span[b-1sp1jzqznu] {
    font-size: 20px;
}

.category-info[b-1sp1jzqznu] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.category-info strong[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.category-info span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 15px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-section[b-1sp1jzqznu] {
    min-height: 70px;

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

    border: 1px dashed var(--soft);
    border-radius: 12px;

    color: var(--muted);

    font-size: 17px;
}


/* =========================
   Product Images
========================= */

.product-upload-box[b-1sp1jzqznu] {
    padding: 16px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.upload-head[b-1sp1jzqznu] {
    display: flex;
    align-items: center;

    gap: 15px;
}

.upload-symbol[b-1sp1jzqznu] {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

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

    border-radius: 15px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-1sp1jzqznu] {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 17px;
}

.upload-info span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 15px;
}

.secondary-button[b-1sp1jzqznu] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.secondary-button:hover[b-1sp1jzqznu] {
    border-color: var(--green);

    color: var(--green);
}

.secondary-button input[b-1sp1jzqznu] {
    display: none;
}


/* =========================
   Image Preview
========================= */

.image-preview-grid[b-1sp1jzqznu] {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}

.image-preview-card[b-1sp1jzqznu] {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
}

.image-preview-wrapper[b-1sp1jzqznu] {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f7f8f9;
}

.image-preview-wrapper img[b-1sp1jzqznu] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.main-image-badge[b-1sp1jzqznu] {
    position: absolute;

    right: 7px;
    bottom: 7px;

    min-height: 24px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: rgba(58, 125, 68, .92);
    color: #fff;

    font-size: 14px;
    font-weight: 800;
}

.image-preview-info[b-1sp1jzqznu] {
    padding: 9px;

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

    gap: 7px;
}

.image-preview-info > div[b-1sp1jzqznu] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.image-preview-info strong[b-1sp1jzqznu] {
    max-width: 100%;

    overflow: hidden;

    color: var(--text);

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-preview-info span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 13px;
}

.remove-image-button[b-1sp1jzqznu] {
    min-height: 28px;
    padding: 0 8px;

    flex: 0 0 auto;

    border: 1px solid #fecdca;
    border-radius: 7px;

    background: #fff1f1;
    color: #b42318;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.upload-empty-state[b-1sp1jzqznu] {
    min-height: 85px;

    margin-top: 16px;

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

    gap: 4px;

    border-top: 1px solid #f0f1f2;
}

.upload-empty-state strong[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 16px;
}

.upload-empty-state span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 14px;
}


/* =========================
   Error
========================= */

.form-error[b-1sp1jzqznu] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
}


/* =========================
   Submit
========================= */

.submit-card[b-1sp1jzqznu] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-1sp1jzqznu] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 18px;
}

.submit-card span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-1sp1jzqznu] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:hover:not(:disabled)[b-1sp1jzqznu] {
    filter: brightness(.96);
}

.submit-button:disabled[b-1sp1jzqznu] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1200px) {

    .image-preview-grid[b-1sp1jzqznu] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 1100px) {

    .category-selector[b-1sp1jzqznu] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .medical-grid[b-1sp1jzqznu] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 800px) {

    .page-head[b-1sp1jzqznu] {
        flex-direction: column;
    }

    .back-button[b-1sp1jzqznu] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-1sp1jzqznu],
    .fields-grid[b-1sp1jzqznu],
    .category-selector[b-1sp1jzqznu] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-1sp1jzqznu] {
        grid-column: auto;
    }

    .upload-head[b-1sp1jzqznu],
    .submit-card[b-1sp1jzqznu] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-1sp1jzqznu],
    .submit-button[b-1sp1jzqznu] {
        width: 100%;

        box-sizing: border-box;
    }
}


@media (max-width: 600px) {

    .image-preview-grid[b-1sp1jzqznu] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 520px) {

    .form-card[b-1sp1jzqznu] {
        padding: 16px;
    }

    .category-option[b-1sp1jzqznu] {
        min-height: 68px;
    }

    .image-preview-grid[b-1sp1jzqznu] {
        grid-template-columns: 1fr;
    }
}

.price-input-wrapper[b-1sp1jzqznu] {
    position: relative;

    width: 100%;
}

.price-input-wrapper input[b-1sp1jzqznu] {
    width: 100%;

    padding-left: 72px;

    direction: ltr;
    text-align: left;
}

.price-input-wrapper > span[b-1sp1jzqznu] {
    position: absolute;

    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 16px;
    font-weight: 800;

    pointer-events: none;
}

.percent-input-wrapper[b-1sp1jzqznu] {
    position: relative;

    width: 100%;
}

.percent-input-wrapper input[b-1sp1jzqznu] {
    width: 100%;

    padding-left: 46px;
}

.percent-input-wrapper > span[b-1sp1jzqznu] {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;

    pointer-events: none;
}


.commission-summary[b-1sp1jzqznu] {
    min-height: 70px;

    padding: 11px 14px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.commission-summary > div[b-1sp1jzqznu] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.commission-summary span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 15px;
}

.commission-summary strong[b-1sp1jzqznu] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}
.rich-fields-grid[b-1sp1jzqznu] {
    display: grid;
    grid-template-columns: 1fr;

    gap: 20px;
}

.rich-field[b-1sp1jzqznu] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.rich-field > label[b-1sp1jzqznu] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.rich-editor-shell[b-1sp1jzqznu] {
    width: 100%;
}

.rich-editor-source[b-1sp1jzqznu] {
    width: 100%;
    min-height: 180px;
}

.rich-editor-shell .ck-editor[b-1sp1jzqznu] {
    width: 100%;
}

.rich-editor-shell .ck-editor__editable[b-1sp1jzqznu] {
    min-height: 220px;

    color: var(--text);

    font-family: inherit;

    line-height: 2;

    direction: rtl;
    text-align: right;
}

.rich-editor-shell .ck-content[b-1sp1jzqznu] {
    font-family: inherit;
}

.rich-editor-shell .ck-content ul[b-1sp1jzqznu],
.rich-editor-shell .ck-content ol[b-1sp1jzqznu] {
    padding-right: 24px;
    padding-left: 0;
}

.rich-editor-shell .ck-toolbar[b-1sp1jzqznu] {
    border-color: var(--soft) !important;
}

.rich-editor-shell .ck-editor__main > .ck-editor__editable[b-1sp1jzqznu] {
    border-color: var(--soft) !important;
}

.percent-input-wrapper[b-1sp1jzqznu] {
    position: relative;

    width: 100%;
}

.percent-input-wrapper input[b-1sp1jzqznu] {
    width: 100%;

    padding-left: 46px;
}

.percent-input-wrapper > span[b-1sp1jzqznu] {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;

    pointer-events: none;
}

.commission-summary[b-1sp1jzqznu] {
    min-height: 70px;

    padding: 11px 14px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.commission-summary > div[b-1sp1jzqznu] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.commission-summary span[b-1sp1jzqznu] {
    color: var(--muted);

    font-size: 15px;
}

.commission-summary strong[b-1sp1jzqznu] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.upload-error[b-1sp1jzqznu] {
    margin-bottom: 14px;
    padding: 11px 13px;

    border: 1px solid #fecdca;
    border-radius: 10px;

    background: #fff2f2;
    color: #b42318;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.8;
}
/* =========================
   CKEditor - Vetban Theme
========================= */

.rich-editor-shell[b-1sp1jzqznu] {
    width: 100%;
}

.rich-editor-shell .ck.ck-editor[b-1sp1jzqznu] {
    width: 100%;
}

.rich-editor-shell .ck.ck-toolbar[b-1sp1jzqznu] {
    min-height: 44px;

    padding: 6px 8px;

    border: 1px solid var(--soft) !important;
    border-bottom: 0 !important;

    border-radius: 12px 12px 0 0 !important;

    background: #fff !important;

    box-shadow: none !important;
}

.rich-editor-shell .ck.ck-toolbar .ck-toolbar__items[b-1sp1jzqznu] {
    gap: 2px;
}

.rich-editor-shell .ck.ck-button[b-1sp1jzqznu] {
    min-width: 32px;
    min-height: 32px;

    border-radius: 8px !important;

    color: var(--text) !important;
}

.rich-editor-shell .ck.ck-button:hover[b-1sp1jzqznu] {
    background: #f4f7f5 !important;
}

.rich-editor-shell .ck.ck-button.ck-on[b-1sp1jzqznu] {
    background: #edf5ef !important;

    color: var(--green) !important;
}

.rich-editor-shell .ck.ck-dropdown__button[b-1sp1jzqznu] {
    border-radius: 8px !important;
}

.rich-editor-shell .ck.ck-editor__main > .ck-editor__editable[b-1sp1jzqznu] {
    min-height: 150px;

    padding: 14px 16px;

    border: 1px solid var(--soft) !important;

    border-radius: 0 0 12px 12px !important;

    background: #fff !important;

    box-shadow: none !important;

    color: var(--text);

    font-family: inherit !important;
    font-size: 17px;
    line-height: 2;

    direction: rtl;
    text-align: right;
}

.rich-editor-shell .ck.ck-editor__main > .ck-editor__editable:focus[b-1sp1jzqznu] {
    border-color: var(--green) !important;

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .08) !important;
}

.rich-editor-shell .ck-content p[b-1sp1jzqznu] {
    margin: 0 0 8px;
}

.rich-editor-shell .ck-content ul[b-1sp1jzqznu],
.rich-editor-shell .ck-content ol[b-1sp1jzqznu] {
    margin: 8px 0;

    padding-right: 22px;
    padding-left: 0;
}

.rich-editor-shell .ck-content blockquote[b-1sp1jzqznu] {
    margin: 10px 0;

    padding: 10px 14px;

    border-right: 3px solid var(--green);
    border-left: 0;

    background: #f8faf8;
}

.rich-editor-shell .ck.ck-editor__editable_inline > :first-child[b-1sp1jzqznu] {
    margin-top: 0;
}

.rich-editor-shell .ck.ck-editor__editable_inline > :last-child[b-1sp1jzqznu] {
    margin-bottom: 0;
}

.rich-editor-shell .ck-placeholder[b-1sp1jzqznu]::before {
    color: var(--muted) !important;

    font-size: 16px;
}
.rich-editor-shell .ck.ck-editor[b-1sp1jzqznu] {
    border-radius: 14px;
    overflow: hidden;
}

.rich-editor-shell .ck.ck-toolbar[b-1sp1jzqznu] {
    border-radius: 14px 14px 0 0 !important;
}

.rich-editor-shell .ck.ck-editor__main > .ck-editor__editable[b-1sp1jzqznu] {
    border-radius: 0 0 14px 14px !important;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Drugs/Details.razor.rz.scp.css */
.admin-drug-details-page[b-sevsc9qnfa] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-sevsc9qnfa] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-sevsc9qnfa] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-sevsc9qnfa] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-sevsc9qnfa] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    text-align: justify;
}

.head-actions[b-sevsc9qnfa] {
    display: flex;
    align-items: center;

    gap: 8px;
}

.primary-button[b-sevsc9qnfa],
.back-button[b-sevsc9qnfa] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.primary-button[b-sevsc9qnfa] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.primary-button:hover[b-sevsc9qnfa] {
    color: #fff;

    filter: brightness(.96);
}

.back-button[b-sevsc9qnfa] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.back-button:hover[b-sevsc9qnfa] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Error
========================= */

.form-error[b-sevsc9qnfa] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 12px;
    font-weight: 700;
}


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

.details-grid[b-sevsc9qnfa] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-sevsc9qnfa] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.details-card.full[b-sevsc9qnfa] {
    grid-column: 1 / -1;
}

.details-card h3[b-sevsc9qnfa] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Product Header
========================= */

.product-head[b-sevsc9qnfa] {
    display: flex;
    align-items: center;

    gap: 18px;
}

.drug-main-image[b-sevsc9qnfa] {
    width: 92px;
    height: 92px;

    flex: 0 0 92px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    object-fit: cover;

    background: #fff;
}

.drug-main-image.placeholder[b-sevsc9qnfa] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}

.product-info[b-sevsc9qnfa] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.product-info h2[b-sevsc9qnfa] {
    margin: 0;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.product-info > span[b-sevsc9qnfa] {
    color: var(--muted);

    font-size: 12px;
}

.badges[b-sevsc9qnfa] {
    margin-top: 5px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}


/* =========================
   Status
========================= */

.status-badge[b-sevsc9qnfa] {
    min-height: 28px;
    padding: 0 10px;

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

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-sevsc9qnfa] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-sevsc9qnfa] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-sevsc9qnfa] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-sevsc9qnfa] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-sevsc9qnfa] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Details
========================= */

.details-list[b-sevsc9qnfa] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-sevsc9qnfa] {
    min-height: 48px;

    padding: 10px 0;

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

    gap: 16px;

    border-bottom: 1px solid #f1f2f4;
}

.detail-row:last-child[b-sevsc9qnfa] {
    border-bottom: 0;
}

.detail-row span[b-sevsc9qnfa] {
    color: var(--muted);

    font-size: 19px;
}

.detail-row strong[b-sevsc9qnfa] {
    color: var(--text);

    font-size: 20x;
    font-weight: 800;

    text-align: left;
}


/* =========================
   Stats
========================= */

.stats-grid[b-sevsc9qnfa] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.stats-grid > div[b-sevsc9qnfa] {
    min-height: 94px;
    padding: 16px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfc;
}

.stats-grid span[b-sevsc9qnfa] {
    color: var(--muted);

    font-size: 15px;
}

.stats-grid strong[b-sevsc9qnfa] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}


/* =========================
   Description / Note
========================= */

.description[b-sevsc9qnfa] {
    margin: 0;

    color: var(--text);

    font-size: 12px;
    line-height: 2;
}

.note-box[b-sevsc9qnfa] {
    padding: 15px;

    border: 1px solid #d1e9ff;
    border-radius: 12px;

    background: #eff8ff;
    color: #175cd3;

    font-size: 12px;
    line-height: 1.9;
}


/* =========================
   Approval
========================= */

.approval-card[b-sevsc9qnfa] {
    border-color: rgba(58, 125, 68, .22);
}

.field-group[b-sevsc9qnfa] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.field-group label[b-sevsc9qnfa] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.field-group textarea[b-sevsc9qnfa] {
    width: 100%;
    min-height: 110px;

    padding: 12px 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    line-height: 1.8;

    resize: vertical;

    outline: none;
}

.field-group textarea:focus[b-sevsc9qnfa] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(58, 125, 68, .07);
}

.approval-actions[b-sevsc9qnfa] {
    margin-top: 16px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.approval-actions button[b-sevsc9qnfa] {
    min-height: 42px;
    padding: 0 15px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.approve-button[b-sevsc9qnfa] {
    border: 1px solid #12b76a;

    background: #12b76a;
    color: #fff;
}

.changes-button[b-sevsc9qnfa] {
    border: 1px solid #f79009;

    background: #fffaeb;
    color: #b54708;
}

.reject-button[b-sevsc9qnfa] {
    border: 1px solid #f04438;

    background: #fff1f1;
    color: #b42318;
}

.approval-actions button:disabled[b-sevsc9qnfa] {
    opacity: .55;
    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .details-grid[b-sevsc9qnfa] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-sevsc9qnfa] {
        grid-column: auto;
    }
}

@media (max-width: 700px) {

    .page-head[b-sevsc9qnfa] {
        flex-direction: column;
    }

    .head-actions[b-sevsc9qnfa] {
        width: 100%;
    }

    .head-actions > *[b-sevsc9qnfa] {
        flex: 1;
    }

    .product-head[b-sevsc9qnfa] {
        align-items: flex-start;
    }
}

@media (max-width: 520px) {

    .product-head[b-sevsc9qnfa] {
        flex-direction: column;
    }

    .stats-grid[b-sevsc9qnfa] {
        grid-template-columns: 1fr;
    }

    .approval-actions[b-sevsc9qnfa] {
        flex-direction: column;
    }

    .approval-actions button[b-sevsc9qnfa] {
        width: 100%;
    }
}

.main-image-shell[b-sevsc9qnfa] {
    width: 110px;
    height: 110px;

    flex: 0 0 110px;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #f7f8f9;
}

.main-image-shell .drug-main-image[b-sevsc9qnfa] {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border: 0;
    border-radius: 0;
}

.product-type-label[b-sevsc9qnfa] {
    color: var(--green) !important;

    font-size: 18px !important;
    font-weight: 800;
}

.english-name[b-sevsc9qnfa] {
    direction: ltr;

    color: var(--muted);
}

.section-title-row[b-sevsc9qnfa] {
    margin-bottom: 18px;

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

    gap: 12px;
}

.section-title-row h3[b-sevsc9qnfa] {
    margin: 0;
}

.section-title-row > span[b-sevsc9qnfa] {
    color: var(--muted);

    font-size: 18px;
}

.drug-gallery[b-sevsc9qnfa] {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 13px;
}

.gallery-item[b-sevsc9qnfa] {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fff;
}

.gallery-image-shell[b-sevsc9qnfa] {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f7f8f9;
}

.gallery-image-shell img[b-sevsc9qnfa] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.gallery-placeholder[b-sevsc9qnfa] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.main-image-badge[b-sevsc9qnfa] {
    position: absolute;

    right: 8px;
    bottom: 8px;

    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: rgba(58, 125, 68, .92);
    color: #fff;

    font-size: 9px;
    font-weight: 800;
}

.gallery-meta[b-sevsc9qnfa] {
    padding: 9px 10px;

    display: flex;
    justify-content: space-between;

    gap: 8px;
}

.gallery-meta span[b-sevsc9qnfa] {
    color: var(--muted);

    font-size: 15px;
}

.gallery-meta strong[b-sevsc9qnfa] {
    color: var(--text);

    font-size: 15px;
}

.medical-details-grid[b-sevsc9qnfa] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 13px;
}

.medical-detail[b-sevsc9qnfa] {
    min-height: 130px;
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.medical-detail > span[b-sevsc9qnfa] {
    display: block;

    margin-bottom: 9px;

    color: var(--green);

    font-size: 15px;
    font-weight: 800;
}

.medical-detail p[b-sevsc9qnfa] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    line-height: 2;
}

.pet-category-list[b-sevsc9qnfa] {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.pet-category-chip[b-sevsc9qnfa] {
    min-height: 50px;
    padding: 7px 11px;

    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;

    gap: 8px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.pet-category-chip img[b-sevsc9qnfa],
.pet-icon-placeholder[b-sevsc9qnfa] {
    width: 64px;
    height: 64px;

    flex: 0 0 34px;

    border-radius: 9px;
}

.pet-category-chip img[b-sevsc9qnfa] {
    object-fit: contain;
}

.pet-icon-placeholder[b-sevsc9qnfa] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .08);
}

.pet-category-chip strong[b-sevsc9qnfa] {
    color: var(--text);

    font-size: 17px;
}

.empty-details[b-sevsc9qnfa] {
    min-height: 70px;

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

    border: 1px dashed var(--soft);
    border-radius: 11px;

    color: var(--muted);

    font-size: 17px;
}

@media (max-width: 1050px) {

    .drug-gallery[b-sevsc9qnfa] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .medical-details-grid[b-sevsc9qnfa] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .drug-gallery[b-sevsc9qnfa] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* =========================
   Drug Extra Information
========================= */

.drug-info-grid[b-sevsc9qnfa] {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}

.drug-info-item[b-sevsc9qnfa] {
    min-width: 0;
    min-height: 72px;

    padding: 12px 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 6px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfb;
}

.drug-info-item > span:first-child[b-sevsc9qnfa] {
    color: var(--muted);

    font-size: 16px;
    font-weight: 700;
}

.drug-info-item > strong[b-sevsc9qnfa] {
    color: var(--text);

    font-size: 18px;
    font-weight: 850;

    line-height: 1.8;
}


/* =========================
   Rich Text Content
========================= */

.rich-detail-card[b-sevsc9qnfa] {
    overflow: hidden;
}

.rich-content-box[b-sevsc9qnfa] {
    width: 100%;

    box-sizing: border-box;

    padding: 18px 20px;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fafbfb;

    color: var(--text);

    font-size: 18px;
    line-height: 2.2;

    direction: rtl;
    text-align: right;

    overflow-wrap: anywhere;
}

.rich-content-box p[b-sevsc9qnfa] {
    margin: 0 0 10px;
}

.rich-content-box p:last-child[b-sevsc9qnfa] {
    margin-bottom: 0;
}

.rich-content-box strong[b-sevsc9qnfa] {
    font-weight: 900;
}

.rich-content-box em[b-sevsc9qnfa] {
    font-style: italic;
}

.rich-content-box ul[b-sevsc9qnfa],
.rich-content-box ol[b-sevsc9qnfa] {
    margin: 8px 0 12px;

    padding-right: 25px;
    padding-left: 0;
}

.rich-content-box li[b-sevsc9qnfa] {
    margin-bottom: 5px;
}

.rich-content-box a[b-sevsc9qnfa] {
    color: var(--green);

    font-weight: 700;

    text-decoration: underline;

    text-underline-offset: 3px;
}

.warning-content[b-sevsc9qnfa] {
    background: #fffdf7;
}

.danger-content[b-sevsc9qnfa] {
    background: #fffafa;
}


/* =========================
   Price
========================= */

.price-value[b-sevsc9qnfa] {
    color: var(--green) !important;

    font-size: 15px !important;
}

.commission-value[b-sevsc9qnfa] {
    color: var(--green) !important;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .drug-info-grid[b-sevsc9qnfa] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 650px) {

    .drug-info-grid[b-sevsc9qnfa] {
        grid-template-columns: 1fr;
    }

    .rich-content-box[b-sevsc9qnfa] {
        padding: 14px;

        font-size: 16px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Drugs/Edit.razor.rz.scp.css */
.admin-drug-form-page[b-7o095d7ivc] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-7o095d7ivc] {
    margin-bottom: 22px;


    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-7o095d7ivc] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-7o095d7ivc] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-7o095d7ivc] {
    max-width: 700px;

    margin: 8px 0 0;

    color: var(--muted);
    text-align: justify;

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-7o095d7ivc] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-7o095d7ivc] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Layout
========================= */

.form-grid[b-7o095d7ivc] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-7o095d7ivc] {
    min-width: 0;

    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-7o095d7ivc] {
    grid-column: 1 / -1;
}

.form-card h3[b-7o095d7ivc] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-description[b-7o095d7ivc] {
    margin: -10px 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.9;
}

.loading-card[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 17px;
}


/* =========================
   Fields
========================= */

.fields-grid[b-7o095d7ivc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-7o095d7ivc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group > label:first-child[b-7o095d7ivc] {
    color: var(--text);

    font-size: 16px;
    font-weight: 800;
}

.field-group input[b-7o095d7ivc],
.field-group select[b-7o095d7ivc],
.field-group textarea[b-7o095d7ivc] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    outline: none;
}

.field-group input[b-7o095d7ivc],
.field-group select[b-7o095d7ivc] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-7o095d7ivc] {
    min-height: 145px;

    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-7o095d7ivc],
.field-group select:focus[b-7o095d7ivc],
.field-group textarea:focus[b-7o095d7ivc] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 16px;
}

.description-field[b-7o095d7ivc] {
    margin-top: 14px;
}


/* =========================
   Medical
========================= */

.medical-grid[b-7o095d7ivc] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* =========================
   Switches
========================= */

.switch-list[b-7o095d7ivc] {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-7o095d7ivc] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-7o095d7ivc] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-7o095d7ivc] {
    color: var(--text);

    font-size: 16px;
}

.switch-item span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 16px;
}

.switch-item input[b-7o095d7ivc] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);

    flex: 0 0 auto;
}


/* =========================
   Pet Categories
========================= */

.category-selector[b-7o095d7ivc] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.category-option[b-7o095d7ivc] {
    min-width: 0;
    min-height: 76px;

    padding: 11px 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.category-option:hover[b-7o095d7ivc] {
    border-color: rgba(58, 125, 68, .35);

    background: rgba(58, 125, 68, .025);
}

.category-option:has(input:checked)[b-7o095d7ivc] {
    border-color: rgba(58, 125, 68, .55);

    background: rgba(58, 125, 68, .055);
}

.category-option > input[b-7o095d7ivc] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);

    flex: 0 0 auto;
}

.category-icon[b-7o095d7ivc] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    overflow: hidden;

    border-radius: 11px;

    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-7o095d7ivc] {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.category-icon span[b-7o095d7ivc] {
    font-size: 20px;
}

.category-info[b-7o095d7ivc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.category-info strong[b-7o095d7ivc] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.category-info span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 15px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-section[b-7o095d7ivc] {
    min-height: 70px;

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

    border: 1px dashed var(--soft);
    border-radius: 12px;

    color: var(--muted);

    font-size: 16px;
}


/* =========================
   Product Images
========================= */

.product-upload-box[b-7o095d7ivc] {
    padding: 16px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.upload-head[b-7o095d7ivc] {
    display: flex;
    align-items: center;

    gap: 15px;
}

.upload-symbol[b-7o095d7ivc] {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

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

    border-radius: 15px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}

.upload-info[b-7o095d7ivc] {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-info strong[b-7o095d7ivc] {
    color: var(--text);

    font-size: 16px;
}

.upload-info span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 15px;
}

.secondary-button[b-7o095d7ivc] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.secondary-button:hover[b-7o095d7ivc] {
    border-color: var(--green);

    color: var(--green);
}

.secondary-button input[b-7o095d7ivc] {
    display: none;
}


/* =========================
   Image Preview
========================= */

.image-preview-grid[b-7o095d7ivc] {
    margin-top: 16px;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 12px;
}

.image-preview-card[b-7o095d7ivc] {
    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
}

.image-preview-wrapper[b-7o095d7ivc] {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #f7f8f9;
}

.image-preview-wrapper img[b-7o095d7ivc] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.main-image-badge[b-7o095d7ivc] {
    position: absolute;

    right: 7px;
    bottom: 7px;

    min-height: 24px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: rgba(58, 125, 68, .92);
    color: #fff;

    font-size: 14px;
    font-weight: 800;
}

.image-preview-info[b-7o095d7ivc] {
    padding: 9px;

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

    gap: 7px;
}

.image-preview-info > div[b-7o095d7ivc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.image-preview-info strong[b-7o095d7ivc] {
    max-width: 100%;

    overflow: hidden;

    color: var(--text);

    font-size: 14px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-preview-info span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 13px;
}

.remove-image-button[b-7o095d7ivc] {
    min-height: 28px;
    padding: 0 8px;

    flex: 0 0 auto;

    border: 1px solid #fecdca;
    border-radius: 7px;

    background: #fff1f1;
    color: #b42318;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.upload-empty-state[b-7o095d7ivc] {
    min-height: 85px;

    margin-top: 16px;

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

    gap: 4px;

    border-top: 1px solid #f0f1f2;
}

.upload-empty-state strong[b-7o095d7ivc] {
    color: var(--text);

    font-size: 15px;
}

.upload-empty-state span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 14px;
}


/* =========================
   Error
========================= */

.form-error[b-7o095d7ivc] {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 18px;
    padding: 13px 15px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 16px;
}


/* =========================
   Submit
========================= */

.submit-card[b-7o095d7ivc] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-7o095d7ivc] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-7o095d7ivc] {
    color: var(--text);

    font-size: 16px;
}

.submit-card span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 15px;
}

.submit-button[b-7o095d7ivc] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.submit-button:hover:not(:disabled)[b-7o095d7ivc] {
    filter: brightness(.96);
}

.submit-button:disabled[b-7o095d7ivc] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1200px) {

    .image-preview-grid[b-7o095d7ivc] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 1100px) {

    .category-selector[b-7o095d7ivc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .medical-grid[b-7o095d7ivc] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 800px) {

    .page-head[b-7o095d7ivc] {
        flex-direction: column;
    }

    .back-button[b-7o095d7ivc] {
        width: 100%;

        box-sizing: border-box;
    }

    .form-grid[b-7o095d7ivc],
    .fields-grid[b-7o095d7ivc],
    .category-selector[b-7o095d7ivc] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-7o095d7ivc] {
        grid-column: auto;
    }

    .upload-head[b-7o095d7ivc],
    .submit-card[b-7o095d7ivc] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-7o095d7ivc],
    .submit-button[b-7o095d7ivc] {
        width: 100%;

        box-sizing: border-box;
    }
}


@media (max-width: 600px) {

    .image-preview-grid[b-7o095d7ivc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 520px) {

    .form-card[b-7o095d7ivc] {
        padding: 16px;
    }

    .category-option[b-7o095d7ivc] {
        min-height: 68px;
    }

    .image-preview-grid[b-7o095d7ivc] {
        grid-template-columns: 1fr;
    }
}

.price-input-wrapper[b-7o095d7ivc] {
    position: relative;

    width: 100%;
}

.price-input-wrapper input[b-7o095d7ivc] {
    width: 100%;

    padding-left: 72px;

    direction: ltr;
    text-align: left;
}

.price-input-wrapper > span[b-7o095d7ivc] {
    position: absolute;

    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 15px;
    font-weight: 800;

    pointer-events: none;
}

.percent-input-wrapper[b-7o095d7ivc] {
    position: relative;

    width: 100%;
}

.percent-input-wrapper input[b-7o095d7ivc] {
    width: 100%;

    padding-left: 46px;
}

.percent-input-wrapper > span[b-7o095d7ivc] {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;

    pointer-events: none;
}


.commission-summary[b-7o095d7ivc] {
    min-height: 70px;

    padding: 11px 14px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.commission-summary > div[b-7o095d7ivc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.commission-summary span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 15px;
}

.commission-summary strong[b-7o095d7ivc] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}
.rich-fields-grid[b-7o095d7ivc] {
    display: grid;
    grid-template-columns: 1fr;

    gap: 20px;
}

.rich-field[b-7o095d7ivc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.rich-field > label[b-7o095d7ivc] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.rich-editor-shell[b-7o095d7ivc] {
    width: 100%;
}

.rich-editor-source[b-7o095d7ivc] {
    width: 100%;
    min-height: 180px;
}

.rich-editor-shell .ck-editor[b-7o095d7ivc] {
    width: 100%;
}

.rich-editor-shell .ck-editor__editable[b-7o095d7ivc] {
    min-height: 220px;

    color: var(--text);

    font-family: inherit;

    line-height: 2;

    direction: rtl;
    text-align: right;
}

.rich-editor-shell .ck-content[b-7o095d7ivc] {
    font-family: inherit;
}

.rich-editor-shell .ck-content ul[b-7o095d7ivc],
.rich-editor-shell .ck-content ol[b-7o095d7ivc] {
    padding-right: 24px;
    padding-left: 0;
}

.rich-editor-shell .ck-toolbar[b-7o095d7ivc] {
    border-color: var(--soft) !important;
}

.rich-editor-shell .ck-editor__main > .ck-editor__editable[b-7o095d7ivc] {
    border-color: var(--soft) !important;
}

.percent-input-wrapper[b-7o095d7ivc] {
    position: relative;

    width: 100%;
}

.percent-input-wrapper input[b-7o095d7ivc] {
    width: 100%;

    padding-left: 46px;
}

.percent-input-wrapper > span[b-7o095d7ivc] {
    position: absolute;

    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--muted);

    font-size: 16px;
    font-weight: 800;

    pointer-events: none;
}

.commission-summary[b-7o095d7ivc] {
    min-height: 70px;

    padding: 11px 14px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fafbfc;
}

.commission-summary > div[b-7o095d7ivc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.commission-summary span[b-7o095d7ivc] {
    color: var(--muted);

    font-size: 17px;
}

.commission-summary strong[b-7o095d7ivc] {
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.upload-error[b-7o095d7ivc] {
    margin-bottom: 14px;
    padding: 11px 13px;

    border: 1px solid #fecdca;
    border-radius: 10px;

    background: #fff2f2;
    color: #b42318;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.8;
}
/* =========================
   CKEditor - Vetban Theme
========================= */

.rich-editor-shell[b-7o095d7ivc] {
    width: 100%;
}

.rich-editor-shell .ck.ck-editor[b-7o095d7ivc] {
    width: 100%;
}

.rich-editor-shell .ck.ck-toolbar[b-7o095d7ivc] {
    min-height: 44px;

    padding: 6px 8px;

    border: 1px solid var(--soft) !important;
    border-bottom: 0 !important;

    border-radius: 12px 12px 0 0 !important;

    background: #fff !important;

    box-shadow: none !important;
}

.rich-editor-shell .ck.ck-toolbar .ck-toolbar__items[b-7o095d7ivc] {
    gap: 2px;
}

.rich-editor-shell .ck.ck-button[b-7o095d7ivc] {
    min-width: 32px;
    min-height: 32px;

    border-radius: 8px !important;

    color: var(--text) !important;
}

.rich-editor-shell .ck.ck-button:hover[b-7o095d7ivc] {
    background: #f4f7f5 !important;
}

.rich-editor-shell .ck.ck-button.ck-on[b-7o095d7ivc] {
    background: #edf5ef !important;

    color: var(--green) !important;
}

.rich-editor-shell .ck.ck-dropdown__button[b-7o095d7ivc] {
    border-radius: 8px !important;
}

.rich-editor-shell .ck.ck-editor__main > .ck-editor__editable[b-7o095d7ivc] {
    min-height: 150px;

    padding: 14px 16px;

    border: 1px solid var(--soft) !important;

    border-radius: 0 0 12px 12px !important;

    background: #fff !important;

    box-shadow: none !important;

    color: var(--text);

    font-family: inherit !important;
    font-size: 15px;
    line-height: 2;

    direction: rtl;
    text-align: right;
}

.rich-editor-shell .ck.ck-editor__main > .ck-editor__editable:focus[b-7o095d7ivc] {
    border-color: var(--green) !important;

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .08) !important;
}

.rich-editor-shell .ck-content p[b-7o095d7ivc] {
    margin: 0 0 8px;
}

.rich-editor-shell .ck-content ul[b-7o095d7ivc],
.rich-editor-shell .ck-content ol[b-7o095d7ivc] {
    margin: 8px 0;

    padding-right: 22px;
    padding-left: 0;
}

.rich-editor-shell .ck-content blockquote[b-7o095d7ivc] {
    margin: 10px 0;

    padding: 10px 14px;

    border-right: 3px solid var(--green);
    border-left: 0;

    background: #f8faf8;
}

.rich-editor-shell .ck.ck-editor__editable_inline > :first-child[b-7o095d7ivc] {
    margin-top: 0;
}

.rich-editor-shell .ck.ck-editor__editable_inline > :last-child[b-7o095d7ivc] {
    margin-bottom: 0;
}

.rich-editor-shell .ck-placeholder[b-7o095d7ivc]::before {
    color: var(--muted) !important;

    font-size: 16px;
}
.rich-editor-shell .ck.ck-editor[b-7o095d7ivc] {
    border-radius: 14px;
    overflow: hidden;
}

.rich-editor-shell .ck.ck-toolbar[b-7o095d7ivc] {
    border-radius: 14px 14px 0 0 !important;
}

.rich-editor-shell .ck.ck-editor__main > .ck-editor__editable[b-7o095d7ivc] {
    border-radius: 0 0 14px 14px !important;
}

/* =========================
   Edit - Current Images
========================= */

.image-placeholder[b-7o095d7ivc] {
    width: 100%;
    height: 100%;

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

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Drugs/ManageDrugs.razor.rz.scp.css */
.drugs-page[b-ua2v5qbrwy] {
    width: 100%;
}

.drug-cell[b-ua2v5qbrwy] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.drug-avatar[b-ua2v5qbrwy],
[b-ua2v5qbrwy] .drug-order-avatar {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

[b-ua2v5qbrwy] .drug-order-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.drug-cell > div:last-child[b-ua2v5qbrwy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drug-cell strong[b-ua2v5qbrwy] {
    font-size: 18px;
}

.drug-cell span[b-ua2v5qbrwy] {
    color: var(--muted);
    font-size: 15px;
}

.status-badge[b-ua2v5qbrwy] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ua2v5qbrwy] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-ua2v5qbrwy] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-ua2v5qbrwy] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-ua2v5qbrwy] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-ua2v5qbrwy] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-ua2v5qbrwy] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-ua2v5qbrwy] {
    border-color: var(--green);
    color: var(--green);
}

.success-action[b-ua2v5qbrwy] {
    color: #027a48;
}

.danger-action[b-ua2v5qbrwy] {
    color: #b42318;
}

/* =========================
   Create Drug Button
========================= */

.create-drug-button[b-ua2v5qbrwy] {
    min-height: 42px;
    padding: 0 16px;

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

    gap: 7px;

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.create-drug-button span[b-ua2v5qbrwy] {
    color: inherit;

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

.create-drug-button:hover[b-ua2v5qbrwy] {
    background: #2f743b;
    border-color: #2f743b;

    color: #fff;

    transform: translateY(-1px);
}

.create-drug-button:active[b-ua2v5qbrwy] {
    transform: translateY(0);
}

.drug-image-shell[b-ua2v5qbrwy] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #f7f8f9;
}

.drug-image[b-ua2v5qbrwy] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.drug-info[b-ua2v5qbrwy] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.drug-info strong[b-ua2v5qbrwy] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.drug-info span[b-ua2v5qbrwy],
.drug-info small[b-ua2v5qbrwy] {
    color: var(--muted);

    font-size: 14px;
}

.drug-info small span[b-ua2v5qbrwy] {
    font-size: inherit;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Foods/Create.razor.rz.scp.css */
.admin-food-form-page[b-83n4iyr6ma] {
    width: 100%;
}

.page-head[b-83n4iyr6ma] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-83n4iyr6ma] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-83n4iyr6ma] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-83n4iyr6ma] {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-83n4iyr6ma] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-83n4iyr6ma] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-83n4iyr6ma] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-card[b-83n4iyr6ma] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-83n4iyr6ma] {
    grid-column: 1 / -1;
}

.form-card h3[b-83n4iyr6ma] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.section-description[b-83n4iyr6ma] {
    margin: -10px 0 18px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
}

.loading-card[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 18px;
}

.fields-grid[b-83n4iyr6ma] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field-group[b-83n4iyr6ma] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-group > label:first-child[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-83n4iyr6ma],
.field-group select[b-83n4iyr6ma],
.field-group textarea[b-83n4iyr6ma] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    outline: none;
}

.field-group input[b-83n4iyr6ma],
.field-group select[b-83n4iyr6ma] {
    min-height: 44px;
    padding: 0 12px;
}

.field-group textarea[b-83n4iyr6ma] {
    min-height: 145px;
    padding: 12px;
    resize: vertical;
    line-height: 1.9;
}

.field-group input:focus[b-83n4iyr6ma],
.field-group select:focus[b-83n4iyr6ma],
.field-group textarea:focus[b-83n4iyr6ma] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 15px;
}

.price-input-wrapper[b-83n4iyr6ma],
.percent-input-wrapper[b-83n4iyr6ma] {
    position: relative;
    width: 100%;
}

.price-input-wrapper input[b-83n4iyr6ma] {
    width: 100%;
    padding-left: 72px;
    direction: ltr;
    text-align: left;
}

.percent-input-wrapper input[b-83n4iyr6ma] {
    width: 100%;
    padding-left: 46px;
}

.price-input-wrapper > span[b-83n4iyr6ma],
.percent-input-wrapper > span[b-83n4iyr6ma] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 16px;
    font-weight: 800;
    pointer-events: none;
}

.commission-summary[b-83n4iyr6ma] {
    min-height: 70px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fafbfc;
}

.commission-summary > div[b-83n4iyr6ma] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commission-summary span[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 15px;
}

.commission-summary strong[b-83n4iyr6ma] {
    color: var(--green);
    font-size: 17px;
    font-weight: 900;
}

.rich-fields-grid[b-83n4iyr6ma] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.rich-field[b-83n4iyr6ma] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rich-field > label[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.category-selector[b-83n4iyr6ma] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.category-option[b-83n4iyr6ma] {
    min-width: 0;
    min-height: 76px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.category-option:hover[b-83n4iyr6ma] {
    border-color: rgba(58, 125, 68, .35);
    background: rgba(58, 125, 68, .025);
}

.category-option:has(input:checked)[b-83n4iyr6ma] {
    border-color: rgba(58, 125, 68, .55);
    background: rgba(58, 125, 68, .055);
}

.category-option > input[b-83n4iyr6ma] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.category-icon[b-83n4iyr6ma] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-83n4iyr6ma] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-icon span[b-83n4iyr6ma] {
    font-size: 20px;
}

.category-info[b-83n4iyr6ma] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-info strong[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.category-info span[b-83n4iyr6ma] {
    overflow: hidden;
    color: var(--muted);
    font-size: 15px;
    text-overflow: ellipsis;
}

.empty-section[b-83n4iyr6ma] {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 17px;
}

.product-upload-box[b-83n4iyr6ma] {
    padding: 16px;
    border: 1px dashed var(--soft);
    border-radius: 14px;
    background: #fbfcfd;
}

.upload-head[b-83n4iyr6ma] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-symbol[b-83n4iyr6ma] {
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-83n4iyr6ma] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upload-info strong[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 17px;
}

.upload-info span[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 15px;
}

.secondary-button[b-83n4iyr6ma] {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.secondary-button:hover[b-83n4iyr6ma] {
    border-color: var(--green);
    color: var(--green);
}

.secondary-button input[b-83n4iyr6ma] {
    display: none;
}

.image-preview-grid[b-83n4iyr6ma] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.image-preview-card[b-83n4iyr6ma] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fff;
}

.image-preview-wrapper[b-83n4iyr6ma] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f8f9;
}

.image-preview-wrapper img[b-83n4iyr6ma] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.main-image-badge[b-83n4iyr6ma] {
    position: absolute;
    right: 7px;
    bottom: 7px;
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(58, 125, 68, .92);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.image-preview-info[b-83n4iyr6ma] {
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.image-preview-info > div[b-83n4iyr6ma] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.image-preview-info strong[b-83n4iyr6ma] {
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-preview-info span[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 13px;
}

.remove-image-button[b-83n4iyr6ma] {
    min-height: 28px;
    padding: 0 8px;
    flex: 0 0 auto;
    border: 1px solid #fecdca;
    border-radius: 7px;
    background: #fff1f1;
    color: #b42318;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.upload-empty-state[b-83n4iyr6ma] {
    min-height: 85px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #f0f1f2;
}

.upload-empty-state strong[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 16px;
}

.upload-empty-state span[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 14px;
}

.upload-error[b-83n4iyr6ma],
.form-error[b-83n4iyr6ma] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 17px;
}

.form-error[b-83n4iyr6ma] {
    margin-bottom: 18px;
}

.upload-error[b-83n4iyr6ma] {
    margin-bottom: 14px;
}

.switch-list[b-83n4iyr6ma] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-item[b-83n4iyr6ma] {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
}

.switch-item > div[b-83n4iyr6ma] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.switch-item strong[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 17px;
}

.switch-item span[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 15px;
}

.switch-item input[b-83n4iyr6ma] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.submit-card[b-83n4iyr6ma] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-83n4iyr6ma] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submit-card strong[b-83n4iyr6ma] {
    color: var(--text);
    font-size: 19px;
}

.submit-card span[b-83n4iyr6ma] {
    color: var(--muted);
    font-size: 16px;
}

.submit-button[b-83n4iyr6ma] {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.submit-button:hover:not(:disabled)[b-83n4iyr6ma] {
    filter: brightness(.96);
}

.submit-button:disabled[b-83n4iyr6ma] {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .image-preview-grid[b-83n4iyr6ma] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .category-selector[b-83n4iyr6ma] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-83n4iyr6ma] {
        flex-direction: column;
    }

    .back-button[b-83n4iyr6ma] {
        width: 100%;
        box-sizing: border-box;
    }

    .form-grid[b-83n4iyr6ma],
    .fields-grid[b-83n4iyr6ma],
    .category-selector[b-83n4iyr6ma] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-83n4iyr6ma] {
        grid-column: auto;
    }

    .upload-head[b-83n4iyr6ma],
    .submit-card[b-83n4iyr6ma] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-83n4iyr6ma],
    .submit-button[b-83n4iyr6ma] {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .image-preview-grid[b-83n4iyr6ma] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .form-card[b-83n4iyr6ma] {
        padding: 16px;
    }

    .category-option[b-83n4iyr6ma] {
        min-height: 68px;
    }

    .image-preview-grid[b-83n4iyr6ma],
    .commission-summary[b-83n4iyr6ma] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Foods/Details.razor.rz.scp.css */
.admin-food-details-page[b-atn4u6gkn9] {
    width: 100%;
}

.page-head[b-atn4u6gkn9] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-atn4u6gkn9] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-atn4u6gkn9] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-atn4u6gkn9] {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-atn4u6gkn9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.primary-button[b-atn4u6gkn9],
.back-button[b-atn4u6gkn9] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.primary-button[b-atn4u6gkn9] {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
}

.primary-button:hover[b-atn4u6gkn9] {
    filter: brightness(.96);
    color: #fff;
}

.back-button[b-atn4u6gkn9] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.back-button:hover[b-atn4u6gkn9] {
    border-color: var(--green);
    color: var(--green);
}

.details-grid[b-atn4u6gkn9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.details-card[b-atn4u6gkn9] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.details-card.full[b-atn4u6gkn9] {
    grid-column: 1 / -1;
}

.details-card h3[b-atn4u6gkn9] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.product-head[b-atn4u6gkn9] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.main-image-shell[b-atn4u6gkn9],
.food-main-image[b-atn4u6gkn9] {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    overflow: hidden;
    border-radius: 18px;
}

.main-image-shell[b-atn4u6gkn9] {
    border: 1px solid var(--soft);
    background: #f7f8f9;
}

.food-main-image[b-atn4u6gkn9] {
    display: block;
    object-fit: cover;
}

.food-main-image.placeholder[b-atn4u6gkn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 19px;
    font-weight: 900;
}

.product-info[b-atn4u6gkn9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.product-type-label[b-atn4u6gkn9] {
    color: var(--green);
    font-size: 16px;
    font-weight: 900;
}

.product-info h2[b-atn4u6gkn9] {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 900;
}

.product-info > span:not(.product-type-label):not(.english-name)[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 17px;
}

.english-name[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 16px;
    direction: ltr;
    text-align: right;
}

.badges[b-atn4u6gkn9] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.status-badge[b-atn4u6gkn9] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-atn4u6gkn9] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-atn4u6gkn9] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-atn4u6gkn9] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-atn4u6gkn9] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-atn4u6gkn9] {
    background: #f2f4f7;
    color: #667085;
}

.details-list[b-atn4u6gkn9] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-atn4u6gkn9] {
    min-height: 45px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #f0f1f2;
}

.detail-row:last-child[b-atn4u6gkn9] {
    border-bottom: 0;
}

.detail-row > span:first-child[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 16px;
}

.detail-row strong[b-atn4u6gkn9] {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
    text-align: left;
}

.ltr-value[b-atn4u6gkn9] {
    direction: ltr;
    unicode-bidi: plaintext;
}

.price-value[b-atn4u6gkn9],
.commission-value[b-atn4u6gkn9] {
    color: var(--green) !important;
}

.food-info-grid[b-atn4u6gkn9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.food-info-item[b-atn4u6gkn9] {
    min-width: 0;
    min-height: 76px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
}

.food-info-item > span:first-child[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 15px;
}

.food-info-item strong[b-atn4u6gkn9] {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}

.stats-grid[b-atn4u6gkn9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stats-grid > div[b-atn4u6gkn9] {
    min-height: 82px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
}

.stats-grid span[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 15px;
}

.stats-grid strong[b-atn4u6gkn9] {
    color: var(--green);
    font-size: 20px;
    font-weight: 900;
}

.rich-detail-card[b-atn4u6gkn9] {
    overflow: hidden;
}

.rich-content-box[b-atn4u6gkn9] {
    color: var(--text);
    font-size: 18px;
    line-height: 2;
    overflow-wrap: anywhere;
}

.rich-content-box.warning-content[b-atn4u6gkn9] {
    padding: 15px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffaeb;
    color: #7a2e0e;
}

.rich-content-box[b-atn4u6gkn9]  p:first-child,
.rich-content-box[b-atn4u6gkn9]  ul:first-child,
.rich-content-box[b-atn4u6gkn9]  ol:first-child {
    margin-top: 0;
}

.rich-content-box[b-atn4u6gkn9]  p:last-child,
.rich-content-box[b-atn4u6gkn9]  ul:last-child,
.rich-content-box[b-atn4u6gkn9]  ol:last-child {
    margin-bottom: 0;
}

.rich-content-box[b-atn4u6gkn9]  ul,
.rich-content-box[b-atn4u6gkn9]  ol {
    padding-right: 24px;
    padding-left: 0;
}

.section-title-row[b-atn4u6gkn9] {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.section-title-row h3[b-atn4u6gkn9] {
    margin: 0;
}

.section-title-row > span[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 15px;
}

.pet-category-list[b-atn4u6gkn9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.pet-category-chip[b-atn4u6gkn9] {
    min-height: 48px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
}

.pet-category-chip img[b-atn4u6gkn9],
.pet-icon-placeholder[b-atn4u6gkn9] {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
}

.pet-category-chip img[b-atn4u6gkn9] {
    object-fit: contain;
}

.pet-icon-placeholder[b-atn4u6gkn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .08);
    font-size: 18px;
}

.pet-category-chip strong[b-atn4u6gkn9] {
    color: var(--text);
    font-size: 16px;
}

.food-gallery[b-atn4u6gkn9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gallery-item[b-atn4u6gkn9] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fff;
}

.gallery-image-shell[b-atn4u6gkn9] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f8f9;
}

.gallery-image-shell img[b-atn4u6gkn9],
.gallery-placeholder[b-atn4u6gkn9] {
    width: 100%;
    height: 100%;
}

.gallery-image-shell img[b-atn4u6gkn9] {
    display: block;
    object-fit: cover;
}

.gallery-placeholder[b-atn4u6gkn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 17px;
    font-weight: 900;
}

.main-image-badge[b-atn4u6gkn9] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-height: 25px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(58, 125, 68, .92);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.gallery-meta[b-atn4u6gkn9] {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gallery-meta > div[b-atn4u6gkn9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gallery-meta span[b-atn4u6gkn9] {
    color: var(--muted);
    font-size: 13px;
}

.gallery-meta strong[b-atn4u6gkn9] {
    color: var(--text);
    font-size: 15px;
}

.gallery-main-label[b-atn4u6gkn9] {
    min-height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48 !important;
    font-size: 13px !important;
    font-weight: 800;
}

.empty-details[b-atn4u6gkn9] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 16px;
    text-align: center;
}

.approval-card[b-atn4u6gkn9] {
    border-color: #fedf89;
    background: #fffdf5;
}

.field-group[b-atn4u6gkn9] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-group label[b-atn4u6gkn9] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group textarea[b-atn4u6gkn9] {
    width: 100%;
    min-height: 110px;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-atn4u6gkn9] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.approval-actions[b-atn4u6gkn9] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.approve-button[b-atn4u6gkn9],
.changes-button[b-atn4u6gkn9],
.reject-button[b-atn4u6gkn9] {
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.approve-button[b-atn4u6gkn9] {
    background: var(--green);
    color: #fff;
}

.changes-button[b-atn4u6gkn9] {
    background: #fffaeb;
    color: #b54708;
}

.reject-button[b-atn4u6gkn9] {
    background: #fff1f1;
    color: #b42318;
}

.approve-button:disabled[b-atn4u6gkn9],
.changes-button:disabled[b-atn4u6gkn9],
.reject-button:disabled[b-atn4u6gkn9] {
    opacity: .55;
    cursor: not-allowed;
}

.note-box[b-atn4u6gkn9] {
    padding: 15px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fafbfc;
    color: var(--text);
    font-size: 17px;
    line-height: 1.9;
}

.form-error[b-atn4u6gkn9] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 17px;
}

@media (max-width: 1100px) {
    .food-info-grid[b-atn4u6gkn9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .food-gallery[b-atn4u6gkn9] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .stats-grid[b-atn4u6gkn9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-atn4u6gkn9],
    .product-head[b-atn4u6gkn9] {
        align-items: stretch;
        flex-direction: column;
    }

    .head-actions[b-atn4u6gkn9] {
        width: 100%;
    }

    .primary-button[b-atn4u6gkn9],
    .back-button[b-atn4u6gkn9] {
        flex: 1;
    }

    .details-grid[b-atn4u6gkn9],
    .food-info-grid[b-atn4u6gkn9] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-atn4u6gkn9] {
        grid-column: auto;
    }

    .main-image-shell[b-atn4u6gkn9],
    .food-main-image[b-atn4u6gkn9] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        flex-basis: auto;
    }

    .food-gallery[b-atn4u6gkn9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .approval-actions[b-atn4u6gkn9] {
        align-items: stretch;
        flex-direction: column;
    }

    .approve-button[b-atn4u6gkn9],
    .changes-button[b-atn4u6gkn9],
    .reject-button[b-atn4u6gkn9] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .details-card[b-atn4u6gkn9] {
        padding: 16px;
    }

    .stats-grid[b-atn4u6gkn9],
    .food-gallery[b-atn4u6gkn9] {
        grid-template-columns: 1fr;
    }

    .head-actions[b-atn4u6gkn9] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Foods/Edit.razor.rz.scp.css */
.admin-food-form-page[b-2v7seqzwcm] {
    width: 100%;
}

.page-head[b-2v7seqzwcm] {
    margin-bottom: 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-2v7seqzwcm] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-2v7seqzwcm] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-2v7seqzwcm] {
    max-width: 700px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-2v7seqzwcm] {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-2v7seqzwcm] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-2v7seqzwcm] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-card[b-2v7seqzwcm] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-2v7seqzwcm] {
    grid-column: 1 / -1;
}

.form-card h3[b-2v7seqzwcm] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 19px;
    font-weight: 900;
}

.section-description[b-2v7seqzwcm] {
    margin: -10px 0 18px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
}

.loading-card[b-2v7seqzwcm] {
    color: var(--muted);
    font-size: 18px;
}

.fields-grid[b-2v7seqzwcm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field-group[b-2v7seqzwcm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-group > label:first-child[b-2v7seqzwcm] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-2v7seqzwcm],
.field-group select[b-2v7seqzwcm],
.field-group textarea[b-2v7seqzwcm] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    outline: none;
}

.field-group input[b-2v7seqzwcm],
.field-group select[b-2v7seqzwcm] {
    min-height: 44px;
    padding: 0 12px;
}

.field-group textarea[b-2v7seqzwcm] {
    min-height: 145px;
    padding: 12px;
    resize: vertical;
    line-height: 1.9;
}

.field-group input:focus[b-2v7seqzwcm],
.field-group select:focus[b-2v7seqzwcm],
.field-group textarea:focus[b-2v7seqzwcm] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-2v7seqzwcm] {
    color: var(--muted);
    font-size: 15px;
}

.price-input-wrapper[b-2v7seqzwcm],
.percent-input-wrapper[b-2v7seqzwcm] {
    position: relative;
    width: 100%;
}

.price-input-wrapper input[b-2v7seqzwcm] {
    width: 100%;
    padding-left: 72px;
    direction: ltr;
    text-align: left;
}

.percent-input-wrapper input[b-2v7seqzwcm] {
    width: 100%;
    padding-left: 46px;
}

.price-input-wrapper > span[b-2v7seqzwcm],
.percent-input-wrapper > span[b-2v7seqzwcm] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 16px;
    font-weight: 800;
    pointer-events: none;
}

.commission-summary[b-2v7seqzwcm] {
    min-height: 70px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fafbfc;
}

.commission-summary > div[b-2v7seqzwcm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commission-summary span[b-2v7seqzwcm] {
    color: var(--muted);
    font-size: 15px;
}

.commission-summary strong[b-2v7seqzwcm] {
    color: var(--green);
    font-size: 17px;
    font-weight: 900;
}

.rich-fields-grid[b-2v7seqzwcm] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.rich-field[b-2v7seqzwcm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rich-field > label[b-2v7seqzwcm] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.category-selector[b-2v7seqzwcm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.category-option[b-2v7seqzwcm] {
    min-width: 0;
    min-height: 76px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.category-option:hover[b-2v7seqzwcm] {
    border-color: rgba(58, 125, 68, .35);
    background: rgba(58, 125, 68, .025);
}

.category-option:has(input:checked)[b-2v7seqzwcm] {
    border-color: rgba(58, 125, 68, .55);
    background: rgba(58, 125, 68, .055);
}

.category-option > input[b-2v7seqzwcm] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.category-icon[b-2v7seqzwcm] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 11px;
    background: rgba(58, 125, 68, .08);
}

.category-icon img[b-2v7seqzwcm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.category-icon span[b-2v7seqzwcm] {
    font-size: 20px;
}

.category-info[b-2v7seqzwcm] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-info strong[b-2v7seqzwcm] {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.category-info span[b-2v7seqzwcm] {
    overflow: hidden;
    color: var(--muted);
    font-size: 15px;
    text-overflow: ellipsis;
}

.empty-section[b-2v7seqzwcm] {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 17px;
}

.form-error[b-2v7seqzwcm] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 17px;
}

.switch-list[b-2v7seqzwcm] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.switch-item[b-2v7seqzwcm] {
    min-height: 68px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    cursor: pointer;
}

.switch-item > div[b-2v7seqzwcm] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.switch-item strong[b-2v7seqzwcm] {
    color: var(--text);
    font-size: 17px;
}

.switch-item span[b-2v7seqzwcm] {
    color: var(--muted);
    font-size: 15px;
}

.switch-item input[b-2v7seqzwcm] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    accent-color: var(--green);
}

.submit-card[b-2v7seqzwcm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-2v7seqzwcm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.submit-card strong[b-2v7seqzwcm] {
    color: var(--text);
    font-size: 18px;
}

.submit-card span[b-2v7seqzwcm] {
    color: var(--muted);
    font-size: 16px;
}

.submit-button[b-2v7seqzwcm] {
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.submit-button:hover:not(:disabled)[b-2v7seqzwcm] {
    filter: brightness(.96);
}

.submit-button:disabled[b-2v7seqzwcm] {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .category-selector[b-2v7seqzwcm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-2v7seqzwcm] {
        flex-direction: column;
    }

    .back-button[b-2v7seqzwcm] {
        width: 100%;
        box-sizing: border-box;
    }

    .form-grid[b-2v7seqzwcm],
    .fields-grid[b-2v7seqzwcm],
    .category-selector[b-2v7seqzwcm] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-2v7seqzwcm] {
        grid-column: auto;
    }

    .submit-card[b-2v7seqzwcm] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-button[b-2v7seqzwcm] {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 520px) {
    .form-card[b-2v7seqzwcm] {
        padding: 16px;
    }

    .category-option[b-2v7seqzwcm] {
        min-height: 68px;
    }

    .commission-summary[b-2v7seqzwcm] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Products/Foods/ManageFoods.razor.rz.scp.css */
.admin-foods-page[b-ujh6ycweff] {
    width: 100%;
}

.food-cell[b-ujh6ycweff] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.food-avatar[b-ujh6ycweff] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 15px;
    font-weight: 900;
}

.food-image-shell[b-ujh6ycweff] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #f7f8f9;
}

.food-image[b-ujh6ycweff] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.food-info[b-ujh6ycweff] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.food-info strong[b-ujh6ycweff] {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.food-info span[b-ujh6ycweff],
.food-info small[b-ujh6ycweff] {
    color: var(--muted);
    font-size: 14px;
}

.food-info small span[b-ujh6ycweff] {
    font-size: inherit;
}

.status-badge[b-ujh6ycweff] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-ujh6ycweff] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-ujh6ycweff] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-ujh6ycweff] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-ujh6ycweff] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-ujh6ycweff] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-ujh6ycweff] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.action-link[b-ujh6ycweff] {
    min-height: 32px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-ujh6ycweff] {
    border-color: var(--green);
    color: var(--green);
}

.create-food-button[b-ujh6ycweff] {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--green);
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.create-food-button span[b-ujh6ycweff] {
    color: inherit;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.create-food-button:hover[b-ujh6ycweff] {
    background: #2f743b;
    border-color: #2f743b;
    color: #fff;
    transform: translateY(-1px);
}

.create-food-button:active[b-ujh6ycweff] {
    transform: translateY(0);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Shipments/ManageShipments.razor.rz.scp.css */
.shipments-page[b-gt0ucjz43s] {
    width: 100%;
}

.shipment-cell[b-gt0ucjz43s] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.shipment-icon[b-gt0ucjz43s] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 15px;
}

.shipment-cell > div:last-child[b-gt0ucjz43s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shipment-cell strong[b-gt0ucjz43s] {
    font-size: 13px;
}

.shipment-cell span[b-gt0ucjz43s] {
    color: var(--muted);
    font-size: 10px;
}

.receiver-cell[b-gt0ucjz43s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.receiver-cell strong[b-gt0ucjz43s] {
    color: var(--text);
    font-size: 13px;
}

.receiver-cell span[b-gt0ucjz43s] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-gt0ucjz43s] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-gt0ucjz43s] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-gt0ucjz43s] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-gt0ucjz43s] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-gt0ucjz43s] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-gt0ucjz43s] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-gt0ucjz43s] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-gt0ucjz43s] {
    border-color: var(--green);
    color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Shops/Create.razor.rz.scp.css */
.create-shop-page[b-zitali1izk] {
    width: 100%;
}

.page-head[b-zitali1izk] {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.page-head > div > span[b-zitali1izk] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-zitali1izk] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-zitali1izk] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-zitali1izk] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    text-decoration: none;

    font-size: 17px;
    font-weight: 800;
}

.form-grid[b-zitali1izk] {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-zitali1izk] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-zitali1izk] {
    grid-column: 1 / -1;
}

.form-card h3[b-zitali1izk] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.section-description[b-zitali1izk] {
    margin: -8px 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.9;
}

.fields-grid[b-zitali1izk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.field-group[b-zitali1izk] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.description-field[b-zitali1izk] {
    margin-top: 18px;
}

.field-group label[b-zitali1izk] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.field-group input[b-zitali1izk],
.field-group select[b-zitali1izk],
.field-group textarea[b-zitali1izk] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-zitali1izk],
.field-group select[b-zitali1izk] {
    height: 48px;

    padding: 0 13px;
}

.field-group textarea[b-zitali1izk] {
    padding: 12px 13px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-zitali1izk],
.field-group select:focus[b-zitali1izk],
.field-group textarea:focus[b-zitali1izk] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-zitali1izk] {
    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.upload-placeholder[b-zitali1izk] {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 18px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fafbfb;
}

.avatar-preview-box[b-zitali1izk] {
    width: 82px;
    height: 82px;

    flex: 0 0 82px;

    overflow: hidden;

    border-radius: 16px;

    background:
        rgba(58, 125, 68, .08);
}

.avatar-preview[b-zitali1izk] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.upload-icon[b-zitali1izk] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-zitali1izk] {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.upload-info strong[b-zitali1izk] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.upload-info span[b-zitali1izk] {
    color: var(--muted);

    font-size: 16px;
}

.selected-file[b-zitali1izk] {
    color: var(--green) !important;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.secondary-button[b-zitali1izk] {
    min-height: 40px;
    padding: 0 14px;

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.secondary-button:hover[b-zitali1izk] {
    border-color: var(--green);

    color: var(--green);
}

.switch-row[b-zitali1izk] {
    min-height: 66px;

    padding: 0 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

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

    gap: 15px;

    cursor: pointer;
}

.switch-row > div[b-zitali1izk] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row strong[b-zitali1izk] {
    color: var(--text);

    font-size: 18px;
}

.switch-row span[b-zitali1izk] {
    color: var(--muted);

    font-size: 16px;
}

.switch-row input[b-zitali1izk] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);

    cursor: pointer;
}

.submit-card[b-zitali1izk] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-zitali1izk] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-zitali1izk] {
    color: var(--text);

    font-size: 18px;
}

.submit-card span[b-zitali1izk] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-zitali1izk] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-zitali1izk] {
    opacity: .6;

    cursor: not-allowed;
}

.form-error[b-zitali1izk] {
    margin-bottom: 18px;
    padding: 12px 14px;

    border-radius: 10px;

    background: #fff2f2;
    color: #b42318;

    font-size: 17px;
    line-height: 1.8;
}

.loading-card[b-zitali1izk] {
    grid-column: 1 / -1;

    min-height: 180px;

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

    color: var(--muted);

    font-size: 18px;
}

@media (max-width: 800px) {

    .page-head[b-zitali1izk] {
        flex-direction: column;
    }

    .form-grid[b-zitali1izk],
    .fields-grid[b-zitali1izk] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-zitali1izk] {
        grid-column: auto;
    }

    .upload-placeholder[b-zitali1izk] {
        flex-direction: column;
        align-items: stretch;
    }

    .secondary-button[b-zitali1izk] {
        width: 100%;
    }

    .submit-card[b-zitali1izk] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-button[b-zitali1izk] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Shops/Details.razor.rz.scp.css */
.shop-details-page[b-9kwlshkuhc] {
    width: 100%;
}

/* =========================
   Header
========================= */

.page-head[b-9kwlshkuhc] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-9kwlshkuhc] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 19px;
    font-weight: 800;
}

.page-head h1[b-9kwlshkuhc] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;

    line-height: 1.35;
}

.page-head p[b-9kwlshkuhc] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-9kwlshkuhc] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-9kwlshkuhc],
.primary-button[b-9kwlshkuhc] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

.back-button[b-9kwlshkuhc] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-9kwlshkuhc] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Layout
========================= */

.details-grid[b-9kwlshkuhc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-9kwlshkuhc] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-9kwlshkuhc] {
    grid-column: 1 / -1;
}

.details-card h3[b-9kwlshkuhc] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Profile
========================= */

.profile-card[b-9kwlshkuhc] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.profile-avatar[b-9kwlshkuhc] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-avatar img[b-9kwlshkuhc] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-info[b-9kwlshkuhc] {
    min-width: 0;
    flex: 1;
}

.profile-info h2[b-9kwlshkuhc] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;

    line-height: 1.5;
}

.profile-specialty[b-9kwlshkuhc] {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 18px;
    font-weight: 800;
}

.profile-meta[b-9kwlshkuhc] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-9kwlshkuhc] {
    color: var(--muted);

    font-size: 18px;
    line-height: 1.8;
}

.profile-meta strong[b-9kwlshkuhc] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.profile-statuses[b-9kwlshkuhc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}


/* =========================
   Status Badges
========================= */

.status-badge[b-9kwlshkuhc] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-9kwlshkuhc] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-9kwlshkuhc] {
    background: #fff1f1;
    color: #b42318;
}


/* =========================
   Info
========================= */

.info-grid[b-9kwlshkuhc] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-9kwlshkuhc] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-9kwlshkuhc] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 700;

    line-height: 1.7;
}

.info-item strong[b-9kwlshkuhc] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================
   Status List
========================= */

.status-list[b-9kwlshkuhc] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.status-row[b-9kwlshkuhc] {
    min-height: 58px;
    padding: 0 15px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-9kwlshkuhc] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.status-row strong[b-9kwlshkuhc] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}


/* =========================
   Description
========================= */

.description-grid[b-9kwlshkuhc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.description-box[b-9kwlshkuhc] {
    min-height: 150px;
    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box span[b-9kwlshkuhc] {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;

    line-height: 1.7;
}

.description-box p[b-9kwlshkuhc] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 500;

    line-height: 2.1;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.description-box.internal[b-9kwlshkuhc] {
    background: #fffcf5;
}


/* =========================
   Messages
========================= */

.loading-card[b-9kwlshkuhc] {
    color: var(--muted);

    font-size: 19px;
}

.form-error[b-9kwlshkuhc] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .info-grid[b-9kwlshkuhc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 800px) {

    .page-head[b-9kwlshkuhc],
    .profile-card[b-9kwlshkuhc] {
        flex-direction: column;
    }

    .head-actions[b-9kwlshkuhc] {
        width: 100%;
    }

    .head-actions a[b-9kwlshkuhc] {
        flex: 1;
    }

    .details-grid[b-9kwlshkuhc],
    .info-grid[b-9kwlshkuhc],
    .description-grid[b-9kwlshkuhc] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-9kwlshkuhc] {
        grid-column: auto;
    }

    .profile-card[b-9kwlshkuhc] {
        align-items: flex-start;
    }

    .profile-statuses[b-9kwlshkuhc] {
        align-items: flex-start;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-meta[b-9kwlshkuhc] {
        gap: 8px 14px;
    }
}


@media (max-width: 520px) {

    .details-card[b-9kwlshkuhc] {
        padding: 17px;
    }

    .head-actions[b-9kwlshkuhc] {
        flex-direction: column;
    }

    .head-actions a[b-9kwlshkuhc] {
        width: 100%;

        box-sizing: border-box;
    }

    .page-head h1[b-9kwlshkuhc] {
        font-size: 25px;
    }

    .profile-info h2[b-9kwlshkuhc] {
        font-size: 21px;
    }

    .profile-meta[b-9kwlshkuhc] {
        flex-direction: column;

        gap: 5px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Shops/Edit.razor.rz.scp.css */
.edit-shop-page[b-579w6v1y9q] {
    width: 100%;
}

.page-head[b-579w6v1y9q] {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.page-head > div > span[b-579w6v1y9q] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-579w6v1y9q] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-579w6v1y9q] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-579w6v1y9q] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    text-decoration: none;

    font-size: 12px;
    font-weight: 800;
}

.form-grid[b-579w6v1y9q] {
    width: 100%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-579w6v1y9q] {
    min-width: 0;

    padding: 24px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card.full[b-579w6v1y9q] {
    grid-column: 1 / -1;
}

.form-card h3[b-579w6v1y9q] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.shop-summary[b-579w6v1y9q] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.summary-avatar[b-579w6v1y9q] {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 15px;

    object-fit: cover;

    display: block;
}

.summary-avatar.placeholder[b-579w6v1y9q] {
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.shop-summary > div:last-child[b-579w6v1y9q] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.shop-summary strong[b-579w6v1y9q] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.shop-summary span[b-579w6v1y9q] {
    color: var(--muted);

    font-size: 11px;
}

.fields-grid[b-579w6v1y9q] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.field-group[b-579w6v1y9q] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.description-field[b-579w6v1y9q] {
    margin-top: 18px;
}

.field-group label[b-579w6v1y9q] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.field-group input[b-579w6v1y9q],
.field-group textarea[b-579w6v1y9q] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.field-group input[b-579w6v1y9q] {
    height: 48px;

    padding: 0 13px;
}

.field-group textarea[b-579w6v1y9q] {
    padding: 12px 13px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-579w6v1y9q],
.field-group textarea:focus[b-579w6v1y9q] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.section-description[b-579w6v1y9q] {
    margin: -8px 0 18px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.9;
}

.upload-placeholder[b-579w6v1y9q] {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 18px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fafbfb;
}

.avatar-preview-box[b-579w6v1y9q] {
    width: 82px;
    height: 82px;

    flex: 0 0 82px;

    overflow: hidden;

    border-radius: 16px;

    background:
        rgba(58, 125, 68, .08);
}

.avatar-preview[b-579w6v1y9q] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.upload-icon[b-579w6v1y9q] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.upload-info[b-579w6v1y9q] {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.upload-info strong[b-579w6v1y9q] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.upload-info span[b-579w6v1y9q] {
    color: var(--muted);

    font-size: 11px;
}

.selected-file[b-579w6v1y9q] {
    color: var(--green) !important;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.secondary-button[b-579w6v1y9q] {
    min-height: 40px;
    padding: 0 14px;

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    transition: .2s;
}

.secondary-button:hover[b-579w6v1y9q] {
    border-color: var(--green);

    color: var(--green);
}

.switch-row[b-579w6v1y9q] {
    min-height: 66px;

    padding: 0 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

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

    gap: 15px;

    cursor: pointer;
}

.switch-row > div[b-579w6v1y9q] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row strong[b-579w6v1y9q] {
    color: var(--text);

    font-size: 13px;
}

.switch-row span[b-579w6v1y9q] {
    color: var(--muted);

    font-size: 11px;
}

.switch-row input[b-579w6v1y9q] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);

    cursor: pointer;
}

.submit-card[b-579w6v1y9q] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-579w6v1y9q] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card strong[b-579w6v1y9q] {
    color: var(--text);

    font-size: 14px;
}

.submit-card span[b-579w6v1y9q] {
    color: var(--muted);

    font-size: 11px;
}

.submit-button[b-579w6v1y9q] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-579w6v1y9q] {
    opacity: .6;

    cursor: not-allowed;
}

.form-error[b-579w6v1y9q] {
    margin-bottom: 18px;
    padding: 12px 14px;

    border-radius: 10px;

    background: #fff2f2;
    color: #b42318;

    font-size: 12px;
    line-height: 1.8;
}

.state-card[b-579w6v1y9q] {
    width: 100%;
    min-height: 220px;

    box-sizing: border-box;

    padding: 30px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.state-card p[b-579w6v1y9q] {
    margin: 12px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.loading-spinner[b-579w6v1y9q] {
    width: 32px;
    height: 32px;

    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;

    animation: spin-b-579w6v1y9q .8s linear infinite;
}

@keyframes spin-b-579w6v1y9q {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 800px) {

    .page-head[b-579w6v1y9q] {
        flex-direction: column;
    }

    .form-grid[b-579w6v1y9q],
    .fields-grid[b-579w6v1y9q] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-579w6v1y9q] {
        grid-column: auto;
    }

    .upload-placeholder[b-579w6v1y9q] {
        flex-direction: column;
        align-items: stretch;
    }

    .secondary-button[b-579w6v1y9q] {
        width: 100%;
    }

    .submit-card[b-579w6v1y9q] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-button[b-579w6v1y9q] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Shops/ManageShops.razor.rz.scp.css */
.shops-page[b-x8i9fnp5sv] {
    width: 100%;
}

.create-shop-button[b-x8i9fnp5sv] {
    min-height: 58px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.create-shop-button span[b-x8i9fnp5sv] {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.create-shop-button:hover[b-x8i9fnp5sv] {
    color: #fff;
    filter: brightness(.96);
}

.shop-cell[b-x8i9fnp5sv] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.shop-avatar[b-x8i9fnp5sv] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    object-fit: cover;
}

.shop-avatar-placeholder[b-x8i9fnp5sv] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 11px;
    font-weight: 900;
}

.shop-cell > div:last-child[b-x8i9fnp5sv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-cell strong[b-x8i9fnp5sv] {
    font-size: 13px;
}

.shop-cell span[b-x8i9fnp5sv] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-x8i9fnp5sv] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-x8i9fnp5sv] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-x8i9fnp5sv] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-x8i9fnp5sv] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.action-link[b-x8i9fnp5sv] {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.action-link:hover[b-x8i9fnp5sv] {
    border-color: var(--green);
    color: var(--green);
}

.ltr-value[b-x8i9fnp5sv] {
    direction: ltr;
    text-align: right !important;
}

@media (max-width: 700px) {
    .create-shop-button[b-x8i9fnp5sv] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/SocialLinks/SocialLinks.razor.rz.scp.css */
.social-links-page[b-fa9osw4ooj] {
    width: 100%;
    color: var(--text);
    font-size: 16px;
}

.social-page-head[b-fa9osw4ooj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.social-page-head > div > span[b-fa9osw4ooj] {
    color: var(--green);
    font-size: 16px;
    font-weight: 800;
}

.social-page-head h1[b-fa9osw4ooj] {
    margin: 12px 0;
    color: var(--text);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.6;
}

.social-page-head p[b-fa9osw4ooj] {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 2;
}

.social-form-card[b-fa9osw4ooj],
.social-state[b-fa9osw4ooj],
.social-delete-confirm[b-fa9osw4ooj] {
    padding: 30px;
    margin-bottom: 26px;
    border: 1px solid var(--soft);
    border-radius: 20px;
    background: #fff;
}

.social-form-card h2[b-fa9osw4ooj] {
    margin: 0 0 26px;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.7;
}

.social-form-card fieldset[b-fa9osw4ooj] {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.social-form-grid[b-fa9osw4ooj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.social-field[b-fa9osw4ooj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.social-field.full-width[b-fa9osw4ooj] {
    grid-column: 1 / -1;
}

.social-field label[b-fa9osw4ooj],
.social-field-label[b-fa9osw4ooj] {
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
}

.social-field small[b-fa9osw4ooj] {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}

.social-field[b-fa9osw4ooj]  input,
.social-field[b-fa9osw4ooj]  select {
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 1.8;
    box-sizing: border-box;
}

.social-field[b-fa9osw4ooj]  input:focus,
.social-field[b-fa9osw4ooj]  select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .1);
}

.social-field[b-fa9osw4ooj]  .validation-message {
    color: #b42318;
    font-size: 14px;
    line-height: 1.9;
}

.social-icon-picker[b-fa9osw4ooj] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.social-icon-option[b-fa9osw4ooj] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    min-height: 120px;
    padding: 20px 12px;
    border: 1px solid var(--soft);
    border-radius: 15px;
    background: #fff;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

.social-icon-option[b-fa9osw4ooj]  svg {
    width: 36px !important;
    height: 36px !important;
}

.social-icon-option:hover[b-fa9osw4ooj] {
    border-color: var(--green);
    color: var(--green);
}

.social-icon-option.selected[b-fa9osw4ooj] {
    border-color: var(--green);
    background: #eff8f1;
    color: var(--green);
    box-shadow: 0 0 0 2px rgba(58, 125, 68, .1);
}

.social-icon-option:focus-visible[b-fa9osw4ooj] {
    outline: 3px solid rgba(58, 125, 68, .3);
    outline-offset: 3px;
}

.social-icon-option:disabled[b-fa9osw4ooj] {
    opacity: .5;
    cursor: default;
}

.social-checkbox[b-fa9osw4ooj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
}

.social-checkbox[b-fa9osw4ooj]  input {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}

.social-form-actions[b-fa9osw4ooj],
.social-row-actions[b-fa9osw4ooj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.social-form-actions[b-fa9osw4ooj] {
    margin-top: 26px;
}

.social-button[b-fa9osw4ooj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
}

.social-button.primary[b-fa9osw4ooj] {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.social-button.danger[b-fa9osw4ooj] {
    color: #b42318;
    border-color: #fecdca;
}

.social-button.compact[b-fa9osw4ooj] {
    min-height: 42px;
    padding: 9px 16px;
    font-size: 14px;
}

.social-button:disabled[b-fa9osw4ooj] {
    opacity: .5;
    cursor: default;
}

.social-table-wrap[b-fa9osw4ooj] {
    overflow-x: auto;
    border: 1px solid var(--soft);
    border-radius: 20px;
    background: #fff;
}

.social-table[b-fa9osw4ooj] {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    text-align: right;
}

.social-table th[b-fa9osw4ooj],
.social-table td[b-fa9osw4ooj] {
    padding: 22px 20px;
    border-bottom: 1px solid var(--soft);
    font-size: 16px;
    line-height: 1.9;
    vertical-align: middle;
}

.social-table th[b-fa9osw4ooj] {
    background: #f8fafc;
    color: var(--muted);
    font-weight: 900;
    white-space: nowrap;
}

.social-table tbody tr:last-child td[b-fa9osw4ooj] {
    border-bottom: 0;
}

.social-network-name[b-fa9osw4ooj] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 150px;
}

.social-network-name[b-fa9osw4ooj]  svg {
    width: 30px !important;
    height: 30px !important;
}

.social-url[b-fa9osw4ooj] {
    display: inline-block;
    max-width: 400px;
    overflow-wrap: anywhere;
    color: var(--green);
    font-size: 15px;
    line-height: 1.9;
    text-decoration: none;
}

.social-url:hover[b-fa9osw4ooj] {
    text-decoration: underline;
}

.social-status[b-fa9osw4ooj] {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.social-status.active[b-fa9osw4ooj] {
    background: #ecfdf3;
    color: #027a48;
}

.social-message[b-fa9osw4ooj] {
    padding: 18px 20px;
    margin-bottom: 22px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 2;
}

.social-message.error[b-fa9osw4ooj] {
    background: #fff1f1;
    color: #b42318;
}

.social-message.success[b-fa9osw4ooj] {
    background: #ecfdf3;
    color: #027a48;
}

.social-delete-confirm[b-fa9osw4ooj] {
    border-color: #fecdca;
}

.social-delete-confirm p[b-fa9osw4ooj] {
    margin: 0;
    font-size: 17px;
    line-height: 2;
}

.social-state[b-fa9osw4ooj] {
    padding: 36px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 17px;
    line-height: 2;
}

@media (max-width: 1000px) {
    .social-icon-picker[b-fa9osw4ooj] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .social-page-head[b-fa9osw4ooj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .social-page-head h1[b-fa9osw4ooj] {
        font-size: 27px;
    }

    .social-form-grid[b-fa9osw4ooj] {
        grid-template-columns: 1fr;
    }

    .social-form-card[b-fa9osw4ooj],
    .social-delete-confirm[b-fa9osw4ooj] {
        padding: 20px;
    }

    .social-icon-picker[b-fa9osw4ooj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .social-icon-option[b-fa9osw4ooj] {
        min-height: 108px;
    }

    .social-form-actions .social-button[b-fa9osw4ooj] {
        flex: 1;
    }
    
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Supports/Create.razor.rz.scp.css */
.support-form-page[b-xmdxarfduf] {
    width: 100%;
}

.page-head[b-xmdxarfduf] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div > span[b-xmdxarfduf] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-xmdxarfduf] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-xmdxarfduf] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-xmdxarfduf] {
    min-height: 44px;
    padding: 0 16px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    text-decoration: none;

    font-size: 18px;
    font-weight: 800;
}

.form-grid[b-xmdxarfduf] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-xmdxarfduf] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-xmdxarfduf] {
    grid-column: 1 / -1;
}

.form-card h3[b-xmdxarfduf] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.fields-grid[b-xmdxarfduf] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.field-group[b-xmdxarfduf] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.field-group label[b-xmdxarfduf] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.field-group input[b-xmdxarfduf],
.field-group select[b-xmdxarfduf],
.field-group textarea[b-xmdxarfduf] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-xmdxarfduf],
.field-group select[b-xmdxarfduf] {
    height: 48px;

    padding: 0 13px;
}

.field-group textarea[b-xmdxarfduf] {
    min-height: 130px;

    padding: 12px 13px;

    resize: vertical;

    line-height: 2;
}

.field-group input:focus[b-xmdxarfduf],
.field-group select:focus[b-xmdxarfduf],
.field-group textarea:focus[b-xmdxarfduf] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.description-field[b-xmdxarfduf] {
    margin-top: 18px;
}

.field-help[b-xmdxarfduf] {
    color: var(--muted);

    font-size: 16px;
}

.upload-placeholder[b-xmdxarfduf] {
    padding: 18px;

    display: flex;
    align-items: center;

    gap: 18px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fafbfb;
}

.avatar-preview-box[b-xmdxarfduf] {
    width: 88px;
    height: 88px;

    flex: 0 0 88px;

    overflow: hidden;

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
}

.avatar-preview[b-xmdxarfduf] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.upload-icon[b-xmdxarfduf] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.upload-info[b-xmdxarfduf] {
    min-width: 0;

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.upload-info strong[b-xmdxarfduf] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.upload-info span[b-xmdxarfduf] {
    color: var(--muted);

    font-size: 17px;
}

.selected-file[b-xmdxarfduf] {
    color: var(--green) !important;

    font-weight: 800;
}

.secondary-button[b-xmdxarfduf] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.switch-row[b-xmdxarfduf] {
    min-height: 68px;

    padding: 0 16px;

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

    gap: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.switch-row > div[b-xmdxarfduf] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row span[b-xmdxarfduf] {
    color: var(--muted);

    font-size: 16px;
}

.switch-row input[b-xmdxarfduf] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}

.submit-card[b-xmdxarfduf] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-xmdxarfduf] {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.submit-card span[b-xmdxarfduf] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-xmdxarfduf] {
    min-height: 46px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.submit-button:disabled[b-xmdxarfduf] {
    opacity: .6;

    cursor: not-allowed;
}

.form-error[b-xmdxarfduf] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
}

@media (max-width: 800px) {

    .page-head[b-xmdxarfduf] {
        flex-direction: column;
    }

    .form-grid[b-xmdxarfduf],
    .fields-grid[b-xmdxarfduf] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-xmdxarfduf] {
        grid-column: auto;
    }

    .upload-placeholder[b-xmdxarfduf] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-card[b-xmdxarfduf] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-button[b-xmdxarfduf],
    .secondary-button[b-xmdxarfduf] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Supports/Details.razor.rz.scp.css */
.support-details-page[b-9bik8mq5hn] {
    width: 100%;
}

.page-head[b-9bik8mq5hn] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-9bik8mq5hn] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-9bik8mq5hn] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-9bik8mq5hn] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.head-actions[b-9bik8mq5hn] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.back-button[b-9bik8mq5hn],
.primary-button[b-9bik8mq5hn] {
    min-height: 44px;
    padding: 0 16px;

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

    border-radius: 10px;

    text-decoration: none;

    font-size: 18px;
    font-weight: 800;
}

.back-button[b-9bik8mq5hn] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-9bik8mq5hn] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.details-grid[b-9bik8mq5hn] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.details-card[b-9bik8mq5hn] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-9bik8mq5hn] {
    grid-column: 1 / -1;
}

.details-card h3[b-9bik8mq5hn] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.profile-card[b-9bik8mq5hn] {
    display: flex;
    align-items: center;

    gap: 20px;
}

.profile-avatar[b-9bik8mq5hn] {
    width: 104px;
    height: 104px;

    flex: 0 0 104px;

    overflow: hidden;

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

    border-radius: 22px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.profile-avatar img[b-9bik8mq5hn] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.profile-info[b-9bik8mq5hn] {
    min-width: 0;

    flex: 1;
}

.profile-info h2[b-9bik8mq5hn] {
    margin: 0;

    color: var(--text);

    font-size: 24px;
    font-weight: 900;
}

.profile-specialty[b-9bik8mq5hn] {
    display: block;

    margin-top: 6px;

    color: var(--green);

    font-size: 19px;
    font-weight: 800;
}

.profile-meta[b-9bik8mq5hn] {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.profile-meta span[b-9bik8mq5hn] {
    color: var(--muted);

    font-size: 18px;
}

.profile-meta strong[b-9bik8mq5hn] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.profile-statuses[b-9bik8mq5hn] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 8px;
}

.status-badge[b-9bik8mq5hn] {
    min-height: 30px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 17px;
    font-weight: 800;
}

.status-badge.success[b-9bik8mq5hn] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-9bik8mq5hn] {
    background: #fff1f1;
    color: #b42318;
}

.info-grid[b-9bik8mq5hn] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.info-item[b-9bik8mq5hn] {
    min-height: 82px;
    padding: 15px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.info-item span[b-9bik8mq5hn] {
    color: var(--muted);

    font-size: 17px;
    font-weight: 700;
}

.info-item strong[b-9bik8mq5hn] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.status-list[b-9bik8mq5hn] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.status-row[b-9bik8mq5hn] {
    min-height: 58px;
    padding: 0 15px;

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

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;
}

.status-row span[b-9bik8mq5hn] {
    color: var(--muted);

    font-size: 18px;
    font-weight: 700;
}

.status-row strong[b-9bik8mq5hn] {
    color: var(--text);

    font-size: 19px;
    font-weight: 800;
}

.description-box[b-9bik8mq5hn] {
    min-height: 150px;

    padding: 17px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.description-box span[b-9bik8mq5hn] {
    display: block;

    margin-bottom: 10px;

    color: var(--muted);

    font-size: 17px;
    font-weight: 800;
}

.description-box p[b-9bik8mq5hn] {
    margin: 0;

    color: var(--text);

    font-size: 19px;

    line-height: 2.1;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.loading-card[b-9bik8mq5hn] {
    color: var(--muted);

    font-size: 19px;
}

.form-error[b-9bik8mq5hn] {
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;

    font-size: 18px;
}

@media (max-width: 1100px) {

    .info-grid[b-9bik8mq5hn] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-9bik8mq5hn],
    .profile-card[b-9bik8mq5hn] {
        flex-direction: column;
    }

    .head-actions[b-9bik8mq5hn] {
        width: 100%;
    }

    .head-actions a[b-9bik8mq5hn] {
        flex: 1;
    }

    .details-grid[b-9bik8mq5hn],
    .info-grid[b-9bik8mq5hn] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-9bik8mq5hn] {
        grid-column: auto;
    }

    .profile-card[b-9bik8mq5hn] {
        align-items: flex-start;
    }

    .profile-statuses[b-9bik8mq5hn] {
        align-items: flex-start;

        flex-direction: row;
        flex-wrap: wrap;
    }

    .profile-meta[b-9bik8mq5hn] {
        gap: 8px 14px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Supports/Edit.razor.rz.scp.css */
.edit-support-page[b-ccqonqfeet] {
    width: 100%;
}

.page-head[b-ccqonqfeet] {
    margin-bottom: 24px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div > span[b-ccqonqfeet] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-ccqonqfeet] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-ccqonqfeet] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-ccqonqfeet] {
    min-height: 44px;
    padding: 0 16px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    text-decoration: none;

    font-size: 18px;
    font-weight: 800;
}

.form-grid[b-ccqonqfeet] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}

.form-card[b-ccqonqfeet] {
    min-width: 0;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-card.full[b-ccqonqfeet] {
    grid-column: 1 / -1;
}

.form-card h3[b-ccqonqfeet] {
    margin: 0 0 20px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.support-summary[b-ccqonqfeet] {
    display: flex;
    align-items: center;

    gap: 14px;
}

.summary-avatar[b-ccqonqfeet] {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    border-radius: 16px;

    object-fit: cover;
}

.summary-avatar.placeholder[b-ccqonqfeet] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-weight: 900;
}

.support-summary > div:last-child[b-ccqonqfeet] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.support-summary span[b-ccqonqfeet] {
    color: var(--muted);

    font-size: 17px;
}

.fields-grid[b-ccqonqfeet] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.field-group[b-ccqonqfeet] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.field-group label[b-ccqonqfeet] {
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

.field-group input[b-ccqonqfeet],
.field-group textarea[b-ccqonqfeet] {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-ccqonqfeet] {
    height: 48px;

    padding: 0 13px;
}

.field-group textarea[b-ccqonqfeet] {
    min-height: 130px;

    padding: 12px 13px;

    resize: vertical;

    line-height: 2;
}

.description-field[b-ccqonqfeet] {
    margin-top: 18px;
}

.upload-placeholder[b-ccqonqfeet] {
    padding: 18px;

    display: flex;
    align-items: center;

    gap: 18px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fafbfb;
}

.avatar-preview-box[b-ccqonqfeet] {
    width: 88px;
    height: 88px;

    flex: 0 0 88px;

    overflow: hidden;

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
}

.avatar-preview[b-ccqonqfeet] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.upload-icon[b-ccqonqfeet] {
    width: 100%;
    height: 100%;

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

    color: var(--green);

    font-weight: 900;
}

.upload-info[b-ccqonqfeet] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.upload-info span[b-ccqonqfeet] {
    color: var(--muted);

    font-size: 17px;
}

.selected-file[b-ccqonqfeet] {
    color: var(--green) !important;

    font-weight: 800;
}

.secondary-button[b-ccqonqfeet] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.switch-row[b-ccqonqfeet] {
    min-height: 68px;

    padding: 0 16px;

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

    gap: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.switch-row > div[b-ccqonqfeet] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.switch-row span[b-ccqonqfeet] {
    color: var(--muted);

    font-size: 16px;
}

.switch-row input[b-ccqonqfeet] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}

.submit-card[b-ccqonqfeet] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div[b-ccqonqfeet] {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.submit-card span[b-ccqonqfeet] {
    color: var(--muted);

    font-size: 16px;
}

.submit-button[b-ccqonqfeet] {
    min-height: 46px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;

    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.form-error[b-ccqonqfeet] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #fecdca;
    border-radius: 11px;

    background: #fff2f2;
    color: #b42318;
}

.state-card[b-ccqonqfeet] {
    min-height: 220px;

    padding: 30px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;

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

    color: var(--muted);
}

@media (max-width: 800px) {

    .page-head[b-ccqonqfeet] {
        flex-direction: column;
    }

    .form-grid[b-ccqonqfeet],
    .fields-grid[b-ccqonqfeet] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-ccqonqfeet] {
        grid-column: auto;
    }

    .upload-placeholder[b-ccqonqfeet] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Supports/ManageSupports.razor.rz.scp.css */
.supports-page[b-04in2hdj68] {
    width: 100%;
}

.create-support-button[b-04in2hdj68] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
}

.support-cell[b-04in2hdj68] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.support-avatar[b-04in2hdj68] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 11px;

    object-fit: cover;
}

.support-avatar-placeholder[b-04in2hdj68] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.support-cell > div:last-child[b-04in2hdj68] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.support-cell strong[b-04in2hdj68] {
    font-size: 18px;
}

.support-cell span[b-04in2hdj68] {
    color: var(--muted);

    font-size: 15px;
}

.status-badge[b-04in2hdj68] {
    min-height: 27px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
}

.status-badge.success[b-04in2hdj68] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-04in2hdj68] {
    background: #fff1f1;
    color: #b42318;
}

.row-actions[b-04in2hdj68] {
    display: flex;
    align-items: center;

    gap: 6px;
}

.action-link[b-04in2hdj68] {
    min-height: 32px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    text-decoration: none;

    font-size: 16px;
    font-weight: 700;
}

.ltr-value[b-04in2hdj68] {
    direction: ltr;

    text-align: right !important;
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Surveys/Details.razor.rz.scp.css */
.request-details-page[b-d48cgx12nb] {
    width: 100%;
    direction: rtl;
}

.page-head[b-d48cgx12nb] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div > span[b-d48cgx12nb] {
    display: block;
    margin-bottom: 7px;
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
}

.page-head h1[b-d48cgx12nb] {
    margin: 0;
    color: var(--text);
    font-size: 29px;
    font-weight: 900;
}

.back-button[b-d48cgx12nb] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.page-message[b-d48cgx12nb] {
    margin-bottom: 18px;
    padding: 15px 18px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.page-message.error[b-d48cgx12nb] {
    border-color: #fecdca;
    background: #fff2f2;
    color: #b42318;
}

.page-message.success[b-d48cgx12nb] {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #027a48;
}

.details-state[b-d48cgx12nb] {
    padding: 50px 24px;
    border: 1px solid var(--soft);
    border-radius: 17px;
    background: #fff;
    color: var(--muted);
    font-size: 18px;
    text-align: center;
}

.request-summary[b-d48cgx12nb] {
    margin-bottom: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--soft);
    border-radius: 17px;
    background: #fff;
}

.request-summary > div > span[b-d48cgx12nb] {
    color: var(--muted);
    font-size: 16px;
}

.request-summary h2[b-d48cgx12nb] {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 25px;
    font-weight: 900;
}

.status-badge[b-d48cgx12nb] {
    padding: 7px 14px;
    border-radius: 999px;
    background: #eff8ff;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.details-grid[b-d48cgx12nb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.details-card[b-d48cgx12nb] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 17px;
    background: #fff;
}

.details-card.full[b-d48cgx12nb] {
    grid-column: 1 / -1;
}

.details-card h3[b-d48cgx12nb] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.detail-row[b-d48cgx12nb] {
    padding: 13px 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 17px;
    line-height: 1.9;
}

.detail-row:last-child[b-d48cgx12nb] {
    border-bottom: 0;
}

.detail-row > span[b-d48cgx12nb] {
    flex-shrink: 0;
    color: var(--muted);
}

.detail-row strong[b-d48cgx12nb],
.detail-row a[b-d48cgx12nb] {
    min-width: 0;
    color: var(--text);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.detail-row a:hover[b-d48cgx12nb] {
    color: var(--green);
}

.message-content[b-d48cgx12nb] {
    margin: 0;
    color: #475467;
    font-size: 18px;
    line-height: 2.1;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.selected-needs[b-d48cgx12nb] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selected-needs span[b-d48cgx12nb] {
    padding: 9px 15px;
    border-radius: 999px;
    background: #f0f7f2;
    color: var(--green);
    font-size: 17px;
    font-weight: 700;
}

.field-group[b-d48cgx12nb] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.field-group label[b-d48cgx12nb] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group select[b-d48cgx12nb],
.field-group textarea[b-d48cgx12nb] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    line-height: 1.9;
}

.field-group textarea[b-d48cgx12nb] {
    resize: vertical;
}

.field-group select:focus[b-d48cgx12nb],
.field-group textarea:focus[b-d48cgx12nb] {
    outline: 2px solid rgba(58, 125, 68, .2);
    border-color: var(--green);
}

.save-button[b-d48cgx12nb] {
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.save-button:disabled[b-d48cgx12nb] {
    opacity: .65;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .details-grid[b-d48cgx12nb] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-d48cgx12nb] {
        grid-column: auto;
    }

    .page-head[b-d48cgx12nb],
    .request-summary[b-d48cgx12nb] {
        align-items: stretch;
        flex-direction: column;
    }

    .status-badge[b-d48cgx12nb] {
        align-self: flex-start;
    }

    .detail-row[b-d48cgx12nb] {
        flex-direction: column;
        gap: 6px;
    }

    .save-button[b-d48cgx12nb] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Surveys/ManageSurveys.razor.rz.scp.css */
.requests-page[b-p90iumggyw] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    direction: rtl;
}

.requester-cell[b-p90iumggyw] {
    min-width: 170px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.requester-cell strong[b-p90iumggyw] {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.requester-cell span[b-p90iumggyw] {
    color: var(--muted);
    font-size: 15px;
}

.requests-page a:not(.action-link)[b-p90iumggyw] {
    color: #344054;
    font-size: 17px;
    text-decoration: none;
}

.requests-page a:not(.action-link):hover[b-p90iumggyw] {
    color: #2459a6;
}

.status-badge[b-p90iumggyw] {
    min-height: 31px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.status-badge.info[b-p90iumggyw] {
    background: rgba(36, 89, 166, .1);
    color: #2459a6;
}

.status-badge.warning[b-p90iumggyw] {
    background: rgba(217, 137, 28, .12);
    color: #9a5b08;
}

.status-badge.success[b-p90iumggyw] {
    background: rgba(58, 125, 68, .11);
    color: #326f3c;
}

.status-badge.neutral[b-p90iumggyw] {
    background: rgba(102, 112, 133, .11);
    color: #596273;
}

.date-value[b-p90iumggyw] {
    display: inline-block;
    white-space: nowrap;
    color: #344054;
    font-size: 17px;
}

.action-link[b-p90iumggyw] {
    min-height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(36, 89, 166, .2);
    border-radius: 9px;
    background: #fff;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: .2s;
}

.action-link:hover[b-p90iumggyw] {
    border-color: rgba(36, 89, 166, .48);
    background: rgba(36, 89, 166, .04);
}

.action-link:focus-visible[b-p90iumggyw] {
    outline: 3px solid rgba(36, 89, 166, .2);
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .requests-page[b-p90iumggyw] {
        gap: 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Tickets/ManageTickets.razor.rz.scp.css */
.tickets-page[b-vm9kgghg9x] {
    width: 100%;
}

.pending-tickets-card[b-vm9kgghg9x] {
    min-width: 120px;
    min-height: 58px;

    padding: 10px 16px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
}

.pending-tickets-card span[b-vm9kgghg9x] {
    color: var(--muted);
    font-size: 11px;
}

.pending-tickets-card strong[b-vm9kgghg9x] {
    color: var(--text);
    font-size: 20px;
}

.ticket-cell[b-vm9kgghg9x] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ticket-icon[b-vm9kgghg9x] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-vm9kgghg9x],
.sender-cell[b-vm9kgghg9x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-cell strong[b-vm9kgghg9x],
.sender-cell strong[b-vm9kgghg9x] {
    font-size: 13px;
}

.ticket-cell span[b-vm9kgghg9x],
.sender-cell span[b-vm9kgghg9x] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-vm9kgghg9x] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-vm9kgghg9x] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-vm9kgghg9x] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-vm9kgghg9x] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-vm9kgghg9x] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-vm9kgghg9x] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-vm9kgghg9x] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-vm9kgghg9x] {
    border-color: var(--green);
    color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Users/CreateUser.razor.rz.scp.css */
.create-user-page[b-3yrxu6ag6h] {
    width: 100%;
}

.page-head[b-3yrxu6ag6h] {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.page-head > div > span[b-3yrxu6ag6h] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-3yrxu6ag6h] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-3yrxu6ag6h] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.back-button[b-3yrxu6ag6h] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
}

.form-card[b-3yrxu6ag6h] {
    width: 100%;
    box-sizing: border-box;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-grid[b-3yrxu6ag6h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-3yrxu6ag6h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-3yrxu6ag6h] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.form-group input[b-3yrxu6ag6h],
.form-group select[b-3yrxu6ag6h] {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    outline: none;
}

.form-group input:focus[b-3yrxu6ag6h],
.form-group select:focus[b-3yrxu6ag6h] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.switch-row[b-3yrxu6ag6h] {
    margin-top: 22px;
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    cursor: pointer;
}

.switch-row input[b-3yrxu6ag6h] {
    accent-color: var(--green);
}

.switch-row span[b-3yrxu6ag6h] {
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
}

.form-error[b-3yrxu6ag6h] {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff2f2;
    color: #b42318;
    font-size: 17px;
    line-height: 1.8;
}

.form-actions[b-3yrxu6ag6h] {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.save-button[b-3yrxu6ag6h],
.cancel-button[b-3yrxu6ag6h] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
}

.save-button[b-3yrxu6ag6h] {
    border: 0;
    background: var(--green);
    color: #fff;
    cursor: pointer;
}

.save-button:disabled[b-3yrxu6ag6h] {
    opacity: .6;
    cursor: not-allowed;
}

.cancel-button[b-3yrxu6ag6h] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.state-card[b-3yrxu6ag6h] {
    width: 100%;
    min-height: 220px;

    box-sizing: border-box;
    padding: 30px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.state-card p[b-3yrxu6ag6h] {
    color: var(--muted);
    font-size: 18px;
}

.loading-spinner[b-3yrxu6ag6h] {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin-b-3yrxu6ag6h .8s linear infinite;
}

@keyframes spin-b-3yrxu6ag6h {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    .page-head[b-3yrxu6ag6h] {
        flex-direction: column;
    }

    .form-grid[b-3yrxu6ag6h] {
        grid-template-columns: 1fr;
    }

    .form-card[b-3yrxu6ag6h] {
        padding: 18px;
    }
}

.roles-field[b-3yrxu6ag6h] {
    grid-column: 1 / -1;
}

.roles-grid[b-3yrxu6ag6h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.role-option[b-3yrxu6ag6h] {
    min-height: 58px;
    padding: 10px 14px;
    border: 2px solid var(--soft);
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.role-option:hover[b-3yrxu6ag6h] {
    border-color: rgba(58, 125, 68, .45);
    transform: translateY(-1px);
}

.role-option.selected[b-3yrxu6ag6h] {
    border-color: var(--green);
    background: rgba(58, 125, 68, .07);
    box-shadow: 0 8px 20px rgba(58, 125, 68, .1);
}

.role-option input[b-3yrxu6ag6h] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-check[b-3yrxu6ag6h] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 2px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 900;
    transition:
        border-color .18s ease,
        background-color .18s ease;
}

.role-option.selected .role-check[b-3yrxu6ag6h] {
    border-color: var(--green);
    background: var(--green);
}

.role-name[b-3yrxu6ag6h] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .roles-grid[b-3yrxu6ag6h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .roles-grid[b-3yrxu6ag6h] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Users/EditUser.razor.rz.scp.css */
.edit-user-page[b-wvq087q002] {
    width: 100%;
}

.page-head[b-wvq087q002] {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.page-head > div > span[b-wvq087q002] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-wvq087q002] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-wvq087q002] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.back-button[b-wvq087q002] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
}

.form-card[b-wvq087q002] {
    width: 100%;
    box-sizing: border-box;

    padding: 24px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.user-summary[b-wvq087q002] {
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--soft);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar[b-wvq087q002] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.user-summary > div:nth-child(2)[b-wvq087q002] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-summary strong[b-wvq087q002] {
    color: var(--text);
    font-size: 19px;
}

.user-summary span[b-wvq087q002] {
    color: var(--muted);
    font-size: 16px;
}

.role-list[b-wvq087q002] {
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.role-badge[b-wvq087q002] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(58, 125, 68, .09);
    color: var(--green) !important;
    font-size: 16px !important;
    font-weight: 800;
}

.form-grid[b-wvq087q002] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-wvq087q002] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-wvq087q002] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.form-group input[b-wvq087q002] {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    outline: none;
}

.form-group input:focus[b-wvq087q002] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.switch-row[b-wvq087q002] {
    margin-top: 22px;
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    cursor: pointer;
}

.switch-row input[b-wvq087q002] {
    accent-color: var(--green);
}

.switch-row span[b-wvq087q002] {
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
}

.form-error[b-wvq087q002] {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff2f2;
    color: #b42318;
    font-size: 17px;
}

.form-actions[b-wvq087q002] {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.save-button[b-wvq087q002],
.cancel-button[b-wvq087q002] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
}

.save-button[b-wvq087q002] {
    border: 0;
    background: var(--green);
    color: #fff;
    cursor: pointer;
}

.save-button:disabled[b-wvq087q002] {
    opacity: .6;
    cursor: not-allowed;
}

.cancel-button[b-wvq087q002] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.state-card[b-wvq087q002] {
    width: 100%;
    min-height: 220px;

    box-sizing: border-box;
    padding: 30px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.loading-spinner[b-wvq087q002] {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin-b-wvq087q002 .8s linear infinite;
}

@keyframes spin-b-wvq087q002 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    .page-head[b-wvq087q002] {
        flex-direction: column;
    }

    .form-grid[b-wvq087q002] {
        grid-template-columns: 1fr;
    }

    .form-card[b-wvq087q002] {
        padding: 18px;
    }

    .user-summary[b-wvq087q002] {
        flex-wrap: wrap;
    }

    .role-list[b-wvq087q002] {
        width: 100%;
        margin-right: 60px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Users/ManageUsers.razor.rz.scp.css */
.users-page[b-r6nsbx5usl] {
    width: 100%;
}


/* =========================
   Create Button
========================= */

.create-user-button[b-r6nsbx5usl] {
    min-height: 58px;

    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-user-button span[b-r6nsbx5usl] {
    font-size: 20px;
    font-weight: 400;

    line-height: 1;
}

.create-user-button:hover[b-r6nsbx5usl] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   User Cell
========================= */

.user-cell[b-r6nsbx5usl] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.user-avatar[b-r6nsbx5usl] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.user-cell > div:last-child[b-r6nsbx5usl] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.user-cell strong[b-r6nsbx5usl] {
    font-size: 18px;
}

.user-cell span[b-r6nsbx5usl] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Values
========================= */

.ltr-value[b-r6nsbx5usl] {
    direction: ltr;

    text-align: right !important;
}


/* =========================
   Status Badges
========================= */

.status-badge[b-r6nsbx5usl] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-r6nsbx5usl] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-r6nsbx5usl] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-r6nsbx5usl] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Roles
========================= */

.roles-cell[b-r6nsbx5usl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;
}

.role-badge[b-r6nsbx5usl] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;

    padding: 0 9px;

    border-radius: 999px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.role-badge.neutral[b-r6nsbx5usl] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Row Actions
========================= */

.row-actions[b-r6nsbx5usl] {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-r6nsbx5usl] {
    min-height: 32px;

    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-r6nsbx5usl] {
    border-color: var(--green);

    color: var(--green);
}

.action-link.danger[b-r6nsbx5usl] {
    color: #b42318;
}

.action-link.danger:hover[b-r6nsbx5usl] {
    border-color: #fda29b;

    background: #fff7f7;
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .create-user-button[b-r6nsbx5usl] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Users/ResetUserPassword.razor.rz.scp.css */
.reset-password-page[b-lymyqehi60] {
    width: 100%;
}

.page-head[b-lymyqehi60] {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.page-head > div > span[b-lymyqehi60] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-lymyqehi60] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-lymyqehi60] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.back-button[b-lymyqehi60] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
}

.form-card[b-lymyqehi60] {
    max-width: 620px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.user-summary[b-lymyqehi60] {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--soft);
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar[b-lymyqehi60] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
}

.user-summary > div:last-child[b-lymyqehi60] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-summary strong[b-lymyqehi60] {
    color: var(--text);
    font-size: 19px;
}

.user-summary span[b-lymyqehi60] {
    color: var(--muted);
    font-size: 16px;
}

.security-note[b-lymyqehi60] {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fffaeb;
    color: #7a5d00;
    font-size: 17px;
    line-height: 1.9;
}

.form-group[b-lymyqehi60] {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-lymyqehi60] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.form-group input[b-lymyqehi60] {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    outline: none;
}

.form-group input:focus[b-lymyqehi60] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.form-error[b-lymyqehi60],
.form-success[b-lymyqehi60] {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 17px;
}

.form-error[b-lymyqehi60] {
    background: #fff2f2;
    color: #b42318;
}

.form-success[b-lymyqehi60] {
    background: #ecfdf3;
    color: #027a48;
}

.form-actions[b-lymyqehi60] {
    margin-top: 22px;
    display: flex;
    gap: 10px;
}

.save-button[b-lymyqehi60],
.cancel-button[b-lymyqehi60] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
}

.save-button[b-lymyqehi60] {
    border: 0;
    background: var(--green);
    color: #fff;
    cursor: pointer;
}

.save-button:disabled[b-lymyqehi60] {
    opacity: .6;
    cursor: not-allowed;
}

.cancel-button[b-lymyqehi60] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.state-card[b-lymyqehi60] {
    min-height: 220px;
    max-width: 620px;
    padding: 30px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.loading-spinner[b-lymyqehi60] {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin-b-lymyqehi60 .8s linear infinite;
}

@keyframes spin-b-lymyqehi60 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {
    .page-head[b-lymyqehi60] {
        flex-direction: column;
    }

    .form-card[b-lymyqehi60] {
        padding: 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Users/UserDetails.razor.rz.scp.css */
.user-details-page[b-4l0q7t5ozq] {
    width: 100%;
}

.page-head[b-4l0q7t5ozq] {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.page-head span[b-4l0q7t5ozq] {
    display: block;
    margin-bottom: 6px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-4l0q7t5ozq] {
    margin: 0;
    color: var(--text);
    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-4l0q7t5ozq] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.back-button[b-4l0q7t5ozq] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
}

.details-grid[b-4l0q7t5ozq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.details-card[b-4l0q7t5ozq] {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.profile-card[b-4l0q7t5ozq] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar[b-4l0q7t5ozq] {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 16px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
}

.profile-info[b-4l0q7t5ozq] {
    flex: 1;
}

.profile-info h2[b-4l0q7t5ozq] {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.profile-info span[b-4l0q7t5ozq] {
    margin-top: 4px;
    color: var(--muted);
    font-size: 16px;
}

.details-card h3[b-4l0q7t5ozq] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.details-list[b-4l0q7t5ozq],
.verification-list[b-4l0q7t5ozq] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-4l0q7t5ozq],
.verification-item[b-4l0q7t5ozq] {
    min-height: 56px;
    border-bottom: 1px solid #f0f2f4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.detail-item:last-child[b-4l0q7t5ozq],
.verification-item:last-child[b-4l0q7t5ozq] {
    border-bottom: 0;
}

.detail-item span[b-4l0q7t5ozq],
.verification-item span[b-4l0q7t5ozq] {
    color: var(--muted);
    font-size: 17px;
}

.detail-item strong[b-4l0q7t5ozq],
.verification-item strong[b-4l0q7t5ozq] {
    color: var(--text);
    font-size: 18px;
}

.verification-item > div[b-4l0q7t5ozq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.action-list[b-4l0q7t5ozq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.action-button[b-4l0q7t5ozq] {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.action-button:hover[b-4l0q7t5ozq] {
    border-color: var(--green);
    color: var(--green);
}

.action-button.danger[b-4l0q7t5ozq] {
    color: #b42318;
}

.status-badge[b-4l0q7t5ozq] {
    display: inline-flex;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 999px;
    align-items: center;
    font-size: 16px;
    font-weight: 800;
}

.status-badge.success[b-4l0q7t5ozq] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-4l0q7t5ozq] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-4l0q7t5ozq] {
    background: #f2f4f7;
    color: #667085;
}

.ltr-value[b-4l0q7t5ozq] {
    direction: ltr;
}

.state-card[b-4l0q7t5ozq] {
    min-height: 220px;
    padding: 30px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.state-card p[b-4l0q7t5ozq] {
    color: var(--muted);
    font-size: 18px;
}

.loading-spinner[b-4l0q7t5ozq] {
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin-b-4l0q7t5ozq .8s linear infinite;
}

.profile-roles[b-4l0q7t5ozq] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role-badge[b-4l0q7t5ozq] {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 800;
}

.role-badge.neutral[b-4l0q7t5ozq] {
    background: #f2f4f7;
    color: #667085;
}

@keyframes spin-b-4l0q7t5ozq {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 800px) {
    .page-head[b-4l0q7t5ozq] {
        flex-direction: column;
    }

    .details-grid[b-4l0q7t5ozq] {
        grid-template-columns: 1fr;
    }

    .profile-card[b-4l0q7t5ozq] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Visits/AdminVisitDetails.razor.rz.scp.css */
.admin-visit-payment-details[b-2jn6a0u8eu] {
    width: 100%;
    min-width: 0;

    color: var(--text, #475467);
    font-size: 17px;
}

.admin-visit-payment-details[b-2jn6a0u8eu],
.admin-visit-payment-details *[b-2jn6a0u8eu] {
    box-sizing: border-box;
}

.avp-head[b-2jn6a0u8eu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 24px;
}

.avp-head > div > span[b-2jn6a0u8eu] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

h1[b-2jn6a0u8eu] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

h2[b-2jn6a0u8eu] {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 900;
}

p[b-2jn6a0u8eu] {
    margin: 8px 0;

    color: var(--muted, #667085);

    font-size: 18px;
    line-height: 2;

    overflow-wrap: anywhere;
}

.avp-grid[b-2jn6a0u8eu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.avp-card[b-2jn6a0u8eu] {
    min-width: 0;
    padding: 24px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;

    background: #fff;
}

.avp-card.full[b-2jn6a0u8eu] {
    grid-column: 1 / -1;
}

dl[b-2jn6a0u8eu] {
    margin: 0 0 20px;
}

dl > div[b-2jn6a0u8eu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    padding: 15px 0;

    border-bottom: 1px solid #eef0f3;

    font-size: 17px;
    line-height: 1.9;
}

dl > div:last-child[b-2jn6a0u8eu] {
    border-bottom: 0;
}

dt[b-2jn6a0u8eu] {
    flex-shrink: 0;
    color: var(--muted, #667085);
}

dd[b-2jn6a0u8eu] {
    min-width: 0;
    margin: 0;

    text-align: left;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.avp-state[b-2jn6a0u8eu] {
    padding: 40px 20px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;

    background: #fff;

    text-align: center;
    font-size: 18px;
    line-height: 2;
}

.avp-error[b-2jn6a0u8eu],
.avp-notice[b-2jn6a0u8eu] {
    padding: 16px 20px;
    margin-bottom: 20px;

    border: 1px solid;
    border-radius: 12px;

    font-size: 17px;
    line-height: 1.9;
}

.avp-error[b-2jn6a0u8eu] {
    border-color: #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.avp-notice[b-2jn6a0u8eu] {
    border-color: #fedf89;
    background: #fffcf5;
    color: #875408;
}

.avp-actions[b-2jn6a0u8eu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.avp-button[b-2jn6a0u8eu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;

    background: #fff;
    color: var(--text, #475467);

    font: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.avp-button:hover[b-2jn6a0u8eu] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.avp-button:focus-visible[b-2jn6a0u8eu] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.history-badge[b-2jn6a0u8eu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.history-badge.success[b-2jn6a0u8eu] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-2jn6a0u8eu] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-2jn6a0u8eu] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-2jn6a0u8eu] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-2jn6a0u8eu] {
    background: #f2f4f7;
    color: #667085;
}

@media (max-width: 900px) {
    .avp-grid[b-2jn6a0u8eu] {
        grid-template-columns: 1fr;
    }

    .avp-card.full[b-2jn6a0u8eu] {
        grid-column: auto;
    }
}

@media (max-width: 650px) {
    .avp-head[b-2jn6a0u8eu] {
        flex-direction: column;
        align-items: stretch;
    }

    .avp-card[b-2jn6a0u8eu] {
        padding: 19px;
    }

    dl > div[b-2jn6a0u8eu] {
        flex-direction: column;
        gap: 6px;
    }

    dd[b-2jn6a0u8eu] {
        text-align: right;
    }

    dt[b-2jn6a0u8eu] {
        flex-shrink: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Admin/Pages/Visits/ManageVisits.razor.rz.scp.css */
.admin-visit-payment-list[b-j35zkm7zoe] {
    width: 100%;
    min-width: 0;
}

.admin-visit-payment-list[b-j35zkm7zoe]  .data-table {
    table-layout: auto;
}

.admin-visit-payment-list[b-j35zkm7zoe]  .data-table th,
.admin-visit-payment-list[b-j35zkm7zoe]  .data-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.avp-cell[b-j35zkm7zoe] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: nowrap;
}

.avp-cell strong[b-j35zkm7zoe] {
    color: var(--text, #475467);
    font-size: 18px;
}

.avp-cell span[b-j35zkm7zoe] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.8;
}

.avp-cell .avp-test[b-j35zkm7zoe] {
    color: #b54708;
}

.avp-muted[b-j35zkm7zoe] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.avp-actions[b-j35zkm7zoe] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    white-space: nowrap;
}

.avp-button[b-j35zkm7zoe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;

    background: #fff;
    color: var(--text, #475467);

    font: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.avp-button:hover[b-j35zkm7zoe] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.avp-button:focus-visible[b-j35zkm7zoe] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.history-badge[b-j35zkm7zoe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.history-badge.success[b-j35zkm7zoe] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-j35zkm7zoe] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-j35zkm7zoe] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-j35zkm7zoe] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-j35zkm7zoe] {
    background: #f2f4f7;
    color: #667085;
}
/* _content/PopProject.BlazorSSR/Components/Features/Articles/ArticleMediaSection.razor.rz.scp.css */
.article-gallery[b-22fb6pcv1g],
.article-video[b-22fb6pcv1g] {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e4e7ec;
    direction: rtl;
}

.article-gallery h2[b-22fb6pcv1g],
.article-video h2[b-22fb6pcv1g] {
    margin: 0 0 22px;
    color: #3f4b5e;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.8;
}

.gallery-grid[b-22fb6pcv1g] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.gallery-card[b-22fb6pcv1g] {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    color: #475467;
    font-family: inherit;
    text-align: right;
    cursor: pointer;
}

.gallery-card img[b-22fb6pcv1g] {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
}

.gallery-card > span[b-22fb6pcv1g] {
    padding: 12px;
    display: block;
    font-size: 15px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.gallery-card:hover[b-22fb6pcv1g] {
    border-color: #3a7d44;
}

.gallery-card:focus-visible[b-22fb6pcv1g],
.viewer-close:focus-visible[b-22fb6pcv1g],
.viewer-actions button:focus-visible[b-22fb6pcv1g] {
    outline: 3px solid #2459a6;
    outline-offset: 3px;
}

.gallery-dialog[b-22fb6pcv1g] {
    box-sizing: border-box;
    width: min(1100px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 0;
    border-radius: 18px;
    background: #111827;
    color: #fff;
}

.gallery-dialog[b-22fb6pcv1g]::backdrop {
    background: rgba(0, 0, 0, .82);
}

.gallery-viewer[b-22fb6pcv1g] {
    position: relative;
    padding: 54px 18px 18px;
    direction: rtl;
}

.gallery-viewer > img[b-22fb6pcv1g] {
    width: 100%;
    max-height: 70dvh;
    display: block;
    object-fit: contain;
}

.viewer-close[b-22fb6pcv1g] {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #283345;
    color: #fff;
    font: inherit;
    font-size: 28px;
    cursor: pointer;
}

.viewer-footer[b-22fb6pcv1g] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.viewer-footer > div:first-child[b-22fb6pcv1g] {
    min-width: 0;
}

.viewer-footer p[b-22fb6pcv1g] {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.9;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.viewer-footer span[b-22fb6pcv1g] {
    color: #cbd5e1;
    font-size: 15px;
}

.viewer-actions[b-22fb6pcv1g] {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
}

.viewer-actions button[b-22fb6pcv1g] {
    width: 42px;
    height: 42px;
    border: 1px solid #475569;
    border-radius: 11px;
    background: #283345;
    color: #fff;
    font-size: 23px;
    cursor: pointer;
}

.article-video video[b-22fb6pcv1g] {
    width: 100%;
    max-height: 540px;
    display: block;
    border-radius: 16px;
    background: #111827;
}

.article-video > p[b-22fb6pcv1g] {
    margin: 18px 0 0;
    color: #475467;
    font-size: 18px;
    line-height: 2;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .gallery-grid[b-22fb6pcv1g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .viewer-footer[b-22fb6pcv1g] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .gallery-grid[b-22fb6pcv1g] {
        grid-template-columns: 1fr;
    }
}

button.gallery-close-button[b-22fb6pcv1g] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    box-sizing: border-box;

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

    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    direction: ltr;
}
/* _content/PopProject.BlazorSSR/Components/Features/Auth/Pages/ForgotPassword.razor.rz.scp.css */
.auth-page[b-7yxdaotxu6] {
    min-height: calc(100vh - 160px);
    padding: 90px 0;
    background: #f8fafc;
    display: flex;
    align-items: center;
}

.auth-page .container[b-7yxdaotxu6] {
    width: 100%;
}

.auth-card[b-7yxdaotxu6] {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 42px 38px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .05);
}

.auth-head[b-7yxdaotxu6] {
    text-align: center;
    margin-bottom: 34px;
}

.auth-head span[b-7yxdaotxu6] {
    display: block;
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.auth-head h1[b-7yxdaotxu6] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.auth-head p[b-7yxdaotxu6] {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}

.auth-form[b-7yxdaotxu6] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group[b-7yxdaotxu6] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-group label[b-7yxdaotxu6] {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.form-group input[b-7yxdaotxu6] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: .2s;
    box-sizing: border-box;
}

.form-group input[b-7yxdaotxu6]::placeholder {
    color: var(--muted);
}

.form-group input:focus[b-7yxdaotxu6] {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(58, 125, 68, .08);
}

.register-button[b-7yxdaotxu6] {
    width: 100%;
    height: 54px;
    margin-top: 4px;
    border: 0;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s;
}

.register-button:hover:not(:disabled)[b-7yxdaotxu6] {
    transform: translateY(-2px);
    filter: brightness(.95);
}

.register-button:active:not(:disabled)[b-7yxdaotxu6] {
    transform: translateY(0);
}

.register-button:disabled[b-7yxdaotxu6] {
    opacity: .6;
    cursor: not-allowed;
}

.auth-error[b-7yxdaotxu6] {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff2f2;
    color: #b42318;
    font-size: 13px;
    line-height: 1.8;
}

.otp-timer[b-7yxdaotxu6] {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid var(--soft);
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.otp-timer strong[b-7yxdaotxu6] {
    color: var(--text);
    font-weight: 800;
}

.otp-resend[b-7yxdaotxu6],
.auth-back-button[b-7yxdaotxu6] {
    align-self: center;
    border: 0;
    background: transparent;
    color: var(--green);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s;
}

.otp-resend:hover:not(:disabled)[b-7yxdaotxu6],
.auth-back-button:hover:not(:disabled)[b-7yxdaotxu6] {
    text-decoration: underline;
}

.otp-resend:disabled[b-7yxdaotxu6],
.auth-back-button:disabled[b-7yxdaotxu6] {
    opacity: .5;
    cursor: not-allowed;
}

.auth-login[b-7yxdaotxu6] {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--soft);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.auth-login a[b-7yxdaotxu6] {
    color: var(--green);
    font-weight: 800;
    text-decoration: none;
}

.auth-login a:hover[b-7yxdaotxu6] {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .auth-page[b-7yxdaotxu6] {
        padding: 55px 16px;
        align-items: flex-start;
    }

    .auth-card[b-7yxdaotxu6] {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .auth-head h1[b-7yxdaotxu6] {
        font-size: 26px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Auth/Pages/ResetPassword.razor.rz.scp.css */
.auth-page[b-hfpnm9y5o3] {
    min-height: calc(100vh - 160px);
    padding: 90px 0;
    background: #f8fafc;
    display: flex;
    align-items: center;
}

.auth-page .container[b-hfpnm9y5o3] {
    width: 100%;
}

.auth-card[b-hfpnm9y5o3] {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 42px 38px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .05);
}

.auth-head[b-hfpnm9y5o3] {
    text-align: center;
    margin-bottom: 34px;
}

.auth-head span[b-hfpnm9y5o3] {
    display: block;
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.auth-head h1[b-hfpnm9y5o3] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.auth-head p[b-hfpnm9y5o3] {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}

.auth-form[b-hfpnm9y5o3] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group[b-hfpnm9y5o3] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.form-group label[b-hfpnm9y5o3] {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.form-group input[b-hfpnm9y5o3] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: .2s;
    box-sizing: border-box;
}

.form-group input[b-hfpnm9y5o3]::placeholder {
    color: var(--muted);
}

.form-group input:focus[b-hfpnm9y5o3] {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(58, 125, 68, .08);
}

.register-button[b-hfpnm9y5o3] {
    width: 100%;
    height: 54px;
    margin-top: 4px;
    border: 0;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s;
}

.register-button:hover:not(:disabled)[b-hfpnm9y5o3] {
    transform: translateY(-2px);
    filter: brightness(.95);
}

.register-button:active:not(:disabled)[b-hfpnm9y5o3] {
    transform: translateY(0);
}

.register-button:disabled[b-hfpnm9y5o3] {
    opacity: .6;
    cursor: not-allowed;
}

.auth-error[b-hfpnm9y5o3] {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff2f2;
    color: #b42318;
    font-size: 13px;
    line-height: 1.8;
}

.auth-login[b-hfpnm9y5o3] {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--soft);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.auth-login a[b-hfpnm9y5o3] {
    color: var(--green);
    font-weight: 800;
    text-decoration: none;
}

.auth-login a:hover[b-hfpnm9y5o3] {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .auth-page[b-hfpnm9y5o3] {
        padding: 55px 16px;
        align-items: flex-start;
    }

    .auth-card[b-hfpnm9y5o3] {
        padding: 32px 22px;
        border-radius: 20px;
    }

    .auth-head h1[b-hfpnm9y5o3] {
        font-size: 26px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Finance/CourierFinance.razor.rz.scp.css */
.courier-finance-page[b-gfyniwt9y9] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-gfyniwt9y9] {
    margin-bottom: 22px;
}

.page-head > div > span[b-gfyniwt9y9] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-gfyniwt9y9] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-gfyniwt9y9] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================
   Summary
========================= */

.finance-summary[b-gfyniwt9y9] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-gfyniwt9y9] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-gfyniwt9y9] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-gfyniwt9y9] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-gfyniwt9y9] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Current Settlement
========================= */

.current-settlement-card[b-gfyniwt9y9] {
    margin-bottom: 18px;
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.settlement-head[b-gfyniwt9y9] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.settlement-head > div > span[b-gfyniwt9y9] {
    display: block;

    margin-bottom: 5px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 800;
}

.settlement-head h2[b-gfyniwt9y9] {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.settlement-head p[b-gfyniwt9y9] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.settlement-grid[b-gfyniwt9y9] {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.settlement-item[b-gfyniwt9y9] {
    min-height: 80px;
    padding: 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 11px;
}

.settlement-item.highlight[b-gfyniwt9y9] {
    background: rgba(58, 125, 68, .05);

    border-color: rgba(58, 125, 68, .18);
}

.settlement-item span[b-gfyniwt9y9] {
    color: var(--muted);

    font-size: 9px;
}

.settlement-item strong[b-gfyniwt9y9] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.settlement-item.highlight strong[b-gfyniwt9y9] {
    color: var(--green);
}

.negative-value[b-gfyniwt9y9] {
    color: #b42318 !important;
}


/* =========================
   Finance Card
========================= */

.finance-card[b-gfyniwt9y9] {
    margin-top: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;

    overflow: hidden;
}

.card-head[b-gfyniwt9y9] {
    padding: 19px 20px;

    border-bottom: 1px solid #f0f2f4;
}

.card-head h2[b-gfyniwt9y9] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-head p[b-gfyniwt9y9] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Filters
========================= */

.filters-row[b-gfyniwt9y9] {
    padding: 14px 20px;

    display: grid;
    grid-template-columns:
        minmax(250px, 2fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr);

    gap: 10px;

    border-bottom: 1px solid #f0f2f4;

    background: #fbfcfd;
}

.filters-row input[b-gfyniwt9y9],
.filters-row select[b-gfyniwt9y9] {
    width: 100%;
    min-height: 40px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;

    outline: none;
}

.filters-row input:focus[b-gfyniwt9y9],
.filters-row select:focus[b-gfyniwt9y9] {
    border-color: var(--green);
}


/* =========================
   Table
========================= */

.table-wrap[b-gfyniwt9y9] {
    width: 100%;

    overflow-x: auto;
}

.finance-table[b-gfyniwt9y9] {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;
}

.finance-table th[b-gfyniwt9y9],
.finance-table td[b-gfyniwt9y9] {
    padding: 14px 15px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.finance-table th[b-gfyniwt9y9] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.finance-table td[b-gfyniwt9y9] {
    color: var(--text);

    font-size: 11px;
}

.finance-table tbody tr:last-child td[b-gfyniwt9y9] {
    border-bottom: 0;
}

.finance-table tbody tr:hover[b-gfyniwt9y9] {
    background: #fcfdfd;
}


/* =========================
   Mission
========================= */

.mission-cell[b-gfyniwt9y9] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.mission-avatar[b-gfyniwt9y9] {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.mission-cell > div:last-child[b-gfyniwt9y9] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.mission-cell strong[b-gfyniwt9y9] {
    color: var(--text);

    font-size: 11px;
}

.mission-cell span[b-gfyniwt9y9] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Values
========================= */

.distance-value[b-gfyniwt9y9] {
    direction: ltr;

    display: inline-block;
}

.income-value[b-gfyniwt9y9] {
    color: #027a48;

    white-space: nowrap;
}


/* =========================
   Status
========================= */

.status-badge[b-gfyniwt9y9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-gfyniwt9y9] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-gfyniwt9y9] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-gfyniwt9y9] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-gfyniwt9y9] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-gfyniwt9y9] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-link[b-gfyniwt9y9] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-gfyniwt9y9] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .finance-summary[b-gfyniwt9y9],
    .settlement-grid[b-gfyniwt9y9] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-row[b-gfyniwt9y9] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-row input[b-gfyniwt9y9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {

    .finance-summary[b-gfyniwt9y9],
    .settlement-grid[b-gfyniwt9y9],
    .filters-row[b-gfyniwt9y9] {
        grid-template-columns: 1fr;
    }

    .filters-row input[b-gfyniwt9y9] {
        grid-column: auto;
    }

    .settlement-head[b-gfyniwt9y9] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Finance/CourierSettlementDetails.razor.rz.scp.css */
.courier-settlement-details-page[b-2g7624qpxn] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-2g7624qpxn] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-2g7624qpxn] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-2g7624qpxn] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-2g7624qpxn] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-2g7624qpxn] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-2g7624qpxn] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Settlement Header
========================= */

.settlement-header-card[b-2g7624qpxn] {
    margin-bottom: 18px;
    padding: 18px 20px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.settlement-identity[b-2g7624qpxn] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.settlement-icon[b-2g7624qpxn] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.settlement-identity > div:last-child[b-2g7624qpxn] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.settlement-identity strong[b-2g7624qpxn] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.settlement-identity span[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-2g7624qpxn] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-2g7624qpxn] {
    min-height: 110px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card.highlight[b-2g7624qpxn] {
    background: rgba(58, 125, 68, .04);

    border-color: rgba(58, 125, 68, .2);
}

.summary-card span[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-2g7624qpxn] {
    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.summary-card.highlight strong[b-2g7624qpxn] {
    color: var(--green);
}

.summary-card small[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 9px;
}

.negative-value[b-2g7624qpxn] {
    color: #b42318 !important;
}


/* =========================
   Details
========================= */

.details-grid[b-2g7624qpxn] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-2g7624qpxn] {
    padding: 21px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-2g7624qpxn] {
    grid-column: 1 / -1;
}

.details-card h2[b-2g7624qpxn] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.details-list[b-2g7624qpxn] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-2g7624qpxn] {
    min-height: 53px;

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

    gap: 16px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-2g7624qpxn] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-2g7624qpxn] {
    color: var(--text);

    font-size: 11px;
}

.ltr-value[b-2g7624qpxn] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Card Head
========================= */

.card-head[b-2g7624qpxn] {
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.card-head h2[b-2g7624qpxn] {
    margin-bottom: 4px;
}

.card-head p[b-2g7624qpxn] {
    margin: 0;

    color: var(--muted);

    font-size: 10px;
}

.count-badge[b-2g7624qpxn] {
    min-height: 28px;
    padding: 0 9px;

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

    border-radius: 999px;

    background: #f2f4f7;
    color: #475467;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================
   Calculation
========================= */

.calculation-box[b-2g7624qpxn] {
    max-width: 650px;

    margin-right: auto;
    margin-left: auto;

    padding: 18px;

    border: 1px solid #f0f2f4;
    border-radius: 14px;

    background: #fbfcfd;
}

.calculation-row[b-2g7624qpxn] {
    min-height: 48px;

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

    gap: 20px;
}

.calculation-row span[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 11px;
}

.calculation-row strong[b-2g7624qpxn] {
    color: var(--text);

    font-size: 12px;
}

.calculation-row.deduction strong[b-2g7624qpxn] {
    color: #b42318;
}

.calculation-divider[b-2g7624qpxn] {
    height: 1px;

    margin: 8px 0;

    background: #e4e7ec;
}

.calculation-row.final span[b-2g7624qpxn],
.calculation-row.final strong[b-2g7624qpxn] {
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}


/* =========================
   Table
========================= */

.table-wrap[b-2g7624qpxn] {
    width: 100%;

    overflow-x: auto;
}

.settlement-table[b-2g7624qpxn] {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;
}

.settlement-table th[b-2g7624qpxn],
.settlement-table td[b-2g7624qpxn] {
    padding: 13px 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.settlement-table th[b-2g7624qpxn] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.settlement-table td[b-2g7624qpxn] {
    color: var(--text);

    font-size: 10px;
}

.settlement-table tbody tr:last-child td[b-2g7624qpxn] {
    border-bottom: 0;
}

.settlement-table tbody tr:hover[b-2g7624qpxn] {
    background: #fcfdfd;
}


/* =========================
   Mission
========================= */

.mission-cell[b-2g7624qpxn] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.mission-avatar[b-2g7624qpxn] {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.mission-cell > div:last-child[b-2g7624qpxn],
.origin-cell[b-2g7624qpxn] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.mission-cell strong[b-2g7624qpxn],
.origin-cell strong[b-2g7624qpxn] {
    color: var(--text);

    font-size: 10px;
}

.mission-cell span[b-2g7624qpxn],
.origin-cell span[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 8px;
}

.distance-value[b-2g7624qpxn] {
    direction: ltr;

    display: inline-block;
}

.income-value[b-2g7624qpxn] {
    color: #027a48;

    white-space: nowrap;
}


/* =========================
   Status
========================= */

.status-badge[b-2g7624qpxn] {
    min-height: 27px;
    padding: 0 9px;

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

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-2g7624qpxn] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-2g7624qpxn] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-2g7624qpxn] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-2g7624qpxn] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-2g7624qpxn] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Action
========================= */

.action-link[b-2g7624qpxn] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.action-link:hover[b-2g7624qpxn] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Timeline
========================= */

.timeline[b-2g7624qpxn] {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.timeline-item[b-2g7624qpxn] {
    position: relative;

    min-height: 58px;
    padding-right: 27px;
}

.timeline-item:not(:last-child)[b-2g7624qpxn]::after {
    content: "";

    position: absolute;

    top: 14px;
    right: 5px;

    width: 1px;
    height: calc(100% + 12px);

    background: #e4e7ec;
}

.timeline-dot[b-2g7624qpxn] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-2g7624qpxn] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-2g7624qpxn] {
    background: var(--orange);
}

.timeline-item.failed .timeline-dot[b-2g7624qpxn] {
    background: #b42318;
}

.timeline-content[b-2g7624qpxn] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.timeline-content strong[b-2g7624qpxn] {
    color: var(--text);

    font-size: 11px;
}

.timeline-content span[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 10px;
    line-height: 1.8;
}

.timeline-content small[b-2g7624qpxn] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Payment Problem
========================= */

.payment-problem-card[b-2g7624qpxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: #fffbfa;

    border-color: #fecdca;
}

.payment-problem-card strong[b-2g7624qpxn] {
    display: block;

    margin-bottom: 5px;

    color: #b42318;

    font-size: 12px;
}

.payment-problem-card p[b-2g7624qpxn] {
    margin: 0;

    color: #667085;

    font-size: 10px;
    line-height: 1.8;
}

.ticket-button[b-2g7624qpxn] {
    min-height: 39px;
    padding: 0 13px;

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

    flex: 0 0 auto;

    border: 1px solid #b42318;
    border-radius: 9px;

    background: #fff;
    color: #b42318;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .summary-grid[b-2g7624qpxn] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-2g7624qpxn],
    .settlement-header-card[b-2g7624qpxn],
    .payment-problem-card[b-2g7624qpxn] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-2g7624qpxn] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-2g7624qpxn] {
        grid-column: auto;
    }

    .back-button[b-2g7624qpxn],
    .ticket-button[b-2g7624qpxn] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-2g7624qpxn] {
        grid-template-columns: 1fr;
    }

    .detail-item[b-2g7624qpxn],
    .calculation-row[b-2g7624qpxn] {
        align-items: flex-start;
        flex-direction: column;

        padding: 11px 0;

        gap: 5px;
    }

    .card-head[b-2g7624qpxn] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/History/CourierShipmentHistory.razor.rz.scp.css */
.courier-history-page[b-geurmg2fp1] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.history-summary[b-geurmg2fp1] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-geurmg2fp1] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-geurmg2fp1] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-geurmg2fp1] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-geurmg2fp1] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Shipment
========================= */

.shipment-cell[b-geurmg2fp1] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.shipment-avatar[b-geurmg2fp1] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.shipment-cell > div:last-child[b-geurmg2fp1] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.shipment-cell strong[b-geurmg2fp1] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.shipment-cell span[b-geurmg2fp1] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Location
========================= */

.location-cell[b-geurmg2fp1] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.location-cell strong[b-geurmg2fp1] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.location-cell span[b-geurmg2fp1] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Values
========================= */

.reference-text[b-geurmg2fp1] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.distance-value[b-geurmg2fp1] {
    display: inline-block;

    direction: ltr;

    color: var(--text);

    font-size: 11px;
    font-weight: 700;
}

.income-value[b-geurmg2fp1] {
    color: #027a48;

    font-size: 11px;
    font-weight: 900;

    white-space: nowrap;
}


/* =========================
   Status
========================= */

.status-badge[b-geurmg2fp1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-geurmg2fp1] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-geurmg2fp1] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-geurmg2fp1] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-geurmg2fp1] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-geurmg2fp1] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Action
========================= */

.action-link[b-geurmg2fp1] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-geurmg2fp1] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .history-summary[b-geurmg2fp1] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .history-summary[b-geurmg2fp1] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Profile/CourierProfile.razor.rz.scp.css */
.courier-profile-page[b-wu5kycurda] {
    width: 100%;
}


/* =========================
   Header
========================= */

.profile-head[b-wu5kycurda] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.profile-head > div:first-child > span[b-wu5kycurda] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.profile-head h1[b-wu5kycurda] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.profile-head p[b-wu5kycurda] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.profile-status-card[b-wu5kycurda] {
    min-width: 160px;
    padding: 14px 18px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 14px;
}

.profile-status-card span[b-wu5kycurda] {
    color: var(--muted);

    font-size: 10px;
}

.profile-status-card strong[b-wu5kycurda] {
    color: var(--green);

    font-size: 15px;
}


/* =========================
   Note
========================= */

.profile-info-note[b-wu5kycurda] {
    margin-bottom: 18px;
    padding: 15px 17px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    color: var(--muted);

    font-size: 12px;
    line-height: 2;
}


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

.profile-grid[b-wu5kycurda] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.profile-card[b-wu5kycurda] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.profile-card.full[b-wu5kycurda] {
    grid-column: 1 / -1;
}

.profile-card h3[b-wu5kycurda] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Identity
========================= */

.identity-card[b-wu5kycurda] {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 16px;
}

.courier-avatar[b-wu5kycurda] {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

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

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.identity-info[b-wu5kycurda] {
    flex: 1;
}

.identity-info h2[b-wu5kycurda] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.identity-info > span[b-wu5kycurda] {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
}

.identity-badges[b-wu5kycurda] {
    margin-top: 10px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Details
========================= */

.details-list[b-wu5kycurda] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-wu5kycurda] {
    min-height: 55px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-wu5kycurda] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-wu5kycurda] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-wu5kycurda] {
    color: var(--text);

    font-size: 12px;
}

.ltr-value[b-wu5kycurda] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Vehicle
========================= */

.vehicle-card[b-wu5kycurda] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: #fbfcfd;

    border: 1px solid var(--soft);
    border-radius: 12px;
}

.vehicle-icon[b-wu5kycurda] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.vehicle-card > div:last-child[b-wu5kycurda] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.vehicle-card strong[b-wu5kycurda] {
    color: var(--text);

    font-size: 12px;
}

.vehicle-card span[b-wu5kycurda] {
    color: var(--muted);

    font-size: 9px;
}

.vehicle-details[b-wu5kycurda] {
    margin-top: 10px;
}


/* =========================
   Documents
========================= */

.documents-list[b-wu5kycurda] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.document-item[b-wu5kycurda] {
    min-height: 65px;
    padding: 10px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.document-icon[b-wu5kycurda] {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

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

    border-radius: 9px;

    background: #fff;
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.document-info[b-wu5kycurda] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.document-info strong[b-wu5kycurda] {
    color: var(--text);

    font-size: 11px;
}

.document-info span[b-wu5kycurda] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Performance
========================= */

.performance-grid[b-wu5kycurda] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.performance-item[b-wu5kycurda] {
    min-height: 78px;
    padding: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.performance-item span[b-wu5kycurda] {
    color: var(--muted);

    font-size: 9px;
}

.performance-item strong[b-wu5kycurda] {
    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}


/* =========================
   Service Area
========================= */

.service-area-grid[b-wu5kycurda] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.service-area-item[b-wu5kycurda] {
    min-height: 80px;
    padding: 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.service-area-item span[b-wu5kycurda] {
    color: var(--muted);

    font-size: 9px;
}

.service-area-item strong[b-wu5kycurda] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Status
========================= */

.status-badge[b-wu5kycurda] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-wu5kycurda] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-wu5kycurda] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-wu5kycurda] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-wu5kycurda] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-wu5kycurda] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-list[b-wu5kycurda] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-wu5kycurda] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.action-button:hover[b-wu5kycurda] {
    border-color: var(--green);
    color: var(--green);
}

.primary-action[b-wu5kycurda] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-wu5kycurda] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {

    .profile-head[b-wu5kycurda] {
        flex-direction: column;
    }

    .profile-status-card[b-wu5kycurda] {
        width: 100%;
    }

    .profile-grid[b-wu5kycurda] {
        grid-template-columns: 1fr;
    }

    .identity-card[b-wu5kycurda],
    .profile-card.full[b-wu5kycurda] {
        grid-column: auto;
    }

    .service-area-grid[b-wu5kycurda] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {

    .performance-grid[b-wu5kycurda] {
        grid-template-columns: 1fr;
    }

    .identity-card[b-wu5kycurda] {
        align-items: flex-start;
        flex-direction: column;
    }

    .action-list[b-wu5kycurda] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-wu5kycurda] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Shipments/CourierShipmentDetails.razor.rz.scp.css */
.courier-shipment-details-page[b-wq7l7mzs8s] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-wq7l7mzs8s] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-wq7l7mzs8s] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-wq7l7mzs8s] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-wq7l7mzs8s] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-wq7l7mzs8s] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-wq7l7mzs8s] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.shipment-summary-card[b-wq7l7mzs8s] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.shipment-main[b-wq7l7mzs8s] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.shipment-avatar[b-wq7l7mzs8s] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.shipment-main > div:last-child[b-wq7l7mzs8s] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.shipment-main strong[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.shipment-main span[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 10px;
}

.shipment-statuses[b-wq7l7mzs8s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Cards
========================= */

.summary-grid[b-wq7l7mzs8s] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-wq7l7mzs8s] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.summary-card small[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Cards
========================= */

.details-grid[b-wq7l7mzs8s] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-wq7l7mzs8s] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-wq7l7mzs8s] {
    grid-column: 1 / -1;
}

.details-card h3[b-wq7l7mzs8s] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Location
========================= */

.location-card[b-wq7l7mzs8s] {
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-radius: 13px;
}

.location-card.origin[b-wq7l7mzs8s] {
    background: rgba(58, 125, 68, .04);

    border: 1px solid rgba(58, 125, 68, .16);
}

.location-card.destination[b-wq7l7mzs8s] {
    background: #f5fbff;

    border: 1px solid #b2ddff;
}

.location-icon[b-wq7l7mzs8s] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 11px;

    background: #fff;

    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.destination .location-icon[b-wq7l7mzs8s] {
    color: #175cd3;
}

.location-card > div:last-child[b-wq7l7mzs8s] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.location-card strong[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 12px;
}

.location-card span[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 9px;
}

.address-box[b-wq7l7mzs8s] {
    margin-top: 13px;
    padding: 13px;

    background: #fbfcfd;

    border: 1px solid var(--soft);
    border-radius: 10px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}

.location-actions[b-wq7l7mzs8s] {
    margin-top: 10px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.small-action-button[b-wq7l7mzs8s] {
    min-height: 35px;
    padding: 0 11px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.small-action-button:hover[b-wq7l7mzs8s] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Details
========================= */

.details-list[b-wq7l7mzs8s] {
    margin-top: 10px;

    display: flex;
    flex-direction: column;
}

.detail-item[b-wq7l7mzs8s] {
    min-height: 54px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-wq7l7mzs8s] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 12px;
}

.ltr-value[b-wq7l7mzs8s] {
    direction: ltr;

    unicode-bidi: plaintext;
}

.code-value[b-wq7l7mzs8s] {
    direction: ltr;

    padding: 4px 8px;

    border-radius: 7px;

    background: #f2f4f7;

    font-size: 13px !important;
    letter-spacing: 2px;
}


/* =========================
   Mission Steps
========================= */

.mission-steps[b-wq7l7mzs8s] {
    display: grid;
    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap: 0;
}

.mission-step[b-wq7l7mzs8s] {
    min-width: 0;
}

.step-indicator[b-wq7l7mzs8s] {
    position: relative;

    height: 40px;

    display: flex;
    justify-content: center;
}

.step-number[b-wq7l7mzs8s] {
    position: relative;

    width: 30px;
    height: 30px;

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

    border: 2px solid #e4e7ec;
    border-radius: 50%;

    background: #fff;
    color: var(--muted);

    font-size: 10px;
    font-weight: 900;

    z-index: 2;
}

.step-line[b-wq7l7mzs8s] {
    position: absolute;

    top: 14px;
    right: 50%;

    width: 100%;
    height: 2px;

    background: #e4e7ec;

    z-index: 1;
}

.mission-step.completed .step-number[b-wq7l7mzs8s] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.mission-step.completed .step-line[b-wq7l7mzs8s] {
    background: var(--green);
}

.mission-step.active .step-number[b-wq7l7mzs8s] {
    border-color: var(--orange);

    background: #fffaeb;
    color: #b54708;
}

.step-content[b-wq7l7mzs8s] {
    padding: 0 6px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 4px;

    text-align: center;
}

.step-content strong[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 10px;
}

.step-content span[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 8px;
    line-height: 1.6;
}

.step-content small[b-wq7l7mzs8s] {
    color: var(--green);

    font-size: 8px;
    font-weight: 800;
}

.mission-step.active .step-content small[b-wq7l7mzs8s] {
    color: #b54708;
}


/* =========================
   Mission Action
========================= */

.action-card[b-wq7l7mzs8s] {
    border-color: rgba(58, 125, 68, .18);
}

.mission-action-head[b-wq7l7mzs8s] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.mission-action-head h3[b-wq7l7mzs8s] {
    margin-bottom: 5px;
}

.mission-action-head p[b-wq7l7mzs8s] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}

.mission-actions[b-wq7l7mzs8s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.mission-button[b-wq7l7mzs8s] {
    min-height: 44px;
    padding: 0 18px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

.mission-button.primary[b-wq7l7mzs8s] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.mission-button.success[b-wq7l7mzs8s] {
    border: 1px solid #027a48;

    background: #027a48;
    color: #fff;
}

.mission-button.problem[b-wq7l7mzs8s] {
    border: 1px solid #fda29b;

    background: #fff;
    color: #b42318;
}

.mission-button:disabled[b-wq7l7mzs8s] {
    opacity: .55;

    cursor: not-allowed;
}

.mission-completed[b-wq7l7mzs8s] {
    flex: 1;
    min-height: 70px;
    padding: 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;

    border-radius: 12px;

    background: #ecfdf3;

    border: 1px solid #abefc6;
}

.mission-completed strong[b-wq7l7mzs8s] {
    color: #027a48;

    font-size: 12px;
}

.mission-completed span[b-wq7l7mzs8s] {
    color: #475467;

    font-size: 10px;
}


/* =========================
   Forms
========================= */

.card-title-row[b-wq7l7mzs8s] {
    margin-bottom: 18px;
}

.card-title-row h3[b-wq7l7mzs8s] {
    margin-bottom: 5px;
}

.card-title-row p[b-wq7l7mzs8s] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}

.confirmation-card[b-wq7l7mzs8s] {
    border-color: rgba(58, 125, 68, .22);
}

.problem-card[b-wq7l7mzs8s] {
    border-color: #fedf89;

    background: #fffcf5;
}

.confirmation-grid[b-wq7l7mzs8s],
.problem-grid[b-wq7l7mzs8s] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.field-group[b-wq7l7mzs8s] {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.field-group.full[b-wq7l7mzs8s] {
    grid-column: 1 / -1;
}

.field-group label[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.field-group input[b-wq7l7mzs8s],
.field-group select[b-wq7l7mzs8s],
.field-group textarea[b-wq7l7mzs8s] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

.field-group input[b-wq7l7mzs8s],
.field-group select[b-wq7l7mzs8s] {
    min-height: 42px;

    padding: 0 11px;
}

.field-group textarea[b-wq7l7mzs8s] {
    padding: 11px 13px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-wq7l7mzs8s],
.field-group select:focus[b-wq7l7mzs8s],
.field-group textarea:focus[b-wq7l7mzs8s] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.form-actions[b-wq7l7mzs8s] {
    margin-top: 16px;

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

    gap: 8px;
}

.secondary-button[b-wq7l7mzs8s],
.primary-button[b-wq7l7mzs8s],
.problem-submit-button[b-wq7l7mzs8s] {
    min-height: 40px;
    padding: 0 15px;

    border-radius: 9px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button[b-wq7l7mzs8s] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-wq7l7mzs8s] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.problem-submit-button[b-wq7l7mzs8s] {
    border: 1px solid #b42318;

    background: #b42318;
    color: #fff;
}

.secondary-button:disabled[b-wq7l7mzs8s],
.primary-button:disabled[b-wq7l7mzs8s],
.problem-submit-button:disabled[b-wq7l7mzs8s] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Timeline
========================= */

.timeline[b-wq7l7mzs8s] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.timeline-item[b-wq7l7mzs8s] {
    position: relative;

    min-height: 58px;
    padding-right: 28px;
}

.timeline-item:not(:last-child)[b-wq7l7mzs8s]::after {
    content: "";

    position: absolute;

    top: 15px;
    right: 5px;

    width: 1px;
    height: calc(100% + 12px);

    background: #e4e7ec;
}

.timeline-dot[b-wq7l7mzs8s] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-wq7l7mzs8s] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-wq7l7mzs8s] {
    background: var(--orange);
}

.timeline-content[b-wq7l7mzs8s] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.timeline-content strong[b-wq7l7mzs8s] {
    color: var(--text);

    font-size: 12px;
}

.timeline-content span[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.8;
}

.timeline-content small[b-wq7l7mzs8s] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Status
========================= */

.status-badge[b-wq7l7mzs8s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-wq7l7mzs8s] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-wq7l7mzs8s] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-wq7l7mzs8s] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-wq7l7mzs8s] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-wq7l7mzs8s] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .mission-steps[b-wq7l7mzs8s] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mission-step[b-wq7l7mzs8s] {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);

        gap: 8px;
    }

    .step-indicator[b-wq7l7mzs8s] {
        height: auto;
        min-height: 65px;
    }

    .step-line[b-wq7l7mzs8s] {
        top: 30px;
        right: 20px;

        width: 2px;
        height: calc(100% - 10px);
    }

    .step-content[b-wq7l7mzs8s] {
        align-items: flex-start;

        padding: 4px 0;

        text-align: right;
    }
}

@media (max-width: 900px) {

    .summary-grid[b-wq7l7mzs8s] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-wq7l7mzs8s] {
        flex-direction: column;
    }

    .shipment-summary-card[b-wq7l7mzs8s],
    .mission-action-head[b-wq7l7mzs8s] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-wq7l7mzs8s] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-wq7l7mzs8s] {
        grid-column: auto;
    }

    .back-button[b-wq7l7mzs8s] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-wq7l7mzs8s],
    .confirmation-grid[b-wq7l7mzs8s],
    .problem-grid[b-wq7l7mzs8s] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-wq7l7mzs8s] {
        grid-column: auto;
    }

    .mission-actions[b-wq7l7mzs8s],
    .form-actions[b-wq7l7mzs8s] {
        align-items: stretch;
        flex-direction: column;
    }

    .mission-button[b-wq7l7mzs8s],
    .secondary-button[b-wq7l7mzs8s],
    .primary-button[b-wq7l7mzs8s],
    .problem-submit-button[b-wq7l7mzs8s] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Shipments/CourierShipments.razor.rz.scp.css */
.courier-shipments-page[b-ul8xn1cnhq] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.shipments-summary[b-ul8xn1cnhq] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-ul8xn1cnhq] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-ul8xn1cnhq] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-ul8xn1cnhq] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-ul8xn1cnhq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Shipment
========================= */

.shipment-cell[b-ul8xn1cnhq] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.shipment-avatar[b-ul8xn1cnhq] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.shipment-cell > div:last-child[b-ul8xn1cnhq] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.shipment-cell strong[b-ul8xn1cnhq] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.shipment-cell span[b-ul8xn1cnhq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Locations
========================= */

.location-cell[b-ul8xn1cnhq] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.location-cell strong[b-ul8xn1cnhq] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.location-cell span[b-ul8xn1cnhq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Reference / Distance
========================= */

.reference-text[b-ul8xn1cnhq] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.distance-value[b-ul8xn1cnhq] {
    direction: ltr;

    display: inline-block;

    color: var(--text);

    font-size: 11px;
    font-weight: 700;
}


/* =========================
   Status
========================= */

.status-badge[b-ul8xn1cnhq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ul8xn1cnhq] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-ul8xn1cnhq] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-ul8xn1cnhq] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-ul8xn1cnhq] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-ul8xn1cnhq] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-ul8xn1cnhq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-ul8xn1cnhq] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-ul8xn1cnhq] {
    border-color: var(--green);

    color: var(--green);
}

.success-action[b-ul8xn1cnhq] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-ul8xn1cnhq] {
    background: rgba(58, 125, 68, .05);
}

.primary-action[b-ul8xn1cnhq] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-ul8xn1cnhq] {
    color: #fff;

    filter: brightness(.96);
}

.warning-action[b-ul8xn1cnhq] {
    border-color: #fdb022;

    color: #b54708;
}

.warning-action:hover[b-ul8xn1cnhq] {
    background: #fffaeb;

    border-color: #fdb022;
    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .shipments-summary[b-ul8xn1cnhq] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .shipments-summary[b-ul8xn1cnhq] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Tickets/CourierTicketDetails.razor.rz.scp.css */
.courier-ticket-details-page[b-uexk6w4058] {
    width: 100%;
}


/* =========================
   Header
========================= */

.ticket-head[b-uexk6w4058] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.ticket-head > div:first-child > span[b-uexk6w4058] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.ticket-head h1[b-uexk6w4058] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.ticket-head p[b-uexk6w4058] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-uexk6w4058] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-uexk6w4058] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.ticket-summary[b-uexk6w4058] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.summary-main[b-uexk6w4058] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-uexk6w4058] {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.summary-main > div:last-child[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.summary-main strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.summary-main span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 11px;
}

.summary-badges[b-uexk6w4058] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-uexk6w4058] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 1fr);

    gap: 18px;
}

.conversation-card[b-uexk6w4058],
.details-card[b-uexk6w4058] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.ticket-side[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Conversation
========================= */

.conversation-head[b-uexk6w4058] {
    margin-bottom: 18px;
}

.conversation-head h2[b-uexk6w4058] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.conversation-head p[b-uexk6w4058] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.messages-list[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.message-item[b-uexk6w4058] {
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 14px;
}

.courier-message[b-uexk6w4058] {
    margin-left: 45px;

    background: rgba(58, 125, 68, .035);

    border-color: rgba(58, 125, 68, .16);
}

.support-message[b-uexk6w4058] {
    margin-right: 45px;

    background: #f5fbff;

    border-color: #b2ddff;
}

.message-head[b-uexk6w4058] {
    margin-bottom: 11px;

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

    gap: 14px;
}

.sender-info[b-uexk6w4058] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.sender-avatar[b-uexk6w4058] {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.support-message .sender-avatar[b-uexk6w4058] {
    background: #eff8ff;
    color: #175cd3;
}

.sender-info > div:last-child[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sender-info strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 11px;
    font-weight: 900;
}

.sender-info span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 9px;
}

.message-body p[b-uexk6w4058] {
    margin: 0;

    color: var(--text);

    font-size: 12px;
    line-height: 2;
}


/* =========================
   Attachment
========================= */

.attachment-item[b-uexk6w4058] {
    margin-top: 13px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
}

.attachment-icon[b-uexk6w4058] {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 8px;

    background: #f2f4f7;
    color: var(--muted);

    font-size: 10px;
    font-weight: 900;
}

.attachment-item > div:nth-child(2)[b-uexk6w4058] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.attachment-item strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 10px;
}

.attachment-item span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 9px;
}

.attachment-button[b-uexk6w4058] {
    min-height: 31px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-button:hover[b-uexk6w4058] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Reply
========================= */

.reply-box[b-uexk6w4058] {
    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid var(--soft);
}

.reply-head[b-uexk6w4058] {
    margin-bottom: 10px;
}

.reply-head > div[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reply-head strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.reply-head span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 10px;
}

.reply-box textarea[b-uexk6w4058] {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.reply-box textarea:focus[b-uexk6w4058] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.reply-toolbar[b-uexk6w4058] {
    margin-top: 10px;

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

    gap: 10px;
}

.attachment-action[b-uexk6w4058] {
    min-height: 39px;
    padding: 0 13px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-action:hover[b-uexk6w4058] {
    border-color: var(--green);
    color: var(--green);
}

.send-button[b-uexk6w4058] {
    min-height: 40px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.send-button:disabled[b-uexk6w4058] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Closed
========================= */

.closed-note[b-uexk6w4058] {
    margin-top: 22px;
    padding: 16px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #f9fafb;
}

.closed-note strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 12px;
}

.closed-note span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Side Cards
========================= */

.details-card h3[b-uexk6w4058] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.details-list[b-uexk6w4058] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-uexk6w4058] {
    min-height: 53px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-uexk6w4058] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-uexk6w4058] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Subject
========================= */

.ticket-subject[b-uexk6w4058] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;

    color: var(--text);

    font-size: 12px;
    line-height: 1.9;
}


/* =========================
   Reference
========================= */

.reference-card[b-uexk6w4058] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.reference-icon[b-uexk6w4058] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.reference-info[b-uexk6w4058] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reference-info span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 9px;
}

.reference-info strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 11px;
}

.reference-action[b-uexk6w4058] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.reference-action:hover[b-uexk6w4058] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Tracking
========================= */

.tracking-list[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.tracking-item[b-uexk6w4058] {
    position: relative;

    padding-right: 24px;
}

.tracking-item:not(:last-child)[b-uexk6w4058]::after {
    content: "";

    position: absolute;

    top: 14px;
    right: 5px;

    width: 1px;
    height: calc(100% + 10px);

    background: #e4e7ec;
}

.tracking-dot[b-uexk6w4058] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.tracking-item.completed .tracking-dot[b-uexk6w4058] {
    background: var(--green);
}

.tracking-item.active .tracking-dot[b-uexk6w4058] {
    background: var(--orange);
}

.tracking-item > div:last-child[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.tracking-item strong[b-uexk6w4058] {
    color: var(--text);

    font-size: 10px;
}

.tracking-item span[b-uexk6w4058] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}


/* =========================
   Side Actions
========================= */

.side-actions[b-uexk6w4058] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-uexk6w4058] {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.side-action:hover[b-uexk6w4058] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Status
========================= */

.status-badge[b-uexk6w4058] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-uexk6w4058] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-uexk6w4058] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-uexk6w4058] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-uexk6w4058] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-uexk6w4058] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .ticket-layout[b-uexk6w4058] {
        grid-template-columns: 1fr;
    }

    .courier-message[b-uexk6w4058],
    .support-message[b-uexk6w4058] {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 700px) {

    .ticket-head[b-uexk6w4058],
    .ticket-summary[b-uexk6w4058] {
        align-items: flex-start;
        flex-direction: column;
    }

    .back-button[b-uexk6w4058] {
        width: 100%;
    }

    .reply-toolbar[b-uexk6w4058] {
        align-items: stretch;
        flex-direction: column;
    }

    .attachment-action[b-uexk6w4058],
    .send-button[b-uexk6w4058] {
        width: 100%;
    }

    .message-head[b-uexk6w4058] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Tickets/CourierTickets.razor.rz.scp.css */
.courier-tickets-page[b-7spv68k01f] {
    width: 100%;
}


/* =========================
   Create
========================= */

.create-ticket-button[b-7spv68k01f] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;
}

.create-ticket-button span[b-7spv68k01f] {
    font-size: 20px;

    line-height: 1;
}

.create-ticket-button:hover[b-7spv68k01f] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Summary
========================= */

.tickets-summary[b-7spv68k01f] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-7spv68k01f] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-7spv68k01f] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-7spv68k01f] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-7spv68k01f] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Ticket
========================= */

.ticket-cell[b-7spv68k01f] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.ticket-avatar[b-7spv68k01f] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-7spv68k01f] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.ticket-cell strong[b-7spv68k01f] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.ticket-cell span[b-7spv68k01f] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Reference
========================= */

.reference-link[b-7spv68k01f] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-7spv68k01f] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-7spv68k01f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-7spv68k01f] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-7spv68k01f] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-7spv68k01f] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-7spv68k01f] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-7spv68k01f] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-7spv68k01f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-7spv68k01f] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-7spv68k01f] {
    border-color: var(--green);

    color: var(--green);
}

.success-action[b-7spv68k01f] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-7spv68k01f] {
    background: rgba(58, 125, 68, .05);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .tickets-summary[b-7spv68k01f] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .create-ticket-button[b-7spv68k01f] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .tickets-summary[b-7spv68k01f] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Courier/Pages/Tickets/CreateCourierTicket.razor.rz.scp.css */
.create-courier-ticket-page[b-aq69oiqlnb] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-aq69oiqlnb] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-aq69oiqlnb] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-aq69oiqlnb] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-aq69oiqlnb] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-aq69oiqlnb] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-aq69oiqlnb] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Layout
========================= */

.ticket-layout[b-aq69oiqlnb] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(290px, 1fr);

    gap: 18px;
}

.ticket-form-card[b-aq69oiqlnb],
.side-card[b-aq69oiqlnb] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.ticket-side[b-aq69oiqlnb] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Form Head
========================= */

.form-head[b-aq69oiqlnb] {
    margin-bottom: 20px;
}

.form-head h2[b-aq69oiqlnb] {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.form-head p[b-aq69oiqlnb] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Form
========================= */

.form-grid[b-aq69oiqlnb] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-aq69oiqlnb] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-aq69oiqlnb] {
    grid-column: 1 / -1;
}

.field-group label[b-aq69oiqlnb] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.field-group label > span[b-aq69oiqlnb] {
    color: #b42318;
}

.field-group input[b-aq69oiqlnb],
.field-group select[b-aq69oiqlnb],
.field-group textarea[b-aq69oiqlnb] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

.field-group input[b-aq69oiqlnb],
.field-group select[b-aq69oiqlnb] {
    min-height: 43px;

    padding: 0 12px;
}

.field-group textarea[b-aq69oiqlnb] {
    padding: 12px 13px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-aq69oiqlnb],
.field-group select:focus[b-aq69oiqlnb],
.field-group textarea:focus[b-aq69oiqlnb] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-group small[b-aq69oiqlnb] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}

.reference-field[b-aq69oiqlnb] {
    padding: 14px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #fbfcfd;
}


/* =========================
   Meta
========================= */

.field-meta[b-aq69oiqlnb] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.field-meta span[b-aq69oiqlnb] {
    color: var(--muted);

    font-size: 9px;
}

.field-meta .counter[b-aq69oiqlnb] {
    direction: ltr;

    white-space: nowrap;
}


/* =========================
   Attachment
========================= */

.attachment-box[b-aq69oiqlnb] {
    min-height: 72px;
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px dashed #d0d5dd;
    border-radius: 12px;

    background: #fbfcfd;
}

.attachment-icon[b-aq69oiqlnb] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: #fff;
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.attachment-info[b-aq69oiqlnb] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.attachment-info strong[b-aq69oiqlnb] {
    color: var(--text);

    font-size: 11px;
}

.attachment-info span[b-aq69oiqlnb] {
    color: var(--muted);

    font-size: 9px;
}

.attachment-button[b-aq69oiqlnb] {
    min-height: 35px;
    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-button:hover[b-aq69oiqlnb] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Messages
========================= */

.form-message[b-aq69oiqlnb] {
    margin-top: 18px;
    padding: 13px 14px;

    border-radius: 11px;

    font-size: 11px;
}

.error-message[b-aq69oiqlnb] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-aq69oiqlnb] {
    display: flex;
    flex-direction: column;

    gap: 4px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-aq69oiqlnb] {
    color: #027a48;

    font-size: 11px;
}

.success-message span[b-aq69oiqlnb] {
    color: #475467;

    font-size: 9px;
}


/* =========================
   Form Actions
========================= */

.form-actions[b-aq69oiqlnb] {
    margin-top: 20px;
    padding-top: 18px;

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

    gap: 8px;

    border-top: 1px solid #f0f2f4;
}

.secondary-button[b-aq69oiqlnb],
.primary-button[b-aq69oiqlnb] {
    min-height: 41px;
    padding: 0 15px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.secondary-button[b-aq69oiqlnb] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button[b-aq69oiqlnb] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.secondary-button:hover[b-aq69oiqlnb] {
    border-color: var(--green);

    color: var(--green);
}

.primary-button:hover[b-aq69oiqlnb] {
    color: #fff;

    filter: brightness(.96);
}

.primary-button:disabled[b-aq69oiqlnb] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Side
========================= */

.side-card h3[b-aq69oiqlnb] {
    margin: 0 0 16px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.help-list[b-aq69oiqlnb] {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.help-item[b-aq69oiqlnb] {
    display: flex;

    gap: 10px;
}

.help-number[b-aq69oiqlnb] {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

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

    border-radius: 8px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.help-item > div:last-child[b-aq69oiqlnb] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.help-item strong[b-aq69oiqlnb] {
    color: var(--text);

    font-size: 10px;
}

.help-item span[b-aq69oiqlnb] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}


/* =========================
   Categories
========================= */

.category-list[b-aq69oiqlnb] {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.category-list > div[b-aq69oiqlnb] {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--text);

    font-size: 10px;
}

.category-dot[b-aq69oiqlnb] {
    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;
}

.category-dot.info[b-aq69oiqlnb] {
    background: #2e90fa;
}

.category-dot.success[b-aq69oiqlnb] {
    background: #12b76a;
}

.category-dot.neutral[b-aq69oiqlnb] {
    background: #98a2b3;
}

.category-dot.warning[b-aq69oiqlnb] {
    background: #f79009;
}

.category-dot.danger[b-aq69oiqlnb] {
    background: #f04438;
}


/* =========================
   Warning
========================= */

.warning-card[b-aq69oiqlnb] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-aq69oiqlnb] {
    color: #b54708;
}

.warning-card p[b-aq69oiqlnb] {
    margin: 0;

    color: #667085;

    font-size: 10px;
    line-height: 1.9;
}

.side-link[b-aq69oiqlnb] {
    width: 100%;
    min-height: 38px;

    margin-top: 14px;

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

    border: 1px solid #fdb022;
    border-radius: 9px;

    background: #fff;
    color: #b54708;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .ticket-layout[b-aq69oiqlnb] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 750px) {

    .page-head[b-aq69oiqlnb] {
        flex-direction: column;
    }

    .back-button[b-aq69oiqlnb] {
        width: 100%;
    }

    .form-grid[b-aq69oiqlnb] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-aq69oiqlnb] {
        grid-column: auto;
    }
}

@media (max-width: 550px) {

    .attachment-box[b-aq69oiqlnb],
    .form-actions[b-aq69oiqlnb] {
        align-items: stretch;
        flex-direction: column;
    }

    .attachment-button[b-aq69oiqlnb],
    .secondary-button[b-aq69oiqlnb],
    .primary-button[b-aq69oiqlnb] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/DoctorDashboard.razor.rz.scp.css */
.doctor-dashboard[b-i9ab3ynph3] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.doctor-dashboard *[b-i9ab3ynph3] {
    box-sizing: border-box;
}

.dashboard-intro[b-i9ab3ynph3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid #dce9df;
    border-radius: 22px;
    background: linear-gradient(120deg, #f1f8f2, #fff);
}

.dashboard-intro > div[b-i9ab3ynph3] {
    min-width: 0;
}

.dashboard-eyebrow[b-i9ab3ynph3],
.section-eyebrow[b-i9ab3ynph3] {
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
}

.dashboard-intro h1[b-i9ab3ynph3] {
    margin: 9px 0;
    color: #344054;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.6;
}

.dashboard-intro p[b-i9ab3ynph3] {
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 2;
}

.dashboard-button[b-i9ab3ynph3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 46px;
    padding: 11px 17px;
    border: 1px solid #dfe5e1;
    border-radius: 11px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
    text-decoration: none;
}

.dashboard-intro > .dashboard-button[b-i9ab3ynph3] {
    flex-shrink: 0;
}

.dashboard-button.primary[b-i9ab3ynph3] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.section-heading[b-i9ab3ynph3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.section-heading h2[b-i9ab3ynph3] {
    margin: 0;
    color: #344054;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.8;
}

.section-heading > span[b-i9ab3ynph3] {
    color: #667085;
    font-size: 16px;
}

.section-heading .section-eyebrow[b-i9ab3ynph3] {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.quick-access-grid[b-i9ab3ynph3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.quick-access-card[b-i9ab3ynph3] {
    --card-color: #3a7d44;
    --card-soft: #eef7f0;

    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 23px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.quick-access-card.blue[b-i9ab3ynph3] {
    --card-color: #2459a6;
    --card-soft: #eef4ff;
}

.quick-access-card.orange[b-i9ab3ynph3] {
    --card-color: #b54708;
    --card-soft: #fff5e9;
}

.quick-access-card.purple[b-i9ab3ynph3] {
    --card-color: #6941c6;
    --card-soft: #f4f0ff;
}

.quick-card-top[b-i9ab3ynph3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.quick-card-icon[b-i9ab3ynph3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--card-soft);
    color: var(--card-color);
    font-size: 25px;
    font-weight: 900;
    direction: ltr;
}

.quick-card-arrow[b-i9ab3ynph3] {
    color: #98a2b3;
    font-size: 25px;
}

.quick-access-card > strong[b-i9ab3ynph3] {
    color: #344054;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.8;
}

.quick-access-card p[b-i9ab3ynph3] {
    flex: 1;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.quick-card-action[b-i9ab3ynph3] {
    margin-top: 5px;
    color: var(--card-color);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-sections[b-i9ab3ynph3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.dashboard-section[b-i9ab3ynph3] {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
}

.dashboard-link-list[b-i9ab3ynph3] {
    display: flex;
    flex-direction: column;
}

.dashboard-link-list > a[b-i9ab3ynph3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #eef0f3;
    color: inherit;
    text-decoration: none;
}

.dashboard-link-list > a:last-child[b-i9ab3ynph3] {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-link-list > a > span:first-child[b-i9ab3ynph3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dashboard-link-list strong[b-i9ab3ynph3] {
    color: #344054;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-link-list small[b-i9ab3ynph3] {
    color: #667085;
    font-size: 16px;
    line-height: 1.9;
}

.link-arrow[b-i9ab3ynph3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #f7f9fa;
    color: #667085;
    font-size: 27px;
}

.support-section[b-i9ab3ynph3] {
    background: linear-gradient(135deg, #fff, #f8fbff);
}

.support-description[b-i9ab3ynph3] {
    margin: 0;
    color: #667085;
    font-size: 17px;
    line-height: 2;
}

.support-actions[b-i9ab3ynph3] {
    margin-top: 22px;
}

.dashboard-tip[b-i9ab3ynph3] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #dce5f3;
    border-radius: 17px;
    background: #f3f7fd;
}

.tip-icon[b-i9ab3ynph3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #e5edfb;
    color: #2459a6;
    font-size: 24px;
    font-weight: 900;
}

.dashboard-tip > div[b-i9ab3ynph3] {
    flex: 1;
    min-width: 0;
}

.dashboard-tip strong[b-i9ab3ynph3] {
    color: #344054;
    font-size: 18px;
}

.dashboard-tip p[b-i9ab3ynph3] {
    margin: 6px 0 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.dashboard-tip > a[b-i9ab3ynph3] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.9;
}

.doctor-dashboard a:focus-visible[b-i9ab3ynph3] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}

@media (hover: hover) {
    .quick-access-card:hover[b-i9ab3ynph3] {
        transform: translateY(-3px);
        border-color: var(--card-color);
        box-shadow: 0 10px 25px rgba(16, 24, 40, .06);
    }

    .dashboard-link-list > a:hover strong[b-i9ab3ynph3] {
        color: var(--green, #3a7d44);
    }

    .dashboard-button:hover[b-i9ab3ynph3] {
        filter: brightness(.97);
    }
}

@media (max-width: 1200px) {
    .quick-access-grid[b-i9ab3ynph3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .dashboard-sections[b-i9ab3ynph3] {
        grid-template-columns: 1fr;
    }

    .dashboard-intro[b-i9ab3ynph3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-tip[b-i9ab3ynph3] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-tip > a[b-i9ab3ynph3] {
        margin-right: 60px;
    }
}

@media (max-width: 520px) {
    .doctor-dashboard[b-i9ab3ynph3] {
        gap: 23px;
    }

    .dashboard-intro[b-i9ab3ynph3],
    .dashboard-section[b-i9ab3ynph3],
    .quick-access-card[b-i9ab3ynph3] {
        padding: 19px;
    }

    .dashboard-intro h1[b-i9ab3ynph3] {
        font-size: 27px;
    }

    .dashboard-intro p[b-i9ab3ynph3] {
        font-size: 17px;
    }

    .quick-access-grid[b-i9ab3ynph3] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dashboard-tip[b-i9ab3ynph3] {
        padding: 18px;
        gap: 12px;
    }

    .dashboard-tip > a[b-i9ab3ynph3] {
        margin-right: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-access-card[b-i9ab3ynph3] {
        transition: none;
    }

    .quick-access-card:hover[b-i9ab3ynph3] {
        transform: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Finance/DoctorFinance.razor.rz.scp.css */
.doctor-finance-page[b-89o8q9nuhi] {
    width: 100%;
}

.finance-summary[b-89o8q9nuhi] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-89o8q9nuhi] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-89o8q9nuhi] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-89o8q9nuhi] {
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-89o8q9nuhi] {
    color: var(--muted);
    font-size: 10px;
}

.finance-cell[b-89o8q9nuhi] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.finance-avatar[b-89o8q9nuhi] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.finance-cell > div:last-child[b-89o8q9nuhi],
.patient-cell[b-89o8q9nuhi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.finance-cell strong[b-89o8q9nuhi],
.patient-cell strong[b-89o8q9nuhi] {
    font-size: 13px;
}

.finance-cell span[b-89o8q9nuhi],
.patient-cell span[b-89o8q9nuhi] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-89o8q9nuhi] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-89o8q9nuhi] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-89o8q9nuhi] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-89o8q9nuhi] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-89o8q9nuhi] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-89o8q9nuhi] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-89o8q9nuhi] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-89o8q9nuhi] {
    border-color: var(--green);
    color: var(--green);
}

@media (max-width: 1000px) {

    .finance-summary[b-89o8q9nuhi] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .finance-summary[b-89o8q9nuhi] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Profile/DoctorProfile.razor.rz.scp.css */
.doctor-profile-page[b-u3pgwbqr2r] {
    width: 100%;
}

.profile-head[b-u3pgwbqr2r] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.profile-head > div:first-child > span[b-u3pgwbqr2r] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.profile-head h1[b-u3pgwbqr2r] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.profile-head p[b-u3pgwbqr2r] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.profile-status-card[b-u3pgwbqr2r] {
    min-width: 150px;

    padding: 14px 18px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.profile-status-card span[b-u3pgwbqr2r] {
    color: var(--muted);

    font-size: 11px;
}

.profile-status-card strong[b-u3pgwbqr2r] {
    color: var(--green);

    font-size: 15px;
}

.profile-info-note[b-u3pgwbqr2r] {
    margin-bottom: 18px;

    padding: 16px 18px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}

.profile-grid[b-u3pgwbqr2r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.profile-card[b-u3pgwbqr2r] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.profile-card.full[b-u3pgwbqr2r] {
    grid-column: 1 / -1;
}

.identity-card[b-u3pgwbqr2r] {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;

    gap: 16px;
}

.doctor-avatar[b-u3pgwbqr2r] {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

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

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}

.identity-info[b-u3pgwbqr2r] {
    flex: 1;
}

.identity-info h2[b-u3pgwbqr2r] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.identity-info > span[b-u3pgwbqr2r] {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;
}

.identity-badges[b-u3pgwbqr2r] {
    margin-top: 10px;

    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.profile-card h3[b-u3pgwbqr2r] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.details-list[b-u3pgwbqr2r] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-u3pgwbqr2r] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-u3pgwbqr2r] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-u3pgwbqr2r] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-u3pgwbqr2r] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-u3pgwbqr2r] {
    direction: ltr;
}

.status-badge[b-u3pgwbqr2r] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-u3pgwbqr2r] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-u3pgwbqr2r] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-u3pgwbqr2r] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-u3pgwbqr2r] {
    background: #f2f4f7;
    color: #667085;
}

.categories-list[b-u3pgwbqr2r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.category-badge[b-u3pgwbqr2r] {
    min-height: 32px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 800;
}

.description-box[b-u3pgwbqr2r] {
    min-height: 110px;

    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}

.action-list[b-u3pgwbqr2r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-u3pgwbqr2r] {
    min-height: 40px;
    padding: 0 14px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.action-button:hover[b-u3pgwbqr2r] {
    border-color: var(--green);
    color: var(--green);
}

.primary-action[b-u3pgwbqr2r] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-u3pgwbqr2r] {
    color: #fff;

    filter: brightness(.96);
}

@media (max-width: 800px) {

    .profile-head[b-u3pgwbqr2r] {
        flex-direction: column;
    }

    .profile-status-card[b-u3pgwbqr2r] {
        width: 100%;
    }

    .profile-grid[b-u3pgwbqr2r] {
        grid-template-columns: 1fr;
    }

    .identity-card[b-u3pgwbqr2r],
    .profile-card.full[b-u3pgwbqr2r] {
        grid-column: auto;
    }
}

.doctor-avatar[b-u3pgwbqr2r] {
    overflow: hidden;
}

.doctor-avatar img[b-u3pgwbqr2r] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.price-value[b-u3pgwbqr2r] {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    direction: ltr;
}

.price-value small[b-u3pgwbqr2r] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.category-badge[b-u3pgwbqr2r] {
    display: inline-flex;
    align-items: center;

    gap: 7px;
}

.category-badge img[b-u3pgwbqr2r] {
    width: 26px;
    height: 26px;

    object-fit: contain;

    border-radius: 7px;
}

.empty-categories[b-u3pgwbqr2r] {
    color: var(--muted);

    font-size: 12px;
}

.profile-info-note.error[b-u3pgwbqr2r] {
    border-color: #fecdca;

    background: #fff2f2;
    color: #b42318;
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Schedule/DoctorSchedule.razor.rz.scp.css */
.doctor-schedule-page[b-mpdi8kowyi] {
    width: 100%;
}

.schedule-head[b-mpdi8kowyi] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.schedule-head > div:first-child > span[b-mpdi8kowyi] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.schedule-head h1[b-mpdi8kowyi] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.schedule-head p[b-mpdi8kowyi] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.schedule-status-card[b-mpdi8kowyi] {
    min-width: 190px;

    padding: 14px 18px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
}

.schedule-status-card span[b-mpdi8kowyi] {
    color: var(--muted);

    font-size: 11px;
}

.schedule-status-card strong[b-mpdi8kowyi] {
    color: var(--text);

    font-size: 13px;
}

.schedule-info-card[b-mpdi8kowyi] {
    margin-bottom: 18px;

    padding: 16px 18px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}

.schedule-grid[b-mpdi8kowyi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.day-card[b-mpdi8kowyi] {
    padding: 18px;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.day-head[b-mpdi8kowyi] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.day-head > div[b-mpdi8kowyi] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.day-head strong[b-mpdi8kowyi] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.day-head span[b-mpdi8kowyi] {
    color: var(--muted);

    font-size: 11px;
}

.day-toggle[b-mpdi8kowyi] {
    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--text);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.day-toggle input[b-mpdi8kowyi] {
    width: 17px;
    height: 17px;

    accent-color: var(--green);
}

.time-grid[b-mpdi8kowyi] {
    margin-top: 18px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.field-group[b-mpdi8kowyi],
.day-note[b-mpdi8kowyi] {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.field-group label[b-mpdi8kowyi],
.day-note label[b-mpdi8kowyi] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.field-group input[b-mpdi8kowyi],
.day-note input[b-mpdi8kowyi] {
    width: 100%;
    min-height: 42px;

    padding: 0 12px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.field-group input:focus[b-mpdi8kowyi],
.day-note input:focus[b-mpdi8kowyi] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.day-note[b-mpdi8kowyi] {
    margin-top: 10px;
}

.schedule-actions[b-mpdi8kowyi] {
    margin-top: 18px;

    display: flex;
    justify-content: flex-end;
}

.save-button[b-mpdi8kowyi] {
    min-height: 44px;
    padding: 0 20px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.save-button:disabled[b-mpdi8kowyi] {
    opacity: .6;

    cursor: not-allowed;
}

@media (max-width: 800px) {

    .schedule-head[b-mpdi8kowyi] {
        flex-direction: column;
    }

    .schedule-status-card[b-mpdi8kowyi] {
        width: 100%;
    }

    .schedule-grid[b-mpdi8kowyi] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {

    .time-grid[b-mpdi8kowyi] {
        grid-template-columns: 1fr;
    }

    .save-button[b-mpdi8kowyi] {
        width: 100%;
    }
}

.schedule-status-card small[b-mpdi8kowyi] {
    color: var(--muted);
    font-size: 11px;
}

.schedule-status-card .status-approved[b-mpdi8kowyi] {
    color: #027a48;
}

.schedule-status-card .status-pending[b-mpdi8kowyi] {
    color: #b54708;
}

.schedule-status-card .status-rejected[b-mpdi8kowyi] {
    color: #b42318;
}

.schedule-status-card .status-draft[b-mpdi8kowyi] {
    color: #344054;
}


/* =========================
   Messages
========================= */

.schedule-message[b-mpdi8kowyi] {
    margin-bottom: 18px;
    padding: 14px 17px;

    border-radius: 12px;

    font-size: 13px;
    line-height: 1.9;
}

.schedule-message.error[b-mpdi8kowyi] {
    border: 1px solid #fecdca;

    background: #fff2f2;
    color: #b42318;
}

.schedule-message.success[b-mpdi8kowyi] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
    color: #027a48;
}

.schedule-message.rejected[b-mpdi8kowyi] {
    display: flex;
    flex-direction: column;

    gap: 5px;

    border: 1px solid #fecdca;

    background: #fff7f7;
    color: #b42318;
}

.schedule-message.rejected strong[b-mpdi8kowyi] {
    font-size: 13px;
    font-weight: 900;
}

.schedule-message.rejected span[b-mpdi8kowyi] {
    font-size: 12px;
}


/* =========================
   Loading
========================= */

.schedule-loading[b-mpdi8kowyi] {
    padding: 25px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    color: var(--muted);

    font-size: 13px;
}


/* =========================
   Periods
========================= */

.period-list[b-mpdi8kowyi] {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

.period-card[b-mpdi8kowyi] {
    padding: 13px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.period-head[b-mpdi8kowyi] {
    margin-bottom: 10px;

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

    gap: 10px;
}

.period-head > span[b-mpdi8kowyi] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.remove-period-button[b-mpdi8kowyi] {
    padding: 0;

    border: 0;

    background: transparent;
    color: #b42318;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.add-period-button[b-mpdi8kowyi] {
    margin-top: 12px;

    min-height: 38px;
    padding: 0 13px;

    border: 1px dashed var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--green);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.add-period-button:hover[b-mpdi8kowyi] {
    border-color: var(--green);
}


/* =========================
   Disabled
========================= */

.day-toggle input:disabled[b-mpdi8kowyi],
.field-group input:disabled[b-mpdi8kowyi],
.day-note input:disabled[b-mpdi8kowyi] {
    cursor: not-allowed;
}

.field-group input:disabled[b-mpdi8kowyi],
.day-note input:disabled[b-mpdi8kowyi] {
    background: #f7f8f9;
    color: var(--muted);
}


/* =========================
   Actions
========================= */

.schedule-actions[b-mpdi8kowyi] {
    gap: 10px;
}

.secondary-save-button[b-mpdi8kowyi] {
    min-height: 44px;
    padding: 0 20px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-save-button:hover[b-mpdi8kowyi] {
    border-color: var(--green);
    color: var(--green);
}

.secondary-save-button:disabled[b-mpdi8kowyi] {
    opacity: .6;
    cursor: not-allowed;
}

.pending-note[b-mpdi8kowyi] {
    color: #b54708;

    font-size: 13px;
    font-weight: 800;
}


@media (max-width: 500px) {

    .schedule-actions[b-mpdi8kowyi] {
        flex-direction: column;
    }

    .secondary-save-button[b-mpdi8kowyi],
    .save-button[b-mpdi8kowyi] {
        width: 100%;
    }
}

.current-approved-section[b-mpdi8kowyi] {
    margin-bottom: 22px;
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.editable-schedule-section[b-mpdi8kowyi] {
    margin-top: 22px;
}

.section-head[b-mpdi8kowyi] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}

.section-head h2[b-mpdi8kowyi] {
    margin: 0;

    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.section-head p[b-mpdi8kowyi] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.9;
}

.version-badge[b-mpdi8kowyi] {
    min-height: 28px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: #f2f4f7;
    color: #667085;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

@media (max-width: 700px) {

    .current-approved-section[b-mpdi8kowyi] {
        padding: 16px;
    }

    .section-head[b-mpdi8kowyi] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Tickets/DoctorTicketDetails.razor.rz.scp.css */
.doctor-ticket-details-page[b-dsd3p9t4eq] {
    width: 100%;
}


/* =========================
   Header
========================= */

.ticket-head[b-dsd3p9t4eq] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.ticket-head > div:first-child > span[b-dsd3p9t4eq] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.ticket-head h1[b-dsd3p9t4eq] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.ticket-head p[b-dsd3p9t4eq] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-dsd3p9t4eq] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-dsd3p9t4eq] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.ticket-summary[b-dsd3p9t4eq] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.summary-main[b-dsd3p9t4eq] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-dsd3p9t4eq] {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.summary-main > div:last-child[b-dsd3p9t4eq] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.summary-main strong[b-dsd3p9t4eq] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.summary-main span[b-dsd3p9t4eq] {
    color: var(--muted);

    font-size: 11px;
}

.summary-badges[b-dsd3p9t4eq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-dsd3p9t4eq] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    gap: 18px;
}

.conversation-card[b-dsd3p9t4eq],
.details-card[b-dsd3p9t4eq] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.conversation-card h2[b-dsd3p9t4eq],
.details-card h3[b-dsd3p9t4eq] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.ticket-side[b-dsd3p9t4eq] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Messages
========================= */

.messages-list[b-dsd3p9t4eq] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.message-item[b-dsd3p9t4eq] {
    padding: 14px 16px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.message-head[b-dsd3p9t4eq] {
    margin-bottom: 8px;

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

    gap: 12px;
}

.message-head strong[b-dsd3p9t4eq] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.message-head span[b-dsd3p9t4eq] {
    color: var(--muted);

    font-size: 10px;
}

.message-item p[b-dsd3p9t4eq] {
    margin: 0;

    color: var(--text);

    font-size: 13px;
    line-height: 2;
}

.doctor-message[b-dsd3p9t4eq] {
    background: rgba(58, 125, 68, .035);
}

.admin-message[b-dsd3p9t4eq] {
    background: #fbfcfd;
}


/* =========================
   Reply
========================= */

.reply-box[b-dsd3p9t4eq] {
    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid var(--soft);

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.reply-box label[b-dsd3p9t4eq] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.reply-box textarea[b-dsd3p9t4eq] {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.reply-box textarea:focus[b-dsd3p9t4eq] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.reply-actions[b-dsd3p9t4eq] {
    display: flex;
    justify-content: flex-end;
}

.send-button[b-dsd3p9t4eq] {
    min-height: 40px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.send-button:disabled[b-dsd3p9t4eq] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Details
========================= */

.details-list[b-dsd3p9t4eq] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-dsd3p9t4eq] {
    min-height: 54px;

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

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-dsd3p9t4eq] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-dsd3p9t4eq] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-dsd3p9t4eq] {
    color: var(--text);

    font-size: 12px;
}

.ticket-subject[b-dsd3p9t4eq] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--text);

    font-size: 13px;
}


/* =========================
   Status
========================= */

.status-badge[b-dsd3p9t4eq] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-dsd3p9t4eq] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-dsd3p9t4eq] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-dsd3p9t4eq] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-dsd3p9t4eq] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .ticket-layout[b-dsd3p9t4eq] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .ticket-head[b-dsd3p9t4eq] {
        flex-direction: column;
    }

    .ticket-summary[b-dsd3p9t4eq] {
        align-items: flex-start;
        flex-direction: column;
    }

    .back-button[b-dsd3p9t4eq] {
        width: 100%;
    }

    .send-button[b-dsd3p9t4eq] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Tickets/DoctorTickets.razor.rz.scp.css */
.doctor-tickets-page[b-nviq24fa3s] {
    width: 100%;
}

.create-ticket-button[b-nviq24fa3s] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-ticket-button span[b-nviq24fa3s] {
    font-size: 20px;
    line-height: 1;
}

.create-ticket-button:hover[b-nviq24fa3s] {
    color: #fff;
    filter: brightness(.96);
}

.ticket-cell[b-nviq24fa3s] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ticket-avatar[b-nviq24fa3s] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-nviq24fa3s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-cell strong[b-nviq24fa3s] {
    font-size: 13px;
}

.ticket-cell span[b-nviq24fa3s] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-nviq24fa3s] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-nviq24fa3s] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-nviq24fa3s] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-nviq24fa3s] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-nviq24fa3s] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-nviq24fa3s] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-nviq24fa3s] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-nviq24fa3s] {
    border-color: var(--green);
    color: var(--green);
}

@media (max-width: 700px) {

    .create-ticket-button[b-nviq24fa3s] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Visits/DoctorOnlineVisit.razor.rz.scp.css */
.doctor-online-visit-page[b-hlrcks4a6y] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Visits/DoctorVisitDetails.razor.rz.scp.css */
.doctor-visit-details[b-nsfoklihxs] {
    width: 100%;
    min-width: 0;

    color: var(--text);
    font-size: 17px;
}

.doctor-visit-details[b-nsfoklihxs],
.doctor-visit-details *[b-nsfoklihxs] {
    box-sizing: border-box;
}

.page-head[b-nsfoklihxs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 24px;
}

.page-head > div > span[b-nsfoklihxs] {
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

h1[b-nsfoklihxs] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

h2[b-nsfoklihxs] {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 900;
}

p[b-nsfoklihxs] {
    margin: 8px 0;

    color: var(--muted);
    font-size: 18px;
    line-height: 2;
}

.details-grid[b-nsfoklihxs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.details-card[b-nsfoklihxs] {
    min-width: 0;
    padding: 24px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

dl[b-nsfoklihxs] {
    margin: 0;
}

dl > div[b-nsfoklihxs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
    padding: 15px 0;

    border-bottom: 1px solid #eef0f3;

    font-size: 17px;
    line-height: 1.9;
}

dl > div:last-child[b-nsfoklihxs] {
    border-bottom: 0;
}

dt[b-nsfoklihxs] {
    flex-shrink: 0;
    color: var(--muted);
}

dd[b-nsfoklihxs] {
    min-width: 0;
    margin: 0;

    text-align: left;
    font-weight: 800;

    overflow-wrap: anywhere;
}

.action-link[b-nsfoklihxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 9px 14px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font: inherit;
    font-size: 16px;
    font-weight: 800;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.action-link:hover[b-nsfoklihxs] {
    border-color: var(--green);
    color: var(--green);
}

.action-link:focus-visible[b-nsfoklihxs] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.state-card[b-nsfoklihxs] {
    padding: 40px 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;

    font-size: 18px;
    line-height: 2;
    text-align: center;
}

.error-message[b-nsfoklihxs],
.notice-message[b-nsfoklihxs] {
    padding: 16px 20px;
    margin-bottom: 20px;

    border: 1px solid;
    border-radius: 12px;

    font-size: 17px;
    line-height: 1.9;
}

.error-message[b-nsfoklihxs] {
    border-color: #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.notice-message[b-nsfoklihxs] {
    border-color: #fedf89;
    background: #fffcf5;
    color: #875408;
}

.history-badge[b-nsfoklihxs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;
    padding: 4px 11px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.history-badge.success[b-nsfoklihxs] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-nsfoklihxs] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-nsfoklihxs] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-nsfoklihxs] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-nsfoklihxs] {
    background: #f2f4f7;
    color: #667085;
}

@media (max-width: 900px) {
    .details-grid[b-nsfoklihxs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .page-head[b-nsfoklihxs] {
        flex-direction: column;
        align-items: stretch;
    }

    .details-card[b-nsfoklihxs] {
        padding: 19px;
    }

    dl > div[b-nsfoklihxs] {
        flex-direction: column;
        gap: 6px;
    }

    dt[b-nsfoklihxs] {
        flex-shrink: 1;
    }

    dd[b-nsfoklihxs] {
        text-align: right;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Visits/DoctorVisits.razor.rz.scp.css */
.doctor-visits-page[b-z65dffr5rl] {
    width: 100%;
    min-width: 0;
}

.doctor-visits-page[b-z65dffr5rl]  .data-table {
    width: 100%;
    min-width: 1200px;
    table-layout: auto;
}

.doctor-visits-page[b-z65dffr5rl]  .data-table th,
.doctor-visits-page[b-z65dffr5rl]  .data-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.doctor-visits-page[b-z65dffr5rl]  .data-table td {
    font-size: 17px;
}

.visit-cell[b-z65dffr5rl] {
    display: flex;
    align-items: center;
    gap: 11px;
    white-space: nowrap;
}

.visit-avatar[b-z65dffr5rl] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.visit-cell > div:last-child[b-z65dffr5rl],
.patient-cell[b-z65dffr5rl],
.date-cell[b-z65dffr5rl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: nowrap;
}

.visit-cell strong[b-z65dffr5rl],
.patient-cell strong[b-z65dffr5rl],
.date-cell strong[b-z65dffr5rl] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.visit-cell span[b-z65dffr5rl],
.patient-cell span[b-z65dffr5rl],
.date-cell span[b-z65dffr5rl] {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.visit-cell .test-value[b-z65dffr5rl] {
    color: #b54708;
}

.prescription-value[b-z65dffr5rl] {
    color: var(--green);
    font-size: 16px;
    font-weight: 800;
}

.muted-value[b-z65dffr5rl] {
    color: var(--muted);
    font-size: 16px;
}

.history-badge[b-z65dffr5rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;
    padding: 4px 11px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;

    white-space: nowrap;
}

.history-badge.success[b-z65dffr5rl] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-z65dffr5rl] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-z65dffr5rl] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-z65dffr5rl] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-z65dffr5rl] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-z65dffr5rl] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 6px;
    white-space: nowrap;
}

.action-link[b-z65dffr5rl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    min-height: 36px;
    padding: 7px 12px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.action-link:hover[b-z65dffr5rl] {
    border-color: var(--green);
    color: var(--green);
}

.action-link:focus-visible[b-z65dffr5rl] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Doctors/Pages/Visits/OnlineVisits.razor.rz.scp.css */
.online-visits-page[b-zxiaai54dx] {
    width: 100%;
}

.visit-cell[b-zxiaai54dx] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.visit-avatar[b-zxiaai54dx] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.visit-cell > div:last-child[b-zxiaai54dx],
.patient-cell[b-zxiaai54dx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.visit-cell strong[b-zxiaai54dx],
.patient-cell strong[b-zxiaai54dx] {
    font-size: 13px;
}

.visit-cell span[b-zxiaai54dx],
.patient-cell span[b-zxiaai54dx] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-zxiaai54dx] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-zxiaai54dx] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-zxiaai54dx] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-zxiaai54dx] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-zxiaai54dx] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-zxiaai54dx] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-zxiaai54dx] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-zxiaai54dx] {
    border-color: var(--green);
    color: var(--green);
}

.primary-action[b-zxiaai54dx] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-zxiaai54dx] {
    color: #fff;
    filter: brightness(.96);
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/CtaSection.razor.rz.scp.css */
.home-cta[b-0s3auwzsun] {
    position: relative;

    min-height: 620px;
    padding: 100px 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #285da8 0%,
            #2f7187 47%,
            #347d46 100%);

    background-size: 180% 180%;

    color: #fff;

    animation:
        cta-gradient-motion-b-0s3auwzsun 18s
        ease-in-out infinite;
}


.home-cta[b-0s3auwzsun]::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(31, 80, 154, .16),
            rgba(58, 125, 68, .08)),
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, .055),
            transparent 48%);

    pointer-events: none;

    animation:
        cta-overlay-breathe-b-0s3auwzsun 9s
        ease-in-out infinite;
}


.home-cta[b-0s3auwzsun]::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size:
        54px 54px;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, .48),
            transparent 72%);

    opacity: .45;
}


.home-cta .container[b-0s3auwzsun] {
    position: relative;
    z-index: 4;

    width: 100%;
}


.cta-shape[b-0s3auwzsun] {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.shape-top[b-0s3auwzsun] {
    width: 500px;
    height: 500px;

    top: -275px;
    right: -125px;

    background:
        rgba(255, 255, 255, .085);

    animation:
        cta-shape-top-b-0s3auwzsun 12s
        ease-in-out infinite;
}


.shape-bottom[b-0s3auwzsun] {
    width: 540px;
    height: 540px;

    bottom: -345px;
    left: -115px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        cta-shape-bottom-b-0s3auwzsun 14s
        ease-in-out infinite;
}


.cta-light[b-0s3auwzsun] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(4px);

    will-change:
        transform,
        opacity;
}


.light-one[b-0s3auwzsun] {
    width: 280px;
    height: 280px;

    top: 6%;
    left: 18%;

    background:
        radial-gradient(
            circle,
            rgba(100, 174, 220, .14),
            transparent 68%);

    animation:
        cta-light-one-b-0s3auwzsun 10s
        ease-in-out infinite;
}


.light-two[b-0s3auwzsun] {
    width: 300px;
    height: 300px;

    right: 15%;
    bottom: 3%;

    background:
        radial-gradient(
            circle,
            rgba(126, 192, 135, .13),
            transparent 68%);

    animation:
        cta-light-two-b-0s3auwzsun 11s
        ease-in-out infinite;
}


.cta-content[b-0s3auwzsun] {
    position: relative;

    max-width: 1080px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    direction: rtl;

    text-align: center;
}


.cta-badge[b-0s3auwzsun] {
    min-height: 47px;
    padding: 0 22px;

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

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .11);

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 10px 30px rgba(15, 44, 69, .08);

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.cta-badge:hover[b-0s3auwzsun] {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, .38);

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 13px 32px rgba(15, 44, 69, .12);
}


.cta-content h2[b-0s3auwzsun] {
    max-width: 1060px;

    margin: 32px auto 0;

    color: #fff;

    font-size:
        clamp(40px, 5vw, 64px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.8px;

    text-shadow:
        0 5px 22px rgba(19, 50, 70, .12);

    text-wrap: balance;
}


.cta-content p[b-0s3auwzsun] {
    max-width: 800px;

    margin: 30px auto 0;

    color:
        rgba(255, 255, 255, .94);

    font-size:
        clamp(16px, 1.55vw, 20px);

    font-weight: 600;
    line-height: 2.2;

    text-wrap: balance;
}


.cta-actions[b-0s3auwzsun] {
    margin-top: 47px;

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

    gap: 18px;
}


.cta-button[b-0s3auwzsun] {
    min-width: 270px;
    min-height: 66px;
    padding: 0 27px;

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

    gap: 10px;

    border:
        1px solid transparent;

    border-radius: 15px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 14px 34px rgba(14, 39, 61, .12);

    transition:
        transform .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        color .28s ease,
        box-shadow .28s ease;
}


.cta-button svg[b-0s3auwzsun] {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .28s ease;
}


.cta-button.primary[b-0s3auwzsun] {
    border-color:
        rgba(255, 255, 255, .9);

    background: #fff;
    color: #2459a6;
}


.cta-button.primary:hover[b-0s3auwzsun] {
    transform: translateY(-4px);

    background: #f8fbff;

    box-shadow:
        0 19px 40px rgba(14, 39, 61, .2);
}


.cta-button.primary:hover svg[b-0s3auwzsun] {
    transform:
        translateY(-1px)
        rotate(-4deg);
}


.cta-button.secondary[b-0s3auwzsun] {
    border-color:
        rgba(255, 255, 255, .34);

    background:
        rgba(255, 255, 255, .06);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 14px 34px rgba(14, 39, 61, .09);

    backdrop-filter: blur(8px);
}


.cta-button.secondary:hover[b-0s3auwzsun] {
    transform: translateY(-4px);

    border-color:
        rgba(255, 255, 255, .58);

    background:
        rgba(255, 255, 255, .13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 19px 40px rgba(14, 39, 61, .15);
}


.cta-button.secondary:hover svg[b-0s3auwzsun] {
    transform:
        translateX(-2px)
        rotate(-3deg);
}


.cta-button:active[b-0s3auwzsun] {
    transform:
        translateY(-1px)
        scale(.985);
}


.cta-button:focus-visible[b-0s3auwzsun] {
    outline:
        4px solid rgba(255, 255, 255, .25);

    outline-offset: 4px;
}


@keyframes cta-gradient-motion-b-0s3auwzsun {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


@keyframes cta-overlay-breathe-b-0s3auwzsun {

    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: 1;
    }
}


@keyframes cta-shape-top-b-0s3auwzsun {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .78;
    }

    50% {
        transform:
            translate3d(-18px, 17px, 0)
            scale(1.06);

        opacity: 1;
    }
}


@keyframes cta-shape-bottom-b-0s3auwzsun {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .72;
    }

    50% {
        transform:
            translate3d(20px, -16px, 0)
            scale(1.055);

        opacity: .92;
    }
}


@keyframes cta-light-one-b-0s3auwzsun {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.95);

        opacity: .55;
    }

    50% {
        transform:
            translate3d(24px, 14px, 0)
            scale(1.08);

        opacity: .9;
    }
}


@keyframes cta-light-two-b-0s3auwzsun {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);

        opacity: .5;
    }

    50% {
        transform:
            translate3d(-22px, -15px, 0)
            scale(1.09);

        opacity: .88;
    }
}


@media (max-width: 1050px) {

    .home-cta[b-0s3auwzsun] {
        min-height: 570px;
        padding: 88px 0;
    }


    .shape-top[b-0s3auwzsun] {
        width: 420px;
        height: 420px;

        top: -235px;
        right: -130px;
    }


    .shape-bottom[b-0s3auwzsun] {
        width: 450px;
        height: 450px;

        bottom: -290px;
        left: -125px;
    }


    .cta-content h2[b-0s3auwzsun] {
        max-width: 850px;

        font-size:
            clamp(38px, 5.7vw, 54px);
    }
}


@media (max-width: 750px) {

    .home-cta[b-0s3auwzsun] {
        min-height: auto;
        padding: 78px 0;
    }


    .cta-content h2[b-0s3auwzsun] {
        margin-top: 27px;

        font-size:
            clamp(33px, 7vw, 45px);

        line-height: 1.65;
    }


    .cta-content p[b-0s3auwzsun] {
        max-width: 600px;

        margin-top: 23px;

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


    .cta-actions[b-0s3auwzsun] {
        width: 100%;
        max-width: 470px;

        margin-top: 37px;

        flex-direction: column;

        gap: 13px;
    }


    .cta-button[b-0s3auwzsun] {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 620px) {

    .home-cta[b-0s3auwzsun] {
        padding: 68px 0 72px;
    }


    .shape-top[b-0s3auwzsun] {
        width: 290px;
        height: 290px;

        top: -165px;
        right: -105px;
    }


    .shape-bottom[b-0s3auwzsun] {
        width: 330px;
        height: 330px;

        bottom: -225px;
        left: -120px;
    }


    .light-one[b-0s3auwzsun] {
        width: 190px;
        height: 190px;

        left: -30px;
    }


    .light-two[b-0s3auwzsun] {
        width: 210px;
        height: 210px;

        right: -50px;
    }


    .cta-badge[b-0s3auwzsun] {
        min-height: 42px;
        padding: 0 17px;

        font-size: 14px;
    }


    .cta-content h2[b-0s3auwzsun] {
        margin-top: 23px;

        font-size: 31px;
        line-height: 1.7;

        letter-spacing: 0;
    }


    .cta-content p[b-0s3auwzsun] {
        margin-top: 18px;

        font-size: 15px;
        line-height: 2.05;
    }


    .cta-actions[b-0s3auwzsun] {
        margin-top: 31px;
    }


    .cta-button[b-0s3auwzsun] {
        min-height: 59px;
        padding: 0 20px;

        border-radius: 14px;

        font-size: 16px;
    }
}


@media (max-width: 390px) {

    .home-cta[b-0s3auwzsun] {
        padding: 62px 0 66px;
    }


    .cta-content h2[b-0s3auwzsun] {
        font-size: 28px;
    }


    .cta-content p[b-0s3auwzsun] {
        font-size: 14px;
    }


    .cta-button[b-0s3auwzsun] {
        min-height: 56px;

        font-size: 15px;
    }
}


@media (hover: none) {

    .cta-badge:hover[b-0s3auwzsun],
    .cta-button.primary:hover[b-0s3auwzsun],
    .cta-button.secondary:hover[b-0s3auwzsun] {
        transform: none;
    }


    .cta-button.primary:active[b-0s3auwzsun],
    .cta-button.secondary:active[b-0s3auwzsun] {
        transform: scale(.98);
    }
}


@media (prefers-reduced-motion: reduce) {

    .home-cta[b-0s3auwzsun],
    .home-cta[b-0s3auwzsun]::before,
    .cta-shape[b-0s3auwzsun],
    .cta-light[b-0s3auwzsun] {
        animation: none;
    }


    .cta-badge[b-0s3auwzsun],
    .cta-button[b-0s3auwzsun],
    .cta-button svg[b-0s3auwzsun] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/DoctorsSection.razor.rz.scp.css */
.animal-doctors[b-y5buhftk67] {
    padding: 72px 0 76px;

    background: #fff;
}


.section-head[b-y5buhftk67] {
    max-width: 780px;

    margin: 0 auto 36px;

    text-align: center;
}


.section-head > span[b-y5buhftk67] {
    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-y5buhftk67] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-y5buhftk67] {
    max-width: 720px;

    margin: 10px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.doctors-grid[b-y5buhftk67] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;

    direction: rtl;
}


.doctor-card[b-y5buhftk67] {
    position: relative;

    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid var(--soft);

    border-radius: 24px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.doctor-card:hover[b-y5buhftk67] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .38);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, .1);
}


.doctor-image[b-y5buhftk67] {
    position: relative;

    height: 215px;

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

    flex: 0 0 215px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .09),
            rgba(36, 89, 166, .08));
}


.doctor-image img[b-y5buhftk67] {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform .35s ease;
}


.doctor-card:hover
.doctor-image img[b-y5buhftk67] {
    transform: scale(1.035);
}


.image-placeholder[b-y5buhftk67] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #54718b;
}


.image-placeholder svg[b-y5buhftk67] {
    width: 74px;
    height: 74px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.doctor-status[b-y5buhftk67] {
    position: absolute;

    right: 14px;
    bottom: 13px;

    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border:
        1px solid rgba(255, 255, 255, .75);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .91);

    color: var(--green);

    font-size: 11px;
    font-weight: 900;

    box-shadow:
        0 7px 18px rgba(31, 41, 55, .08);

    backdrop-filter: blur(7px);
}


.doctor-status > span[b-y5buhftk67] {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #47a75c;

    box-shadow:
        0 0 0 3px rgba(71, 167, 92, .12);
}


.doctor-body[b-y5buhftk67] {
    padding: 21px 22px 22px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.doctor-main-info[b-y5buhftk67] {
    width: 100%;

    padding-bottom: 17px;

    border-bottom:
        1px solid var(--soft);
}


.doctor-body h3[b-y5buhftk67] {
    width: 100%;

    margin: 0 0 6px;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.6;

    text-align: center;
}


.doctor-specialty[b-y5buhftk67] {
    display: block;

    color: var(--green);

    font-size: 15px;
    font-weight: 900;
    line-height: 1.8;

    text-align: center;
}


.doctor-details[b-y5buhftk67] {
    width: 100%;

    margin: 16px 0 18px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;
}


.doctor-detail[b-y5buhftk67] {
    min-width: 0;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    gap: 3px;

    text-align: center;
}


.doctor-detail +
.doctor-detail[b-y5buhftk67] {
    border-right:
        1px solid var(--soft);
}


.doctor-detail:only-child[b-y5buhftk67] {
    grid-column:
        1 / -1;
}


.doctor-detail > span[b-y5buhftk67] {
    color: #98a2b3;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}


.doctor-detail > strong[b-y5buhftk67] {
    max-width: 100%;

    color: #667085;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


.doctor-detail
.visit-price[b-y5buhftk67] {
    color: var(--green);
}


.doctor-action[b-y5buhftk67] {
    width: 100%;

    margin-top: auto;
    padding-top: 17px;

    border-top:
        1px solid var(--soft);
}


.public-button[b-y5buhftk67] {
    width: 100%;
    min-height: 49px;
    padding: 0 20px;

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

    border:
        1px solid transparent;

    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.public-button:hover[b-y5buhftk67] {
    transform: translateY(-2px);
}


.public-button.primary[b-y5buhftk67] {
    background: var(--green);
    color: #fff;

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .16);
}


.public-button.primary:hover[b-y5buhftk67] {
    filter: brightness(.97);
}


.public-button:focus-visible[b-y5buhftk67] {
    outline:
        4px solid rgba(58, 125, 68, .17);

    outline-offset: 3px;
}


@media (max-width: 850px) {

    .doctors-grid[b-y5buhftk67] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .animal-doctors[b-y5buhftk67] {
        padding: 70px 0;
    }


    .section-head[b-y5buhftk67] {
        margin-bottom: 30px;
    }


    .section-head h2[b-y5buhftk67] {
        font-size: 28px;
    }


    .doctors-grid[b-y5buhftk67] {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .doctor-image[b-y5buhftk67] {
        height: 280px;

        flex-basis: 280px;
    }


    .doctor-body[b-y5buhftk67] {
        padding: 21px;
    }


    .doctor-body h3[b-y5buhftk67] {
        font-size: 21px;
    }


    .doctor-specialty[b-y5buhftk67] {
        font-size: 14px;
    }


    .doctor-details[b-y5buhftk67] {
        margin:
            15px 0 17px;
    }


    .doctor-detail > strong[b-y5buhftk67] {
        font-size: 13px;
    }
}


@media (max-width: 390px) {

    .doctor-image[b-y5buhftk67] {
        height: 245px;

        flex-basis: 245px;
    }


    .doctor-detail[b-y5buhftk67] {
        padding:
            0 8px;
    }
}


@media (hover: none) {

    .doctor-card:hover[b-y5buhftk67],
    .public-button:hover[b-y5buhftk67] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .doctor-card[b-y5buhftk67],
    .doctor-image img[b-y5buhftk67],
    .public-button[b-y5buhftk67] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/FaqSection.razor.rz.scp.css */
.home-faq[b-5e32efcz0m] {
    position: relative;

    padding: 96px 0 104px;

    overflow: hidden;

    background: #fff;
}


.home-faq[b-5e32efcz0m]::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -245px;
    right: -145px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .045);

    pointer-events: none;
}


.home-faq[b-5e32efcz0m]::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -235px;
    left: -135px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .035);

    pointer-events: none;
}


.home-faq .container[b-5e32efcz0m] {
    position: relative;
    z-index: 2;
}


.faq-heading[b-5e32efcz0m] {
    max-width: 820px;

    margin: 0 auto 58px;

    direction: rtl;

    text-align: center;
}


.faq-heading > span[b-5e32efcz0m] {
    display: block;

    margin-bottom: 12px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-heading h2[b-5e32efcz0m] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(34px, 4.4vw, 50px);

    font-weight: 900;
    line-height: 1.5;

    letter-spacing: -.5px;
}


.faq-heading p[b-5e32efcz0m] {
    max-width: 760px;

    margin: 20px auto 0;

    color: #7a8699;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.1;

    text-wrap: balance;
}


.faq-list[b-5e32efcz0m] {
    width: 100%;
    max-width: 1130px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 18px;

    direction: rtl;
}


.faq-item[b-5e32efcz0m] {
    position: relative;

    overflow: hidden;

    border:
        1px solid #e1e6ec;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #f3f5f8,
            #f1f3f6);

    transition:
        border-color .3s ease,
        background-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.faq-item:hover[b-5e32efcz0m] {
    transform: translateY(-2px);

    border-color:
        rgba(36, 89, 166, .16);

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .055);
}


.faq-item.active[b-5e32efcz0m] {
    border-color:
        rgba(58, 125, 68, .18);

    background:
        linear-gradient(
            135deg,
            #f5f8f6,
            #f1f4f7);

    box-shadow:
        0 15px 36px rgba(31, 41, 55, .065);
}


.faq-item h3[b-5e32efcz0m] {
    margin: 0;
}


.faq-question[b-5e32efcz0m] {
    width: 100%;
    min-height: 116px;
    padding: 28px 35px 28px 38px;

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

    gap: 28px;

    border: 0;

    background: transparent;
    color: var(--text);

    direction: rtl;

    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;

    text-align: right;

    cursor: pointer;

    appearance: none;

    transition:
        color .3s ease;
}


.faq-question:hover[b-5e32efcz0m] {
    color: #2459a6;
}


.faq-item.active .faq-question[b-5e32efcz0m] {
    color: var(--text);
}


.faq-question:focus-visible[b-5e32efcz0m] {
    outline:
        3px solid rgba(58, 125, 68, .17);

    outline-offset: -5px;
}


.question-text[b-5e32efcz0m] {
    min-width: 0;

    overflow-wrap: anywhere;
}


.faq-toggle[b-5e32efcz0m] {
    position: relative;

    width: 54px;
    height: 54px;

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

    flex: 0 0 54px;

    order: 2;

    border:
        1px solid rgba(36, 89, 166, .06);

    border-radius: 50%;

    background: #fff;
    color: #2459a6;

    box-shadow:
        0 8px 21px rgba(31, 41, 55, .045);

    transition:
        transform .35s ease,
        border-color .3s ease,
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.faq-question:hover .faq-toggle[b-5e32efcz0m] {
    transform: scale(1.06);

    border-color:
        rgba(36, 89, 166, .15);

    box-shadow:
        0 11px 25px rgba(36, 89, 166, .09);
}


.toggle-line[b-5e32efcz0m] {
    position: absolute;

    display: block;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform .35s
            cubic-bezier(.2, .72, .2, 1),
        opacity .25s ease;
}


.toggle-line.horizontal[b-5e32efcz0m] {
    width: 15px;
    height: 3px;
}


.toggle-line.vertical[b-5e32efcz0m] {
    width: 3px;
    height: 15px;
}


.faq-item.active .faq-toggle[b-5e32efcz0m] {
    transform: rotate(90deg);

    border-color:
        rgba(58, 125, 68, .12);

    color: var(--green);

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .1);
}


.faq-item.active
.toggle-line.vertical[b-5e32efcz0m] {
    opacity: 0;

    transform: scaleY(0);
}


.faq-item.active
.faq-question:hover
.faq-toggle[b-5e32efcz0m] {
    transform:
        rotate(90deg)
        scale(1.06);
}


.faq-answer[b-5e32efcz0m] {
    display: grid;

    grid-template-rows: 0fr;

    visibility: hidden;

    opacity: 0;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .3s ease,
        visibility 0s linear .45s;
}


.faq-item.active
.faq-answer[b-5e32efcz0m] {
    grid-template-rows: 1fr;

    visibility: visible;

    opacity: 1;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .35s ease .08s,
        visibility 0s linear 0s;
}


.answer-inner[b-5e32efcz0m] {
    min-height: 0;

    overflow: hidden;
}


.answer-inner p[b-5e32efcz0m] {
    margin: 0;
    padding: 0 35px 37px 127px;

    color: #718096;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;

    white-space: pre-line;
    overflow-wrap: anywhere;

    transform: translateY(-8px);

    transition:
        transform .4s ease;
}


.faq-item.active
.answer-inner p[b-5e32efcz0m] {
    transform: translateY(0);
}


.faq-state[b-5e32efcz0m] {
    width: 100%;
    max-width: 900px;
    min-height: 150px;
    padding: 30px 34px;

    margin: 0 auto;

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

    gap: 18px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #f5f8fb);

    color: #667085;

    direction: rtl;

    text-align: right;
}


.faq-state > div[b-5e32efcz0m] {
    min-width: 0;
}


.faq-state strong[b-5e32efcz0m] {
    display: block;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-state p[b-5e32efcz0m] {
    margin: 5px 0 0;

    color: #7a8699;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


.faq-state.error[b-5e32efcz0m] {
    border-color:
        rgba(36, 89, 166, .14);

    background:
        linear-gradient(
            135deg,
            #f6f9fd,
            #f8faf9);
}


.faq-state.empty[b-5e32efcz0m] {
    max-width: 760px;
}


.state-icon[b-5e32efcz0m] {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}


.faq-state.error
.state-icon[b-5e32efcz0m] {
    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;
}


.loading-spinner[b-5e32efcz0m],
.button-spinner[b-5e32efcz0m] {
    display: block;

    border-style: solid;
    border-color:
        rgba(58, 125, 68, .18);

    border-top-color:
        var(--green);

    border-radius: 50%;

    animation:
        faq-spinner-b-5e32efcz0m .75s linear infinite;
}


.loading-spinner[b-5e32efcz0m] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-width: 4px;
}


.button-spinner[b-5e32efcz0m] {
    width: 18px;
    height: 18px;

    border-width: 2px;
}


.retry-button[b-5e32efcz0m] {
    min-height: 45px;
    padding: 0 18px;

    margin-right: auto;

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

    gap: 8px;

    flex: 0 0 auto;

    border:
        1px solid var(--green);

    border-radius: 13px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.retry-button:hover:not(:disabled)[b-5e32efcz0m] {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(58, 125, 68, .17);

    filter: brightness(.97);
}


.retry-button:disabled[b-5e32efcz0m] {
    cursor: wait;

    opacity: .7;
}


.retry-button .button-spinner[b-5e32efcz0m] {
    border-color:
        rgba(255, 255, 255, .3);

    border-top-color: #fff;
}


@keyframes faq-spinner-b-5e32efcz0m {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 850px) {

    .home-faq[b-5e32efcz0m] {
        padding: 82px 0 88px;
    }


    .faq-heading[b-5e32efcz0m] {
        margin-bottom: 45px;
    }


    .faq-question[b-5e32efcz0m] {
        min-height: 105px;
        padding: 24px 27px;

        font-size: 18px;
    }


    .answer-inner p[b-5e32efcz0m] {
        padding:
            0 27px 31px 105px;

        font-size: 15px;
    }
}


@media (max-width: 620px) {

    .home-faq[b-5e32efcz0m] {
        padding: 70px 0 74px;
    }


    .faq-heading[b-5e32efcz0m] {
        margin-bottom: 36px;
    }


    .faq-heading > span[b-5e32efcz0m] {
        margin-bottom: 9px;

        font-size: 15px;
    }


    .faq-heading h2[b-5e32efcz0m] {
        font-size: 29px;
        line-height: 1.6;
    }


    .faq-heading p[b-5e32efcz0m] {
        margin-top: 13px;

        font-size: 15px;
        line-height: 2;
    }


    .faq-list[b-5e32efcz0m] {
        gap: 12px;
    }


    .faq-item[b-5e32efcz0m] {
        border-radius: 19px;
    }


    .faq-question[b-5e32efcz0m] {
        min-height: 88px;
        padding: 20px 18px;

        gap: 15px;

        font-size: 16px;
        line-height: 1.8;
    }


    .faq-toggle[b-5e32efcz0m] {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .toggle-line.horizontal[b-5e32efcz0m] {
        width: 13px;
        height: 2px;
    }


    .toggle-line.vertical[b-5e32efcz0m] {
        width: 2px;
        height: 13px;
    }


    .answer-inner p[b-5e32efcz0m] {
        padding:
            0 18px 24px;

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


    .faq-state[b-5e32efcz0m] {
        min-height: 170px;
        padding: 25px 20px;

        align-items: center;
        flex-direction: column;

        gap: 12px;

        text-align: center;
    }


    .retry-button[b-5e32efcz0m] {
        width: 100%;

        margin: 4px 0 0;
    }
}


@media (hover: none) {

    .faq-item:hover[b-5e32efcz0m] {
        transform: none;

        box-shadow: none;
    }


    .faq-question:hover .faq-toggle[b-5e32efcz0m] {
        transform: none;
    }


    .faq-item.active
    .faq-question:hover
    .faq-toggle[b-5e32efcz0m] {
        transform: rotate(90deg);
    }
}


@media (prefers-reduced-motion: reduce) {

    .faq-item[b-5e32efcz0m],
    .faq-toggle[b-5e32efcz0m],
    .toggle-line[b-5e32efcz0m],
    .faq-answer[b-5e32efcz0m],
    .answer-inner p[b-5e32efcz0m],
    .retry-button[b-5e32efcz0m] {
        transition-duration: .01ms !important;
    }


    .loading-spinner[b-5e32efcz0m],
    .button-spinner[b-5e32efcz0m] {
        animation-duration: 1.5s;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/FeaturesSection.razor.rz.scp.css */
.features[b-d71tzxl086]{

    padding:90px 0;

    background:var(--cream);

}

.features-head[b-d71tzxl086]{

    text-align:center;

    margin-bottom:60px;

}

.features-head span[b-d71tzxl086]{

    color:var(--green);

    font-weight:700;

    font-size:15px;

}

.features-head h2[b-d71tzxl086]{

    margin-top:12px;

    font-size:38px;

    font-weight:900;

    color:var(--text);

}

.features-head p[b-d71tzxl086]{

    max-width:720px;

    margin:18px auto 0;

    color:var(--muted);

    line-height:2;

}

.features-grid[b-d71tzxl086]{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

.feature[b-d71tzxl086]{

    background:#fff;

    border:1px solid var(--soft);

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    transition:.25s;

}

.feature:hover[b-d71tzxl086]{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.feature-icon[b-d71tzxl086]{

    width:110px;

    height:110px;

    margin:0 auto 20px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:rgba(36,89,166,.08);

}

.feature-icon-image[b-d71tzxl086]{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

}

.feature:nth-child(2) .feature-icon[b-d71tzxl086]{

    background:rgba(58,125,68,.08);

}

.feature:nth-child(3) .feature-icon[b-d71tzxl086]{

    background:rgba(75,85,99,.08);

}

.feature:nth-child(4) .feature-icon[b-d71tzxl086]{

    background:rgba(36,89,166,.08);

}

.feature h3[b-d71tzxl086]{

    margin-bottom:12px;

    font-size:21px;

    color:var(--text);

}

.feature p[b-d71tzxl086]{

    color:var(--muted);

    line-height:2;

    font-size:15px;

}

@media(max-width:1000px){

.features-grid[b-d71tzxl086]{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.features-grid[b-d71tzxl086]{

grid-template-columns:1fr;

}

}
/* _content/PopProject.BlazorSSR/Components/Features/Home/HeroSection.razor.rz.scp.css */
.hero[b-0pl80mybmu]{
    position:relative;
    padding:35px 0 135px;
    overflow:hidden;
    background:
    linear-gradient(
    135deg,
    #f2f4f7 0%,
    #fafafa 55%,
    #e5e7eb 100%);
}

.hero[b-0pl80mybmu]::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    top:-220px;
    right:-180px;
    background:rgba(58,125,68,.08);
    filter:blur(40px);
}

.hero[b-0pl80mybmu]::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    left:-180px;
    bottom:-220px;
    background:rgba(36,89,166,.08);
    filter:blur(45px);
}

.hero-wave[b-0pl80mybmu]{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:115px;
    background:#fff;
    z-index:5;

    clip-path:ellipse(75% 90% at 50% 100%);
}

.hero-content[b-0pl80mybmu]{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:900px;
    margin:auto;
}

.hero-badge[b-0pl80mybmu]{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:#fff;
    color:var(--orange);
    border:1px solid var(--soft);
    font-size:14px;
    font-weight:700;
    margin-bottom:20px;
}

.hero h1[b-0pl80mybmu]{
    font-size:46px;
    line-height:1.6;
    font-weight:900;
    color:var(--text);
    margin-bottom:18px;
}

.hero p[b-0pl80mybmu]{
    max-width:700px;
    margin:auto;
    color:var(--muted);
    font-size:19px;
    line-height:2;
}

.hero-actions[b-0pl80mybmu]{
    margin-top:45px;
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.hero-actions .btn[b-0pl80mybmu]{
    min-width:220px;
    min-height:60px;
    font-size:16px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/PetInsuranceSection.razor.rz.scp.css */
.vetban-showcase[b-zmw0v04g14] {
    position: relative;

    padding: 34px 0 96px;

    overflow: hidden;

    background: #fff;
}


.showcase-banner[b-zmw0v04g14] {
    position: relative;

    min-height: 390px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    align-items: center;

    direction: rtl;

    overflow: hidden;
    isolation: isolate;

    border-radius:
        34px 64px 34px 64px;

    background:
        linear-gradient(
            125deg,
            #347f49 0%,
            #1f5c34 45%,
            #164b2d 100%);

    background-size: 190% 190%;

    box-shadow:
        0 27px 65px rgba(27, 78, 43, .23);

    animation:
        showcase-gradient-b-zmw0v04g14 16s
        ease-in-out infinite;
}


.showcase-banner[b-zmw0v04g14]::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset: -45%;

    background:
        radial-gradient(
            circle at 19% 28%,
            rgba(117, 193, 130, .3),
            transparent 24%),
        radial-gradient(
            circle at 72% 21%,
            rgba(255, 255, 255, .105),
            transparent 23%),
        radial-gradient(
            circle at 50% 84%,
            rgba(7, 48, 26, .48),
            transparent 29%),
        radial-gradient(
            circle at 89% 73%,
            rgba(86, 164, 105, .23),
            transparent 25%);

    filter: blur(25px);

    animation:
        showcase-aurora-b-zmw0v04g14 19s
        ease-in-out infinite;
}


.showcase-banner[b-zmw0v04g14]::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size:
        48px 48px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .2),
            transparent 76%);

    opacity: .6;
}


.showcase-shape[b-zmw0v04g14] {
    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.shape-one[b-zmw0v04g14] {
    width: 360px;
    height: 360px;

    top: -235px;
    right: -105px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        shape-one-motion-b-zmw0v04g14 12s
        ease-in-out infinite;
}


.shape-two[b-zmw0v04g14] {
    width: 310px;
    height: 310px;

    bottom: -210px;
    left: 35%;

    background:
        rgba(109, 190, 123, .1);

    animation:
        shape-two-motion-b-zmw0v04g14 14s
        ease-in-out infinite;
}


.shape-three[b-zmw0v04g14] {
    width: 200px;
    height: 200px;

    top: 44%;
    right: 44%;

    border:
        1px solid rgba(255, 255, 255, .07);

    background: transparent;

    animation:
        shape-three-motion-b-zmw0v04g14 18s
        linear infinite;
}


.showcase-content[b-zmw0v04g14] {
    position: relative;
    z-index: 4;

    padding: 58px 64px 58px 46px;

    color: #fff;
}


.showcase-badge[b-zmw0v04g14] {
    min-height: 39px;
    padding: 0 17px;

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

    border:
        1px solid rgba(255, 255, 255, .2);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .105);

    color: rgba(255, 255, 255, .96);

    font-size: 14px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09);

    backdrop-filter: blur(8px);
}


.showcase-content h2[b-zmw0v04g14] {
    max-width: 720px;

    margin: 21px 0 0;

    color: #fff;

    font-size:
        clamp(34px, 3.6vw, 45px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.4px;

    text-wrap: balance;

    text-shadow:
        0 5px 22px rgba(7, 38, 20, .13);
}


.showcase-content p[b-zmw0v04g14] {
    max-width: 650px;

    margin: 17px 0 0;

    color:
        rgba(255, 255, 255, .86);

    font-size: 16px;
    font-weight: 600;
    line-height: 2.05;

    text-wrap: balance;
}


.showcase-action[b-zmw0v04g14] {
    min-height: 52px;
    padding: 0 21px;

    margin-top: 29px;

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

    gap: 9px;

    border:
        1px solid rgba(255, 255, 255, .9);

    border-radius: 14px;

    background: #fff;
    color: var(--green);

    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 13px 30px rgba(8, 42, 23, .14);

    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.showcase-action svg[b-zmw0v04g14] {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.showcase-action:hover[b-zmw0v04g14] {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, .65);

    background:
        rgba(255, 255, 255, .1);

    color: #fff;

    box-shadow:
        0 17px 36px rgba(8, 42, 23, .2);
}


.showcase-action:hover svg[b-zmw0v04g14] {
    transform: translateX(-3px);
}


.showcase-action:active[b-zmw0v04g14] {
    transform:
        translateY(-1px)
        scale(.985);
}


.showcase-action:focus-visible[b-zmw0v04g14] {
    outline:
        4px solid rgba(255, 255, 255, .2);

    outline-offset: 4px;
}


.showcase-visual[b-zmw0v04g14] {
    position: relative;
    z-index: 3;

    min-width: 0;
    height: 100%;
    min-height: 390px;

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

    direction: ltr;

    overflow: hidden;
}


.showcase-visual[b-zmw0v04g14]::before {
    content: "";

    position: absolute;

    width: 370px;
    height: 370px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .15),
            rgba(255, 255, 255, .035) 52%,
            transparent 71%);

    filter: blur(2px);

    animation:
        visual-glow-b-zmw0v04g14 7s
        ease-in-out infinite;
}


.brand-stage[b-zmw0v04g14] {
    position: relative;
    z-index: 4;

    width: 255px;
    height: 255px;

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

    border:
        1px solid rgba(255, 255, 255, .35);

    border-radius: 50%;

    background:
        rgb(255, 255, 255);

    box-shadow:
        0 0 0 13px rgba(255, 255, 255, .05),
        0 23px 55px rgba(5, 39, 20, .24),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    animation:
        brand-stage-float-b-zmw0v04g14 6s
        ease-in-out infinite;
}


.brand-glow[b-zmw0v04g14] {
    position: absolute;
    z-index: -1;

    inset: -22px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137, 211, 148, .22),
            transparent 68%);

    animation:
        brand-glow-pulse-b-zmw0v04g14 5s
        ease-in-out infinite;
}


.vetban-logo[b-zmw0v04g14] {
    width: 82%;
    height: 82%;

    display: block;

    object-fit: contain;

    mix-blend-mode: multiply;

    filter:
        contrast(1.02)
        saturate(.95);

    transition:
        transform .45s ease,
        filter .45s ease;
}


.brand-stage:hover
.vetban-logo[b-zmw0v04g14] {
    transform: scale(1.035);

    filter:
        contrast(1.04)
        saturate(1.02);
}


.brand-orbit[b-zmw0v04g14] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-outer[b-zmw0v04g14] {
    width: 350px;
    height: 350px;

    border:
        1px dashed rgba(255, 255, 255, .25);

    animation:
        orbit-clockwise-b-zmw0v04g14 30s
        linear infinite;
}


.orbit-middle[b-zmw0v04g14] {
    width: 305px;
    height: 305px;

    border:
        1px solid rgba(255, 255, 255, .12);

    animation:
        orbit-counter-clockwise-b-zmw0v04g14 24s
        linear infinite;
}


.orbit-node[b-zmw0v04g14] {
    position: absolute;
    z-index: 5;

    width: 48px;
    height: 48px;

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

    border:
        1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .14);

    color: #fff;

    box-shadow:
        0 10px 25px rgba(7, 42, 22, .16),
        inset 0 1px 0 rgba(255, 255, 255, .13);

    backdrop-filter: blur(9px);

    animation:
        node-float-b-zmw0v04g14 5s
        ease-in-out infinite;
}


.orbit-node svg[b-zmw0v04g14] {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.consultation-node[b-zmw0v04g14] {
    top: 41px;
    right: 73px;

    animation-delay: -.8s;
}


.pharmacy-node[b-zmw0v04g14] {
    bottom: 51px;
    right: 45px;

    animation-delay: -2.4s;
}


.shop-node[b-zmw0v04g14] {
    bottom: 42px;
    left: 61px;

    animation-delay: -3.6s;
}


.visual-dot[b-zmw0v04g14] {
    position: absolute;
    z-index: 3;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .6);

    box-shadow:
        0 0 15px rgba(255, 255, 255, .28);

    animation:
        dot-breathe-b-zmw0v04g14 4s
        ease-in-out infinite;
}


.dot-one[b-zmw0v04g14] {
    width: 7px;
    height: 7px;

    top: 25%;
    left: 16%;
}


.dot-two[b-zmw0v04g14] {
    width: 5px;
    height: 5px;

    top: 17%;
    right: 22%;

    animation-delay: -1.1s;
}


.dot-three[b-zmw0v04g14] {
    width: 8px;
    height: 8px;

    right: 12%;
    bottom: 25%;

    animation-delay: -2.1s;
}


.dot-four[b-zmw0v04g14] {
    width: 4px;
    height: 4px;

    bottom: 17%;
    left: 20%;

    animation-delay: -3s;
}


@keyframes showcase-gradient-b-zmw0v04g14 {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


@keyframes showcase-aurora-b-zmw0v04g14 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate3d(2%, -1%, 0)
            rotate(8deg)
            scale(1.07);
    }
}


@keyframes shape-one-motion-b-zmw0v04g14 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-17px, 14px, 0)
            scale(1.06);
    }
}


@keyframes shape-two-motion-b-zmw0v04g14 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(18px, -13px, 0)
            scale(1.08);
    }
}


@keyframes shape-three-motion-b-zmw0v04g14 {

    to {
        transform: rotate(360deg);
    }
}


@keyframes visual-glow-b-zmw0v04g14 {

    0%,
    100% {
        transform: scale(.96);

        opacity: .72;
    }

    50% {
        transform: scale(1.06);

        opacity: 1;
    }
}


@keyframes brand-stage-float-b-zmw0v04g14 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(0, -8px, 0)
            rotate(-1deg);
    }
}


@keyframes brand-glow-pulse-b-zmw0v04g14 {

    0%,
    100% {
        transform: scale(.95);

        opacity: .65;
    }

    50% {
        transform: scale(1.08);

        opacity: 1;
    }
}


@keyframes orbit-clockwise-b-zmw0v04g14 {

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbit-counter-clockwise-b-zmw0v04g14 {

    to {
        transform: rotate(-360deg);
    }
}


@keyframes node-float-b-zmw0v04g14 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0, -7px, 0)
            scale(1.04);
    }
}


@keyframes dot-breathe-b-zmw0v04g14 {

    0%,
    100% {
        transform: scale(.7);

        opacity: .35;
    }

    50% {
        transform: scale(1.25);

        opacity: .9;
    }
}


@media (max-width: 1050px) {

    .showcase-banner[b-zmw0v04g14] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .82fr);
    }


    .showcase-content[b-zmw0v04g14] {
        padding:
            50px 46px 50px 35px;
    }


    .showcase-content h2[b-zmw0v04g14] {
        font-size:
            clamp(32px, 4.1vw, 40px);
    }


    .brand-stage[b-zmw0v04g14] {
        width: 225px;
        height: 225px;
    }


    .orbit-outer[b-zmw0v04g14] {
        width: 315px;
        height: 315px;
    }


    .orbit-middle[b-zmw0v04g14] {
        width: 275px;
        height: 275px;
    }
}


@media (max-width: 850px) {

    .vetban-showcase[b-zmw0v04g14] {
        padding:
            25px 0 78px;
    }


    .showcase-banner[b-zmw0v04g14] {
        grid-template-columns: 1fr;

        border-radius:
            29px 52px 29px 52px;
    }


    .showcase-content[b-zmw0v04g14] {
        padding:
            46px 34px 25px;

        text-align: center;
    }


    .showcase-content h2[b-zmw0v04g14],
    .showcase-content p[b-zmw0v04g14] {
        margin-right: auto;
        margin-left: auto;
    }


    .showcase-action[b-zmw0v04g14] {
        margin-top: 25px;
    }


    .showcase-visual[b-zmw0v04g14] {
        min-height: 355px;
    }


    .shape-three[b-zmw0v04g14] {
        display: none;
    }


    .showcase-banner[b-zmw0v04g14]::after {
        mask-image:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .25),
                transparent 84%);
    }
}


@media (max-width: 620px) {

    .vetban-showcase[b-zmw0v04g14] {
        padding:
            20px 0 68px;
    }


    .showcase-banner[b-zmw0v04g14] {
        min-height: auto;

        border-radius:
            24px 40px 24px 40px;
    }


    .showcase-content[b-zmw0v04g14] {
        padding:
            37px 21px 19px;
    }


    .showcase-badge[b-zmw0v04g14] {
        min-height: 36px;
        padding: 0 14px;

        font-size: 13px;
    }


    .showcase-content h2[b-zmw0v04g14] {
        margin-top: 17px;

        font-size: 29px;
        line-height: 1.7;

        letter-spacing: 0;
    }


    .showcase-content p[b-zmw0v04g14] {
        margin-top: 12px;

        font-size: 15px;
        line-height: 2;
    }


    .showcase-action[b-zmw0v04g14] {
        width: 100%;
        max-width: 320px;
        min-height: 51px;

        margin-top: 22px;
    }


    .showcase-visual[b-zmw0v04g14] {
        min-height: 305px;
    }


    .showcase-visual[b-zmw0v04g14]::before {
        width: 285px;
        height: 285px;
    }


    .brand-stage[b-zmw0v04g14] {
        width: 185px;
        height: 185px;

        box-shadow:
            0 0 0 10px rgba(255, 255, 255, .05),
            0 19px 43px rgba(5, 39, 20, .22),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }


    .orbit-outer[b-zmw0v04g14] {
        width: 260px;
        height: 260px;
    }


    .orbit-middle[b-zmw0v04g14] {
        width: 225px;
        height: 225px;
    }


    .orbit-node[b-zmw0v04g14] {
        width: 41px;
        height: 41px;
    }


    .orbit-node svg[b-zmw0v04g14] {
        width: 20px;
        height: 20px;
    }


    .consultation-node[b-zmw0v04g14] {
        top: 25px;
        right: 52px;
    }


    .pharmacy-node[b-zmw0v04g14] {
        right: 29px;
        bottom: 38px;
    }


    .shop-node[b-zmw0v04g14] {
        bottom: 31px;
        left: 40px;
    }


    .shape-one[b-zmw0v04g14] {
        width: 260px;
        height: 260px;

        top: -175px;
        right: -110px;
    }


    .shape-two[b-zmw0v04g14] {
        width: 240px;
        height: 240px;

        bottom: -170px;
        left: -95px;
    }
}


@media (max-width: 380px) {

    .showcase-content[b-zmw0v04g14] {
        padding:
            34px 17px 15px;
    }


    .showcase-content h2[b-zmw0v04g14] {
        font-size: 26px;
    }


    .showcase-content p[b-zmw0v04g14] {
        font-size: 14px;
    }


    .showcase-visual[b-zmw0v04g14] {
        min-height: 280px;
    }


    .brand-stage[b-zmw0v04g14] {
        width: 165px;
        height: 165px;
    }


    .orbit-outer[b-zmw0v04g14] {
        width: 235px;
        height: 235px;
    }


    .orbit-middle[b-zmw0v04g14] {
        width: 205px;
        height: 205px;
    }
}


@media (hover: none) {

    .showcase-action:hover[b-zmw0v04g14] {
        transform: none;

        border-color:
            rgba(255, 255, 255, .9);

        background: #fff;
        color: var(--green);
    }


    .showcase-action:active[b-zmw0v04g14] {
        transform: scale(.98);
    }
}


@media (prefers-reduced-motion: reduce) {

    .showcase-banner[b-zmw0v04g14],
    .showcase-banner[b-zmw0v04g14]::before,
    .showcase-shape[b-zmw0v04g14],
    .showcase-visual[b-zmw0v04g14]::before,
    .brand-stage[b-zmw0v04g14],
    .brand-glow[b-zmw0v04g14],
    .brand-orbit[b-zmw0v04g14],
    .orbit-node[b-zmw0v04g14],
    .visual-dot[b-zmw0v04g14] {
        animation: none;
    }


    .showcase-action[b-zmw0v04g14],
    .showcase-action svg[b-zmw0v04g14],
    .vetban-logo[b-zmw0v04g14] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/PetsSection.razor.rz.scp.css */
.pets[b-pkm90oy5a9] {
    padding: 90px 0;
    background: #fff;
}

.pets-head[b-pkm90oy5a9] {
    text-align: center;
    margin-bottom: 55px;
}

.pets-head span[b-pkm90oy5a9] {
    color: var(--orange);
    font-weight: 700;
    font-size: 15px;
}

.pets-head h2[b-pkm90oy5a9] {
    margin-top: 12px;
    font-size: 38px;
    color: var(--text);
    font-weight: 900;
}

.pets-head p[b-pkm90oy5a9] {
    max-width: 700px;
    margin: 18px auto 0;
    color: var(--muted);
    line-height: 2;
}

.pets-slider[b-pkm90oy5a9] {
    position: relative;
}

.pets-scroll[b-pkm90oy5a9] {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px 22px;
    scrollbar-width: none;
    cursor: grab;
    scroll-behavior: smooth;
}

.pets-scroll[b-pkm90oy5a9]::-webkit-scrollbar {
    display: none;
}

.pets-scroll.is-dragging[b-pkm90oy5a9] {
    cursor: grabbing;
    scroll-behavior: auto;
}

.pets-grid[b-pkm90oy5a9] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 170px;
    gap: 22px;
    min-width: max-content;
    padding: 0 56px;
}

.pet-card-link[b-pkm90oy5a9] {
    display: block;
    color: inherit;
    text-decoration: none;
    user-select: none;
}

.pet-card-link img[b-pkm90oy5a9] {
    pointer-events: none;
}

.pet-card[b-pkm90oy5a9] {
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 22px;
    padding: 26px 16px;
    text-align: center;
    transition: .25s;
    cursor: pointer;
    height: 100%;
}

.pet-card:hover[b-pkm90oy5a9] {
    transform: translateY(-8px);
    border-color: var(--green);
}

.pet-icon[b-pkm90oy5a9] {
    width: 88px;
    height: 88px;
    border-radius: 26px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .08);
    overflow: hidden;
}

.pet-card-link:nth-child(even) .pet-icon[b-pkm90oy5a9] {
    background: rgba(36, 89, 166, .08);
}

.pet-icon img[b-pkm90oy5a9] {
    width: 106px;
    height: 106px;
    object-fit: contain;
    display: block;
}

.pet-fallback[b-pkm90oy5a9] {
    font-size: 42px;
}

.pet-card h3[b-pkm90oy5a9] {
    font-size: 20px;
    color: var(--text);
    margin-bottom: 8px;
}

.pets-arrow[b-pkm90oy5a9] {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--green);
    font-size: 38px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .08);
    transition: .25s;
}

.pets-arrow:hover[b-pkm90oy5a9] {
    transform: translateY(-50%) scale(1.06);
    color: var(--orange);
}

.pets-arrow-right[b-pkm90oy5a9] {
    right: -24px;
}

.pets-arrow-left[b-pkm90oy5a9] {
    left: -24px;
}

.pets-loading[b-pkm90oy5a9],
.pets-empty[b-pkm90oy5a9] {
    text-align: center;
    color: var(--muted);
    padding: 30px 0;
}

@media(max-width:700px) {
    .pets-grid[b-pkm90oy5a9] {
        grid-auto-columns: 150px;
        padding: 0 42px;
    }

    .pets-head h2[b-pkm90oy5a9] {
        font-size: 30px;
    }

    .pets-arrow[b-pkm90oy5a9] {
        width: 44px;
        height: 44px;
        font-size: 30px;
    }

    .pets-arrow-right[b-pkm90oy5a9] {
        right: -10px;
    }

    .pets-arrow-left[b-pkm90oy5a9] {
        left: -10px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/ProductsSection.razor.rz.scp.css */
.home-products[b-l9bsvqvn7h] {
    padding: 72px 0 76px;

    background: var(--cream);
}


.section-head[b-l9bsvqvn7h] {
    margin-bottom: 36px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}


.section-head > div > span[b-l9bsvqvn7h] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-l9bsvqvn7h] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-l9bsvqvn7h] {
    max-width: 720px;

    margin: 10px 0 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.public-button[b-l9bsvqvn7h] {
    min-height: 48px;
    padding: 0 20px;

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

    flex: 0 0 auto;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.public-button:hover[b-l9bsvqvn7h] {
    transform: translateY(-2px);
}


.public-button.outline[b-l9bsvqvn7h] {
    border-color: var(--soft);

    background: #fff;
    color: var(--text);
}


.public-button.outline:hover[b-l9bsvqvn7h] {
    border-color: var(--green);

    color: var(--green);
}


.products-grid[b-l9bsvqvn7h] {
    padding: 2px 2px 14px;

    display: grid;

    grid-auto-columns:
        calc((100% - 60px) / 4);

    grid-auto-flow: column;

    align-items: stretch;

    gap: 20px;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-inline: contain;

    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;

    scrollbar-color:
        rgba(58, 125, 68, .35)
        transparent;

    scrollbar-width: thin;
}


.products-grid[b-l9bsvqvn7h]::-webkit-scrollbar {
    height: 7px;
}


.products-grid[b-l9bsvqvn7h]::-webkit-scrollbar-track {
    background: transparent;
}


.products-grid[b-l9bsvqvn7h]::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .28);
}


.product-card-link[b-l9bsvqvn7h] {
    min-width: 0;
    height: 100%;

    display: block;

    color: inherit;

    text-decoration: none;

    border-radius: 22px;

    outline: none;

    scroll-snap-align: start;
}


.product-card-link:focus-visible[b-l9bsvqvn7h] {
    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .16);
}


.product-card[b-l9bsvqvn7h] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 22px;

    background: #fff;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.product-card-link:hover .product-card[b-l9bsvqvn7h] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .36);

    /* box-shadow:
        0 18px 38px rgba(31, 41, 55, .1); */
}


.product-image[b-l9bsvqvn7h] {
    height: 220px;
    padding: 14px;

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

    flex: 0 0 220px;

    overflow: hidden;

    background: #f8faf8;
}


.product-image img[b-l9bsvqvn7h] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.product-card-link:hover .product-image img[b-l9bsvqvn7h] {
    transform: scale(1.04);
}


.image-placeholder[b-l9bsvqvn7h] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--muted);

    font-size: 58px;
}


.product-body[b-l9bsvqvn7h] {
    min-height: 220px;
    padding: 18px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.product-type[b-l9bsvqvn7h] {
    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    align-self: center;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}


.product-body h3[b-l9bsvqvn7h] {
    min-height: 64px;

    margin: 12px 0 6px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.7;

    text-align: center;
}


.product-brand[b-l9bsvqvn7h],
.product-brand-placeholder[b-l9bsvqvn7h] {
    width: 100%;
    min-height: 24px;
}


.product-brand[b-l9bsvqvn7h] {
    margin: 0;
    padding-top: .5rem;

    color: #667085;

    direction: ltr;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;

    text-align: left;

    unicode-bidi: plaintext;
}


.product-brand-placeholder[b-l9bsvqvn7h] {
    display: block;
}


.product-bottom[b-l9bsvqvn7h] {
    margin-top: auto;
    padding-top: 14px;

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

    gap: 10px;

    border-top: 1px solid var(--soft);
}


.product-bottom strong[b-l9bsvqvn7h] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link[b-l9bsvqvn7h] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 10px;

    background: var(--orange);
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;

    transition:
        transform .2s ease,
        filter .2s ease;
}


.product-card-link:hover .card-link[b-l9bsvqvn7h] {
    filter: brightness(.96);

    transform: translateY(-1px);
}


@media (max-width: 1050px) {

    .products-grid[b-l9bsvqvn7h] {
        grid-auto-columns:
            calc((100% - 20px) / 2);
    }
}


@media (max-width: 850px) {

    .section-head[b-l9bsvqvn7h] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 620px) {

    .home-products[b-l9bsvqvn7h] {
        padding: 70px 0;
    }


    .section-head[b-l9bsvqvn7h] {
        margin-bottom: 30px;
    }


    .section-head h2[b-l9bsvqvn7h] {
        font-size: 28px;
    }


    .products-grid[b-l9bsvqvn7h] {
        grid-auto-columns:
            minmax(280px, 88%);

        gap: 14px;
    }


    .product-image[b-l9bsvqvn7h] {
        height: 240px;

        flex-basis: 240px;
    }


    .product-body[b-l9bsvqvn7h] {
        min-height: 0;
    }


    .product-body h3[b-l9bsvqvn7h] {
        min-height: 0;
    }


    .public-button[b-l9bsvqvn7h] {
        width: 100%;
    }
}


@media (max-width: 360px) {

    .products-grid[b-l9bsvqvn7h] {
        grid-auto-columns:
            minmax(260px, 94%);
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/ServicesSection.razor.rz.scp.css */
.services[b-tz8vhd7mkt]{
    padding:0 0 90px;
    background:#fff;
    margin-top:-55px;
    position:relative;
    z-index:6;
}

.services-grid[b-tz8vhd7mkt]{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.service-card[b-tz8vhd7mkt]{
  

    background:#fff;

    border:1px solid var(--soft);

    border-radius:24px;

    overflow:hidden;

    text-align:center;

    transition:.25s;

    box-shadow:0 16px 40px rgba(75,85,99,.08);
    

}

.service-card:hover[b-tz8vhd7mkt]{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.service-image[b-tz8vhd7mkt]{

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:25px 20px 10px;
    

}

.service-image img[b-tz8vhd7mkt]{

    width:100%;

    height:100%;

    object-fit:contain;

}

.service-content[b-tz8vhd7mkt]{

    padding:0 18px 0;

}

.service-content h3[b-tz8vhd7mkt]{

    font-size:30px;

    color:var(--text);

    font-weight:900;

    margin-bottom:14px;
    
    

}

.service-content p[b-tz8vhd7mkt]{

    color:var(--muted);

    line-height:2;

    font-size:16px;

    min-height:70px;

    margin-bottom:24px;
    

}

@media(max-width:960px){

.services[b-tz8vhd7mkt]{

margin-top:0;

padding:60px 0;

}

.services-grid[b-tz8vhd7mkt]{

grid-template-columns:1fr;

}

}


.service-link[b-tz8vhd7mkt] {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.service-link:hover[b-tz8vhd7mkt] {
    color: inherit;
    text-decoration: none;
}

.service-link .service-card[b-tz8vhd7mkt] {
    height: 100%;
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/StepsSection.razor.rz.scp.css */
.home-steps[b-4b4q3or9o8] {
    position: relative;

    padding: 92px 0 96px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f7fbf8 0%,
            #f5f9ff 54%,
            #fff 100%);
}


.home-steps[b-4b4q3or9o8]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .1) 1.5px,
            transparent 1.7px);

    background-size: 25px 25px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, .42),
            transparent);

    opacity: .55;
}


.steps-shape[b-4b4q3or9o8] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    transition:
        transform .8s ease,
        opacity .8s ease;
}


.shape-one[b-4b4q3or9o8] {
    width: 330px;
    height: 330px;

    top: -185px;
    right: -105px;

    background:
        rgba(58, 125, 68, .08);
}


.shape-two[b-4b4q3or9o8] {
    width: 290px;
    height: 290px;

    bottom: -175px;
    left: -95px;

    background:
        rgba(36, 89, 166, .07);
}


.home-steps:hover .shape-one[b-4b4q3or9o8] {
    transform:
        translate3d(-10px, 8px, 0)
        scale(1.025);
}


.home-steps:hover .shape-two[b-4b4q3or9o8] {
    transform:
        translate3d(10px, -8px, 0)
        scale(1.025);
}


.home-steps .container[b-4b4q3or9o8] {
    position: relative;
    z-index: 2;
}


.section-head[b-4b4q3or9o8] {
    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


.section-head > span[b-4b4q3or9o8] {
    min-height: 34px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(58, 125, 68, .13);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .76);

    color: var(--green);

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 6px 18px rgba(31, 41, 55, .035);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.section-head > span:hover[b-4b4q3or9o8] {
    transform: translateY(-2px);

    border-color:
        rgba(58, 125, 68, .25);

    box-shadow:
        0 9px 22px rgba(58, 125, 68, .08);
}


.section-head h2[b-4b4q3or9o8] {
    margin: 13px 0 0;

    color: var(--text);

    font-size:
        clamp(31px, 3.8vw, 44px);

    font-weight: 900;
    line-height: 1.5;
}


.section-head p[b-4b4q3or9o8] {
    max-width: 680px;

    margin: 11px auto 0;

    color: #667085;

    font-size: 17px;
    font-weight: 500;
    line-height: 2;
}


.steps-journey[b-4b4q3or9o8] {
    position: relative;

    min-height: 390px;
    padding: 48px 38px 46px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: start;

    gap: 24px;

    direction: rtl;

    overflow: hidden;

    border:
        1px solid rgba(58, 125, 68, .11);

    border-radius:
        36px 72px 36px 72px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .94),
            rgba(248, 252, 250, .87));

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        0 24px 60px rgba(31, 41, 55, .055);

    transition:
        border-color .35s ease,
        box-shadow .35s ease;
}


.steps-journey:hover[b-4b4q3or9o8] {
    border-color:
        rgba(58, 125, 68, .17);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .98),
        0 28px 68px rgba(31, 41, 55, .075);
}


.steps-journey[b-4b4q3or9o8]::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -140px;
    left: 14%;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .055);

    pointer-events: none;

    transition:
        transform .7s ease,
        opacity .7s ease;
}


.steps-journey[b-4b4q3or9o8]::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    right: -100px;
    bottom: -110px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .06);

    pointer-events: none;

    transition:
        transform .7s ease,
        opacity .7s ease;
}


.steps-journey:hover[b-4b4q3or9o8]::before {
    transform:
        translate3d(10px, 8px, 0)
        scale(1.06);

    opacity: .85;
}


.steps-journey:hover[b-4b4q3or9o8]::after {
    transform:
        translate3d(-8px, -7px, 0)
        scale(1.07);

    opacity: .9;
}


.journey-line[b-4b4q3or9o8] {
    position: absolute;
    z-index: 1;

    top: 77px;
    right: 4%;
    left: 4%;

    width: 92%;
    height: 255px;

    overflow: visible;

    pointer-events: none;

    opacity: .65;

    filter:
        drop-shadow(
            0 3px 5px rgba(58, 125, 68, .06));

    transition:
        opacity .35s ease,
        filter .35s ease;
}


.journey-line path[b-4b4q3or9o8] {
    stroke-dasharray: 10 13;
    stroke-dashoffset: 0;

    transition:
        stroke-width .35s ease,
        opacity .35s ease,
        filter .35s ease;

    animation:
        journey-path-flow-b-4b4q3or9o8 8s linear infinite;
}


.steps-journey:hover .journey-line[b-4b4q3or9o8] {
    opacity: .92;

    filter:
        drop-shadow(
            0 4px 8px rgba(58, 125, 68, .13));
}


.steps-journey:hover .journey-line path[b-4b4q3or9o8] {
    stroke-width: 4.6;

    animation-duration: 3.8s;
}


.step-item[b-4b4q3or9o8] {
    position: relative;
    z-index: 2;

    min-width: 0;
    padding: 12px 10px 16px;

    display: flex;
    align-items: center;
    flex-direction: column;

    border-radius: 26px;

    text-align: center;

    isolation: isolate;

    transition:
        transform .35s cubic-bezier(.2, .75, .25, 1),
        background-color .35s ease,
        box-shadow .35s ease;
}


.step-item[b-4b4q3or9o8]::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 0;

    border:
        1px solid transparent;

    border-radius: inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .8),
            rgba(248, 252, 250, .54));

    box-shadow:
        0 14px 32px rgba(31, 41, 55, .05);

    opacity: 0;

    transform: scale(.94);

    transition:
        opacity .35s ease,
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.step-item[b-4b4q3or9o8]::after {
    content: "";

    position: absolute;
    z-index: -2;

    width: 120px;
    height: 120px;

    top: -15px;
    left: 50%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .14),
            rgba(58, 125, 68, 0) 70%);

    opacity: 0;

    transform:
        translateX(-50%)
        scale(.65);

    transition:
        opacity .4s ease,
        transform .4s ease;
}


.step-item:nth-of-type(even)[b-4b4q3or9o8]::after {
    background:
        radial-gradient(
            circle,
            rgba(36, 89, 166, .14),
            rgba(36, 89, 166, 0) 70%);
}


.step-item:nth-of-type(odd)[b-4b4q3or9o8] {
    margin-top: 76px;
}


.step-item:hover[b-4b4q3or9o8] {
    transform: translateY(-7px);
}


.step-item:nth-of-type(odd):hover[b-4b4q3or9o8] {
    transform: translateY(-7px);
}


.step-item:hover[b-4b4q3or9o8]::before {
    border-color:
        rgba(58, 125, 68, .1);

    opacity: 1;

    transform: scale(1);

    box-shadow:
        0 20px 42px rgba(31, 41, 55, .075);
}


.step-item:nth-of-type(even):hover[b-4b4q3or9o8]::before {
    border-color:
        rgba(36, 89, 166, .1);
}


.step-item:hover[b-4b4q3or9o8]::after {
    opacity: 1;

    transform:
        translateX(-50%)
        scale(1.15);
}


.step-marker[b-4b4q3or9o8] {
    position: relative;

    width: 64px;
    height: 64px;

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

    flex: 0 0 64px;

    border:
        7px solid rgba(255, 255, 255, .96);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            var(--green),
            #286b42);

    color: #fff;

    box-shadow:
        0 0 0 1px rgba(58, 125, 68, .14),
        0 12px 26px rgba(58, 125, 68, .18);

    transition:
        transform .35s cubic-bezier(.2, .75, .25, 1),
        box-shadow .35s ease,
        filter .35s ease;
}


.step-marker[b-4b4q3or9o8]::before {
    content: "";

    position: absolute;

    inset: -9px;

    border:
        1px solid rgba(58, 125, 68, .24);

    border-radius: 50%;

    opacity: 0;

    transform: scale(.72);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.step-item:nth-of-type(even)
.step-marker[b-4b4q3or9o8] {
    background:
        linear-gradient(
            145deg,
            #397eb1,
            #2459a6);

    box-shadow:
        0 0 0 1px rgba(36, 89, 166, .14),
        0 12px 26px rgba(36, 89, 166, .17);
}


.step-item:nth-of-type(even)
.step-marker[b-4b4q3or9o8]::before {
    border-color:
        rgba(36, 89, 166, .24);
}


.step-item:hover .step-marker[b-4b4q3or9o8] {
    transform:
        translateY(-3px)
        scale(1.08)
        rotate(-3deg);

    filter: saturate(1.08);

    box-shadow:
        0 0 0 1px rgba(58, 125, 68, .19),
        0 17px 32px rgba(58, 125, 68, .24);
}


.step-item:nth-of-type(even):hover
.step-marker[b-4b4q3or9o8] {
    transform:
        translateY(-3px)
        scale(1.08)
        rotate(3deg);

    box-shadow:
        0 0 0 1px rgba(36, 89, 166, .19),
        0 17px 32px rgba(36, 89, 166, .23);
}


.step-item:hover .step-marker[b-4b4q3or9o8]::before {
    opacity: 1;

    transform: scale(1.08);

    animation:
        marker-ring-b-4b4q3or9o8 1.8s ease-out infinite;
}


.step-marker span[b-4b4q3or9o8] {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;

    transition:
        transform .35s ease;
}


.step-item:hover .step-marker span[b-4b4q3or9o8] {
    transform: scale(1.05);
}


.step-content[b-4b4q3or9o8] {
    width: 100%;
    max-width: 245px;

    margin-top: 19px;

    transition:
        transform .35s ease;
}


.step-item:hover .step-content[b-4b4q3or9o8] {
    transform: translateY(-2px);
}


.step-icon[b-4b4q3or9o8] {
    width: 50px;
    height: 50px;

    margin: 0 auto 11px;

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

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius:
        15px 23px 15px 23px;

    background:
        rgba(58, 125, 68, .075);

    color: var(--green);

    box-shadow:
        0 7px 18px rgba(58, 125, 68, .045);

    transition:
        transform .35s cubic-bezier(.2, .75, .25, 1),
        border-color .35s ease,
        background-color .35s ease,
        color .35s ease,
        box-shadow .35s ease;
}


.step-item:nth-of-type(even)
.step-icon[b-4b4q3or9o8] {
    border-color:
        rgba(36, 89, 166, .12);

    background:
        rgba(36, 89, 166, .075);

    color: #2459a6;

    box-shadow:
        0 7px 18px rgba(36, 89, 166, .045);
}


.step-item:hover .step-icon[b-4b4q3or9o8] {
    transform:
        translateY(-3px)
        rotate(-2deg)
        scale(1.06);

    border-color:
        rgba(58, 125, 68, .25);

    background:
        rgba(58, 125, 68, .12);

    box-shadow:
        0 11px 24px rgba(58, 125, 68, .12);
}


.step-item:nth-of-type(even):hover
.step-icon[b-4b4q3or9o8] {
    transform:
        translateY(-3px)
        rotate(2deg)
        scale(1.06);

    border-color:
        rgba(36, 89, 166, .24);

    background:
        rgba(36, 89, 166, .115);

    box-shadow:
        0 11px 24px rgba(36, 89, 166, .11);
}


.step-icon svg[b-4b4q3or9o8] {
    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .35s ease,
        stroke-width .35s ease;
}


.step-item:hover .step-icon svg[b-4b4q3or9o8] {
    transform: scale(1.08);

    stroke-width: 2;
}


.step-content h3[b-4b4q3or9o8] {
    position: relative;

    width: fit-content;

    margin: 0 auto;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;

    transition:
        color .3s ease,
        transform .3s ease;
}


.step-content h3[b-4b4q3or9o8]::after {
    content: "";

    position: absolute;

    right: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background: var(--green);

    transform: translateX(50%);

    transition:
        width .35s ease;
}


.step-item:nth-of-type(even)
.step-content h3[b-4b4q3or9o8]::after {
    background: #2459a6;
}


.step-item:hover .step-content h3[b-4b4q3or9o8] {
    color: var(--green);

    transform: translateY(-1px);
}


.step-item:nth-of-type(even):hover
.step-content h3[b-4b4q3or9o8] {
    color: #2459a6;
}


.step-item:hover .step-content h3[b-4b4q3or9o8]::after {
    width: 34px;
}


.step-content p[b-4b4q3or9o8] {
    margin: 7px 0 0;

    color: #667085;

    font-size: 14px;
    font-weight: 500;
    line-height: 2;

    overflow-wrap: anywhere;

    transition:
        color .3s ease,
        transform .3s ease;
}


.step-item:hover .step-content p[b-4b4q3or9o8] {
    color: #4f5f73;

    transform: translateY(2px);
}


@keyframes journey-path-flow-b-4b4q3or9o8 {

    to {
        stroke-dashoffset: -46;
    }
}


@keyframes marker-ring-b-4b4q3or9o8 {

    0% {
        opacity: .8;

        transform: scale(.88);
    }

    75%,
    100% {
        opacity: 0;

        transform: scale(1.35);
    }
}


@media (max-width: 1050px) {

    .steps-journey[b-4b4q3or9o8] {
        min-height: auto;
        padding: 44px 30px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 42px 28px;
    }


    .journey-line[b-4b4q3or9o8] {
        display: none;
    }


    .step-item[b-4b4q3or9o8],
    .step-item:nth-of-type(odd)[b-4b4q3or9o8] {
        margin-top: 0;
    }


    .step-content[b-4b4q3or9o8] {
        max-width: 290px;
    }
}


@media (max-width: 700px) {

    .home-steps[b-4b4q3or9o8] {
        padding: 72px 0 76px;
    }


    .section-head[b-4b4q3or9o8] {
        margin-bottom: 35px;
    }


    .section-head h2[b-4b4q3or9o8] {
        font-size: 29px;
    }


    .section-head p[b-4b4q3or9o8] {
        font-size: 15px;
    }


    .steps-journey[b-4b4q3or9o8] {
        padding: 30px 22px;

        display: flex;
        flex-direction: column;

        gap: 0;

        border-radius:
            27px 45px 27px 45px;
    }


    .steps-journey[b-4b4q3or9o8]::before {
        top: -120px;
        left: -80px;
    }


    .steps-journey[b-4b4q3or9o8]::after {
        right: -120px;
        bottom: -100px;
    }


    .step-item[b-4b4q3or9o8],
    .step-item:nth-of-type(odd)[b-4b4q3or9o8] {
        width: 100%;

        margin: 0;
        padding: 11px 8px 30px;

        display: grid;

        grid-template-columns:
            58px minmax(0, 1fr);

        align-items: start;

        gap: 16px;

        text-align: right;
    }


    .step-item:hover[b-4b4q3or9o8],
    .step-item:nth-of-type(odd):hover[b-4b4q3or9o8] {
        transform: translateY(-3px);
    }


    .step-item:not(:last-of-type)[b-4b4q3or9o8]::after {
        content: "";

        position: absolute;
        z-index: -1;

        top: 63px;
        right: 36px;

        width: 2px;
        height: calc(100% - 50px);

        border-radius: 999px;

        background:
            linear-gradient(
                to bottom,
                rgba(58, 125, 68, .35),
                rgba(36, 89, 166, .14));

        opacity: 1;

        transform: none;

        transition:
            width .3s ease,
            box-shadow .3s ease,
            opacity .3s ease;
    }


    .step-item:not(:last-of-type):hover[b-4b4q3or9o8]::after {
        width: 3px;

        opacity: 1;

        transform: none;

        box-shadow:
            0 0 10px rgba(58, 125, 68, .18);
    }


    .step-item:last-of-type[b-4b4q3or9o8] {
        padding-bottom: 11px;
    }


    .step-marker[b-4b4q3or9o8] {
        width: 58px;
        height: 58px;

        flex-basis: 58px;

        border-width: 6px;
    }


    .step-content[b-4b4q3or9o8] {
        max-width: none;

        margin-top: 0;
        padding-top: 2px;
    }


    .step-icon[b-4b4q3or9o8] {
        width: 42px;
        height: 42px;

        margin: 0 0 8px;

        border-radius:
            13px 19px 13px 19px;
    }


    .step-icon svg[b-4b4q3or9o8] {
        width: 23px;
        height: 23px;
    }


    .step-content h3[b-4b4q3or9o8] {
        margin: 0;

        font-size: 19px;
    }


    .step-content h3[b-4b4q3or9o8]::after {
        right: 0;

        transform: none;
    }


    .step-content p[b-4b4q3or9o8] {
        margin-top: 4px;

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


@media (max-width: 380px) {

    .steps-journey[b-4b4q3or9o8] {
        padding: 27px 16px;
    }


    .step-item[b-4b4q3or9o8],
    .step-item:nth-of-type(odd)[b-4b4q3or9o8] {
        grid-template-columns:
            52px minmax(0, 1fr);

        gap: 13px;
    }


    .step-marker[b-4b4q3or9o8] {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        border-width: 5px;
    }


    .step-item:not(:last-of-type)[b-4b4q3or9o8]::after {
        top: 57px;
        right: 33px;
    }
}


@media (hover: none) {

    .step-item:active[b-4b4q3or9o8] {
        transform: translateY(-2px);
    }


    .step-item:active[b-4b4q3or9o8]::before {
        opacity: .75;

        transform: scale(1);
    }


    .step-item:active .step-marker[b-4b4q3or9o8] {
        transform: scale(1.04);
    }


    .step-item:active .step-icon[b-4b4q3or9o8] {
        transform:
            translateY(-2px)
            scale(1.04);
    }
}


@media (prefers-reduced-motion: reduce) {

    .journey-line path[b-4b4q3or9o8],
    .step-item:hover .step-marker[b-4b4q3or9o8]::before {
        animation: none;
    }


    .home-steps *[b-4b4q3or9o8],
    .home-steps *[b-4b4q3or9o8]::before,
    .home-steps *[b-4b4q3or9o8]::after {
        scroll-behavior: auto;

        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Home/TestimonialsSection.razor.rz.scp.css */
.testimonials-section[b-upp5xco0ou] {
    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background: #fff;
}


.testimonials-section[b-upp5xco0ou]::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    top: -280px;
    right: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .07),
            rgba(58, 125, 68, 0) 70%);

    pointer-events: none;
}


.testimonials-section[b-upp5xco0ou]::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    bottom: -340px;
    left: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(36, 89, 166, .065),
            rgba(36, 89, 166, 0) 70%);

    pointer-events: none;
}


.testimonials-section .container[b-upp5xco0ou] {
    position: relative;
    z-index: 2;
}


.testimonials-layout[b-upp5xco0ou] {
    display: grid;

    grid-template-columns:
        minmax(300px, .75fr)
        minmax(590px, 1.25fr);

    align-items: center;

    gap: 58px;

    direction: rtl;
}


.testimonials-heading[b-upp5xco0ou] {
    position: relative;
    z-index: 4;

    max-width: 430px;
}


.section-label[b-upp5xco0ou] {
    min-height: 35px;
    padding: 0 14px;

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

    border:
        1px solid rgba(58, 125, 68, .14);

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .065);

    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}


.testimonials-heading h2[b-upp5xco0ou] {
    margin: 16px 0 0;

    color: var(--text);

    font-size:
        clamp(32px, 4vw, 47px);

    font-weight: 900;
    line-height: 1.55;
}


.testimonials-heading > p[b-upp5xco0ou] {
    margin: 15px 0 0;

    color: #667085;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.05;
}


.testimonial-progress[b-upp5xco0ou] {
    margin-top: 31px;

    display: flex;
    align-items: center;

    gap: 8px;
}


.progress-dot[b-upp5xco0ou] {
    width: 28px;
    height: 18px;
    padding: 0;

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

    border: 0;

    background: transparent;

    cursor: pointer;
}


.progress-dot span[b-upp5xco0ou] {
    width: 8px;
    height: 8px;

    display: block;

    border-radius: 999px;

    background: #d5dde4;

    transition:
        width .3s ease,
        background-color .3s ease,
        transform .3s ease;
}


.progress-dot:hover span[b-upp5xco0ou] {
    transform: scale(1.2);

    background: #9db7a4;
}


.progress-dot.active span[b-upp5xco0ou] {
    width: 26px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            #397eb1);

    transform: none;
}


.testimonial-controls[b-upp5xco0ou] {
    margin-top: 22px;

    display: flex;
    align-items: center;

    gap: 12px;
}


.slider-control[b-upp5xco0ou] {
    width: 47px;
    height: 47px;
    padding: 0;

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

    border:
        1px solid rgba(58, 125, 68, .14);

    border-radius: 50%;

    background: #fff;
    color: var(--text);

    box-shadow:
        0 9px 24px rgba(31, 41, 55, .07);

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.slider-control:hover[b-upp5xco0ou] {
    transform: translateY(-3px);

    border-color: var(--green);

    background: var(--green);
    color: #fff;

    box-shadow:
        0 13px 28px rgba(58, 125, 68, .2);
}


.slider-control:active[b-upp5xco0ou] {
    transform:
        translateY(-1px)
        scale(.96);
}


.slider-control:focus-visible[b-upp5xco0ou],
.progress-dot:focus-visible[b-upp5xco0ou],
.testimonial-viewport:focus-visible[b-upp5xco0ou] {
    outline:
        3px solid rgba(58, 125, 68, .18);

    outline-offset: 3px;
}


.slider-control svg[b-upp5xco0ou] {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.slide-counter[b-upp5xco0ou] {
    min-width: 58px;

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

    gap: 5px;

    color: #98a2b3;

    font-size: 14px;
    font-weight: 700;
}


.slide-counter strong[b-upp5xco0ou] {
    color: var(--green);

    font-size: 18px;
    font-weight: 900;
}


.testimonial-stage[b-upp5xco0ou] {
    position: relative;

    min-width: 0;
    min-height: 650px;

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

    direction: ltr;
}


.stage-glow[b-upp5xco0ou] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);
}


.glow-one[b-upp5xco0ou] {
    width: 270px;
    height: 270px;

    top: 80px;
    left: 30px;

    background:
        rgba(58, 125, 68, .065);

    animation:
        floating-glow-one-b-upp5xco0ou 9s ease-in-out infinite;
}


.glow-two[b-upp5xco0ou] {
    width: 240px;
    height: 240px;

    right: 25px;
    bottom: 75px;

    background:
        rgba(36, 89, 166, .055);

    animation:
        floating-glow-two-b-upp5xco0ou 10s ease-in-out infinite;
}


.testimonial-globe[b-upp5xco0ou] {
    position: relative;

    width:
        min(100%, 620px);

    aspect-ratio: 1;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(255, 255, 255, .98) 0 28%,
            rgba(247, 251, 248, .94) 52%,
            rgba(240, 247, 251, .74) 76%,
            rgba(255, 255, 255, .35) 100%);

    box-shadow:
        inset 0 0 0 1px rgba(58, 125, 68, .08),
        inset 0 0 80px rgba(58, 125, 68, .045),
        0 32px 80px rgba(31, 41, 55, .075);

    isolation: isolate;
}


.testimonial-globe[b-upp5xco0ou]::before {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 8%;

    border:
        1px dashed rgba(58, 125, 68, .13);

    border-radius: 50%;

    animation:
        globe-spin-b-upp5xco0ou 42s linear infinite;
}


.testimonial-globe[b-upp5xco0ou]::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: 18%;

    border:
        1px solid rgba(36, 89, 166, .08);

    border-radius: 50%;

    box-shadow:
        inset 0 0 40px rgba(36, 89, 166, .035);

    animation:
        globe-breathe-b-upp5xco0ou 6s ease-in-out infinite;
}


.orbit[b-upp5xco0ou] {
    position: absolute;

    border:
        1px dashed rgba(58, 125, 68, .16);

    border-radius: 50%;

    pointer-events: none;
}


.orbit-outer[b-upp5xco0ou] {
    inset: -2%;

    animation:
        orbit-clockwise-b-upp5xco0ou 34s linear infinite;
}


.orbit-middle[b-upp5xco0ou] {
    inset: 11%;

    border-color:
        rgba(36, 89, 166, .13);

    animation:
        orbit-counter-clockwise-b-upp5xco0ou 27s linear infinite;
}


.orbit-node[b-upp5xco0ou] {
    position: absolute;

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

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 10px 27px rgba(31, 41, 55, .11);
}


.orbit-outer .orbit-node[b-upp5xco0ou] {
    animation:
        orbit-counter-clockwise-b-upp5xco0ou 34s linear infinite;
}


.orbit-middle .orbit-node[b-upp5xco0ou] {
    animation:
        orbit-clockwise-b-upp5xco0ou 27s linear infinite;
}


.node-one[b-upp5xco0ou] {
    top: 8%;
    left: 14%;
}


.node-two[b-upp5xco0ou] {
    right: 6%;
    bottom: 20%;
}


.node-three[b-upp5xco0ou] {
    top: 15%;
    right: 8%;
}


.node-four[b-upp5xco0ou] {
    bottom: 9%;
    left: 12%;
}


.mini-avatar[b-upp5xco0ou] {
    width: 43px;
    height: 43px;

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

    border:
        4px solid #fff;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .15),
            rgba(36, 89, 166, .12));

    color: var(--green);
}


.node-two .mini-avatar[b-upp5xco0ou],
.node-three .mini-avatar[b-upp5xco0ou] {
    color: #2459a6;
}


.mini-avatar svg[b-upp5xco0ou] {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.globe-grid[b-upp5xco0ou] {
    position: absolute;

    inset: 10%;

    overflow: hidden;

    border-radius: 50%;

    pointer-events: none;

    opacity: .6;
}


.globe-grid > span[b-upp5xco0ou] {
    position: absolute;

    border:
        1px solid rgba(58, 125, 68, .075);

    border-radius: 50%;
}


.latitude[b-upp5xco0ou] {
    right: 5%;
    left: 5%;

    height: 34%;
}


.latitude-one[b-upp5xco0ou] {
    top: 19%;
}


.latitude-two[b-upp5xco0ou] {
    bottom: 19%;
}


.longitude[b-upp5xco0ou] {
    top: 4%;
    bottom: 4%;

    width: 43%;
}


.longitude-one[b-upp5xco0ou] {
    right: 13%;
}


.longitude-two[b-upp5xco0ou] {
    left: 13%;
}


.testimonial-viewport[b-upp5xco0ou] {
    position: relative;
    z-index: 3;

    width: 72%;
    height: 74%;

    overflow: hidden;

    border-radius: 50%;

    outline: none;

    cursor: grab;

    touch-action: pan-y;

    user-select: none;

    -webkit-user-select: none;
}


.testimonial-viewport:active[b-upp5xco0ou] {
    cursor: grabbing;
}


.testimonial-slide[b-upp5xco0ou] {
    position: absolute;
    inset: 0;

    padding: 54px 45px 46px;

    display: flex;
    align-items: center;
    flex-direction: column;

    direction: rtl;

    text-align: center;

    opacity: 0;

    pointer-events: none;

    transform:
        translate3d(110%, 0, 0)
        scale(.82);

    filter: blur(5px);

    transition:
        transform .58s cubic-bezier(.2, .72, .2, 1),
        opacity .4s ease,
        filter .45s ease;
}


.testimonial-slide.active[b-upp5xco0ou] {
    z-index: 3;

    opacity: 1;

    pointer-events: auto;

    transform:
        translate3d(
            var(--drag-offset, 0),
            0,
            0)
        scale(1);

    filter: none;
}


.testimonial-slide.previous[b-upp5xco0ou] {
    z-index: 1;

    opacity: 0;

    transform:
        translate3d(
            calc(-110% + var(--drag-offset, 0px) * .18),
            0,
            0)
        scale(.82);
}


.testimonial-slide.next[b-upp5xco0ou] {
    z-index: 1;

    opacity: 0;

    transform:
        translate3d(
            calc(110% + var(--drag-offset, 0px) * .18),
            0,
            0)
        scale(.82);
}


.testimonial-slide.hidden[b-upp5xco0ou] {
    visibility: hidden;

    transition: none;
}


.quote-mark[b-upp5xco0ou] {
    position: absolute;

    top: 34px;
    right: 54px;

    color:
        rgba(58, 125, 68, .1);

    font-family: Georgia, serif;
    font-size: 110px;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;
}


.reviewer-avatar[b-upp5xco0ou] {
    width: 76px;
    height: 76px;

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

    flex: 0 0 76px;

    border:
        6px solid rgba(255, 255, 255, .96);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .17),
            rgba(36, 89, 166, .13));

    color: var(--green);

    box-shadow:
        0 0 0 1px rgba(58, 125, 68, .12),
        0 13px 30px rgba(31, 41, 55, .1);
}


.reviewer-avatar svg[b-upp5xco0ou] {
    width: 38px;
    height: 38px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.testimonial-rating[b-upp5xco0ou] {
    margin-top: 14px;

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

    gap: 3px;

    direction: ltr;
}


.testimonial-rating span[b-upp5xco0ou] {
    color: #d8dee4;

    font-size: 17px;
    line-height: 1;
}


.testimonial-rating span.filled[b-upp5xco0ou] {
    color: #e5ad31;

    text-shadow:
        0 3px 9px rgba(229, 173, 49, .18);
}


.testimonial-rating strong[b-upp5xco0ou] {
    margin-left: 6px;

    color: #667085;

    font-size: 13px;
    font-weight: 900;
}


.testimonial-slide blockquote[b-upp5xco0ou] {
    max-width: 365px;

    margin: 19px auto 0;

    color: #475467;

    font-size: 16px;
    font-weight: 600;
    line-height: 2.05;

    overflow-wrap: anywhere;
}


.testimonial-slide footer[b-upp5xco0ou] {
    margin-top: auto;
    padding-top: 20px;

    display: flex;
    align-items: center;
    flex-direction: column;

    gap: 3px;
}


.testimonial-slide footer strong[b-upp5xco0ou] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
    line-height: 1.7;
}


.testimonial-slide footer span[b-upp5xco0ou] {
    color: var(--green);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.8;
}


.swipe-hint[b-upp5xco0ou] {
    position: absolute;

    right: 50%;
    bottom: 2px;

    margin: 0;

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

    gap: 7px;

    color: #98a2b3;

    direction: rtl;

    font-size: 12px;
    font-weight: 700;

    transform: translateX(50%);
}


.swipe-hint svg[b-upp5xco0ou] {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    animation:
        swipe-indicator-b-upp5xco0ou 2.2s ease-in-out infinite;
}


@keyframes globe-spin-b-upp5xco0ou {

    to {
        transform: rotate(360deg);
    }
}


@keyframes globe-breathe-b-upp5xco0ou {

    0%,
    100% {
        transform: scale(.985);

        opacity: .7;
    }

    50% {
        transform: scale(1.025);

        opacity: 1;
    }
}


@keyframes orbit-clockwise-b-upp5xco0ou {

    to {
        transform: rotate(360deg);
    }
}


@keyframes orbit-counter-clockwise-b-upp5xco0ou {

    to {
        transform: rotate(-360deg);
    }
}


@keyframes floating-glow-one-b-upp5xco0ou {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(16px, -13px, 0)
            scale(1.05);
    }
}


@keyframes floating-glow-two-b-upp5xco0ou {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-14px, 12px, 0)
            scale(1.06);
    }
}


@keyframes swipe-indicator-b-upp5xco0ou {

    0%,
    100% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(3px);
    }

    70% {
        transform: translateX(-3px);
    }
}


@media (max-width: 1050px) {

    .testimonials-layout[b-upp5xco0ou] {
        grid-template-columns:
            minmax(270px, .7fr)
            minmax(500px, 1.3fr);

        gap: 30px;
    }


    .testimonial-stage[b-upp5xco0ou] {
        min-height: 570px;
    }


    .testimonial-globe[b-upp5xco0ou] {
        width:
            min(100%, 540px);
    }


    .testimonial-slide[b-upp5xco0ou] {
        padding:
            43px 35px 38px;
    }


    .testimonial-slide blockquote[b-upp5xco0ou] {
        margin-top: 14px;

        font-size: 15px;
        line-height: 2;
    }
}


@media (max-width: 850px) {

    .testimonials-section[b-upp5xco0ou] {
        padding: 82px 0;
    }


    .testimonials-layout[b-upp5xco0ou] {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .testimonials-heading[b-upp5xco0ou] {
        max-width: 680px;

        margin: 0 auto;

        text-align: center;
    }


    .testimonial-progress[b-upp5xco0ou],
    .testimonial-controls[b-upp5xco0ou] {
        justify-content: center;
    }


    .testimonial-stage[b-upp5xco0ou] {
        min-height: 610px;
    }


    .testimonial-globe[b-upp5xco0ou] {
        width:
            min(100%, 575px);
    }
}


@media (max-width: 620px) {

    .testimonials-section[b-upp5xco0ou] {
        padding: 70px 0 74px;
    }


    .testimonials-heading h2[b-upp5xco0ou] {
        font-size: 29px;
    }


    .testimonials-heading > p[b-upp5xco0ou] {
        font-size: 15px;
        line-height: 2;
    }


    .testimonial-stage[b-upp5xco0ou] {
        min-height: auto;
        padding-bottom: 42px;
    }


    .testimonial-globe[b-upp5xco0ou] {
        width: 100%;

        aspect-ratio: auto;
        min-height: 520px;

        border-radius:
            34% 34% 28% 28% /
            24% 24% 20% 20%;
    }


    .testimonial-globe[b-upp5xco0ou]::before {
        inset: 5%;

        border-radius:
            38% 38% 30% 30%;
    }


    .testimonial-globe[b-upp5xco0ou]::after {
        inset: 12%;

        border-radius:
            40% 40% 32% 32%;
    }


    .orbit-outer[b-upp5xco0ou] {
        inset: 1%;
    }


    .orbit-middle[b-upp5xco0ou] {
        inset: 10%;
    }


    .orbit-node[b-upp5xco0ou] {
        display: none;
    }


    .globe-grid[b-upp5xco0ou] {
        inset: 8%;

        border-radius: 35%;
    }


    .testimonial-viewport[b-upp5xco0ou] {
        width: 88%;
        height: 445px;

        border-radius: 28%;
    }


    .testimonial-slide[b-upp5xco0ou] {
        padding:
            41px 24px 33px;
    }


    .quote-mark[b-upp5xco0ou] {
        top: 25px;
        right: 30px;

        font-size: 86px;
    }


    .reviewer-avatar[b-upp5xco0ou] {
        width: 68px;
        height: 68px;

        flex-basis: 68px;
    }


    .reviewer-avatar svg[b-upp5xco0ou] {
        width: 34px;
        height: 34px;
    }


    .testimonial-slide blockquote[b-upp5xco0ou] {
        max-width: 330px;

        font-size: 15px;
        line-height: 2.05;
    }


    .testimonial-slide footer[b-upp5xco0ou] {
        padding-top: 15px;
    }


    .testimonial-slide footer strong[b-upp5xco0ou] {
        font-size: 17px;
    }


    .swipe-hint[b-upp5xco0ou] {
        bottom: 2px;

        width: 100%;
    }
}


@media (max-width: 390px) {

    .testimonial-globe[b-upp5xco0ou] {
        min-height: 510px;
    }


    .testimonial-viewport[b-upp5xco0ou] {
        width: 92%;
        height: 440px;
    }


    .testimonial-slide[b-upp5xco0ou] {
        padding:
            38px 18px 29px;
    }


    .testimonial-slide blockquote[b-upp5xco0ou] {
        font-size: 14px;
        line-height: 2;
    }


    .slider-control[b-upp5xco0ou] {
        width: 44px;
        height: 44px;
    }
}


@media (hover: none) {

    .slider-control:hover[b-upp5xco0ou] {
        transform: none;

        border-color:
            rgba(58, 125, 68, .14);

        background: #fff;
        color: var(--text);

        box-shadow:
            0 9px 24px rgba(31, 41, 55, .07);
    }


    .slider-control:active[b-upp5xco0ou] {
        border-color: var(--green);

        background: var(--green);
        color: #fff;

        transform: scale(.95);
    }
}


@media (prefers-reduced-motion: reduce) {

    .testimonial-globe[b-upp5xco0ou]::before,
    .testimonial-globe[b-upp5xco0ou]::after,
    .orbit[b-upp5xco0ou],
    .orbit-node[b-upp5xco0ou],
    .stage-glow[b-upp5xco0ou],
    .swipe-hint svg[b-upp5xco0ou] {
        animation: none;
    }


    .testimonial-slide[b-upp5xco0ou],
    .slider-control[b-upp5xco0ou],
    .progress-dot span[b-upp5xco0ou] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitBannerSection.razor.rz.scp.css */
.online-visit-banner[b-emjknvw8o7] {
    padding: 74px 0 86px;

    direction: rtl;

    background: #fff;
}


.visit-banner[b-emjknvw8o7] {
    min-height: 610px;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    overflow: hidden;

    direction: ltr;

    border:
        1px solid rgba(31, 41, 55, .09);

    border-radius: 38px;

    background: #fff;

    box-shadow:
        0 24px 60px rgba(31, 41, 55, .1);
}


.pricing-panel[b-emjknvw8o7] {
    min-width: 0;

    padding: 58px 54px;

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

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #2860a8 0%,
            #2f6f86 48%,
            #347a54 100%);

    color: #fff;
}


.pricing-content[b-emjknvw8o7] {
    width: 100%;
    max-width: 460px;

    display: flex;
    align-items: center;
    flex-direction: column;

    text-align: center;
}


.pricing-label[b-emjknvw8o7] {
    color:
        rgba(255, 255, 255, .88);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}


.pricing-value[b-emjknvw8o7] {
    margin-top: 28px;

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

    gap: 10px;

    direction: rtl;
}


.pricing-value strong[b-emjknvw8o7] {
    color: #fff;

    font-size:
        clamp(41px, 4vw, 55px);

    font-weight: 900;
    line-height: 1.2;

    letter-spacing: -1px;
}


.pricing-value span[b-emjknvw8o7] {
    color: #fff;

    font-size: 22px;
    font-weight: 900;
}


.pricing-content p[b-emjknvw8o7] {
    max-width: 390px;

    margin: 31px auto 0;

    color:
        rgba(255, 255, 255, .9);

    font-size: 16px;
    font-weight: 700;
    line-height: 2.05;
}


.pricing-action[b-emjknvw8o7] {
    width: 100%;
    min-height: 64px;

    margin-top: 38px;
    padding: 0 28px;

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

    border:
        1px solid rgba(255, 255, 255, .95);

    border-radius: 16px;

    background: #fff;
    color: var(--green);

    box-shadow:
        0 14px 30px rgba(18, 48, 38, .14);

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .22s ease,
        background-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}


.pricing-action:hover[b-emjknvw8o7] {
    transform: translateY(-2px);

    background:
        rgba(255, 255, 255, .94);

    color: #28643e;

    box-shadow:
        0 18px 36px rgba(18, 48, 38, .18);
}


.banner-content[b-emjknvw8o7] {
    min-width: 0;

    padding: 64px 68px 58px;

    display: flex;
    justify-content: center;
    flex-direction: column;

    direction: rtl;

    text-align: right;
}


.section-label[b-emjknvw8o7] {
    display: block;

    margin-bottom: 20px;

    color: #2459a6;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.banner-content h2[b-emjknvw8o7] {
    max-width: 610px;

    margin: 0;

    color: var(--text);

    font-size:
        clamp(34px, 3.2vw, 44px);

    font-weight: 900;
    line-height: 1.7;
}


.banner-description[b-emjknvw8o7] {
    max-width: 650px;

    margin: 22px 0 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.15;
}


.visit-features[b-emjknvw8o7] {
    margin: 31px 0 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 20px;

    list-style: none;
}


.visit-features li[b-emjknvw8o7] {
    position: relative;

    min-height: 34px;
    padding-right: 24px;

    display: flex;
    align-items: center;

    color: #344054;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.9;
}


.visit-features li[b-emjknvw8o7]::before {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--green);

    transform:
        translateY(-50%);
}


.visit-features li:nth-child(even)[b-emjknvw8o7]::before {
    background: #2459a6;
}


@media (max-width: 1050px) {

    .visit-banner[b-emjknvw8o7] {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(0, 1.05fr);
    }


    .pricing-panel[b-emjknvw8o7] {
        padding:
            48px 38px;
    }


    .banner-content[b-emjknvw8o7] {
        padding:
            52px 44px;
    }


    .banner-content h2[b-emjknvw8o7] {
        font-size:
            clamp(32px, 3.7vw, 39px);
    }
}


@media (max-width: 850px) {

    .online-visit-banner[b-emjknvw8o7] {
        padding:
            64px 0 74px;
    }


    .visit-banner[b-emjknvw8o7] {
        min-height: 0;

        grid-template-columns: 1fr;

        border-radius: 30px;
    }


    .banner-content[b-emjknvw8o7] {
        grid-row: 1;

        padding:
            48px 38px 45px;
    }


    .pricing-panel[b-emjknvw8o7] {
        grid-row: 2;

        min-height: 440px;
        padding:
            48px 38px;
    }


    .banner-content h2[b-emjknvw8o7] {
        max-width: 680px;
    }


    .banner-description[b-emjknvw8o7] {
        max-width: 680px;
    }
}


@media (max-width: 620px) {

    .online-visit-banner[b-emjknvw8o7] {
        padding:
            54px 0 65px;
    }


    .visit-banner[b-emjknvw8o7] {
        border-radius: 24px;
    }


    .banner-content[b-emjknvw8o7] {
        padding:
            37px 24px 38px;
    }


    .section-label[b-emjknvw8o7] {
        margin-bottom: 13px;

        font-size: 14px;
    }


    .banner-content h2[b-emjknvw8o7] {
        font-size: 28px;
        line-height: 1.7;
    }


    .banner-description[b-emjknvw8o7] {
        margin-top: 16px;

        font-size: 15px;
        line-height: 2.05;
    }


    .visit-features[b-emjknvw8o7] {
        margin-top: 25px;

        gap: 15px;
    }


    .visit-features li[b-emjknvw8o7] {
        padding-right: 20px;

        font-size: 16px;
    }


    .visit-features li[b-emjknvw8o7]::before {
        width: 7px;
        height: 7px;
    }


    .pricing-panel[b-emjknvw8o7] {
        min-height: 390px;
        padding:
            42px 24px;
    }


    .pricing-label[b-emjknvw8o7] {
        font-size: 16px;
    }


    .pricing-value[b-emjknvw8o7] {
        margin-top: 22px;

        gap: 8px;
    }


    .pricing-value strong[b-emjknvw8o7] {
        font-size: 40px;
    }


    .pricing-value span[b-emjknvw8o7] {
        font-size: 20px;
    }


    .pricing-content p[b-emjknvw8o7] {
        margin-top: 24px;

        font-size: 15px;
    }


    .pricing-action[b-emjknvw8o7] {
        min-height: 58px;

        margin-top: 30px;

        font-size: 16px;
    }
}


@media (max-width: 390px) {

    .banner-content[b-emjknvw8o7] {
        padding:
            32px 19px 34px;
    }


    .banner-content h2[b-emjknvw8o7] {
        font-size: 26px;
    }


    .pricing-panel[b-emjknvw8o7] {
        padding:
            38px 19px;
    }


    .pricing-value strong[b-emjknvw8o7] {
        font-size: 37px;
    }


    .pricing-value span[b-emjknvw8o7] {
        font-size: 18px;
    }
}


@media (hover: none) {

    .pricing-action:hover[b-emjknvw8o7] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .pricing-action[b-emjknvw8o7] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitBenefitsSection.razor.rz.scp.css */
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitCtaSection.razor.rz.scp.css */
.home-cta[b-c1sdboofgx] {
    position: relative;

    min-height: 620px;
    padding: 100px 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #285da8 0%,
            #2f7187 47%,
            #347d46 100%);

    background-size: 180% 180%;

    color: #fff;

    animation:
        cta-gradient-motion-b-c1sdboofgx 18s
        ease-in-out infinite;
}


.home-cta[b-c1sdboofgx]::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(31, 80, 154, .16),
            rgba(58, 125, 68, .08)),
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, .055),
            transparent 48%);

    pointer-events: none;

    animation:
        cta-overlay-breathe-b-c1sdboofgx 9s
        ease-in-out infinite;
}


.home-cta[b-c1sdboofgx]::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size:
        54px 54px;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, .48),
            transparent 72%);

    opacity: .45;
}


.home-cta .container[b-c1sdboofgx] {
    position: relative;
    z-index: 4;

    width: 100%;
}


.cta-shape[b-c1sdboofgx] {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.shape-top[b-c1sdboofgx] {
    width: 500px;
    height: 500px;

    top: -275px;
    right: -125px;

    background:
        rgba(255, 255, 255, .085);

    animation:
        cta-shape-top-b-c1sdboofgx 12s
        ease-in-out infinite;
}


.shape-bottom[b-c1sdboofgx] {
    width: 540px;
    height: 540px;

    bottom: -345px;
    left: -115px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        cta-shape-bottom-b-c1sdboofgx 14s
        ease-in-out infinite;
}


.cta-light[b-c1sdboofgx] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(4px);

    will-change:
        transform,
        opacity;
}


.light-one[b-c1sdboofgx] {
    width: 280px;
    height: 280px;

    top: 6%;
    left: 18%;

    background:
        radial-gradient(
            circle,
            rgba(100, 174, 220, .14),
            transparent 68%);

    animation:
        cta-light-one-b-c1sdboofgx 10s
        ease-in-out infinite;
}


.light-two[b-c1sdboofgx] {
    width: 300px;
    height: 300px;

    right: 15%;
    bottom: 3%;

    background:
        radial-gradient(
            circle,
            rgba(126, 192, 135, .13),
            transparent 68%);

    animation:
        cta-light-two-b-c1sdboofgx 11s
        ease-in-out infinite;
}


.cta-content[b-c1sdboofgx] {
    position: relative;

    max-width: 1080px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    direction: rtl;

    text-align: center;
}


.cta-badge[b-c1sdboofgx] {
    min-height: 47px;
    padding: 0 22px;

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

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .11);

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 10px 30px rgba(15, 44, 69, .08);

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.cta-badge:hover[b-c1sdboofgx] {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, .38);

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 13px 32px rgba(15, 44, 69, .12);
}


.cta-content h2[b-c1sdboofgx] {
    max-width: 1060px;

    margin: 32px auto 0;

    color: #fff;

    font-size:
        clamp(40px, 5vw, 64px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.8px;

    text-shadow:
        0 5px 22px rgba(19, 50, 70, .12);

    text-wrap: balance;
}


.cta-content p[b-c1sdboofgx] {
    max-width: 800px;

    margin: 30px auto 0;

    color:
        rgba(255, 255, 255, .94);

    font-size:
        clamp(16px, 1.55vw, 20px);

    font-weight: 600;
    line-height: 2.2;

    text-wrap: balance;
}


.cta-actions[b-c1sdboofgx] {
    margin-top: 47px;

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

    gap: 18px;
}


.cta-button[b-c1sdboofgx] {
    min-width: 270px;
    min-height: 66px;
    padding: 0 27px;

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

    gap: 10px;

    border:
        1px solid transparent;

    border-radius: 15px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 14px 34px rgba(14, 39, 61, .12);

    transition:
        transform .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        color .28s ease,
        box-shadow .28s ease;
}


.cta-button svg[b-c1sdboofgx] {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .28s ease;
}


.cta-button.primary[b-c1sdboofgx] {
    border-color:
        rgba(255, 255, 255, .9);

    background: #fff;
    color: #2459a6;
}


.cta-button.primary:hover[b-c1sdboofgx] {
    transform: translateY(-4px);

    background: #f8fbff;

    box-shadow:
        0 19px 40px rgba(14, 39, 61, .2);
}


.cta-button.primary:hover svg[b-c1sdboofgx] {
    transform:
        translateY(-1px)
        rotate(-4deg);
}


.cta-button.secondary[b-c1sdboofgx] {
    border-color:
        rgba(255, 255, 255, .34);

    background:
        rgba(255, 255, 255, .06);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 14px 34px rgba(14, 39, 61, .09);

    backdrop-filter: blur(8px);
}


.cta-button.secondary:hover[b-c1sdboofgx] {
    transform: translateY(-4px);

    border-color:
        rgba(255, 255, 255, .58);

    background:
        rgba(255, 255, 255, .13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 19px 40px rgba(14, 39, 61, .15);
}


.cta-button.secondary:hover svg[b-c1sdboofgx] {
    transform:
        translateX(-2px)
        rotate(-3deg);
}


.cta-button:active[b-c1sdboofgx] {
    transform:
        translateY(-1px)
        scale(.985);
}


.cta-button:focus-visible[b-c1sdboofgx] {
    outline:
        4px solid rgba(255, 255, 255, .25);

    outline-offset: 4px;
}


@keyframes cta-gradient-motion-b-c1sdboofgx {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


@keyframes cta-overlay-breathe-b-c1sdboofgx {

    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: 1;
    }
}


@keyframes cta-shape-top-b-c1sdboofgx {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .78;
    }

    50% {
        transform:
            translate3d(-18px, 17px, 0)
            scale(1.06);

        opacity: 1;
    }
}


@keyframes cta-shape-bottom-b-c1sdboofgx {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .72;
    }

    50% {
        transform:
            translate3d(20px, -16px, 0)
            scale(1.055);

        opacity: .92;
    }
}


@keyframes cta-light-one-b-c1sdboofgx {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.95);

        opacity: .55;
    }

    50% {
        transform:
            translate3d(24px, 14px, 0)
            scale(1.08);

        opacity: .9;
    }
}


@keyframes cta-light-two-b-c1sdboofgx {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);

        opacity: .5;
    }

    50% {
        transform:
            translate3d(-22px, -15px, 0)
            scale(1.09);

        opacity: .88;
    }
}


@media (max-width: 1050px) {

    .home-cta[b-c1sdboofgx] {
        min-height: 570px;
        padding: 88px 0;
    }


    .shape-top[b-c1sdboofgx] {
        width: 420px;
        height: 420px;

        top: -235px;
        right: -130px;
    }


    .shape-bottom[b-c1sdboofgx] {
        width: 450px;
        height: 450px;

        bottom: -290px;
        left: -125px;
    }


    .cta-content h2[b-c1sdboofgx] {
        max-width: 850px;

        font-size:
            clamp(38px, 5.7vw, 54px);
    }
}


@media (max-width: 750px) {

    .home-cta[b-c1sdboofgx] {
        min-height: auto;
        padding: 78px 0;
    }


    .cta-content h2[b-c1sdboofgx] {
        margin-top: 27px;

        font-size:
            clamp(33px, 7vw, 45px);

        line-height: 1.65;
    }


    .cta-content p[b-c1sdboofgx] {
        max-width: 600px;

        margin-top: 23px;

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


    .cta-actions[b-c1sdboofgx] {
        width: 100%;
        max-width: 470px;

        margin-top: 37px;

        flex-direction: column;

        gap: 13px;
    }


    .cta-button[b-c1sdboofgx] {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 620px) {

    .home-cta[b-c1sdboofgx] {
        padding: 68px 0 72px;
    }


    .shape-top[b-c1sdboofgx] {
        width: 290px;
        height: 290px;

        top: -165px;
        right: -105px;
    }


    .shape-bottom[b-c1sdboofgx] {
        width: 330px;
        height: 330px;

        bottom: -225px;
        left: -120px;
    }


    .light-one[b-c1sdboofgx] {
        width: 190px;
        height: 190px;

        left: -30px;
    }


    .light-two[b-c1sdboofgx] {
        width: 210px;
        height: 210px;

        right: -50px;
    }


    .cta-badge[b-c1sdboofgx] {
        min-height: 42px;
        padding: 0 17px;

        font-size: 14px;
    }


    .cta-content h2[b-c1sdboofgx] {
        margin-top: 23px;

        font-size: 31px;
        line-height: 1.7;

        letter-spacing: 0;
    }


    .cta-content p[b-c1sdboofgx] {
        margin-top: 18px;

        font-size: 15px;
        line-height: 2.05;
    }


    .cta-actions[b-c1sdboofgx] {
        margin-top: 31px;
    }


    .cta-button[b-c1sdboofgx] {
        min-height: 59px;
        padding: 0 20px;

        border-radius: 14px;

        font-size: 16px;
    }
}


@media (max-width: 390px) {

    .home-cta[b-c1sdboofgx] {
        padding: 62px 0 66px;
    }


    .cta-content h2[b-c1sdboofgx] {
        font-size: 28px;
    }


    .cta-content p[b-c1sdboofgx] {
        font-size: 14px;
    }


    .cta-button[b-c1sdboofgx] {
        min-height: 56px;

        font-size: 15px;
    }
}


@media (hover: none) {

    .cta-badge:hover[b-c1sdboofgx],
    .cta-button.primary:hover[b-c1sdboofgx],
    .cta-button.secondary:hover[b-c1sdboofgx] {
        transform: none;
    }


    .cta-button.primary:active[b-c1sdboofgx],
    .cta-button.secondary:active[b-c1sdboofgx] {
        transform: scale(.98);
    }
}


@media (prefers-reduced-motion: reduce) {

    .home-cta[b-c1sdboofgx],
    .home-cta[b-c1sdboofgx]::before,
    .cta-shape[b-c1sdboofgx],
    .cta-light[b-c1sdboofgx] {
        animation: none;
    }


    .cta-badge[b-c1sdboofgx],
    .cta-button[b-c1sdboofgx],
    .cta-button svg[b-c1sdboofgx] {
        transition-duration: .01ms !important;
    }
}

button.cta-button[b-c1sdboofgx] {
    font-family: inherit;
    cursor: pointer;
}

button.cta-button.primary[b-c1sdboofgx] {
    border: 1px solid transparent;
}

button.cta-button:focus-visible[b-c1sdboofgx] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitDoctorsSection.razor.rz.scp.css */
.online-visit-doctors[b-izf2z7l4uy] {
    position: relative;

    padding: 92px 0 100px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f8fbf9 48%,
            #fff 100%);
}


.online-visit-doctors[b-izf2z7l4uy]::before {
    content: "";

    position: absolute;

    width: 410px;
    height: 410px;

    top: -285px;
    right: -160px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .045);

    pointer-events: none;
}


.online-visit-doctors[b-izf2z7l4uy]::after {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    bottom: -305px;
    left: -170px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .04);

    pointer-events: none;
}


.online-visit-doctors .container[b-izf2z7l4uy] {
    position: relative;
    z-index: 2;
}


.categories-head[b-izf2z7l4uy] {
    max-width: 790px;

    margin: 0 auto 47px;

    direction: rtl;

    text-align: center;
}


.categories-head > span[b-izf2z7l4uy] {
    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: 16px;
    font-weight: 900;
}


.categories-head h2[b-izf2z7l4uy] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(31px, 3.7vw, 42px);

    font-weight: 900;
    line-height: 1.5;
}


.categories-head p[b-izf2z7l4uy] {
    max-width: 710px;

    margin: 12px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}


.categories-slider[b-izf2z7l4uy] {
    position: relative;
}


.categories-scroll[b-izf2z7l4uy] {
    padding: 8px 4px 23px;

    overflow-x: auto;
    overflow-y: hidden;

    cursor: grab;

    scroll-behavior: smooth;
    scrollbar-width: none;

    touch-action: pan-y;
}


.categories-scroll[b-izf2z7l4uy]::-webkit-scrollbar {
    display: none;
}


.categories-scroll.is-dragging[b-izf2z7l4uy] {
    cursor: grabbing;

    scroll-behavior: auto;
}


.categories-grid[b-izf2z7l4uy] {
    min-width: max-content;
    padding: 0 58px;

    display: grid;

    grid-auto-flow: column;
    grid-auto-columns: 170px;

    gap: 22px;

    direction: rtl;
}


.category-card[b-izf2z7l4uy] {
    position: relative;

    min-width: 0;
    min-height: 174px;
    padding: 25px 15px 22px;

    display: flex;
    align-items: center;
    flex-direction: column;

    border:
        1px solid var(--soft);

    border-radius: 22px;

    background: #fff;
    color: inherit;

    font-family: inherit;

    text-align: center;

    cursor: pointer;

    user-select: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.category-card:hover[b-izf2z7l4uy] {
    transform: translateY(-7px);

    border-color: var(--green);

}


.category-card.active[b-izf2z7l4uy] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .52);

    background:
        linear-gradient(
            145deg,
            #fff,
            #f2f8f3);


}


.category-icon[b-izf2z7l4uy] {
    width: 88px;
    height: 88px;

    margin: 0 auto 17px;

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

    overflow: hidden;

    border-radius: 26px;

    background:
        rgba(58, 125, 68, .08);

    transition:
        transform .3s ease,
        background-color .3s ease;
}


.category-card:nth-child(even)
.category-icon[b-izf2z7l4uy] {
    background:
        rgba(36, 89, 166, .08);
}


.category-card:hover
.category-icon[b-izf2z7l4uy],
.category-card.active
.category-icon[b-izf2z7l4uy] {
    transform: scale(1.055);
}


.category-card.active
.category-icon[b-izf2z7l4uy] {
    background:
        rgba(58, 125, 68, .13);
}


.category-icon img[b-izf2z7l4uy] {
    width: 106px;
    height: 106px;

    display: block;

    object-fit: contain;

    pointer-events: none;
}


.category-fallback[b-izf2z7l4uy] {
    font-size: 42px;
}


.category-card > strong[b-izf2z7l4uy] {
    max-width: 100%;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.65;

    overflow-wrap: anywhere;
}


.selected-indicator[b-izf2z7l4uy] {
    position: absolute;

    width: 27px;
    height: 27px;

    top: 11px;
    left: 11px;

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

    border-radius: 50%;

    background: var(--green);
    color: #fff;

    box-shadow:
        0 7px 16px rgba(58, 125, 68, .2);

    opacity: 0;

    transform: scale(.65);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.category-card.active
.selected-indicator[b-izf2z7l4uy] {
    opacity: 1;

    transform: scale(1);
}


.selected-indicator svg[b-izf2z7l4uy] {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.categories-arrow[b-izf2z7l4uy] {
    position: absolute;
    z-index: 5;

    top: 50%;

    width: 54px;
    height: 54px;
    padding: 0;

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

    border: 0;

    border-radius: 50%;

    background: #fff;
    color: #1c274c;

    cursor: pointer;

    transform:
        translateY(-50%);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .08);

    transition:
        transform .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.categories-arrow:hover[b-izf2z7l4uy] {
    transform:
        translateY(-50%)
        scale(1.06);

    color: var(--green);

    box-shadow:
        0 17px 39px rgba(31, 41, 55, .12);
}


.categories-arrow svg[b-izf2z7l4uy] {
    width: 38px;
    height: 38px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.arrow-right[b-izf2z7l4uy] {
    right: -24px;
}


.arrow-left[b-izf2z7l4uy] {
    left: -24px;
}


.categories-arrow:focus-visible[b-izf2z7l4uy],
.category-card:focus-visible[b-izf2z7l4uy],
.public-button:focus-visible[b-izf2z7l4uy],
.section-state button:focus-visible[b-izf2z7l4uy] {
    outline:
        4px solid rgba(58, 125, 68, .17);

    outline-offset: 3px;
}


.doctors-divider[b-izf2z7l4uy] {
    max-width: 920px;

    margin: 50px auto 45px;

    display: grid;

    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    align-items: center;

    gap: 22px;

    direction: rtl;
}


.doctors-divider > span[b-izf2z7l4uy] {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(58, 125, 68, .22),
            transparent);
}


.doctors-divider > div[b-izf2z7l4uy] {
    min-height: 47px;
    padding: 0 18px;

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

    gap: 7px;

    border:
        1px solid rgba(58, 125, 68, .11);

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .055);
}


.doctors-divider small[b-izf2z7l4uy] {
    color: #7a8699;

    font-size: 13px;
    font-weight: 600;
}


.doctors-divider strong[b-izf2z7l4uy] {
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}


.doctors-head[b-izf2z7l4uy] {
    margin-bottom: 34px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    direction: rtl;
}


.doctors-head > div > span[b-izf2z7l4uy] {
    display: block;

    margin-bottom: 6px;

    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}


.doctors-head h2[b-izf2z7l4uy] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(29px, 3.3vw, 39px);

    font-weight: 900;
    line-height: 1.5;
}


.doctors-head p[b-izf2z7l4uy] {
    max-width: 720px;

    margin: 8px 0 0;

    color: #667085;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.9;
}


.results-count[b-izf2z7l4uy] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border:
        1px solid rgba(36, 89, 166, .12);

    border-radius: 999px;

    background:
        rgba(36, 89, 166, .06);

    color: #2459a6;

    font-size: 13px;
    font-weight: 900;
}


.doctors-grid[b-izf2z7l4uy] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;

    direction: rtl;
}


.results-enter[b-izf2z7l4uy] {
    animation:
        doctors-results-enter-b-izf2z7l4uy .38s ease both;
}


.doctor-card[b-izf2z7l4uy] {
    position: relative;

    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid var(--soft);

    border-radius: 24px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.doctor-card:hover[b-izf2z7l4uy] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .38);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, .1);
}


.doctor-image[b-izf2z7l4uy] {
    position: relative;

    height: 215px;

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

    flex: 0 0 215px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .09),
            rgba(36, 89, 166, .08));
}


.doctor-image img[b-izf2z7l4uy] {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform .35s ease;
}


.doctor-card:hover
.doctor-image img[b-izf2z7l4uy] {
    transform: scale(1.035);
}


.image-placeholder[b-izf2z7l4uy] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #54718b;
}


.image-placeholder svg[b-izf2z7l4uy] {
    width: 74px;
    height: 74px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.doctor-status[b-izf2z7l4uy] {
    position: absolute;

    right: 14px;
    bottom: 13px;

    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    border:
        1px solid rgba(255, 255, 255, .75);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .91);

    color: var(--green);

    font-size: 11px;
    font-weight: 900;

    box-shadow:
        0 7px 18px rgba(31, 41, 55, .08);

    backdrop-filter: blur(7px);
}


.doctor-status > span[b-izf2z7l4uy] {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #47a75c;

    box-shadow:
        0 0 0 3px rgba(71, 167, 92, .12);
}


.doctor-body[b-izf2z7l4uy] {
    padding: 21px 22px 22px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.doctor-main-info[b-izf2z7l4uy] {
    width: 100%;

    padding-bottom: 17px;

    border-bottom:
        1px solid var(--soft);
}


.doctor-body h3[b-izf2z7l4uy] {
    width: 100%;

    margin: 0 0 6px;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.6;

    text-align: center;
}


.doctor-specialty[b-izf2z7l4uy] {
    display: block;

    color: var(--green);

    font-size: 15px;
    font-weight: 900;
    line-height: 1.8;

    text-align: center;
}


.doctor-details[b-izf2z7l4uy] {
    width: 100%;

    margin: 16px 0 18px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;
}


.doctor-detail[b-izf2z7l4uy] {
    min-width: 0;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    gap: 3px;

    text-align: center;
}


.doctor-detail +
.doctor-detail[b-izf2z7l4uy] {
    border-right:
        1px solid var(--soft);
}


.doctor-detail:only-child[b-izf2z7l4uy] {
    grid-column:
        1 / -1;
}


.doctor-detail > span[b-izf2z7l4uy] {
    color: #98a2b3;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}


.doctor-detail > strong[b-izf2z7l4uy] {
    max-width: 100%;

    color: #667085;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


.doctor-detail
.visit-price[b-izf2z7l4uy] {
    color: var(--green);
}


.doctor-action[b-izf2z7l4uy] {
    width: 100%;

    margin-top: auto;
    padding-top: 17px;

    border-top:
        1px solid var(--soft);
}


.public-button[b-izf2z7l4uy] {
    width: 100%;
    min-height: 49px;
    padding: 0 20px;

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

    border:
        1px solid transparent;

    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.public-button:hover[b-izf2z7l4uy] {
    transform: translateY(-2px);
}


.public-button.primary[b-izf2z7l4uy] {
    background: var(--green);
    color: #fff;

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .16);
}


.public-button.primary:hover[b-izf2z7l4uy] {
    filter: brightness(.97);
}


.section-state[b-izf2z7l4uy] {
    width: 100%;
    max-width: 880px;
    min-height: 145px;
    padding: 27px 30px;

    margin: 0 auto;

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

    gap: 15px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius: 23px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #f4f7fb);

    direction: rtl;

    text-align: right;
}


.doctors-state[b-izf2z7l4uy] {
    max-width: 100%;
}


.section-state > div[b-izf2z7l4uy] {
    min-width: 0;
}


.section-state strong[b-izf2z7l4uy] {
    display: block;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.section-state p[b-izf2z7l4uy] {
    margin: 4px 0 0;

    color: #7a8699;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


.state-icon[b-izf2z7l4uy] {
    width: 47px;
    height: 47px;

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

    flex: 0 0 47px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}


.doctor-state-icon[b-izf2z7l4uy] {
    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;
}


.state-icon svg[b-izf2z7l4uy] {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.section-state button[b-izf2z7l4uy] {
    min-height: 42px;
    padding: 0 16px;

    margin-right: auto;

    flex: 0 0 auto;

    border:
        1px solid var(--green);

    border-radius: 12px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}


.section-state button:disabled[b-izf2z7l4uy] {
    cursor: wait;

    opacity: .65;
}


.skeleton-category[b-izf2z7l4uy],
.skeleton-doctor[b-izf2z7l4uy] {
    pointer-events: none;
}


.skeleton-category-image[b-izf2z7l4uy],
.skeleton-category-title[b-izf2z7l4uy],
.skeleton-doctor-image[b-izf2z7l4uy],
.skeleton-line[b-izf2z7l4uy],
.skeleton-details span[b-izf2z7l4uy],
.skeleton-button[b-izf2z7l4uy] {
    display: block;

    background:
        linear-gradient(
            90deg,
            #e6eaee 25%,
            #f4f6f8 50%,
            #e6eaee 75%);

    background-size:
        200% 100%;

    animation:
        skeleton-loading-b-izf2z7l4uy 1.4s linear infinite;
}


.skeleton-category-image[b-izf2z7l4uy] {
    width: 88px;
    height: 88px;

    margin: 0 auto 18px;

    border-radius: 26px;
}


.skeleton-category-title[b-izf2z7l4uy] {
    width: 70%;
    height: 15px;

    margin: 0 auto;

    border-radius: 999px;
}


.skeleton-doctor-image[b-izf2z7l4uy] {
    width: 100%;
    height: 215px;
}


.skeleton-line[b-izf2z7l4uy] {
    height: 14px;

    margin-right: auto;
    margin-left: auto;

    border-radius: 999px;
}


.skeleton-line.doctor-name[b-izf2z7l4uy] {
    width: 60%;
}


.skeleton-line.doctor-specialty[b-izf2z7l4uy] {
    width: 43%;

    margin-top: 13px;
}


.skeleton-details[b-izf2z7l4uy] {
    margin: 22px 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.skeleton-details span[b-izf2z7l4uy] {
    height: 41px;

    border-radius: 11px;
}


.skeleton-button[b-izf2z7l4uy] {
    width: 100%;
    height: 49px;

    margin-top: auto;

    border-radius: 14px;
}


@keyframes doctors-results-enter-b-izf2z7l4uy {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes skeleton-loading-b-izf2z7l4uy {

    to {
        background-position:
            -200% 0;
    }
}


@media (max-width: 1050px) {

    .doctors-grid[b-izf2z7l4uy] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .online-visit-doctors[b-izf2z7l4uy] {
        padding:
            80px 0 86px;
    }


    .doctors-head[b-izf2z7l4uy] {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }
}


@media (max-width: 700px) {

    .categories-grid[b-izf2z7l4uy] {
        grid-auto-columns: 150px;

        gap: 15px;

        padding:
            0 43px;
    }


    .category-card[b-izf2z7l4uy] {
        min-height: 160px;
        padding:
            21px 12px 19px;
    }


    .category-icon[b-izf2z7l4uy],
    .skeleton-category-image[b-izf2z7l4uy] {
        width: 78px;
        height: 78px;

        border-radius: 23px;
    }


    .category-icon img[b-izf2z7l4uy] {
        width: 94px;
        height: 94px;
    }


    .category-card > strong[b-izf2z7l4uy] {
        font-size: 17px;
    }


    .categories-arrow[b-izf2z7l4uy] {
        width: 44px;
        height: 44px;
    }


    .categories-arrow svg[b-izf2z7l4uy] {
        width: 31px;
        height: 31px;
    }


    .arrow-right[b-izf2z7l4uy] {
        right: -10px;
    }


    .arrow-left[b-izf2z7l4uy] {
        left: -10px;
    }
}


@media (max-width: 620px) {

    .online-visit-doctors[b-izf2z7l4uy] {
        padding:
            68px 0 72px;
    }


    .categories-head[b-izf2z7l4uy] {
        margin-bottom: 34px;
    }


    .categories-head > span[b-izf2z7l4uy] {
        font-size: 15px;
    }


    .categories-head h2[b-izf2z7l4uy] {
        font-size: 28px;
    }


    .categories-head p[b-izf2z7l4uy] {
        margin-top: 10px;

        font-size: 15px;
        line-height: 1.95;
    }


    .doctors-divider[b-izf2z7l4uy] {
        margin:
            35px auto 31px;

        gap: 10px;
    }


    .doctors-divider > div[b-izf2z7l4uy] {
        min-height: 42px;
        padding:
            0 13px;

        flex-direction: column;

        gap: 0;
    }


    .doctors-divider small[b-izf2z7l4uy] {
        font-size: 10px;
    }


    .doctors-divider strong[b-izf2z7l4uy] {
        font-size: 12px;
    }


    .doctors-head[b-izf2z7l4uy] {
        margin-bottom: 27px;
    }


    .doctors-head h2[b-izf2z7l4uy] {
        font-size: 27px;
    }


    .doctors-head p[b-izf2z7l4uy] {
        font-size: 14px;
    }


    .doctors-grid[b-izf2z7l4uy] {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .doctor-image[b-izf2z7l4uy],
    .skeleton-doctor-image[b-izf2z7l4uy] {
        height: 280px;

        flex-basis: 280px;
    }


    .doctor-body[b-izf2z7l4uy] {
        padding: 21px;
    }


    .doctor-body h3[b-izf2z7l4uy] {
        font-size: 21px;
    }


    .doctor-specialty[b-izf2z7l4uy] {
        font-size: 14px;
    }


    .doctor-details[b-izf2z7l4uy] {
        margin:
            15px 0 17px;
    }


    .doctor-detail > strong[b-izf2z7l4uy] {
        font-size: 13px;
    }


    .section-state[b-izf2z7l4uy] {
        min-height: 175px;
        padding:
            24px 19px;

        align-items: center;
        flex-direction: column;

        text-align: center;
    }


    .section-state button[b-izf2z7l4uy] {
        width: 100%;

        margin:
            4px 0 0;
    }
}


@media (max-width: 390px) {

    .categories-grid[b-izf2z7l4uy] {
        grid-auto-columns: 139px;

        padding:
            0 38px;
    }


    .category-card[b-izf2z7l4uy] {
        min-height: 150px;
    }


    .doctor-image[b-izf2z7l4uy],
    .skeleton-doctor-image[b-izf2z7l4uy] {
        height: 245px;

        flex-basis: 245px;
    }


    .doctor-detail[b-izf2z7l4uy] {
        padding:
            0 8px;
    }
}


@media (hover: none) {

    .category-card:hover[b-izf2z7l4uy],
    .doctor-card:hover[b-izf2z7l4uy],
    .public-button:hover[b-izf2z7l4uy] {
        transform: none;
    }


    .category-card.active[b-izf2z7l4uy] {
        transform: none;
    }


    .categories-arrow:hover[b-izf2z7l4uy] {
        transform:
            translateY(-50%);
    }
}


@media (prefers-reduced-motion: reduce) {

    .results-enter[b-izf2z7l4uy],
    .skeleton-category-image[b-izf2z7l4uy],
    .skeleton-category-title[b-izf2z7l4uy],
    .skeleton-doctor-image[b-izf2z7l4uy],
    .skeleton-line[b-izf2z7l4uy],
    .skeleton-details span[b-izf2z7l4uy],
    .skeleton-button[b-izf2z7l4uy] {
        animation: none;
    }


    .category-card[b-izf2z7l4uy],
    .category-icon[b-izf2z7l4uy],
    .selected-indicator[b-izf2z7l4uy],
    .categories-arrow[b-izf2z7l4uy],
    .doctor-card[b-izf2z7l4uy],
    .doctor-image img[b-izf2z7l4uy],
    .public-button[b-izf2z7l4uy] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitFaqSection.razor.rz.scp.css */
.home-faq[b-89uc741t1m] {
    position: relative;

    padding: 96px 0 104px;

    overflow: hidden;

    background: #fff;
}


.home-faq[b-89uc741t1m]::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -245px;
    right: -145px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .045);

    pointer-events: none;
}


.home-faq[b-89uc741t1m]::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -235px;
    left: -135px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .035);

    pointer-events: none;
}


.home-faq .container[b-89uc741t1m] {
    position: relative;
    z-index: 2;
}


.faq-heading[b-89uc741t1m] {
    max-width: 820px;

    margin: 0 auto 58px;

    direction: rtl;

    text-align: center;
}


.faq-heading > span[b-89uc741t1m] {
    display: block;

    margin-bottom: 12px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-heading h2[b-89uc741t1m] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(34px, 4.4vw, 50px);

    font-weight: 900;
    line-height: 1.5;

    letter-spacing: -.5px;
}


.faq-heading p[b-89uc741t1m] {
    max-width: 760px;

    margin: 20px auto 0;

    color: #7a8699;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.1;

    text-wrap: balance;
}


.faq-list[b-89uc741t1m] {
    width: 100%;
    max-width: 1130px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 18px;

    direction: rtl;
}


.faq-item[b-89uc741t1m] {
    position: relative;

    overflow: hidden;

    border:
        1px solid #e1e6ec;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #f3f5f8,
            #f1f3f6);

    transition:
        border-color .3s ease,
        background-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.faq-item:hover[b-89uc741t1m] {
    transform: translateY(-2px);

    border-color:
        rgba(36, 89, 166, .16);

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .055);
}


.faq-item.active[b-89uc741t1m] {
    border-color:
        rgba(58, 125, 68, .18);

    background:
        linear-gradient(
            135deg,
            #f5f8f6,
            #f1f4f7);

    box-shadow:
        0 15px 36px rgba(31, 41, 55, .065);
}


.faq-item h3[b-89uc741t1m] {
    margin: 0;
}


.faq-question[b-89uc741t1m] {
    width: 100%;
    min-height: 116px;
    padding: 28px 35px 28px 38px;

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

    gap: 28px;

    border: 0;

    background: transparent;
    color: var(--text);

    direction: rtl;

    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;

    text-align: right;

    cursor: pointer;

    appearance: none;

    transition:
        color .3s ease;
}


.faq-question:hover[b-89uc741t1m] {
    color: #2459a6;
}


.faq-item.active .faq-question[b-89uc741t1m] {
    color: var(--text);
}


.faq-question:focus-visible[b-89uc741t1m] {
    outline:
        3px solid rgba(58, 125, 68, .17);

    outline-offset: -5px;
}


.question-text[b-89uc741t1m] {
    min-width: 0;

    overflow-wrap: anywhere;
}


.faq-toggle[b-89uc741t1m] {
    position: relative;

    width: 54px;
    height: 54px;

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

    flex: 0 0 54px;

    order: 2;

    border:
        1px solid rgba(36, 89, 166, .06);

    border-radius: 50%;

    background: #fff;
    color: #2459a6;

    box-shadow:
        0 8px 21px rgba(31, 41, 55, .045);

    transition:
        transform .35s ease,
        border-color .3s ease,
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.faq-question:hover .faq-toggle[b-89uc741t1m] {
    transform: scale(1.06);

    border-color:
        rgba(36, 89, 166, .15);

    box-shadow:
        0 11px 25px rgba(36, 89, 166, .09);
}


.toggle-line[b-89uc741t1m] {
    position: absolute;

    display: block;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform .35s
            cubic-bezier(.2, .72, .2, 1),
        opacity .25s ease;
}


.toggle-line.horizontal[b-89uc741t1m] {
    width: 15px;
    height: 3px;
}


.toggle-line.vertical[b-89uc741t1m] {
    width: 3px;
    height: 15px;
}


.faq-item.active .faq-toggle[b-89uc741t1m] {
    transform: rotate(90deg);

    border-color:
        rgba(58, 125, 68, .12);

    color: var(--green);

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .1);
}


.faq-item.active
.toggle-line.vertical[b-89uc741t1m] {
    opacity: 0;

    transform: scaleY(0);
}


.faq-item.active
.faq-question:hover
.faq-toggle[b-89uc741t1m] {
    transform:
        rotate(90deg)
        scale(1.06);
}


.faq-answer[b-89uc741t1m] {
    display: grid;

    grid-template-rows: 0fr;

    visibility: hidden;

    opacity: 0;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .3s ease,
        visibility 0s linear .45s;
}


.faq-item.active
.faq-answer[b-89uc741t1m] {
    grid-template-rows: 1fr;

    visibility: visible;

    opacity: 1;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .35s ease .08s,
        visibility 0s linear 0s;
}


.answer-inner[b-89uc741t1m] {
    min-height: 0;

    overflow: hidden;
}


.answer-inner p[b-89uc741t1m] {
    margin: 0;
    padding: 0 35px 37px 127px;

    color: #718096;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;

    white-space: pre-line;
    overflow-wrap: anywhere;

    transform: translateY(-8px);

    transition:
        transform .4s ease;
}


.faq-item.active
.answer-inner p[b-89uc741t1m] {
    transform: translateY(0);
}


.faq-state[b-89uc741t1m] {
    width: 100%;
    max-width: 900px;
    min-height: 150px;
    padding: 30px 34px;

    margin: 0 auto;

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

    gap: 18px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #f5f8fb);

    color: #667085;

    direction: rtl;

    text-align: right;
}


.faq-state > div[b-89uc741t1m] {
    min-width: 0;
}


.faq-state strong[b-89uc741t1m] {
    display: block;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-state p[b-89uc741t1m] {
    margin: 5px 0 0;

    color: #7a8699;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


.faq-state.error[b-89uc741t1m] {
    border-color:
        rgba(36, 89, 166, .14);

    background:
        linear-gradient(
            135deg,
            #f6f9fd,
            #f8faf9);
}


.faq-state.empty[b-89uc741t1m] {
    max-width: 760px;
}


.state-icon[b-89uc741t1m] {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}


.faq-state.error
.state-icon[b-89uc741t1m] {
    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;
}


.loading-spinner[b-89uc741t1m],
.button-spinner[b-89uc741t1m] {
    display: block;

    border-style: solid;
    border-color:
        rgba(58, 125, 68, .18);

    border-top-color:
        var(--green);

    border-radius: 50%;

    animation:
        faq-spinner-b-89uc741t1m .75s linear infinite;
}


.loading-spinner[b-89uc741t1m] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-width: 4px;
}


.button-spinner[b-89uc741t1m] {
    width: 18px;
    height: 18px;

    border-width: 2px;
}


.retry-button[b-89uc741t1m] {
    min-height: 45px;
    padding: 0 18px;

    margin-right: auto;

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

    gap: 8px;

    flex: 0 0 auto;

    border:
        1px solid var(--green);

    border-radius: 13px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.retry-button:hover:not(:disabled)[b-89uc741t1m] {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(58, 125, 68, .17);

    filter: brightness(.97);
}


.retry-button:disabled[b-89uc741t1m] {
    cursor: wait;

    opacity: .7;
}


.retry-button .button-spinner[b-89uc741t1m] {
    border-color:
        rgba(255, 255, 255, .3);

    border-top-color: #fff;
}


@keyframes faq-spinner-b-89uc741t1m {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 850px) {

    .home-faq[b-89uc741t1m] {
        padding: 82px 0 88px;
    }


    .faq-heading[b-89uc741t1m] {
        margin-bottom: 45px;
    }


    .faq-question[b-89uc741t1m] {
        min-height: 105px;
        padding: 24px 27px;

        font-size: 18px;
    }


    .answer-inner p[b-89uc741t1m] {
        padding:
            0 27px 31px 105px;

        font-size: 15px;
    }
}


@media (max-width: 620px) {

    .home-faq[b-89uc741t1m] {
        padding: 70px 0 74px;
    }


    .faq-heading[b-89uc741t1m] {
        margin-bottom: 36px;
    }


    .faq-heading > span[b-89uc741t1m] {
        margin-bottom: 9px;

        font-size: 15px;
    }


    .faq-heading h2[b-89uc741t1m] {
        font-size: 29px;
        line-height: 1.6;
    }


    .faq-heading p[b-89uc741t1m] {
        margin-top: 13px;

        font-size: 15px;
        line-height: 2;
    }


    .faq-list[b-89uc741t1m] {
        gap: 12px;
    }


    .faq-item[b-89uc741t1m] {
        border-radius: 19px;
    }


    .faq-question[b-89uc741t1m] {
        min-height: 88px;
        padding: 20px 18px;

        gap: 15px;

        font-size: 16px;
        line-height: 1.8;
    }


    .faq-toggle[b-89uc741t1m] {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .toggle-line.horizontal[b-89uc741t1m] {
        width: 13px;
        height: 2px;
    }


    .toggle-line.vertical[b-89uc741t1m] {
        width: 2px;
        height: 13px;
    }


    .answer-inner p[b-89uc741t1m] {
        padding:
            0 18px 24px;

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


    .faq-state[b-89uc741t1m] {
        min-height: 170px;
        padding: 25px 20px;

        align-items: center;
        flex-direction: column;

        gap: 12px;

        text-align: center;
    }


    .retry-button[b-89uc741t1m] {
        width: 100%;

        margin: 4px 0 0;
    }
}


@media (hover: none) {

    .faq-item:hover[b-89uc741t1m] {
        transform: none;

        box-shadow: none;
    }


    .faq-question:hover .faq-toggle[b-89uc741t1m] {
        transform: none;
    }


    .faq-item.active
    .faq-question:hover
    .faq-toggle[b-89uc741t1m] {
        transform: rotate(90deg);
    }
}


@media (prefers-reduced-motion: reduce) {

    .faq-item[b-89uc741t1m],
    .faq-toggle[b-89uc741t1m],
    .toggle-line[b-89uc741t1m],
    .faq-answer[b-89uc741t1m],
    .answer-inner p[b-89uc741t1m],
    .retry-button[b-89uc741t1m] {
        transition-duration: .01ms !important;
    }


    .loading-spinner[b-89uc741t1m],
    .button-spinner[b-89uc741t1m] {
        animation-duration: 1.5s;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitHeroSection.razor.rz.scp.css */
.online-visit-hero[b-bb2l8pmcpe] {
    position: relative;

    min-height:
        calc(100vh - 78px);

    padding:
        clamp(24px, 4vh, 42px) 0;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(36, 89, 166, .095),
            transparent 31%),
        radial-gradient(
            circle at 88% 76%,
            rgba(58, 125, 68, .075),
            transparent 31%),
        linear-gradient(
            135deg,
            #edf5ff 0%,
            #f7f9fc 50%,
            #edf7f0 100%);
}


.online-visit-hero[b-bb2l8pmcpe]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(36, 89, 166, .08) 1.3px,
            transparent 1.5px);

    background-size:
        32px 32px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .42),
            transparent 35%,
            transparent 65%,
            rgba(0, 0, 0, .25));

    opacity: .35;
}


.hero-shape[b-bb2l8pmcpe] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-bb2l8pmcpe] {
    width: 390px;
    height: 390px;

    top: -250px;
    right: -145px;

    background:
        rgba(58, 125, 68, .055);
}


.shape-two[b-bb2l8pmcpe] {
    width: 430px;
    height: 430px;

    bottom: -285px;
    left: -145px;

    background:
        rgba(36, 89, 166, .055);
}


.online-visit-hero .container[b-bb2l8pmcpe] {
    position: relative;
    z-index: 2;

    width: 100%;
}


.hero-layout[b-bb2l8pmcpe] {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(480px, .95fr);

    align-items: center;

    gap:
        clamp(40px, 4vw, 66px);

    direction: rtl;
}


.hero-content[b-bb2l8pmcpe] {
    min-width: 0;
}


.hero-badge[b-bb2l8pmcpe] {
    min-height: 44px;
    padding: 0 18px;

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

    gap: 8px;

    border:
        1px solid rgba(36, 89, 166, .1);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .86);

    color: #2459a6;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        0 10px 28px rgba(31, 41, 55, .045);

    backdrop-filter: blur(8px);
}


.hero-badge svg[b-bb2l8pmcpe] {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero-content h1[b-bb2l8pmcpe] {
    max-width: 730px;

    margin:
        clamp(18px, 2.5vh, 27px)
        0 0;

    color: #465164;

    font-size:
        clamp(42px, 4.75vw, 64px);

    font-weight: 900;
    line-height: 1.48;

    letter-spacing: -1px;

    text-wrap: balance;
}


.hero-content h1 strong[b-bb2l8pmcpe] {
    color: #285eae;

    font: inherit;
}


.hero-content > p[b-bb2l8pmcpe] {
    max-width: 680px;

    margin:
        clamp(14px, 2vh, 22px)
        0 0;

    color: #748196;

    font-size: 18px;
    font-weight: 500;
    line-height: 2;

    text-wrap: balance;
}


.hero-actions[b-bb2l8pmcpe] {
    margin-top:
        clamp(20px, 3vh, 30px);

    display: flex;
    align-items: center;

    gap: 15px;
}


.hero-button[b-bb2l8pmcpe] {
    min-width: 225px;
    min-height: 56px;
    padding: 0 22px;

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

    gap: 9px;

    border:
        1px solid transparent;

    border-radius: 14px;

    font-size: 16px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.hero-button svg[b-bb2l8pmcpe] {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.hero-button.primary[b-bb2l8pmcpe] {
    background: #2d63b3;
    color: #fff;

    box-shadow:
        0 13px 29px rgba(36, 89, 166, .19);
}


.hero-button.primary:hover[b-bb2l8pmcpe] {
    transform: translateY(-3px);

    background: #2459a6;

    box-shadow:
        0 17px 35px rgba(36, 89, 166, .25);
}


.hero-button.primary:hover svg[b-bb2l8pmcpe] {
    transform: translateX(-3px);
}


.hero-button.secondary[b-bb2l8pmcpe] {
    border-color:
        rgba(36, 89, 166, .35);

    background:
        rgba(255, 255, 255, .58);

    color: #2459a6;

    backdrop-filter: blur(7px);
}


.hero-button.secondary:hover[b-bb2l8pmcpe] {
    transform: translateY(-3px);

    border-color: #2459a6;

    background: #fff;

    box-shadow:
        0 13px 29px rgba(36, 89, 166, .1);
}


.hero-button:focus-visible[b-bb2l8pmcpe],
.doctor-row:focus-visible[b-bb2l8pmcpe],
.panel-state button:focus-visible[b-bb2l8pmcpe] {
    outline:
        4px solid rgba(36, 89, 166, .16);

    outline-offset: 3px;
}


.doctors-panel[b-bb2l8pmcpe] {
    min-width: 0;
    padding:
        clamp(20px, 2.6vh, 27px);

    border:
        1px solid rgba(255, 255, 255, .92);

    border-radius:
        34px 56px 34px 56px;

    background:
        rgba(255, 255, 255, .92);

    box-shadow:
        0 27px 62px rgba(31, 55, 82, .13),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    backdrop-filter: blur(12px);
}


.panel-heading[b-bb2l8pmcpe] {
    margin-bottom:
        clamp(10px, 1.6vh, 15px);

    padding: 0 4px;

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

    gap: 18px;
}


.panel-heading > div > span[b-bb2l8pmcpe] {
    display: block;

    color: #7a8699;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}


.panel-heading > div > strong[b-bb2l8pmcpe] {
    display: block;

    margin-top: 1px;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.6;
}


.online-indicator[b-bb2l8pmcpe] {
    min-height: 29px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    flex: 0 0 auto;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .08);

    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}


.online-indicator > span[b-bb2l8pmcpe] {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #46a35b;

    box-shadow:
        0 0 0 4px rgba(70, 163, 91, .11);

    animation:
        online-pulse-b-bb2l8pmcpe 2.2s ease-in-out infinite;
}


.doctor-list[b-bb2l8pmcpe] {
    display: flex;
    flex-direction: column;

    gap:
        clamp(9px, 1.4vh, 13px);
}


.doctor-row[b-bb2l8pmcpe] {
    position: relative;

    min-height:
        clamp(88px, 11.5vh, 103px);

    padding:
        clamp(12px, 1.7vh, 15px)
        17px;

    display: grid;

    grid-template-columns:
        68px minmax(0, 1fr) auto;

    align-items: center;

    gap: 15px;

    border:
        1px solid #e0e5ec;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #f5f7fa,
            #f1f4f7);

    color: inherit;

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.doctor-row:hover[b-bb2l8pmcpe] {
    transform: translateY(-3px);

    border-color:
        rgba(58, 125, 68, .22);

    background:
        linear-gradient(
            135deg,
            #f8fbf9,
            #f3f7fb);

    box-shadow:
        0 13px 27px rgba(31, 55, 82, .075);
}


.doctor-avatar[b-bb2l8pmcpe] {
    position: relative;

    width: 64px;
    height: 64px;

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

    overflow: hidden;

    border:
        4px solid rgba(255, 255, 255, .92);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(36, 89, 166, .13),
            rgba(58, 125, 68, .12));

    color: #315d89;

    box-shadow:
        0 7px 18px rgba(31, 55, 82, .1);
}


.doctor-avatar img[b-bb2l8pmcpe] {
    width: 100%;
    height: 100%;

    display: block;

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


.doctor-avatar > svg[b-bb2l8pmcpe] {
    width: 35px;
    height: 35px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.avatar-status[b-bb2l8pmcpe] {
    position: absolute;

    right: 1px;
    bottom: 1px;

    width: 12px;
    height: 12px;

    border:
        3px solid #fff;

    border-radius: 50%;

    background: #47a75c;
}


.doctor-info[b-bb2l8pmcpe] {
    min-width: 0;
}


.doctor-info h2[b-bb2l8pmcpe] {
    margin: 0;

    overflow: hidden;

    color: #465164;

    font-size: 17px;
    font-weight: 900;
    line-height: 1.65;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.doctor-info p[b-bb2l8pmcpe] {
    margin: 3px 0 0;

    overflow: hidden;

    color: #7a8699;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.doctor-meta[b-bb2l8pmcpe] {
    min-width: 99px;

    display: flex;
    align-items: flex-end;
    flex-direction: column;

    gap: 3px;

    text-align: left;
}


.doctor-meta strong[b-bb2l8pmcpe] {
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
    line-height: 1.6;

    white-space: nowrap;
}


.doctor-meta span[b-bb2l8pmcpe] {
    color: #98a2b3;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;

    white-space: nowrap;
}


.hero-summary[b-bb2l8pmcpe] {
    margin-top:
        clamp(12px, 1.8vh, 17px);

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;
}


.summary-item[b-bb2l8pmcpe] {
    min-width: 0;
    min-height:
        clamp(74px, 9.5vh, 91px);

    padding: 11px 8px;

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

    gap: 3px;

    border:
        1px solid #e0e5ec;

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .74);

    text-align: center;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.summary-item:hover[b-bb2l8pmcpe] {
    transform: translateY(-3px);

    border-color:
        rgba(36, 89, 166, .18);

    box-shadow:
        0 10px 22px rgba(31, 55, 82, .06);
}


.summary-item strong[b-bb2l8pmcpe] {
    color: #465164;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.6;
}


.summary-item span[b-bb2l8pmcpe] {
    color: #8691a3;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}


.panel-state[b-bb2l8pmcpe] {
    min-height: 148px;
    padding: 21px;

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

    gap: 14px;

    border:
        1px solid #e0e5ec;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #f5f7fa,
            #f1f4f7);

    text-align: right;
}


.panel-state > div[b-bb2l8pmcpe] {
    min-width: 0;
}


.panel-state strong[b-bb2l8pmcpe] {
    display: block;

    color: #465164;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.8;
}


.panel-state p[b-bb2l8pmcpe] {
    margin: 3px 0 0;

    color: #7a8699;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}


.state-icon[b-bb2l8pmcpe] {
    width: 43px;
    height: 43px;

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

    flex: 0 0 43px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;

    font-size: 18px;
    font-weight: 900;
}


.state-icon svg[b-bb2l8pmcpe] {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.panel-state button[b-bb2l8pmcpe] {
    min-height: 38px;
    padding: 0 13px;

    margin-right: auto;

    flex: 0 0 auto;

    border:
        1px solid var(--green);

    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}


.skeleton-row[b-bb2l8pmcpe] {
    pointer-events: none;
}


.skeleton-avatar[b-bb2l8pmcpe],
.skeleton-line[b-bb2l8pmcpe],
.skeleton-meta[b-bb2l8pmcpe] {
    display: block;

    background:
        linear-gradient(
            90deg,
            #e5e9ee 25%,
            #f3f5f7 50%,
            #e5e9ee 75%);

    background-size:
        200% 100%;

    animation:
        skeleton-loading-b-bb2l8pmcpe 1.4s linear infinite;
}


.skeleton-avatar[b-bb2l8pmcpe] {
    width: 64px;
    height: 64px;

    border-radius: 20px;
}


.skeleton-content[b-bb2l8pmcpe] {
    min-width: 0;
}


.skeleton-line[b-bb2l8pmcpe] {
    height: 12px;

    border-radius: 999px;
}


.skeleton-line.title[b-bb2l8pmcpe] {
    width: 58%;
}


.skeleton-line.text[b-bb2l8pmcpe] {
    width: 78%;

    margin-top: 10px;
}


.skeleton-meta[b-bb2l8pmcpe] {
    width: 70px;
    height: 26px;

    border-radius: 9px;
}


@keyframes online-pulse-b-bb2l8pmcpe {

    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(70, 163, 91, .1);
    }

    50% {
        box-shadow:
            0 0 0 7px rgba(70, 163, 91, 0);
    }
}


@keyframes skeleton-loading-b-bb2l8pmcpe {

    to {
        background-position:
            -200% 0;
    }
}


@media (min-width: 901px) and (max-height: 780px) {

    .online-visit-hero[b-bb2l8pmcpe] {
        padding: 20px 0;
    }


    .hero-layout[b-bb2l8pmcpe] {
        gap: 38px;
    }


    .hero-badge[b-bb2l8pmcpe] {
        min-height: 40px;

        font-size: 14px;
    }


    .hero-content h1[b-bb2l8pmcpe] {
        margin-top: 16px;

        font-size:
            clamp(40px, 4.45vw, 58px);

        line-height: 1.42;
    }


    .hero-content > p[b-bb2l8pmcpe] {
        margin-top: 12px;

        font-size: 16px;
        line-height: 1.9;
    }


    .hero-actions[b-bb2l8pmcpe] {
        margin-top: 18px;
    }


    .hero-button[b-bb2l8pmcpe] {
        min-height: 52px;

        font-size: 15px;
    }


    .doctors-panel[b-bb2l8pmcpe] {
        padding: 19px 21px;
    }


    .panel-heading[b-bb2l8pmcpe] {
        margin-bottom: 9px;
    }


    .doctor-list[b-bb2l8pmcpe] {
        gap: 8px;
    }


    .doctor-row[b-bb2l8pmcpe] {
        min-height: 84px;
        padding: 10px 14px;

        grid-template-columns:
            60px minmax(0, 1fr) auto;
    }


    .doctor-avatar[b-bb2l8pmcpe],
    .skeleton-avatar[b-bb2l8pmcpe] {
        width: 56px;
        height: 56px;

        border-radius: 17px;
    }


    .doctor-avatar > svg[b-bb2l8pmcpe] {
        width: 31px;
        height: 31px;
    }


    .doctor-info h2[b-bb2l8pmcpe] {
        font-size: 16px;
    }


    .doctor-info p[b-bb2l8pmcpe] {
        font-size: 12px;
    }


    .hero-summary[b-bb2l8pmcpe] {
        margin-top: 10px;

        gap: 9px;
    }


    .summary-item[b-bb2l8pmcpe] {
        min-height: 68px;
        padding: 8px 6px;
    }


    .summary-item strong[b-bb2l8pmcpe] {
        font-size: 14px;
    }


    .summary-item span[b-bb2l8pmcpe] {
        font-size: 11px;
    }
}


@media (max-width: 1150px) {

    .hero-layout[b-bb2l8pmcpe] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(440px, .95fr);

        gap: 36px;
    }


    .hero-content h1[b-bb2l8pmcpe] {
        font-size:
            clamp(39px, 4.7vw, 54px);
    }


    .doctors-panel[b-bb2l8pmcpe] {
        padding: 23px;
    }


    .doctor-row[b-bb2l8pmcpe] {
        grid-template-columns:
            64px minmax(0, 1fr);

        gap: 13px;
    }


    .doctor-meta[b-bb2l8pmcpe] {
        grid-column:
            2;

        min-width: 0;

        align-items: center;
        flex-direction: row;

        text-align: right;
    }
}


@media (max-width: 900px) {

    .online-visit-hero[b-bb2l8pmcpe] {
        min-height: auto;
        padding: 66px 0 72px;
    }


    .hero-layout[b-bb2l8pmcpe] {
        grid-template-columns: 1fr;

        gap: 48px;
    }


    .hero-content[b-bb2l8pmcpe] {
        max-width: 760px;

        margin: 0 auto;

        text-align: center;
    }


    .hero-content h1[b-bb2l8pmcpe],
    .hero-content > p[b-bb2l8pmcpe] {
        margin-right: auto;
        margin-left: auto;
    }


    .hero-actions[b-bb2l8pmcpe] {
        justify-content: center;
    }


    .doctors-panel[b-bb2l8pmcpe] {
        width: 100%;
        max-width: 700px;

        margin: 0 auto;
    }


    .doctor-row[b-bb2l8pmcpe] {
        grid-template-columns:
            78px minmax(0, 1fr) auto;
    }


    .doctor-meta[b-bb2l8pmcpe] {
        grid-column: auto;

        min-width: 105px;

        align-items: flex-end;
        flex-direction: column;
    }
}


@media (max-width: 620px) {

    .online-visit-hero[b-bb2l8pmcpe] {
        padding: 52px 0 60px;
    }


    .hero-badge[b-bb2l8pmcpe] {
        min-height: 43px;
        padding: 0 15px;

        font-size: 13px;
    }


    .hero-content h1[b-bb2l8pmcpe] {
        margin-top: 22px;

        font-size: 35px;
        line-height: 1.65;

        letter-spacing: 0;
    }


    .hero-content > p[b-bb2l8pmcpe] {
        margin-top: 18px;

        font-size: 16px;
        line-height: 2.05;
    }


    .hero-actions[b-bb2l8pmcpe] {
        margin-top: 29px;

        flex-direction: column;

        gap: 11px;
    }


    .hero-button[b-bb2l8pmcpe] {
        width: 100%;
        min-width: 0;
        min-height: 55px;

        font-size: 15px;
    }


    .doctors-panel[b-bb2l8pmcpe] {
        padding: 20px 15px;

        border-radius:
            27px 43px 27px 43px;
    }


    .panel-heading[b-bb2l8pmcpe] {
        align-items: flex-start;
    }


    .panel-heading > div > strong[b-bb2l8pmcpe] {
        font-size: 15px;
    }


    .online-indicator[b-bb2l8pmcpe] {
        min-height: 29px;

        font-size: 11px;
    }


    .doctor-list[b-bb2l8pmcpe] {
        gap: 11px;
    }


    .doctor-row[b-bb2l8pmcpe] {
        min-height: 101px;
        padding: 14px;

        grid-template-columns:
            62px minmax(0, 1fr);

        gap: 12px;

        border-radius: 18px;
    }


    .doctor-avatar[b-bb2l8pmcpe],
    .skeleton-avatar[b-bb2l8pmcpe] {
        width: 60px;
        height: 60px;

        border-width: 4px;
        border-radius: 18px;
    }


    .doctor-avatar > svg[b-bb2l8pmcpe] {
        width: 32px;
        height: 32px;
    }


    .doctor-info h2[b-bb2l8pmcpe] {
        font-size: 16px;
    }


    .doctor-info p[b-bb2l8pmcpe] {
        font-size: 13px;
    }


    .doctor-meta[b-bb2l8pmcpe] {
        grid-column:
            2;

        min-width: 0;

        align-items: center;
        flex-direction: row;

        gap: 8px;

        text-align: right;
    }


    .doctor-meta strong[b-bb2l8pmcpe],
    .doctor-meta span[b-bb2l8pmcpe] {
        font-size: 11px;
    }


    .hero-summary[b-bb2l8pmcpe] {
        margin-top: 15px;

        gap: 8px;
    }


    .summary-item[b-bb2l8pmcpe] {
        min-height: 91px;
        padding: 13px 7px;

        border-radius: 15px;
    }


    .summary-item strong[b-bb2l8pmcpe] {
        font-size: 14px;
    }


    .summary-item span[b-bb2l8pmcpe] {
        font-size: 11px;
    }


    .panel-state[b-bb2l8pmcpe] {
        min-height: 160px;
        padding: 20px 16px;

        align-items: center;
        flex-direction: column;

        text-align: center;
    }


    .panel-state button[b-bb2l8pmcpe] {
        width: 100%;

        margin: 4px 0 0;
    }
}


@media (max-width: 390px) {

    .hero-content h1[b-bb2l8pmcpe] {
        font-size: 31px;
    }


    .hero-content > p[b-bb2l8pmcpe] {
        font-size: 15px;
    }


    .doctors-panel[b-bb2l8pmcpe] {
        padding:
            17px 11px;
    }


    .doctor-row[b-bb2l8pmcpe] {
        padding:
            12px 10px;

        grid-template-columns:
            56px minmax(0, 1fr);
    }


    .doctor-avatar[b-bb2l8pmcpe],
    .skeleton-avatar[b-bb2l8pmcpe] {
        width: 54px;
        height: 54px;

        border-radius: 16px;
    }


    .hero-summary[b-bb2l8pmcpe] {
        grid-template-columns: 1fr;
    }


    .summary-item[b-bb2l8pmcpe] {
        min-height: 72px;
    }
}


@media (hover: none) {

    .doctor-row:hover[b-bb2l8pmcpe],
    .summary-item:hover[b-bb2l8pmcpe],
    .hero-button:hover[b-bb2l8pmcpe] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .online-indicator > span[b-bb2l8pmcpe],
    .skeleton-avatar[b-bb2l8pmcpe],
    .skeleton-line[b-bb2l8pmcpe],
    .skeleton-meta[b-bb2l8pmcpe] {
        animation: none;
    }


    .doctor-row[b-bb2l8pmcpe],
    .summary-item[b-bb2l8pmcpe],
    .hero-button[b-bb2l8pmcpe],
    .hero-button svg[b-bb2l8pmcpe] {
        transition-duration: .01ms !important;
    }
}

.doctor-list .doctor-row[b-bb2l8pmcpe],
.doctor-list .doctor-row:hover[b-bb2l8pmcpe] {
    cursor: default;
    transform: none;
    box-shadow: none;
}

button.hero-button[b-bb2l8pmcpe] {
    font-family: inherit;
    cursor: pointer;
}

button.hero-button.primary[b-bb2l8pmcpe] {
    border: 1px solid transparent;
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisit/OnlineVisitStepsSection.razor.rz.scp.css */
.online-visit-steps[b-wftzjqw42y] {
    position: relative;

    padding: 86px 0 92px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            135deg,
            #edf7ef 0%,
            #f7fafc 48%,
            #edf3fb 100%);
}


.online-visit-steps[b-wftzjqw42y]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .1) 0 4px,
            transparent 5px),
        radial-gradient(
            circle,
            rgba(36, 89, 166, .1) 0 4px,
            transparent 5px);

    background-position:
        0 0,
        55px 55px;

    background-size:
        110px 110px;

    opacity: .48;
}


.step-shape[b-wftzjqw42y] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-wftzjqw42y] {
    width: 360px;
    height: 360px;

    top: -225px;
    right: -110px;

    background:
        rgba(58, 125, 68, .1);
}


.shape-two[b-wftzjqw42y] {
    width: 300px;
    height: 300px;

    bottom: -195px;
    left: -85px;

    background:
        rgba(36, 89, 166, .1);
}


.steps-wrap[b-wftzjqw42y] {
    position: relative;
    z-index: 2;
}


.section-head[b-wftzjqw42y] {
    max-width: 790px;

    margin: 0 auto 43px;

    text-align: center;
}


.section-head > span[b-wftzjqw42y] {
    min-height: 36px;
    padding: 0 15px;

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

    border:
        1px solid rgba(58, 125, 68, .17);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .84);

    color: var(--green);

    box-shadow:
        0 10px 25px rgba(31, 41, 55, .05);

    font-size: 15px;
    font-weight: 900;
}


.section-head h2[b-wftzjqw42y] {
    margin: 14px 0 0;

    color: var(--text);

    font-size:
        clamp(31px, 3.5vw, 42px);

    font-weight: 900;
    line-height: 1.5;
}


.section-head p[b-wftzjqw42y] {
    max-width: 760px;

    margin: 11px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}


.steps-grid[b-wftzjqw42y] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 18px;
}


.step-card[b-wftzjqw42y] {
    position: relative;

    min-width: 0;
    min-height: 300px;

    padding: 33px 24px 28px;

    display: flex;
    align-items: center;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, .94);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .91),
            rgba(247, 251, 248, .82));

    box-shadow:
        0 16px 38px rgba(31, 41, 55, .065);

    text-align: center;

    backdrop-filter: blur(12px);

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.step-card:nth-child(even)[b-wftzjqw42y] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .91),
            rgba(244, 248, 253, .84));
}


.step-card[b-wftzjqw42y]::after {
    content: "";

    position: absolute;

    width: 118px;
    height: 118px;

    right: -72px;
    bottom: -78px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .065);

    transition:
        transform .35s ease,
        opacity .35s ease;
}


.step-card:nth-child(even)[b-wftzjqw42y]::after {
    background:
        rgba(36, 89, 166, .07);
}


.step-card:hover[b-wftzjqw42y] {
    transform: translateY(-7px);

    border-color:
        rgba(58, 125, 68, .25);

    box-shadow:
        0 23px 48px rgba(31, 41, 55, .1);
}


.step-card:nth-child(even):hover[b-wftzjqw42y] {
    border-color:
        rgba(36, 89, 166, .24);
}


.step-card:hover[b-wftzjqw42y]::after {
    opacity: .9;

    transform: scale(1.22);
}


.step-number[b-wftzjqw42y] {
    position: absolute;

    top: 8px;
    left: 18px;

    color:
        rgba(58, 125, 68, .085);

    font-family:
        Arial,
        sans-serif;

    font-size: 72px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: -5px;

    pointer-events: none;

    transition:
        color .3s ease,
        transform .3s ease;
}


.step-card:nth-child(even)
.step-number[b-wftzjqw42y] {
    color:
        rgba(36, 89, 166, .085);
}


.step-card:hover
.step-number[b-wftzjqw42y] {
    color:
        rgba(58, 125, 68, .14);

    transform:
        translateY(-2px)
        scale(1.03);
}


.step-card:nth-child(even):hover
.step-number[b-wftzjqw42y] {
    color:
        rgba(36, 89, 166, .14);
}


.step-icon[b-wftzjqw42y] {
    position: relative;
    z-index: 2;

    width: 64px;
    height: 64px;

    margin-bottom: 20px;

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

    flex: 0 0 64px;

    border:
        1px solid rgba(58, 125, 68, .09);

    border-radius: 20px;

    background:
        rgba(58, 125, 68, .1);

    color: var(--green);

    box-shadow:
        0 10px 25px rgba(58, 125, 68, .08);

    transition:
        transform .28s ease,
        background-color .28s ease,
        box-shadow .28s ease;
}


.step-card:nth-child(even)
.step-icon[b-wftzjqw42y] {
    border-color:
        rgba(36, 89, 166, .09);

    background:
        rgba(36, 89, 166, .1);

    color: #2459a6;

    box-shadow:
        0 10px 25px rgba(36, 89, 166, .08);
}


.step-icon svg[b-wftzjqw42y] {
    width: 31px;
    height: 31px;

    display: block;
}


.step-card:hover
.step-icon[b-wftzjqw42y] {
    background:
        rgba(58, 125, 68, .14);

    box-shadow:
        0 13px 29px rgba(58, 125, 68, .13);

    transform:
        translateY(-3px)
        scale(1.045);
}


.step-card:nth-child(even):hover
.step-icon[b-wftzjqw42y] {
    background:
        rgba(36, 89, 166, .14);

    box-shadow:
        0 13px 29px rgba(36, 89, 166, .13);
}


.step-card h3[b-wftzjqw42y] {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;

    transition:
        color .25s ease;
}


.step-card:hover h3[b-wftzjqw42y] {
    color: var(--green);
}


.step-card:nth-child(even):hover h3[b-wftzjqw42y] {
    color: #2459a6;
}


.step-card p[b-wftzjqw42y] {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #667085;

    font-size: 14px;
    font-weight: 500;
    line-height: 2;

    transition:
        color .25s ease,
        transform .25s ease;
}


.step-card:hover p[b-wftzjqw42y] {
    color: #526071;

    transform: translateY(-1px);
}


@media (max-width: 1050px) {

    .steps-grid[b-wftzjqw42y] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .step-card[b-wftzjqw42y] {
        min-height: 275px;
    }
}


@media (max-width: 620px) {

    .online-visit-steps[b-wftzjqw42y] {
        padding: 70px 0;
    }


    .section-head[b-wftzjqw42y] {
        margin-bottom: 31px;
    }


    .section-head > span[b-wftzjqw42y] {
        min-height: 34px;

        font-size: 14px;
    }


    .section-head h2[b-wftzjqw42y] {
        margin-top: 11px;

        font-size: 28px;
        line-height: 1.6;
    }


    .section-head p[b-wftzjqw42y] {
        margin-top: 8px;

        font-size: 15px;
        line-height: 2;
    }


    .steps-grid[b-wftzjqw42y] {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .step-card[b-wftzjqw42y] {
        min-height: 250px;

        padding: 29px 22px 25px;

        border-radius: 21px;
    }


    .step-number[b-wftzjqw42y] {
        top: 10px;
        left: 18px;

        font-size: 62px;
    }


    .step-icon[b-wftzjqw42y] {
        width: 58px;
        height: 58px;

        margin-bottom: 16px;

        flex-basis: 58px;

        border-radius: 18px;
    }


    .step-icon svg[b-wftzjqw42y] {
        width: 28px;
        height: 28px;
    }


    .step-card h3[b-wftzjqw42y] {
        font-size: 20px;
    }


    .step-card p[b-wftzjqw42y] {
        max-width: 390px;

        font-size: 14px;
    }
}


@media (hover: none) {

    .step-card:hover[b-wftzjqw42y] {
        transform: none;
    }


    .step-card:hover .step-icon[b-wftzjqw42y],
    .step-card:hover .step-number[b-wftzjqw42y],
    .step-card:hover p[b-wftzjqw42y] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .step-card[b-wftzjqw42y],
    .step-card[b-wftzjqw42y]::after,
    .step-number[b-wftzjqw42y],
    .step-icon[b-wftzjqw42y],
    .step-card h3[b-wftzjqw42y],
    .step-card p[b-wftzjqw42y] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/OnlineVisitChat/OnlineVisitConversation.razor.rz.scp.css */
.visit-conversation[b-b67qz2ahbt] {
    width: 100%;
    min-width: 0;
    color: var(--text, #344054);
    font-size: 17px;
}

.conversation-head[b-b67qz2ahbt] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.eyebrow[b-b67qz2ahbt] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

.conversation-head h1[b-b67qz2ahbt] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

.conversation-head p[b-b67qz2ahbt] {
    margin: 0;
    color: var(--muted, #667085);
    font-size: 17px;
    line-height: 1.9;
}

.visit-button[b-b67qz2ahbt] {
    min-height: 43px;
    padding: 9px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #344054);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.visit-button.primary[b-b67qz2ahbt] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.visit-button:hover:not(:disabled)[b-b67qz2ahbt] {
    border-color: var(--green, #3a7d44);
}

.visit-button:disabled[b-b67qz2ahbt] {
    opacity: .55;
    cursor: not-allowed;
}

.session-overview[b-b67qz2ahbt] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.session-overview > div[b-b67qz2ahbt] {
    min-width: 0;
    padding: 19px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 16px;
    background: #fff;
}

.session-overview span[b-b67qz2ahbt],
.session-overview small[b-b67qz2ahbt] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.8;
}

.session-overview strong[b-b67qz2ahbt] {
    font-size: 18px;
    overflow-wrap: anywhere;
}

.session-clock strong[b-b67qz2ahbt] {
    color: var(--green, #3a7d44);
    font-size: 27px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.visit-notice[b-b67qz2ahbt] {
    margin-bottom: 18px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffcf5;
    color: #875408;
    font-size: 16px;
    line-height: 1.9;
}

.visit-notice.error[b-b67qz2ahbt],
.visit-state.error[b-b67qz2ahbt] {
    border-color: #fecdca;
    background: #fff5f4;
    color: #b42318;
}

.conversation-grid[b-b67qz2ahbt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 20px;
}

.chat-card[b-b67qz2ahbt],
.result-card[b-b67qz2ahbt] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;
    background: #fff;
}

.chat-head[b-b67qz2ahbt] {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #eef0f3;
}

.chat-head > div[b-b67qz2ahbt] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-head strong[b-b67qz2ahbt] {
    font-size: 18px;
}

.presence[b-b67qz2ahbt] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted, #667085);
    font-size: 14px;
    line-height: 1.8;
}

.presence i[b-b67qz2ahbt] {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #98a2b3;
}

.presence i.online[b-b67qz2ahbt] {
    background: #12b76a;
}

.messages[b-b67qz2ahbt] {
    max-height: 620px;
    min-height: 330px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    overflow-y: auto;
    background: #f8faf9;
}

.message[b-b67qz2ahbt] {
    width: fit-content;
    max-width: 86%;
    padding: 14px 17px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fff;
}

.message.mine[b-b67qz2ahbt] {
    align-self: flex-start;
    border-color: #cfe2d3;
    background: #edf7ef;
}

.message.other[b-b67qz2ahbt] {
    align-self: flex-end;
}

.message-author[b-b67qz2ahbt] {
    color: var(--green, #3a7d44);
    font-size: 14px;
    font-weight: 800;
}

.message-text[b-b67qz2ahbt] {
    margin: 9px 0;
    color: var(--text, #344054);
    font-size: 17px;
    line-height: 2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-time[b-b67qz2ahbt] {
    display: block;
    margin-top: 8px;
    color: var(--muted, #667085);
    font-size: 13px;
    text-align: left;
}

.message-attachment[b-b67qz2ahbt] {
    margin-top: 12px;
}

.message-attachment img[b-b67qz2ahbt],
.message-attachment video[b-b67qz2ahbt] {
    display: block;
    width: 100%;
    max-width: 360px;
    max-height: 340px;
    border-radius: 10px;
    object-fit: contain;
    background: #eef1ef;
}

.attachment-link[b-b67qz2ahbt] {
    display: block;
    margin-top: 9px;
    color: var(--green, #3a7d44);
    font-size: 14px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.messages-empty[b-b67qz2ahbt] {
    width: 100%;
    margin: auto;
    padding: 35px 12px;
    text-align: center;
}

.messages-empty strong[b-b67qz2ahbt] {
    font-size: 19px;
}

.messages-empty p[b-b67qz2ahbt] {
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 2;
}

.typing-status[b-b67qz2ahbt] {
    min-height: 35px;
    padding: 5px 20px;
    color: var(--green, #3a7d44);
    font-size: 14px;
}

.composer[b-b67qz2ahbt] {
    padding: 18px 20px;
    border-top: 1px solid #eef0f3;
}

.composer > label[b-b67qz2ahbt],
.result-card > label:not(.checkbox-field)[b-b67qz2ahbt] {
    display: block;
    margin-bottom: 9px;
    font-size: 16px;
    font-weight: 800;
}

textarea[b-b67qz2ahbt],
input[type="text"][b-b67qz2ahbt] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #344054);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.9;
}

textarea[b-b67qz2ahbt] {
    resize: vertical;
}

textarea:focus[b-b67qz2ahbt],
input[type="text"]:focus[b-b67qz2ahbt] {
    outline: 2px solid #b7d6bc;
    outline-offset: 2px;
}

.composer-actions[b-b67qz2ahbt] {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.upload-control[b-b67qz2ahbt] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 15px;
}

.upload-control[b-b67qz2ahbt]  input {
    max-width: 100%;
    font-family: inherit;
    font-size: 14px;
}

.composer-help[b-b67qz2ahbt] {
    display: block;
    margin-top: 14px;
    color: var(--muted, #667085);
    font-size: 14px;
    line-height: 1.9;
}

.selected-file[b-b67qz2ahbt] {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 15px;
}

.selected-file span[b-b67qz2ahbt] {
    overflow-wrap: anywhere;
}

.composer-closed[b-b67qz2ahbt] {
    padding: 20px;
    border-top: 1px solid #eef0f3;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 2;
}

.result-card[b-b67qz2ahbt] {
    padding: 22px;
}

.result-card h2[b-b67qz2ahbt] {
    margin: 0 0 17px;
    font-size: 22px;
    font-weight: bold;
}

.result-card h3[b-b67qz2ahbt] {
    margin: 22px 0 9px;
    font-size: 17px;
    font-weight: bold;

}

.result-card p[b-b67qz2ahbt] {
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 2;
}

.result-card .conclusion[b-b67qz2ahbt] {
    color: var(--text, #344054);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.result-card small[b-b67qz2ahbt] {
    display: block;
    margin-top: 20px;
    color: var(--muted, #667085);
    font-size: 14px;
    line-height: 1.9;
}

.result-badge[b-b67qz2ahbt] {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 15px;
    font-weight: 800;
}

.checkbox-field[b-b67qz2ahbt] {
    margin: 18px 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 16px;
    line-height: 1.9;
    cursor: pointer;
}

.checkbox-field input[b-b67qz2ahbt] {
    flex-shrink: 0;
    margin-top: 7px;
    accent-color: var(--green, #3a7d44);
}

.finalize-button[b-b67qz2ahbt] {
    width: 100%;
    white-space: normal;
}

.prescription-code[b-b67qz2ahbt] {
    display: block;
    padding: 13px;
    border: 1px solid #d5e7d9;
    border-radius: 10px;
    background: #f0f8f2;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.visit-state[b-b67qz2ahbt] {
    padding: 45px 22px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 16px;
    background: #fff;
    font-size: 18px;
    line-height: 2;
    text-align: center;
}

@media (max-width: 1150px) {
    .conversation-grid[b-b67qz2ahbt] {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .session-overview[b-b67qz2ahbt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .conversation-grid[b-b67qz2ahbt] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 650px) {
    .conversation-head[b-b67qz2ahbt] {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-head[b-b67qz2ahbt] {
        flex-wrap: wrap;
    }

    .messages[b-b67qz2ahbt] {
        padding: 14px;
        max-height: 520px;
    }

    .message[b-b67qz2ahbt] {
        max-width: 93%;
        padding: 12px;
    }

    .composer[b-b67qz2ahbt],
    .chat-head[b-b67qz2ahbt],
    .result-card[b-b67qz2ahbt] {
        padding: 16px;
    }

    .composer-actions > .visit-button[b-b67qz2ahbt] {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .session-overview[b-b67qz2ahbt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .conversation-head h1[b-b67qz2ahbt] {
        font-size: 24px;
    }
}

/* انتخاب فایل و دکمه ارسال */

.composer[b-b67qz2ahbt] {
    min-width: 0;
    background: #fff;
}

.composer-actions[b-b67qz2ahbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
}

.upload-control[b-b67qz2ahbt] {
    position: relative;
    isolation: isolate;
    flex: 0 1 230px;
    min-width: 0;
    min-height: 48px;
    overflow: hidden;
    border: 1px solid #cfe2d3;
    border-radius: 12px;
    background: #f0f8f2;
    transition: background .2s, border-color .2s;
}

.upload-control:hover[b-b67qz2ahbt] {
    border-color: var(--green, #3a7d44);
    background: #e6f2e9;
}

.upload-control > label[b-b67qz2ahbt] {
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 11px 18px;

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

    color: var(--green, #3a7d44);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
    cursor: pointer;
}

/* کنترل اصلی فعال است، ظاهر پیش‌فرض مرورگر مخفی می‌شود. */
.upload-control[b-b67qz2ahbt]  input[type="file"] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-control:focus-within[b-b67qz2ahbt] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.upload-control[b-b67qz2ahbt]  input[type="file"]:disabled {
    cursor: not-allowed;
}

.composer-actions > .visit-button.primary[b-b67qz2ahbt] {
    min-width: 140px;
    min-height: 48px;
    padding: 11px 22px;
    border-radius: 12px;
    font-size: 17px;
}


/* فایل انتخاب‌شده */

.selected-file[b-b67qz2ahbt] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-top: 15px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;

    border: 1px solid #dce8df;
    border-radius: 12px;
    background: #f7faf8;
}

.selected-file > span[b-b67qz2ahbt] {
    display: block;
    flex: 1 1 0;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    direction: ltr;
    text-align: right;
    color: var(--text, #344054);
    font-size: 16px;
    line-height: 1.9;
}

.selected-file > .visit-button[b-b67qz2ahbt] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 7px 11px;

    border-color: #fecdca;
    border-radius: 9px;
    background: #fff;
    color: #b42318;

    font-size: 14px;
}

.selected-file > .visit-button:hover:not(:disabled)[b-b67qz2ahbt] {
    border-color: #fda29b;
    background: #fff5f4;
}

.composer-help[b-b67qz2ahbt] {
    display: block;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid #eef0f3;

    color: var(--muted, #667085);
    font-size: 14px;
    line-height: 2;
}


/* پیوست داخل پیام ارسال‌شده */

.message[b-b67qz2ahbt] {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.message-attachment[b-b67qz2ahbt] {
    min-width: 0;
    max-width: 360px;
    margin-top: 12px;
}

.message-attachment > a:first-child[b-b67qz2ahbt] {
    display: block;
    min-width: 0;
}

.message-attachment img[b-b67qz2ahbt],
.message-attachment video[b-b67qz2ahbt] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 360px;
    max-height: 340px;
    border: 1px solid rgba(58, 125, 68, .12);
    border-radius: 12px;
    object-fit: contain;
}

.attachment-link[b-b67qz2ahbt] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 360px;
    margin-top: 10px;
    padding: 10px 12px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;

    border: 1px solid #d5e7d9;
    border-radius: 10px;
    background: rgba(255, 255, 255, .8);
    color: var(--green, #3a7d44);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
    text-decoration: none;
}

.attachment-link:hover[b-b67qz2ahbt] {
    border-color: var(--green, #3a7d44);
    background: #fff;
}

.attachment-link:focus-visible[b-b67qz2ahbt] {
    outline: 3px solid #b7d6bc;
    outline-offset: 2px;
}


/* موبایل */

@media (max-width: 650px) {
    .composer-actions[b-b67qz2ahbt] {
        align-items: stretch;
        gap: 10px;
    }

    .upload-control[b-b67qz2ahbt] {
        flex: 1 1 100%;
        width: 100%;
    }

    .composer-actions > .visit-button.primary[b-b67qz2ahbt] {
        width: 100%;
    }

    .selected-file[b-b67qz2ahbt] {
        gap: 10px;
        padding: 10px;
    }

    .selected-file > span[b-b67qz2ahbt] {
        font-size: 14px;
    }

    .selected-file > .visit-button[b-b67qz2ahbt] {
        padding: 7px 9px;
        font-size: 13px;
    }
}

/* پیام‌ها نباید برای جا شدن در ارتفاع چت فشرده شوند. */

.messages[b-b67qz2ahbt] {
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.messages > .message[b-b67qz2ahbt] {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    min-width: 0;
    overflow: visible;
}

.messages > .messages-empty[b-b67qz2ahbt] {
    flex-shrink: 0;
}

.message-attachment[b-b67qz2ahbt] {
    width: 340px;
    max-width: 100%;
    min-width: 0;
}

/* پیش‌نمایش عکس داخل پیام */

.image-preview-button[b-b67qz2ahbt] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    border: 0;
    border-radius: 12px;
    background: #edf1ee;
    cursor: zoom-in;
}

.image-preview-button img[b-b67qz2ahbt] {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 320px;
    border: 0;
    border-radius: 12px;
    object-fit: contain;
}

.image-preview-button:focus-visible[b-b67qz2ahbt] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.message-attachment video[b-b67qz2ahbt] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
}

button.attachment-link[b-b67qz2ahbt] {
    font-family: inherit;
    text-align: right;
    cursor: zoom-in;
}

/* نمایش بزرگ عکس در همین صفحه */

.visit-image-overlay[b-b67qz2ahbt] {
    position: fixed;
    inset: 0;
    z-index: 10000;

    box-sizing: border-box;
    padding: 24px;

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

    background: rgba(16, 24, 40, .88);
    overscroll-behavior: contain;
}

.visit-image-dialog[b-b67qz2ahbt] {
    box-sizing: border-box;
    width: min(1100px, 100%);
    height: min(850px, 90dvh);
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    border: 1px solid #475467;
    border-radius: 18px;
    background: #182230;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    color: #fff;
    outline: none;
}

.visit-image-toolbar[b-b67qz2ahbt] {
    flex: 0 0 auto;
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    border-bottom: 1px solid #344054;
}

.visit-image-toolbar strong[b-b67qz2ahbt] {
    font-size: 17px;
}

.visit-image-tools[b-b67qz2ahbt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.visit-image-tools button[b-b67qz2ahbt] {
    min-width: 42px;
    min-height: 40px;
    padding: 7px 12px;

    border: 1px solid #667085;
    border-radius: 9px;
    background: #344054;
    color: #fff;

    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

.visit-image-tools button:hover[b-b67qz2ahbt] {
    background: #475467;
}

.visit-image-tools button:disabled[b-b67qz2ahbt] {
    opacity: .4;
    cursor: not-allowed;
}

.visit-image-tools button:focus-visible[b-b67qz2ahbt] {
    outline: 3px solid #b7d6bc;
    outline-offset: 2px;
}

.visit-image-tools span[b-b67qz2ahbt] {
    min-width: 50px;
    font-size: 15px;
    text-align: center;
}

.visit-image-stage[b-b67qz2ahbt] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    direction: ltr;
    overscroll-behavior: contain;
}

.visit-image-canvas[b-b67qz2ahbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 100%;
}

.visit-image-canvas img[b-b67qz2ahbt] {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
}

.visit-image-caption[b-b67qz2ahbt] {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    border-top: 1px solid #344054;
    color: #eaecf0;
    font-size: 14px;
    direction: ltr;
    text-align: center;
}

@media (max-width: 650px) {
    .visit-image-overlay[b-b67qz2ahbt] {
        padding: 10px;
    }

    .visit-image-dialog[b-b67qz2ahbt] {
        height: 92dvh;
        border-radius: 12px;
    }

    .visit-image-toolbar[b-b67qz2ahbt] {
        padding: 12px;
    }

    .message-attachment[b-b67qz2ahbt] {
        width: 280px;
        max-width: 100%;
    }
}

/* نتیجه نهایی ویزیت */

.result-card[b-b67qz2ahbt] {
    box-sizing: border-box;
    padding: 24px;
}

.result-card > h2[b-b67qz2ahbt] {
    margin: 0 0 20px;
    padding-bottom: 17px;
    border-bottom: 1px solid #eef0f3;
    font-size: 22px;
    line-height: 1.8;
}

.final-result[b-b67qz2ahbt] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.result-status-row[b-b67qz2ahbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 18px 12px;

    border: 1px solid #dceee1;
    border-radius: 14px;
    background: #f7fcf8;
    text-align: center;
}

.result-status-row .result-badge[b-b67qz2ahbt] {
    padding: 8px 14px;
    font-size: 16px;
}

.result-status-caption[b-b67qz2ahbt] {
    color: var(--muted, #667085);
    font-size: 14px;
    line-height: 1.8;
}

.result-section[b-b67qz2ahbt] {
    min-width: 0;
}

.final-result .result-section > h3[b-b67qz2ahbt] {
    margin: 0 0 12px;
    color: var(--text, #344054);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.9;
}

.result-conclusion[b-b67qz2ahbt] {
    padding: 16px;

    border: 1px solid #e9edf0;
    border-radius: 12px;
    background: #fafbfc;

    color: var(--text, #344054);
    font-size: 17px;
    line-height: 2.1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.result-code-row[b-b67qz2ahbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 15px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
}

.result-code-row + .result-code-row[b-b67qz2ahbt] {
    margin-top: 12px;
}

.result-code-row.prescription[b-b67qz2ahbt] {
    border-color: #cfe5d5;
    background: #f0f8f2;
}

.result-code-value[b-b67qz2ahbt] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.result-code-value > span[b-b67qz2ahbt] {
    color: var(--muted, #667085);
    font-size: 14px;
}

.result-code-value > strong[b-b67qz2ahbt] {
    color: var(--text, #344054);
    font-size: 21px;
    font-weight: 900;
    line-height: 1.6;
    overflow-wrap: anywhere;
    user-select: all;
}

.result-copy-button[b-b67qz2ahbt] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 11px;

    border: 1px solid #c5ddcc;
    border-radius: 9px;
    background: #fff;
    color: var(--green, #3a7d44);

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.result-copy-button:hover[b-b67qz2ahbt] {
    border-color: var(--green, #3a7d44);
    background: #eaf5ed;
}

.result-copy-button:focus-visible[b-b67qz2ahbt] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.result-no-prescription[b-b67qz2ahbt] {
    margin-top: 12px;
    padding: 14px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f9fafb;
    color: var(--muted, #667085);

    font-size: 16px;
    line-height: 2;
}

.result-copy-error[b-b67qz2ahbt] {
    margin-top: 10px;
    color: #b54708;
    font-size: 14px;
    line-height: 1.9;
}

.result-footer[b-b67qz2ahbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;

    padding-top: 17px;
    border-top: 1px solid #eef0f3;
    text-align: center;
}

.result-footer > span[b-b67qz2ahbt] {
    color: var(--muted, #667085);
    font-size: 14px;
}

.result-footer > strong[b-b67qz2ahbt] {
    color: var(--text, #344054);
    font-size: 15px;
    line-height: 1.9;
}

.result-footer strong span[b-b67qz2ahbt] {
    margin: 0 5px;
    color: #98a2b3;
}

@media (max-width: 650px) {
    .result-card[b-b67qz2ahbt] {
        padding: 18px;
    }

    .final-result[b-b67qz2ahbt] {
        gap: 20px;
    }

    .result-code-value > strong[b-b67qz2ahbt] {
        font-size: 19px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Assignments/OperatorAssignmentDetails.razor.rz.scp.css */
.operator-assignment-details-page[b-7lvknynd7s] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-7lvknynd7s] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-7lvknynd7s] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-7lvknynd7s] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-7lvknynd7s] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-7lvknynd7s] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-7lvknynd7s] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.assignment-summary-card[b-7lvknynd7s] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.assignment-main[b-7lvknynd7s] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.assignment-avatar[b-7lvknynd7s] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.assignment-main > div:last-child[b-7lvknynd7s] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.assignment-main strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.assignment-main span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 10px;
}

.assignment-statuses[b-7lvknynd7s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Cards
========================= */

.details-grid[b-7lvknynd7s] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-7lvknynd7s] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-7lvknynd7s] {
    grid-column: 1 / -1;
}

.details-card h3[b-7lvknynd7s] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-7lvknynd7s] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-7lvknynd7s] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-7lvknynd7s] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 13px;
}

.reference-link[b-7lvknynd7s] {
    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-7lvknynd7s] {
    text-decoration: underline;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-7lvknynd7s] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-7lvknynd7s] {
    margin-bottom: 5px;
}

.card-title-row p[b-7lvknynd7s] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Suppliers
========================= */

.supplier-grid[b-7lvknynd7s] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.supplier-card[b-7lvknynd7s] {
    padding: 16px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.supplier-card:hover[b-7lvknynd7s] {
    border-color: rgba(58, 125, 68, .35);

    box-shadow:
        0 5px 20px rgba(16, 24, 40, .04);
}

.supplier-card.recommended[b-7lvknynd7s] {
    border-color: rgba(58, 125, 68, .30);

    background: rgba(58, 125, 68, .025);
}

.supplier-card.disabled[b-7lvknynd7s] {
    opacity: .55;
}

.supplier-head[b-7lvknynd7s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.supplier-main[b-7lvknynd7s] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.supplier-avatar[b-7lvknynd7s] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.supplier-main > div:last-child[b-7lvknynd7s] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.supplier-main strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 12px;
}

.supplier-main span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 9px;
}

.supplier-stats[b-7lvknynd7s] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.supplier-stats > div[b-7lvknynd7s] {
    padding: 9px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    border-radius: 9px;

    background: #fafbfc;
}

.supplier-stats span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 8px;
}

.supplier-stats strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 10px;
}

.supplier-tags[b-7lvknynd7s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;
}

.supplier-actions[b-7lvknynd7s] {
    margin-top: auto;
}

.select-supplier-button[b-7lvknynd7s] {
    width: 100%;
    min-height: 38px;

    border: 1px solid var(--green);
    border-radius: 9px;

    background: #fff;
    color: var(--green);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.select-supplier-button:hover[b-7lvknynd7s] {
    background: var(--green);
    color: #fff;
}

.select-supplier-button:disabled[b-7lvknynd7s] {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================
   Selected Supplier
========================= */

.empty-selection[b-7lvknynd7s] {
    min-height: 105px;

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

    gap: 5px;

    border: 1px dashed var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.empty-selection strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 12px;
}

.empty-selection span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 10px;
}

.selected-supplier-card[b-7lvknynd7s] {
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 14px;

    border: 1px solid rgba(58, 125, 68, .20);
    border-radius: 13px;

    background: rgba(58, 125, 68, .035);
}

.selected-main[b-7lvknynd7s] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.selected-main > div:last-child[b-7lvknynd7s] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.selected-main strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 12px;
}

.selected-main span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 9px;
}

.selected-info[b-7lvknynd7s] {
    flex: 1;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.selected-info span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 10px;
}

.remove-selection-button[b-7lvknynd7s] {
    min-height: 35px;
    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.remove-selection-button:hover[b-7lvknynd7s] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Note
========================= */

.field-group textarea[b-7lvknynd7s] {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-7lvknynd7s] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Timeline
========================= */

.timeline[b-7lvknynd7s] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.timeline-item[b-7lvknynd7s] {
    position: relative;

    min-height: 58px;
    padding-right: 28px;
}

.timeline-item:not(:last-child)[b-7lvknynd7s]::after {
    content: "";

    position: absolute;

    top: 15px;
    right: 5px;

    width: 1px;
    height: calc(100% + 12px);

    background: #e4e7ec;
}

.timeline-dot[b-7lvknynd7s] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-7lvknynd7s] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-7lvknynd7s] {
    background: var(--orange);
}

.timeline-content[b-7lvknynd7s] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.timeline-content strong[b-7lvknynd7s] {
    color: var(--text);

    font-size: 12px;
}

.timeline-content span[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.8;
}

.timeline-content small[b-7lvknynd7s] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Status
========================= */

.status-badge[b-7lvknynd7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-7lvknynd7s] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-7lvknynd7s] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-7lvknynd7s] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-7lvknynd7s] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-7lvknynd7s] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-list[b-7lvknynd7s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-7lvknynd7s] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-button:hover[b-7lvknynd7s] {
    border-color: var(--green);
    color: var(--green);
}

.action-button:disabled[b-7lvknynd7s] {
    opacity: .55;

    cursor: not-allowed;
}

.primary-action[b-7lvknynd7s] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-7lvknynd7s] {
    color: #fff;

    filter: brightness(.96);
}

.warning-action[b-7lvknynd7s] {
    border-color: #fdb022;

    color: #b54708;
}

.warning-action:hover[b-7lvknynd7s] {
    background: #fffaeb;

    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .supplier-grid[b-7lvknynd7s] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .page-head[b-7lvknynd7s] {
        flex-direction: column;
    }

    .assignment-summary-card[b-7lvknynd7s] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-7lvknynd7s] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-7lvknynd7s] {
        grid-column: auto;
    }

    .selected-supplier-card[b-7lvknynd7s] {
        align-items: flex-start;
        flex-direction: column;
    }

    .back-button[b-7lvknynd7s] {
        width: 100%;
    }
}

@media (max-width: 650px) {

    .supplier-grid[b-7lvknynd7s],
    .supplier-stats[b-7lvknynd7s] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Assignments/OperatorAssignments.razor.rz.scp.css */
.operator-assignments-page[b-ky3qnj1a9i] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.assignments-summary[b-ky3qnj1a9i] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-ky3qnj1a9i] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-ky3qnj1a9i] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-ky3qnj1a9i] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-ky3qnj1a9i] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Customer
========================= */

.customer-cell[b-ky3qnj1a9i] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.customer-cell strong[b-ky3qnj1a9i] {
    color: var(--text);

    font-size: 13px;
}

.customer-cell span[b-ky3qnj1a9i] {
    color: var(--muted);

    font-size: 10px;
}

.ltr-value[b-ky3qnj1a9i] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Supplier
========================= */

.supplier-cell[b-ky3qnj1a9i] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.supplier-cell strong[b-ky3qnj1a9i] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.supplier-cell span[b-ky3qnj1a9i] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Reference
========================= */

.reference-link[b-ky3qnj1a9i] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-ky3qnj1a9i] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-ky3qnj1a9i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ky3qnj1a9i] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-ky3qnj1a9i] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-ky3qnj1a9i] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-ky3qnj1a9i] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-ky3qnj1a9i] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-ky3qnj1a9i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-ky3qnj1a9i] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-ky3qnj1a9i] {
    border-color: var(--green);

    color: var(--green);
}

.success-action[b-ky3qnj1a9i] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-ky3qnj1a9i] {
    background: rgba(58, 125, 68, .05);
}

.warning-action[b-ky3qnj1a9i] {
    border-color: #fdb022;

    color: #b54708;
}

.warning-action:hover[b-ky3qnj1a9i] {
    background: #fffaeb;

    border-color: #fdb022;

    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .assignments-summary[b-ky3qnj1a9i] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .assignments-summary[b-ky3qnj1a9i] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Fulfillments/OperatorFulfillmentDetails.razor.rz.scp.css */
.operator-fulfillment-details-page[b-xt3d2gmpaq] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-xt3d2gmpaq] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-xt3d2gmpaq] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-xt3d2gmpaq] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-xt3d2gmpaq] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-xt3d2gmpaq] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-xt3d2gmpaq] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.fulfillment-summary-card[b-xt3d2gmpaq] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.fulfillment-main[b-xt3d2gmpaq] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.fulfillment-avatar[b-xt3d2gmpaq] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.fulfillment-main > div:last-child[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.fulfillment-main strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.fulfillment-main span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 10px;
}

.fulfillment-statuses[b-xt3d2gmpaq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Grid
========================= */

.summary-grid[b-xt3d2gmpaq] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-xt3d2gmpaq] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Cards
========================= */

.details-grid[b-xt3d2gmpaq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-xt3d2gmpaq] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-xt3d2gmpaq] {
    grid-column: 1 / -1;
}

.details-card h3[b-xt3d2gmpaq] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-xt3d2gmpaq] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-xt3d2gmpaq] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 13px;
}

.reference-link[b-xt3d2gmpaq] {
    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-xt3d2gmpaq] {
    text-decoration: underline;
}


/* =========================
   Supplier
========================= */

.supplier-profile[b-xt3d2gmpaq] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.supplier-avatar[b-xt3d2gmpaq] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.supplier-profile > div:last-child[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.supplier-profile strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 12px;
}

.supplier-profile span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 10px;
}

.supplier-details[b-xt3d2gmpaq] {
    margin-top: 10px;
}


/* =========================
   Progress
========================= */

.progress-overview[b-xt3d2gmpaq] {
    display: flex;
    align-items: center;

    gap: 14px;
}

.progress-number[b-xt3d2gmpaq] {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

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

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;

    direction: ltr;
}

.progress-info[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.progress-info strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 13px;
}

.progress-info span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 10px;
}

.large-progress-track[b-xt3d2gmpaq] {
    width: 100%;
    height: 9px;

    margin-top: 16px;

    overflow: hidden;

    border-radius: 999px;

    background: #eef1f4;
}

.large-progress-value[b-xt3d2gmpaq] {
    height: 100%;

    border-radius: inherit;

    background: var(--green);
}

.progress-meta[b-xt3d2gmpaq] {
    margin-top: 14px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.progress-meta > div[b-xt3d2gmpaq] {
    padding: 10px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    background: #fafbfc;

    border-radius: 9px;
}

.progress-meta span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 9px;
}

.progress-meta strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 10px;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-xt3d2gmpaq] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-xt3d2gmpaq] {
    margin-bottom: 5px;
}

.card-title-row p[b-xt3d2gmpaq] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Table
========================= */

.table-wrap[b-xt3d2gmpaq] {
    width: 100%;

    overflow-x: auto;
}

.fulfillment-items-table[b-xt3d2gmpaq] {
    width: 100%;
    min-width: 1000px;

    border-collapse: collapse;
}

.fulfillment-items-table th[b-xt3d2gmpaq],
.fulfillment-items-table td[b-xt3d2gmpaq] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.fulfillment-items-table th[b-xt3d2gmpaq] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.fulfillment-items-table td[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 12px;
}

.fulfillment-items-table tbody tr:last-child td[b-xt3d2gmpaq] {
    border-bottom: 0;
}

.fulfillment-items-table tbody tr:hover[b-xt3d2gmpaq] {
    background: #fcfdfd;
}


/* =========================
   Item
========================= */

.item-cell[b-xt3d2gmpaq] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.item-avatar[b-xt3d2gmpaq] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.item-cell > div:last-child[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.item-cell strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 12px;
}

.item-cell span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Problem
========================= */

.problem-card[b-xt3d2gmpaq] {
    border-color: #fedf89;

    background: #fffcf5;
}

.problem-head[b-xt3d2gmpaq] {
    margin-bottom: 16px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.problem-head h3[b-xt3d2gmpaq] {
    margin-bottom: 5px;
}

.problem-head p[b-xt3d2gmpaq] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}

.problem-content[b-xt3d2gmpaq] {
    padding: 14px;

    display: flex;
    align-items: center;

    gap: 12px;

    background: #fff;

    border: 1px solid #fedf89;
    border-radius: 12px;
}

.problem-icon[b-xt3d2gmpaq] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: #fffaeb;
    color: #b54708;

    font-size: 16px;
    font-weight: 900;
}

.problem-content > div:last-child[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.problem-content strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 12px;
}

.problem-content span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Timeline
========================= */

.timeline[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.timeline-item[b-xt3d2gmpaq] {
    position: relative;

    min-height: 58px;
    padding-right: 28px;
}

.timeline-item:not(:last-child)[b-xt3d2gmpaq]::after {
    content: "";

    position: absolute;

    top: 15px;
    right: 5px;

    width: 1px;
    height: calc(100% + 12px);

    background: #e4e7ec;
}

.timeline-dot[b-xt3d2gmpaq] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-xt3d2gmpaq] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-xt3d2gmpaq] {
    background: var(--orange);
}

.timeline-content[b-xt3d2gmpaq] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.timeline-content strong[b-xt3d2gmpaq] {
    color: var(--text);

    font-size: 12px;
}

.timeline-content span[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.8;
}

.timeline-content small[b-xt3d2gmpaq] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Field
========================= */

.field-group textarea[b-xt3d2gmpaq] {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-xt3d2gmpaq] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Status
========================= */

.status-badge[b-xt3d2gmpaq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-xt3d2gmpaq] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-xt3d2gmpaq] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-xt3d2gmpaq] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-xt3d2gmpaq] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-xt3d2gmpaq] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Table Actions
========================= */

.row-actions[b-xt3d2gmpaq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}

.table-action[b-xt3d2gmpaq] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.table-action:hover[b-xt3d2gmpaq] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Actions
========================= */

.action-list[b-xt3d2gmpaq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-xt3d2gmpaq] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-button:hover[b-xt3d2gmpaq] {
    border-color: var(--green);
    color: var(--green);
}

.action-button:disabled[b-xt3d2gmpaq],
.table-action:disabled[b-xt3d2gmpaq] {
    opacity: .55;

    cursor: not-allowed;
}

.primary-action[b-xt3d2gmpaq] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-xt3d2gmpaq] {
    color: #fff;

    filter: brightness(.96);
}

.success-action[b-xt3d2gmpaq] {
    border-color: var(--green);
    color: var(--green);
}

.success-action:hover[b-xt3d2gmpaq] {
    background: rgba(58, 125, 68, .05);
}

.warning-action[b-xt3d2gmpaq] {
    border-color: #fdb022;
    color: #b54708;
}

.warning-action:hover[b-xt3d2gmpaq] {
    background: #fffaeb;
    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .summary-grid[b-xt3d2gmpaq] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .page-head[b-xt3d2gmpaq] {
        flex-direction: column;
    }

    .fulfillment-summary-card[b-xt3d2gmpaq] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-xt3d2gmpaq] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-xt3d2gmpaq] {
        grid-column: auto;
    }

    .problem-head[b-xt3d2gmpaq] {
        flex-direction: column;
    }

    .back-button[b-xt3d2gmpaq] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-xt3d2gmpaq],
    .progress-meta[b-xt3d2gmpaq] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Fulfillments/OperatorFulfillments.razor.rz.scp.css */
.operator-fulfillments-page[b-1foptheks9] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.fulfillments-summary[b-1foptheks9] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-1foptheks9] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-1foptheks9] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-1foptheks9] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-1foptheks9] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Fulfillment
========================= */

.fulfillment-cell[b-1foptheks9] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.fulfillment-avatar[b-1foptheks9] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.fulfillment-cell > div:last-child[b-1foptheks9] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.fulfillment-cell strong[b-1foptheks9] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.fulfillment-cell span[b-1foptheks9] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Supplier
========================= */

.supplier-cell[b-1foptheks9] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.supplier-cell strong[b-1foptheks9] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.supplier-cell span[b-1foptheks9] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Progress
========================= */

.progress-cell[b-1foptheks9] {
    min-width: 120px;

    display: flex;
    align-items: center;

    gap: 8px;
}

.progress-track[b-1foptheks9] {
    flex: 1;

    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #eef1f4;
}

.progress-value[b-1foptheks9] {
    height: 100%;

    border-radius: inherit;

    background: var(--green);
}

.progress-cell span[b-1foptheks9] {
    min-width: 30px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    direction: ltr;
}


/* =========================
   Reference
========================= */

.reference-link[b-1foptheks9] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-1foptheks9] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-1foptheks9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-1foptheks9] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-1foptheks9] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-1foptheks9] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-1foptheks9] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-1foptheks9] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-1foptheks9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-1foptheks9] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-1foptheks9] {
    border-color: var(--green);
    color: var(--green);
}

.success-action[b-1foptheks9] {
    border-color: var(--green);
    color: var(--green);
}

.success-action:hover[b-1foptheks9] {
    background: rgba(58, 125, 68, .05);
}

.warning-action[b-1foptheks9] {
    border-color: #fdb022;
    color: #b54708;
}

.warning-action:hover[b-1foptheks9] {
    background: #fffaeb;
    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .fulfillments-summary[b-1foptheks9] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .fulfillments-summary[b-1foptheks9] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Orders/OperatorOrderDetails.razor.rz.scp.css */
.operator-order-details-page[b-1zg2cu8mzg] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-1zg2cu8mzg] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-1zg2cu8mzg] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-1zg2cu8mzg] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-1zg2cu8mzg] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-1zg2cu8mzg] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-1zg2cu8mzg] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Summary
========================= */

.order-summary-card[b-1zg2cu8mzg] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.order-main[b-1zg2cu8mzg] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.order-avatar[b-1zg2cu8mzg] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.order-main > div:last-child[b-1zg2cu8mzg] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.order-main strong[b-1zg2cu8mzg] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.order-main span[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 10px;
}

.order-statuses[b-1zg2cu8mzg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Cards
========================= */

.summary-grid[b-1zg2cu8mzg] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-1zg2cu8mzg] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-1zg2cu8mzg] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Cards
========================= */

.details-grid[b-1zg2cu8mzg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-1zg2cu8mzg] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-1zg2cu8mzg] {
    grid-column: 1 / -1;
}

.details-card h3[b-1zg2cu8mzg] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-1zg2cu8mzg] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-1zg2cu8mzg] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-1zg2cu8mzg] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-1zg2cu8mzg] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-1zg2cu8mzg] {
    direction: ltr;

    unicode-bidi: plaintext;
}

.address-box[b-1zg2cu8mzg] {
    margin-top: 14px;
    padding: 14px;

    background: #fbfcfd;

    border: 1px solid var(--soft);
    border-radius: 11px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.9;
}

.card-actions[b-1zg2cu8mzg] {
    margin-top: 16px;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-1zg2cu8mzg] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-1zg2cu8mzg] {
    margin-bottom: 5px;
}

.card-title-row p[b-1zg2cu8mzg] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Table
========================= */

.table-wrap[b-1zg2cu8mzg] {
    width: 100%;

    overflow-x: auto;
}

.order-items-table[b-1zg2cu8mzg] {
    width: 100%;
    min-width: 950px;

    border-collapse: collapse;
}

.order-items-table th[b-1zg2cu8mzg],
.order-items-table td[b-1zg2cu8mzg] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.order-items-table th[b-1zg2cu8mzg] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.order-items-table td[b-1zg2cu8mzg] {
    color: var(--text);

    font-size: 12px;
}

.order-items-table tbody tr:last-child td[b-1zg2cu8mzg] {
    border-bottom: 0;
}

.order-items-table tbody tr:hover[b-1zg2cu8mzg] {
    background: #fcfdfd;
}


/* =========================
   Item
========================= */

.item-cell[b-1zg2cu8mzg] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.item-avatar[b-1zg2cu8mzg] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.item-cell > div:last-child[b-1zg2cu8mzg] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.item-cell strong[b-1zg2cu8mzg] {
    color: var(--text);

    font-size: 12px;
}

.item-cell span[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Timeline
========================= */

.order-timeline[b-1zg2cu8mzg] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.timeline-item[b-1zg2cu8mzg] {
    min-height: 60px;

    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);

    gap: 10px;
}

.timeline-marker[b-1zg2cu8mzg] {
    position: relative;

    display: flex;
    justify-content: center;
}

.timeline-item:not(:last-child)
.timeline-marker[b-1zg2cu8mzg]::after {
    content: "";

    position: absolute;

    top: 15px;

    width: 1px;
    height: calc(100% + 10px);

    background: #e4e7ec;
}

.timeline-dot[b-1zg2cu8mzg] {
    position: relative;

    width: 11px;
    height: 11px;

    margin-top: 5px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-1zg2cu8mzg] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-1zg2cu8mzg] {
    background: var(--orange);
}

.timeline-content[b-1zg2cu8mzg] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.timeline-content strong[b-1zg2cu8mzg] {
    color: var(--text);

    font-size: 12px;
}

.timeline-content span[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.8;
}

.timeline-content small[b-1zg2cu8mzg] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Note
========================= */

.field-group textarea[b-1zg2cu8mzg] {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-1zg2cu8mzg] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Status
========================= */

.status-badge[b-1zg2cu8mzg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-1zg2cu8mzg] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-1zg2cu8mzg] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-1zg2cu8mzg] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-1zg2cu8mzg] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-1zg2cu8mzg] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-list[b-1zg2cu8mzg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-1zg2cu8mzg] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-button:hover[b-1zg2cu8mzg] {
    border-color: var(--green);
    color: var(--green);
}

.action-button:disabled[b-1zg2cu8mzg] {
    opacity: .55;

    cursor: not-allowed;
}

.primary-action[b-1zg2cu8mzg] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-1zg2cu8mzg] {
    color: #fff;

    filter: brightness(.96);
}

.warning-action[b-1zg2cu8mzg] {
    border-color: #fdb022;

    color: #b54708;
}

.warning-action:hover[b-1zg2cu8mzg] {
    background: #fffaeb;

    color: #b54708;
}

.danger-action[b-1zg2cu8mzg] {
    color: #b42318;
}

.danger-action:hover[b-1zg2cu8mzg] {
    border-color: #fda29b;

    background: #fff7f7;
    color: #b42318;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .summary-grid[b-1zg2cu8mzg] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .page-head[b-1zg2cu8mzg] {
        flex-direction: column;
    }

    .order-summary-card[b-1zg2cu8mzg] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-1zg2cu8mzg] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-1zg2cu8mzg] {
        grid-column: auto;
    }

    .back-button[b-1zg2cu8mzg] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-1zg2cu8mzg] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Orders/OperatorOrders.razor.rz.scp.css */
.operator-orders-page[b-fd5qz4vy0e] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.orders-summary[b-fd5qz4vy0e] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-fd5qz4vy0e] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-fd5qz4vy0e] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-fd5qz4vy0e] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-fd5qz4vy0e] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Order
========================= */

.order-cell[b-fd5qz4vy0e] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.order-avatar[b-fd5qz4vy0e] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.order-cell > div:last-child[b-fd5qz4vy0e] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.order-cell strong[b-fd5qz4vy0e] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.order-cell span[b-fd5qz4vy0e] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Customer / Supplier
========================= */

.customer-cell[b-fd5qz4vy0e],
.supplier-cell[b-fd5qz4vy0e] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.customer-cell strong[b-fd5qz4vy0e],
.supplier-cell strong[b-fd5qz4vy0e] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.customer-cell span[b-fd5qz4vy0e],
.supplier-cell span[b-fd5qz4vy0e] {
    color: var(--muted);

    font-size: 10px;
}

.ltr-value[b-fd5qz4vy0e] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Status
========================= */

.status-badge[b-fd5qz4vy0e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-fd5qz4vy0e] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-fd5qz4vy0e] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-fd5qz4vy0e] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-fd5qz4vy0e] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-fd5qz4vy0e] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-fd5qz4vy0e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-fd5qz4vy0e] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-fd5qz4vy0e] {
    border-color: var(--green);
    color: var(--green);
}

.success-action[b-fd5qz4vy0e] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-fd5qz4vy0e] {
    background: rgba(58, 125, 68, .05);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .orders-summary[b-fd5qz4vy0e] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .orders-summary[b-fd5qz4vy0e] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Requests/OperatorRequestDetails.razor.rz.scp.css */
.operator-request-details-page[b-3sqbrt6e3r] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-3sqbrt6e3r] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-3sqbrt6e3r] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-3sqbrt6e3r] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-3sqbrt6e3r] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-3sqbrt6e3r] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-3sqbrt6e3r] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.request-summary-card[b-3sqbrt6e3r] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.request-main[b-3sqbrt6e3r] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.request-avatar[b-3sqbrt6e3r] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.request-main > div:last-child[b-3sqbrt6e3r] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.request-main strong[b-3sqbrt6e3r] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.request-main span[b-3sqbrt6e3r] {
    color: var(--muted);

    font-size: 10px;
}

.request-statuses[b-3sqbrt6e3r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Cards
========================= */

.details-grid[b-3sqbrt6e3r] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-3sqbrt6e3r] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-3sqbrt6e3r] {
    grid-column: 1 / -1;
}

.details-card h3[b-3sqbrt6e3r] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-3sqbrt6e3r] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-3sqbrt6e3r] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-3sqbrt6e3r] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-3sqbrt6e3r] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-3sqbrt6e3r] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-3sqbrt6e3r] {
    direction: ltr;
    unicode-bidi: plaintext;
}

.card-actions[b-3sqbrt6e3r] {
    margin-top: 16px;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-3sqbrt6e3r] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-3sqbrt6e3r] {
    margin-bottom: 5px;
}

.card-title-row p[b-3sqbrt6e3r] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Items Table
========================= */

.table-wrap[b-3sqbrt6e3r] {
    width: 100%;

    overflow-x: auto;
}

.request-items-table[b-3sqbrt6e3r] {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
}

.request-items-table th[b-3sqbrt6e3r],
.request-items-table td[b-3sqbrt6e3r] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.request-items-table th[b-3sqbrt6e3r] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.request-items-table td[b-3sqbrt6e3r] {
    color: var(--text);

    font-size: 12px;
}

.request-items-table tbody tr:last-child td[b-3sqbrt6e3r] {
    border-bottom: 0;
}

.request-items-table tbody tr:hover[b-3sqbrt6e3r] {
    background: #fcfdfd;
}


/* =========================
   Item
========================= */

.item-cell[b-3sqbrt6e3r] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.item-avatar[b-3sqbrt6e3r] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.item-cell > div:last-child[b-3sqbrt6e3r] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.item-cell strong[b-3sqbrt6e3r] {
    color: var(--text);

    font-size: 12px;
}

.item-cell span[b-3sqbrt6e3r] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Description
========================= */

.description-box[b-3sqbrt6e3r] {
    min-height: 100px;
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}


/* =========================
   Timeline
========================= */

.timeline[b-3sqbrt6e3r] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.timeline-item[b-3sqbrt6e3r] {
    position: relative;

    padding-right: 28px;

    min-height: 58px;
}

.timeline-item:not(:last-child)[b-3sqbrt6e3r]::after {
    content: "";

    position: absolute;

    top: 15px;
    right: 5px;

    width: 1px;
    height: calc(100% + 12px);

    background: #e4e7ec;
}

.timeline-dot[b-3sqbrt6e3r] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-3sqbrt6e3r] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-3sqbrt6e3r] {
    background: var(--orange);
}

.timeline-content[b-3sqbrt6e3r] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.timeline-content strong[b-3sqbrt6e3r] {
    color: var(--text);

    font-size: 12px;
}

.timeline-content span[b-3sqbrt6e3r] {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.8;
}

.timeline-content small[b-3sqbrt6e3r] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Field
========================= */

.field-group textarea[b-3sqbrt6e3r] {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-3sqbrt6e3r] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Status
========================= */

.status-badge[b-3sqbrt6e3r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-3sqbrt6e3r] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-3sqbrt6e3r] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-3sqbrt6e3r] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-3sqbrt6e3r] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-3sqbrt6e3r] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-list[b-3sqbrt6e3r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-3sqbrt6e3r] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-button:hover[b-3sqbrt6e3r] {
    border-color: var(--green);
    color: var(--green);
}

.action-button:disabled[b-3sqbrt6e3r] {
    opacity: .55;

    cursor: not-allowed;
}

.primary-action[b-3sqbrt6e3r] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-3sqbrt6e3r] {
    color: #fff;

    filter: brightness(.96);
}

.success-action[b-3sqbrt6e3r] {
    color: var(--green);
}

.success-action:hover[b-3sqbrt6e3r] {
    background: rgba(58, 125, 68, .05);
}

.danger-action[b-3sqbrt6e3r] {
    color: #b42318;
}

.danger-action:hover[b-3sqbrt6e3r] {
    border-color: #fda29b;

    background: #fff7f7;
    color: #b42318;
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {

    .page-head[b-3sqbrt6e3r] {
        flex-direction: column;
    }

    .request-summary-card[b-3sqbrt6e3r] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-3sqbrt6e3r] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-3sqbrt6e3r] {
        grid-column: auto;
    }

    .back-button[b-3sqbrt6e3r] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Requests/OperatorRequests.razor.rz.scp.css */
.operator-requests-page[b-tzotd9u7nf] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.requests-summary[b-tzotd9u7nf] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-tzotd9u7nf] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-tzotd9u7nf] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-tzotd9u7nf] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-tzotd9u7nf] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Request
========================= */

.request-cell[b-tzotd9u7nf] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.request-avatar[b-tzotd9u7nf] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.request-cell > div:last-child[b-tzotd9u7nf] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.request-cell strong[b-tzotd9u7nf] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.request-cell span[b-tzotd9u7nf] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Customer
========================= */

.customer-cell[b-tzotd9u7nf] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.customer-cell strong[b-tzotd9u7nf] {
    color: var(--text);

    font-size: 13px;
}

.customer-cell span[b-tzotd9u7nf] {
    color: var(--muted);

    font-size: 10px;
}

.ltr-value[b-tzotd9u7nf] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Reference
========================= */

.reference-link[b-tzotd9u7nf] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-tzotd9u7nf] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-tzotd9u7nf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-tzotd9u7nf] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-tzotd9u7nf] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-tzotd9u7nf] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-tzotd9u7nf] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-tzotd9u7nf] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-tzotd9u7nf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-tzotd9u7nf] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-tzotd9u7nf] {
    border-color: var(--green);

    color: var(--green);
}

.success-action[b-tzotd9u7nf] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-tzotd9u7nf] {
    background: rgba(58, 125, 68, .05);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .requests-summary[b-tzotd9u7nf] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .requests-summary[b-tzotd9u7nf] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Shipments/OperatorShipmentDetails.razor.rz.scp.css */
.operator-shipment-details-page[b-53vb9k2eci] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-53vb9k2eci] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-53vb9k2eci] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-53vb9k2eci] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-53vb9k2eci] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-53vb9k2eci] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-53vb9k2eci] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.shipment-summary-card[b-53vb9k2eci] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.shipment-main[b-53vb9k2eci] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.shipment-avatar[b-53vb9k2eci] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.shipment-main > div:last-child[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.shipment-main strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.shipment-main span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 10px;
}

.shipment-statuses[b-53vb9k2eci] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Cards
========================= */

.summary-grid[b-53vb9k2eci] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-53vb9k2eci] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.summary-card small[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Cards
========================= */

.details-grid[b-53vb9k2eci] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-53vb9k2eci] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-53vb9k2eci] {
    grid-column: 1 / -1;
}

.details-card h3[b-53vb9k2eci] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-53vb9k2eci] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-53vb9k2eci] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 13px;
}

.reference-link[b-53vb9k2eci] {
    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-53vb9k2eci] {
    text-decoration: underline;
}

.ltr-value[b-53vb9k2eci] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Courier
========================= */

.empty-courier[b-53vb9k2eci] {
    min-height: 100px;

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

    gap: 5px;

    border: 1px dashed var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.empty-courier strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 12px;
}

.empty-courier span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 10px;
}

.courier-profile[b-53vb9k2eci] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.courier-avatar[b-53vb9k2eci] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.courier-profile > div:last-child[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.courier-profile strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 12px;
}

.courier-profile span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 9px;
}

.courier-details[b-53vb9k2eci] {
    margin-top: 10px;
}


/* =========================
   Location
========================= */

.location-card[b-53vb9k2eci] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid rgba(58, 125, 68, .15);
    border-radius: 12px;

    background: rgba(58, 125, 68, .03);
}

.location-card.customer-location[b-53vb9k2eci] {
    border-color: #b2ddff;

    background: #f5fbff;
}

.location-icon[b-53vb9k2eci] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 11px;

    background: #fff;
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.customer-location .location-icon[b-53vb9k2eci] {
    color: #175cd3;
}

.location-card > div:last-child[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.location-card strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 12px;
}

.location-card span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 9px;
}

.location-details[b-53vb9k2eci] {
    margin-top: 10px;
}

.address-box[b-53vb9k2eci] {
    margin-top: 12px;
    padding: 13px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-53vb9k2eci] {
    margin-bottom: 18px;
}

.card-title-row h3[b-53vb9k2eci] {
    margin-bottom: 5px;
}

.card-title-row p[b-53vb9k2eci] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Couriers
========================= */

.couriers-grid[b-53vb9k2eci] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.courier-card[b-53vb9k2eci] {
    padding: 16px;

    display: flex;
    flex-direction: column;

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
}

.courier-card.recommended[b-53vb9k2eci] {
    border-color: rgba(58, 125, 68, .3);

    background: rgba(58, 125, 68, .025);
}

.courier-card.disabled[b-53vb9k2eci] {
    opacity: .55;
}

.courier-card-head[b-53vb9k2eci] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 10px;
}

.courier-main[b-53vb9k2eci] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.courier-main > div:last-child[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.courier-main strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 12px;
}

.courier-main span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 9px;
}

.courier-stats[b-53vb9k2eci] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.courier-stats > div[b-53vb9k2eci] {
    padding: 9px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    border-radius: 9px;

    background: #fafbfc;
}

.courier-stats span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 8px;
}

.courier-stats strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 10px;
}

.select-courier-button[b-53vb9k2eci] {
    width: 100%;
    min-height: 38px;

    margin-top: auto;

    border: 1px solid var(--green);
    border-radius: 9px;

    background: #fff;
    color: var(--green);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.select-courier-button:hover[b-53vb9k2eci] {
    background: var(--green);
    color: #fff;
}

.select-courier-button:disabled[b-53vb9k2eci] {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================
   Timeline
========================= */

.shipment-timeline[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}

.timeline-item[b-53vb9k2eci] {
    min-height: 60px;

    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);

    gap: 10px;
}

.timeline-marker[b-53vb9k2eci] {
    position: relative;

    display: flex;
    justify-content: center;
}

.timeline-item:not(:last-child)
.timeline-marker[b-53vb9k2eci]::after {
    content: "";

    position: absolute;

    top: 15px;

    width: 1px;
    height: calc(100% + 10px);

    background: #e4e7ec;
}

.timeline-dot[b-53vb9k2eci] {
    position: relative;

    width: 11px;
    height: 11px;

    margin-top: 5px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.timeline-item.completed .timeline-dot[b-53vb9k2eci] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-53vb9k2eci] {
    background: var(--orange);
}

.timeline-content[b-53vb9k2eci] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.timeline-content strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 12px;
}

.timeline-content span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 11px;
    line-height: 1.8;
}

.timeline-content small[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Courier Update
========================= */

.courier-update-grid[b-53vb9k2eci] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.courier-update-card[b-53vb9k2eci] {
    min-height: 80px;
    padding: 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.courier-update-card span[b-53vb9k2eci] {
    color: var(--muted);

    font-size: 9px;
}

.courier-update-card strong[b-53vb9k2eci] {
    color: var(--text);

    font-size: 11px;
}

.online-value[b-53vb9k2eci] {
    color: #027a48 !important;
}


/* =========================
   Field
========================= */

.field-group textarea[b-53vb9k2eci] {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-53vb9k2eci] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Status
========================= */

.status-badge[b-53vb9k2eci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-53vb9k2eci] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-53vb9k2eci] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-53vb9k2eci] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-53vb9k2eci] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-53vb9k2eci] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-list[b-53vb9k2eci] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-53vb9k2eci] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-button:hover[b-53vb9k2eci] {
    border-color: var(--green);

    color: var(--green);
}

.action-button:disabled[b-53vb9k2eci] {
    opacity: .55;

    cursor: not-allowed;
}

.primary-action[b-53vb9k2eci] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-53vb9k2eci] {
    color: #fff;

    filter: brightness(.96);
}

.warning-action[b-53vb9k2eci] {
    border-color: #fdb022;

    color: #b54708;
}

.warning-action:hover[b-53vb9k2eci] {
    background: #fffaeb;

    color: #b54708;
}

.danger-action[b-53vb9k2eci] {
    color: #b42318;
}

.danger-action:hover[b-53vb9k2eci] {
    border-color: #fda29b;

    background: #fff7f7;
    color: #b42318;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .couriers-grid[b-53vb9k2eci] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .summary-grid[b-53vb9k2eci],
    .courier-update-grid[b-53vb9k2eci] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .page-head[b-53vb9k2eci] {
        flex-direction: column;
    }

    .shipment-summary-card[b-53vb9k2eci] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-53vb9k2eci] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-53vb9k2eci] {
        grid-column: auto;
    }

    .back-button[b-53vb9k2eci] {
        width: 100%;
    }
}

@media (max-width: 650px) {

    .summary-grid[b-53vb9k2eci],
    .couriers-grid[b-53vb9k2eci],
    .courier-stats[b-53vb9k2eci],
    .courier-update-grid[b-53vb9k2eci] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Shipments/OperatorShipments.razor.rz.scp.css */
.operator-shipments-page[b-6nba1vv76q] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.shipments-summary[b-6nba1vv76q] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-6nba1vv76q] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-6nba1vv76q] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-6nba1vv76q] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-6nba1vv76q] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Shipment
========================= */

.shipment-cell[b-6nba1vv76q] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.shipment-avatar[b-6nba1vv76q] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.shipment-cell > div:last-child[b-6nba1vv76q] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.shipment-cell strong[b-6nba1vv76q] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.shipment-cell span[b-6nba1vv76q] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Cells
========================= */

.customer-cell[b-6nba1vv76q],
.courier-cell[b-6nba1vv76q],
.origin-cell[b-6nba1vv76q] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.customer-cell strong[b-6nba1vv76q],
.courier-cell strong[b-6nba1vv76q],
.origin-cell strong[b-6nba1vv76q] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.customer-cell span[b-6nba1vv76q],
.courier-cell span[b-6nba1vv76q],
.origin-cell span[b-6nba1vv76q] {
    color: var(--muted);

    font-size: 10px;
}

.ltr-value[b-6nba1vv76q] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Reference
========================= */

.reference-link[b-6nba1vv76q] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-6nba1vv76q] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-6nba1vv76q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-6nba1vv76q] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-6nba1vv76q] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-6nba1vv76q] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-6nba1vv76q] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-6nba1vv76q] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-6nba1vv76q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-6nba1vv76q] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-6nba1vv76q] {
    border-color: var(--green);
    color: var(--green);
}

.success-action[b-6nba1vv76q] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-6nba1vv76q] {
    background: rgba(58, 125, 68, .05);
}

.warning-action[b-6nba1vv76q] {
    border-color: #fdb022;

    color: #b54708;
}

.warning-action:hover[b-6nba1vv76q] {
    background: #fffaeb;

    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .shipments-summary[b-6nba1vv76q] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .shipments-summary[b-6nba1vv76q] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Tickets/OperatorTicketDetails.razor.rz.scp.css */
.operator-ticket-details-page[b-zqpjrjsjxu] {
    width: 100%;
}


/* =========================
   Header
========================= */

.ticket-head[b-zqpjrjsjxu] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.ticket-head > div:first-child > span[b-zqpjrjsjxu] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.ticket-head h1[b-zqpjrjsjxu] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.ticket-head p[b-zqpjrjsjxu] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-zqpjrjsjxu] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-zqpjrjsjxu] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.ticket-summary[b-zqpjrjsjxu] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.summary-main[b-zqpjrjsjxu] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-zqpjrjsjxu] {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.summary-main > div:last-child[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.summary-main strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.summary-main span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 11px;
}

.summary-badges[b-zqpjrjsjxu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-zqpjrjsjxu] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 1fr);

    gap: 18px;
}

.conversation-card[b-zqpjrjsjxu],
.details-card[b-zqpjrjsjxu] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.ticket-side[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Conversation
========================= */

.conversation-head[b-zqpjrjsjxu] {
    margin-bottom: 18px;
}

.conversation-head h2[b-zqpjrjsjxu] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.conversation-head p[b-zqpjrjsjxu] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.messages-list[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.message-item[b-zqpjrjsjxu] {
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 14px;
}

.operator-message[b-zqpjrjsjxu] {
    margin-left: 45px;

    background: #f5fbff;

    border-color: #b2ddff;
}

.external-message[b-zqpjrjsjxu] {
    margin-right: 45px;

    background: rgba(58, 125, 68, .035);

    border-color: rgba(58, 125, 68, .14);
}

.message-head[b-zqpjrjsjxu] {
    margin-bottom: 11px;

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

    gap: 14px;
}

.sender-info[b-zqpjrjsjxu] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.sender-avatar[b-zqpjrjsjxu] {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.operator-message .sender-avatar[b-zqpjrjsjxu] {
    background: #eff8ff;
    color: #175cd3;
}

.sender-info > div:last-child[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sender-info strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 11px;
    font-weight: 900;
}

.sender-info span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 9px;
}

.message-body p[b-zqpjrjsjxu] {
    margin: 0;

    color: var(--text);

    font-size: 12px;
    line-height: 2;
}


/* =========================
   Attachment
========================= */

.attachment-item[b-zqpjrjsjxu] {
    margin-top: 13px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
}

.attachment-icon[b-zqpjrjsjxu] {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 8px;

    background: #f2f4f7;
    color: var(--muted);

    font-size: 10px;
    font-weight: 900;
}

.attachment-item > div:nth-child(2)[b-zqpjrjsjxu] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.attachment-item strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 10px;
}

.attachment-item span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 9px;
}

.attachment-button[b-zqpjrjsjxu] {
    min-height: 31px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-button:hover[b-zqpjrjsjxu] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Reply
========================= */

.reply-box[b-zqpjrjsjxu] {
    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid var(--soft);
}

.reply-head[b-zqpjrjsjxu] {
    margin-bottom: 10px;
}

.reply-head > div[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reply-head strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.reply-head span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 10px;
}

.reply-box textarea[b-zqpjrjsjxu] {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.reply-box textarea:focus[b-zqpjrjsjxu] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.reply-toolbar[b-zqpjrjsjxu] {
    margin-top: 10px;

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

    gap: 10px;
}

.attachment-action[b-zqpjrjsjxu] {
    min-height: 39px;
    padding: 0 13px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-action:hover[b-zqpjrjsjxu] {
    border-color: var(--green);
    color: var(--green);
}

.send-button[b-zqpjrjsjxu] {
    min-height: 40px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.send-button:disabled[b-zqpjrjsjxu] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Closed
========================= */

.closed-note[b-zqpjrjsjxu] {
    margin-top: 22px;
    padding: 16px;

    display: flex;
    flex-direction: column;

    gap: 4px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #f9fafb;
}

.closed-note strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 12px;
}

.closed-note span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Side Cards
========================= */

.details-card h3[b-zqpjrjsjxu] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.details-list[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-zqpjrjsjxu] {
    min-height: 53px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-zqpjrjsjxu] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Subject
========================= */

.ticket-subject[b-zqpjrjsjxu] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;

    color: var(--text);

    font-size: 12px;
    line-height: 1.9;
}


/* =========================
   Reference
========================= */

.reference-card[b-zqpjrjsjxu] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.reference-icon[b-zqpjrjsjxu] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.reference-info[b-zqpjrjsjxu] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reference-info span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 9px;
}

.reference-info strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 11px;
}

.reference-action[b-zqpjrjsjxu] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.reference-action:hover[b-zqpjrjsjxu] {
    border-color: var(--green);
    color: var(--green);
}

.secondary-reference[b-zqpjrjsjxu] {
    margin-top: 12px;
    padding-top: 12px;

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

    gap: 12px;

    border-top: 1px solid #f0f2f4;
}

.secondary-reference span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 10px;
}

.secondary-reference a[b-zqpjrjsjxu] {
    color: var(--green);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Participant
========================= */

.participant-card[b-zqpjrjsjxu] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.participant-avatar[b-zqpjrjsjxu] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.participant-card > div:last-child[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.participant-card strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 11px;
}

.participant-card span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 9px;
}

.participant-details[b-zqpjrjsjxu] {
    margin-top: 10px;
}


/* =========================
   Tracking
========================= */

.tracking-list[b-zqpjrjsjxu] {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 17px;
}

.tracking-item[b-zqpjrjsjxu] {
    position: relative;

    padding-right: 24px;
}

.tracking-item:not(:last-child)[b-zqpjrjsjxu]::after {
    content: "";

    position: absolute;

    top: 14px;
    right: 5px;

    width: 1px;
    height: calc(100% + 10px);

    background: #e4e7ec;
}

.tracking-dot[b-zqpjrjsjxu] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.tracking-item.completed .tracking-dot[b-zqpjrjsjxu] {
    background: var(--green);
}

.tracking-item.active .tracking-dot[b-zqpjrjsjxu] {
    background: var(--orange);
}

.tracking-item > div:last-child[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.tracking-item strong[b-zqpjrjsjxu] {
    color: var(--text);

    font-size: 10px;
}

.tracking-item span[b-zqpjrjsjxu] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}


/* =========================
   Side Actions
========================= */

.status-actions[b-zqpjrjsjxu],
.side-actions[b-zqpjrjsjxu] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-zqpjrjsjxu] {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.side-action:hover[b-zqpjrjsjxu] {
    border-color: var(--green);
    color: var(--green);
}

.side-action:disabled[b-zqpjrjsjxu] {
    opacity: .55;

    cursor: not-allowed;
}

.warning-side-action[b-zqpjrjsjxu] {
    border-color: #fdb022;
    color: #b54708;
}

.warning-side-action:hover[b-zqpjrjsjxu] {
    background: #fffaeb;

    border-color: #fdb022;
    color: #b54708;
}

.success-side-action[b-zqpjrjsjxu] {
    border-color: var(--green);
    color: var(--green);
}

.success-side-action:hover[b-zqpjrjsjxu] {
    background: rgba(58, 125, 68, .05);

    color: var(--green);
}


/* =========================
   Status
========================= */

.status-badge[b-zqpjrjsjxu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-zqpjrjsjxu] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-zqpjrjsjxu] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-zqpjrjsjxu] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-zqpjrjsjxu] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-zqpjrjsjxu] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .ticket-layout[b-zqpjrjsjxu] {
        grid-template-columns: 1fr;
    }

    .operator-message[b-zqpjrjsjxu],
    .external-message[b-zqpjrjsjxu] {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 700px) {

    .ticket-head[b-zqpjrjsjxu],
    .ticket-summary[b-zqpjrjsjxu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .back-button[b-zqpjrjsjxu] {
        width: 100%;
    }

    .reply-toolbar[b-zqpjrjsjxu] {
        align-items: stretch;
        flex-direction: column;
    }

    .attachment-action[b-zqpjrjsjxu],
    .send-button[b-zqpjrjsjxu] {
        width: 100%;
    }

    .message-head[b-zqpjrjsjxu] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Operations/Pages/Tickets/OperatorTickets.razor.rz.scp.css */
.operator-tickets-page[b-0xiq13vdd4] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.tickets-summary[b-0xiq13vdd4] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-0xiq13vdd4] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-0xiq13vdd4] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-0xiq13vdd4] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-0xiq13vdd4] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Ticket
========================= */

.ticket-cell[b-0xiq13vdd4] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.ticket-avatar[b-0xiq13vdd4] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-0xiq13vdd4] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.ticket-cell strong[b-0xiq13vdd4] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.ticket-cell span[b-0xiq13vdd4] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Reference
========================= */

.reference-link[b-0xiq13vdd4] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-0xiq13vdd4] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-0xiq13vdd4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-0xiq13vdd4] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-0xiq13vdd4] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-0xiq13vdd4] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-0xiq13vdd4] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-0xiq13vdd4] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-0xiq13vdd4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-0xiq13vdd4] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-0xiq13vdd4] {
    border-color: var(--green);

    color: var(--green);
}

.success-action[b-0xiq13vdd4] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-0xiq13vdd4] {
    background: rgba(58, 125, 68, .05);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .tickets-summary[b-0xiq13vdd4] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .tickets-summary[b-0xiq13vdd4] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Orders/PanelOrderDetails.razor.rz.scp.css */
.order-details[b-ej212esu3s] {
    width: 100%;
    color: var(--text, #475467);
    font-size: 17px;
}

.order-details *[b-ej212esu3s] {
    box-sizing: border-box;
}

.details-head[b-ej212esu3s],
.delivery-head[b-ej212esu3s],
.item-head[b-ej212esu3s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.details-head[b-ej212esu3s] {
    margin-bottom: 24px;
}

.details-head > div > span[b-ej212esu3s] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

.details-head h1[b-ej212esu3s] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

.details-head p[b-ej212esu3s],
.delivery-head p[b-ej212esu3s] {
    margin: 8px 0 0;
    color: var(--muted, #667085);
    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-ej212esu3s],
.item-actions[b-ej212esu3s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.order-summary[b-ej212esu3s] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.order-summary > div[b-ej212esu3s] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
}

.order-summary span[b-ej212esu3s],
.order-summary small[b-ej212esu3s] {
    color: var(--muted, #667085);
    font-size: 16px;
}

.order-summary strong[b-ej212esu3s] {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;
}

.order-card[b-ej212esu3s] {
    min-width: 0;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ec;
    border-radius: 18px;
    background: #fff;
    line-height: 1.9;
}

.order-card h2[b-ej212esu3s] {
    margin: 0 0 18px;
    font-size: 21px;
    font-weight: 900;
}

.details-list[b-ej212esu3s] {
    margin: 0;
}

.details-list > div[b-ej212esu3s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 15px 0;
    border-bottom: 1px solid #eef0f3;
}

.details-list > div:last-child[b-ej212esu3s] {
    border-bottom: 0;
}

.details-list dt[b-ej212esu3s] {
    flex-shrink: 0;
    color: var(--muted, #667085);
    font-size: 17px;
}

.details-list dd[b-ej212esu3s] {
    min-width: 0;
    margin: 0;
    text-align: left;
    font-size: 17px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.order-item + .order-item[b-ej212esu3s] {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e4e7ec;
}

.item-head[b-ej212esu3s] {
    margin-bottom: 18px;
}

.item-head > div[b-ej212esu3s] {
    min-width: 0;
}

.item-head h3[b-ej212esu3s] {
    margin: 0 0 7px;
    font-size: 19px;
    font-weight: 900;
}

.item-head span[b-ej212esu3s] {
    color: var(--muted, #667085);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.money[b-ej212esu3s] {
    color: var(--green, #3a7d44);
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.items-table-wrap[b-ej212esu3s] {
    overflow-x: auto;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

.items-table[b-ej212esu3s] {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
}

.items-table th[b-ej212esu3s],
.items-table td[b-ej212esu3s] {
    padding: 15px;
    border-bottom: 1px solid #eef0f3;
    text-align: right;
    font-size: 17px;
}

.items-table th[b-ej212esu3s] {
    background: #f8faf9;
    color: var(--muted, #667085);
    font-weight: 800;
}

.items-table tr:last-child td[b-ej212esu3s] {
    border-bottom: 0;
}

.item-actions[b-ej212esu3s] {
    margin-top: 16px;
}

.delivery-notice[b-ej212esu3s],
.pickup-notice[b-ej212esu3s] {
    margin-top: 18px;
    padding: 16px;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.delivery-notice[b-ej212esu3s] {
    border: 1px solid #fedf89;
    background: #fffcf5;
    color: #875408;
}

.pickup-notice[b-ej212esu3s] {
    border: 1px solid #cde4d1;
    background: #f0f7f2;
    color: #357140;
}

.timeline-title[b-ej212esu3s] {
    margin: 26px 0 16px;
    font-size: 19px;
    font-weight: 900;
}

.delivery-timeline[b-ej212esu3s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.delivery-timeline li[b-ej212esu3s] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f8fafc;
}

.delivery-timeline strong[b-ej212esu3s] {
    font-size: 17px;
}

.delivery-timeline span[b-ej212esu3s] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.delivery-timeline li.done[b-ej212esu3s] {
    border-color: #cde4d1;
    background: #f0f7f2;
}

.delivery-timeline li.done strong[b-ej212esu3s] {
    color: #357140;
}

.delivery-action[b-ej212esu3s] {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid #cde4d1;
    border-radius: 14px;
    background: #f8fcf9;
}

.delivery-action h3[b-ej212esu3s] {
    margin: 0 0 15px;
    font-size: 20px;
}

.delivery-action > label[b-ej212esu3s] {
    display: block;
    margin-bottom: 9px;
    font-size: 17px;
}

.delivery-action > input[b-ej212esu3s] {
    width: 100%;
    min-height: 47px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
}

.delivery-action .confirm-action[b-ej212esu3s] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 18px 0;
    cursor: pointer;
}

.confirm-action input[b-ej212esu3s] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 6px;
    accent-color: var(--green, #3a7d44);
}

.order-button[b-ej212esu3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 9px 15px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.order-button.primary[b-ej212esu3s] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.order-button:disabled[b-ej212esu3s] {
    opacity: .5;
    cursor: not-allowed;
}

.order-badge[b-ej212esu3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.order-badge.success[b-ej212esu3s] {
    background: #ecfdf3;
    color: #027a48;
}

.order-badge.info[b-ej212esu3s] {
    background: #eff8ff;
    color: #175cd3;
}

.order-badge.warning[b-ej212esu3s] {
    background: #fffaeb;
    color: #b54708;
}

.order-message[b-ej212esu3s] {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.order-message.error[b-ej212esu3s] {
    border-color: #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.order-message.success[b-ej212esu3s] {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #027a48;
}

.state[b-ej212esu3s] {
    padding: 40px 24px;
    text-align: center;
    font-size: 18px;
}

button:focus-visible[b-ej212esu3s],
a:focus-visible[b-ej212esu3s],
input:focus-visible[b-ej212esu3s] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 1050px) {
    .order-summary[b-ej212esu3s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .details-head[b-ej212esu3s],
    .delivery-head[b-ej212esu3s],
    .item-head[b-ej212esu3s] {
        flex-direction: column;
        align-items: stretch;
    }

    .order-card[b-ej212esu3s] {
        padding: 18px;
    }

    .delivery-timeline[b-ej212esu3s] {
        grid-template-columns: 1fr;
    }

    .details-list > div[b-ej212esu3s] {
        flex-direction: column;
        gap: 7px;
    }

    .details-list dd[b-ej212esu3s] {
        text-align: right;
    }

    .head-actions > *[b-ej212esu3s] {
        flex: 1;
    }
}

@media (max-width: 430px) {
    .order-summary[b-ej212esu3s] {
        grid-template-columns: 1fr;
    }
}
.order-item-meta[b-ej212esu3s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 16px;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 1.9;
}

.order-item-meta strong[b-ej212esu3s] {
    color: var(--text, #475467);
}

.order-item-type[b-ej212esu3s] {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    background: #eef6f0;
    color: #3a7d44;
    font-size: 15px;
    font-weight: 800;
}

.delivery-weight[b-ej212esu3s] {
    display: block;
    margin-top: 9px;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 1.9;
}

.delivery-contents[b-ej212esu3s] {
    margin: 22px 0;
    padding: 18px;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #fbfcfd;
}

.delivery-contents h3[b-ej212esu3s] {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--text, #475467);
}

.delivery-contents ul[b-ej212esu3s] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.delivery-contents li[b-ej212esu3s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #e4e7ec;
    font-size: 17px;
    line-height: 1.9;
}

.delivery-contents li:last-child[b-ej212esu3s] {
    padding-bottom: 0;
    border-bottom: 0;
}

.delivery-contents li > div[b-ej212esu3s] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.delivery-contents li > div > span[b-ej212esu3s] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.delivery-contents li > .money[b-ej212esu3s] {
    flex-shrink: 0;
}

.coordination-notice[b-ej212esu3s] {
    margin-top: 16px;
    padding: 18px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffcf5;
    color: #875408;
    line-height: 2;
}

.coordination-notice strong[b-ej212esu3s] {
    font-size: 18px;
}

.coordination-notice p[b-ej212esu3s] {
    margin: 8px 0 0;
    font-size: 17px;
}

@media (max-width: 650px) {
    .delivery-contents li[b-ej212esu3s] {
        flex-direction: column;
        gap: 8px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalArticlesSection.razor.rz.scp.css */
.animal-articles[b-8pg0g5vqf6] {
    padding: 72px 0 76px;

    background: var(--cream);
}


.section-head[b-8pg0g5vqf6] {
    margin-bottom: 36px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}


.section-head > div > span[b-8pg0g5vqf6] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-8pg0g5vqf6] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-8pg0g5vqf6] {
    max-width: 720px;

    margin: 10px 0 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.public-button[b-8pg0g5vqf6] {
    min-height: 48px;
    padding: 0 20px;

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

    flex: 0 0 auto;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.public-button:hover[b-8pg0g5vqf6] {
    transform: translateY(-2px);
}


.public-button.outline[b-8pg0g5vqf6] {
    border-color: var(--soft);

    background: #fff;
    color: var(--text);
}


.public-button.outline:hover[b-8pg0g5vqf6] {
    border-color: var(--green);

    color: var(--green);
}


.articles-grid[b-8pg0g5vqf6] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 500px));

    align-items: stretch;
    justify-content: center;

    gap: 22px;
}


.article-card[b-8pg0g5vqf6] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 24px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.article-card:hover[b-8pg0g5vqf6] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .34);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, .1);
}


.article-image[b-8pg0g5vqf6] {
    height: 205px;

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

    flex: 0 0 205px;

    overflow: hidden;

    background: #f3f7f3;

    text-decoration: none;
}


.article-image img[b-8pg0g5vqf6] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .35s ease;
}


.article-card:hover .article-image img[b-8pg0g5vqf6] {
    transform: scale(1.045);
}


.image-placeholder[b-8pg0g5vqf6] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--muted);

    font-size: 55px;
}


.article-body[b-8pg0g5vqf6] {
    min-height: 245px;
    padding: 18px 20px 20px;

    display: flex;
    flex: 1;
    flex-direction: column;
}


.article-meta[b-8pg0g5vqf6] {
    width: 100%;

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

    gap: 18px;

    color: #667085;

    direction: rtl;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
}


.reading-time[b-8pg0g5vqf6] {
    text-align: right;
}


.publish-date[b-8pg0g5vqf6] {
    margin-right: auto;

    text-align: left;

    white-space: nowrap;
}


.article-body h3[b-8pg0g5vqf6] {
    margin: 11px 0 7px;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;
}


.article-body h3 a[b-8pg0g5vqf6] {
    color: inherit;

    text-decoration: none;
}


.article-summary[b-8pg0g5vqf6] {
    margin: 0;

    overflow: hidden;

    color: #667085;

    font-size: 15px;
    font-weight: 500;
    line-height: 2;

    display: -webkit-box;

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


.article-link[b-8pg0g5vqf6] {
    margin-top: auto;
    padding-top: 14px;

    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    gap: 7px;

    color: var(--green);

    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition:
        gap .2s ease,
        color .2s ease;
}


.article-link:hover[b-8pg0g5vqf6] {
    gap: 10px;

    color: var(--orange);
}


@media (max-width: 850px) {

    .section-head[b-8pg0g5vqf6] {
        align-items: flex-start;
        flex-direction: column;
    }


    .articles-grid[b-8pg0g5vqf6] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }
}


@media (max-width: 620px) {

    .animal-articles[b-8pg0g5vqf6] {
        padding: 70px 0;
    }


    .section-head[b-8pg0g5vqf6] {
        margin-bottom: 30px;
    }


    .section-head h2[b-8pg0g5vqf6] {
        font-size: 28px;
    }


    .articles-grid[b-8pg0g5vqf6] {
        grid-template-columns: 1fr;
    }


    .article-image[b-8pg0g5vqf6] {
        height: 220px;

        flex-basis: 220px;
    }


    .article-body[b-8pg0g5vqf6] {
        min-height: 0;

        padding: 18px;
    }


    .article-meta[b-8pg0g5vqf6] {
        font-size: 12px;
    }


    .article-body h3[b-8pg0g5vqf6] {
        font-size: 20px;
    }


    .article-summary[b-8pg0g5vqf6] {
        font-size: 14px;
    }


    .public-button[b-8pg0g5vqf6] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalAttributesSection.razor.rz.scp.css */
.animal-attributes[b-c97741muhm] {
    position: relative;

    padding: 84px 0 88px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #edf7ef 0%,
            #f7fafc 48%,
            #edf3fb 100%);
}


.animal-attributes[b-c97741muhm]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .1) 0 4px,
            transparent 5px),
        radial-gradient(
            circle,
            rgba(36, 89, 166, .1) 0 4px,
            transparent 5px);

    background-position:
        0 0,
        55px 55px;

    background-size:
        110px 110px;

    opacity: .5;
}


.attribute-shape[b-c97741muhm] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-c97741muhm] {
    width: 340px;
    height: 340px;

    top: -210px;
    right: -100px;

    background:
        rgba(58, 125, 68, .1);
}


.shape-two[b-c97741muhm] {
    width: 280px;
    height: 280px;

    bottom: -180px;
    left: -70px;

    background:
        rgba(36, 89, 166, .1);
}


.attributes-wrap[b-c97741muhm] {
    position: relative;
    z-index: 2;
}


.section-head[b-c97741muhm] {
    max-width: 760px;

    margin: 0 auto 40px;

    text-align: center;
}


.section-head > span[b-c97741muhm] {
    min-height: 36px;
    padding: 0 14px;

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

    border:
        1px solid rgba(58, 125, 68, .17);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .82);

    color: var(--green);

    box-shadow:
        0 10px 25px rgba(31, 41, 55, .05);

    font-size: 15px;
    font-weight: 900;
}


.section-head h2[b-c97741muhm] {
    margin: 13px 0 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 41px);

    font-weight: 900;
    line-height: 1.5;
}


.section-head p[b-c97741muhm] {
    margin: 10px auto 0;

    color: #667085;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.9;
}


.attributes-grid[b-c97741muhm] {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr));

    gap: 18px;
}


.attribute-card[b-c97741muhm] {
    position: relative;

    min-width: 0;
    min-height: 190px;

    padding: 28px 24px 25px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    gap: 9px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, .9);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .88),
            rgba(247, 251, 248, .8));

    box-shadow:
        0 16px 38px rgba(31, 41, 55, .07);

    text-align: center;

    backdrop-filter: blur(12px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.attribute-card:nth-child(even)[b-c97741muhm] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .88),
            rgba(244, 248, 253, .82));
}


.attribute-card[b-c97741muhm]::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -55px;
    bottom: -65px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .07);

    transition:
        transform .3s ease;
}


.attribute-card:nth-child(even)[b-c97741muhm]::after {
    background:
        rgba(36, 89, 166, .08);
}


.attribute-card:hover[b-c97741muhm] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .26);

    box-shadow:
        0 22px 46px rgba(31, 41, 55, .1);
}


.attribute-card:nth-child(even):hover[b-c97741muhm] {
    border-color:
        rgba(36, 89, 166, .25);
}


.attribute-card:hover[b-c97741muhm]::after {
    transform: scale(1.18);
}


.attribute-mark[b-c97741muhm] {
    width: 48px;
    height: 48px;

    margin-bottom: 2px;

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

    flex: 0 0 48px;

    border-radius: 16px;

    background:
        rgba(58, 125, 68, .1);
}


.attribute-card:nth-child(even)
.attribute-mark[b-c97741muhm] {
    background:
        rgba(36, 89, 166, .1);
}


.attribute-mark span[b-c97741muhm] {
    position: relative;

    width: 14px;
    height: 14px;

    display: block;

    border:
        3px solid var(--green);

    border-radius: 50%;
}


.attribute-card:nth-child(even)
.attribute-mark span[b-c97741muhm] {
    border-color: #2459a6;
}


.attribute-mark span[b-c97741muhm]::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    top: -7px;
    left: -7px;

    border-radius: 50%;

    background: #2459a6;
}


.attribute-card:nth-child(even)
.attribute-mark span[b-c97741muhm]::after {
    background: var(--green);
}


.attribute-title[b-c97741muhm] {
    position: relative;
    z-index: 2;

    color: #667085;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
}


.attribute-value[b-c97741muhm] {
    position: relative;
    z-index: 2;

    max-width: 100%;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.9;

    overflow-wrap: anywhere;
}


@media (max-width: 1050px) {

    .attributes-grid[b-c97741muhm] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .animal-attributes[b-c97741muhm] {
        padding: 70px 0;
    }


    .section-head[b-c97741muhm] {
        margin-bottom: 30px;
    }


    .section-head > span[b-c97741muhm] {
        font-size: 14px;
    }


    .section-head h2[b-c97741muhm] {
        margin-top: 11px;

        font-size: 28px;
        line-height: 1.6;
    }


    .section-head p[b-c97741muhm] {
        margin-top: 8px;

        font-size: 15px;
        line-height: 2;
    }


    .attributes-grid[b-c97741muhm] {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .attribute-card[b-c97741muhm] {
        min-height: 155px;

        padding: 23px 20px;

        border-radius: 20px;
    }


    .attribute-mark[b-c97741muhm] {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 14px;
    }


    .attribute-title[b-c97741muhm] {
        font-size: 13px;
    }


    .attribute-value[b-c97741muhm] {
        font-size: 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalContentSection.razor.rz.scp.css */
.animal-content-section[b-tpbgxsiw6q] {
    position: relative;

    padding: 96px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(241, 248, 242, .97),
            rgba(243, 247, 253, .96));
}


.animal-content-section[b-tpbgxsiw6q]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle at 12% 20%,
            rgba(58, 125, 68, .08) 0 3px,
            transparent 4px),
        radial-gradient(
            circle at 88% 78%,
            rgba(36, 89, 166, .08) 0 4px,
            transparent 5px);

    background-size:
        88px 88px,
        116px 116px;
}


.content-shape[b-tpbgxsiw6q] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-tpbgxsiw6q] {
    width: 330px;
    height: 330px;

    top: -190px;
    right: -115px;

    background:
        rgba(58, 125, 68, .08);
}


.shape-two[b-tpbgxsiw6q] {
    width: 280px;
    height: 280px;

    bottom: -170px;
    left: -85px;

    background:
        rgba(36, 89, 166, .09);
}


.content-container[b-tpbgxsiw6q] {
    position: relative;
    z-index: 2;
}


.animal-rich-content[b-tpbgxsiw6q] {
    position: relative;

    max-width: 1020px;

    margin: 0 auto;
    padding: 58px 64px;

    overflow: hidden;
    overflow-wrap: anywhere;

    border:
        1px solid rgba(255, 255, 255, .9);

    border-radius:
        34px 72px 34px 72px;

    background:
        rgba(255, 255, 255, .92);

    color: #475467;

    box-shadow:
        0 28px 70px rgba(31, 41, 55, .1),
        inset 0 1px 0 rgba(255, 255, 255, .92);

    font-size: 18px;
    font-weight: 500;
    line-height: 2.3;

    backdrop-filter: blur(12px);
}


.animal-rich-content[b-tpbgxsiw6q]::before {
    content: "";

    position: absolute;

    top: 0;
    right: 64px;
    left: 64px;

    height: 4px;

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #2459a6,
            var(--green));
}


.animal-rich-content[b-tpbgxsiw6q]  h1,
.animal-rich-content[b-tpbgxsiw6q]  h2,
.animal-rich-content[b-tpbgxsiw6q]  h3,
.animal-rich-content[b-tpbgxsiw6q]  h4 {
    color: var(--text);

    font-weight: 900;

    overflow-wrap: break-word;
}


.animal-rich-content[b-tpbgxsiw6q]  h1 {
    margin: 0 0 25px;

    font-size:
        clamp(31px, 3.3vw, 40px);

    line-height: 1.55;
}


.animal-rich-content[b-tpbgxsiw6q]  h2 {
    position: relative;

    margin: 42px 0 17px;
    padding-right: 19px;

    font-size:
        clamp(27px, 2.7vw, 34px);

    line-height: 1.6;
}


.animal-rich-content[b-tpbgxsiw6q]  h2::before {
    content: "";

    position: absolute;

    top: .34em;
    right: 0;

    width: 6px;
    height: 1.15em;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--green),
            #2459a6);
}


.animal-rich-content[b-tpbgxsiw6q]  h2:first-child {
    margin-top: 0;
}


.animal-rich-content[b-tpbgxsiw6q]  h3 {
    margin: 34px 0 14px;

    color: var(--green);

    font-size:
        clamp(22px, 2.1vw, 27px);

    line-height: 1.7;
}


.animal-rich-content[b-tpbgxsiw6q]  h4 {
    margin: 27px 0 11px;

    color: #2459a6;

    font-size: 21px;
    line-height: 1.8;
}


.animal-rich-content[b-tpbgxsiw6q]  p {
    margin: 0 0 23px;
}


.animal-rich-content[b-tpbgxsiw6q]  p:last-child {
    margin-bottom: 0;
}


.animal-rich-content[b-tpbgxsiw6q]  ul,
.animal-rich-content[b-tpbgxsiw6q]  ol {
    margin: 18px 0 28px;
    padding-right: 31px;
}


.animal-rich-content[b-tpbgxsiw6q]  li {
    margin-bottom: 10px;
    padding-right: 4px;
}


.animal-rich-content[b-tpbgxsiw6q]  li::marker {
    color: var(--green);

    font-weight: 900;
}


.animal-rich-content[b-tpbgxsiw6q]  a {
    color: var(--green);

    font-weight: 800;

    text-decoration:
        underline rgba(58, 125, 68, .45);

    text-decoration-thickness: 2px;
    text-underline-offset: 5px;

    transition:
        color .2s ease,
        text-decoration-color .2s ease;
}


.animal-rich-content[b-tpbgxsiw6q]  a:hover {
    color: #2459a6;

    text-decoration-color: #2459a6;
}


.animal-rich-content[b-tpbgxsiw6q]  blockquote {
    position: relative;

    margin: 31px 0;
    padding: 23px 27px;

    border:
        1px solid rgba(36, 89, 166, .16);

    border-right:
        5px solid #2459a6;

    border-radius:
        18px 4px 4px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(243, 247, 253, .98),
            rgba(255, 255, 255, .94));

    color: #344f73;

    font-size: 17px;
    line-height: 2.15;
}


.animal-rich-content[b-tpbgxsiw6q]  blockquote p:last-child {
    margin-bottom: 0;
}


.animal-rich-content[b-tpbgxsiw6q]  strong {
    color: var(--text);

    font-weight: 900;
}


.animal-rich-content[b-tpbgxsiw6q]  img {
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 34px auto;

    display: block;

    border:
        7px solid rgba(255, 255, 255, .92);

    border-radius:
        24px 52px 24px 52px;

    box-shadow:
        0 20px 48px rgba(31, 41, 55, .14);
}


.animal-rich-content[b-tpbgxsiw6q]  figure {
    max-width: 100%;

    margin: 34px 0;
}


.animal-rich-content[b-tpbgxsiw6q]  figure img {
    margin: 0 auto;
}


.animal-rich-content[b-tpbgxsiw6q]  figcaption {
    margin-top: 12px;

    color: #667085;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
}


.animal-rich-content[b-tpbgxsiw6q]  iframe,
.animal-rich-content[b-tpbgxsiw6q]  video {
    max-width: 100%;

    border-radius: 20px;

    box-shadow:
        0 16px 38px rgba(31, 41, 55, .1);
}


.animal-rich-content[b-tpbgxsiw6q]  table {
    width: 100%;

    margin: 30px 0;

    overflow: hidden;

    border-collapse: separate;
    border-spacing: 0;

    border:
        1px solid var(--soft);

    border-radius: 17px;

    background: #fff;
}


.animal-rich-content[b-tpbgxsiw6q]  th,
.animal-rich-content[b-tpbgxsiw6q]  td {
    padding: 14px 16px;

    border-left:
        1px solid var(--soft);

    border-bottom:
        1px solid var(--soft);

    text-align: right;
}


.animal-rich-content[b-tpbgxsiw6q]  th:last-child,
.animal-rich-content[b-tpbgxsiw6q]  td:last-child {
    border-left: 0;
}


.animal-rich-content[b-tpbgxsiw6q]  tr:last-child td {
    border-bottom: 0;
}


.animal-rich-content[b-tpbgxsiw6q]  th {
    background:
        linear-gradient(
            135deg,
            rgba(58, 125, 68, .08),
            rgba(36, 89, 166, .07));

    color: var(--text);

    font-weight: 900;
}


@media (max-width: 850px) {

    .animal-content-section[b-tpbgxsiw6q] {
        padding: 78px 0;
    }


    .animal-rich-content[b-tpbgxsiw6q] {
        padding: 46px 40px;

        border-radius:
            30px 58px 30px 58px;

        font-size: 17px;
    }


    .animal-rich-content[b-tpbgxsiw6q]::before {
        right: 40px;
        left: 40px;
    }
}


@media (max-width: 620px) {

    .animal-content-section[b-tpbgxsiw6q] {
        padding: 64px 0;
    }


    .animal-content-section .content-container[b-tpbgxsiw6q] {
        width:
            min(100% - 24px, 1180px);
    }


    .shape-one[b-tpbgxsiw6q] {
        width: 220px;
        height: 220px;

        top: -130px;
        right: -100px;
    }


    .shape-two[b-tpbgxsiw6q] {
        width: 190px;
        height: 190px;

        bottom: -115px;
        left: -85px;
    }


    .animal-rich-content[b-tpbgxsiw6q] {
        padding: 37px 22px 31px;

        border-radius:
            24px 42px 24px 42px;

        font-size: 15px;
        line-height: 2.15;
    }


    .animal-rich-content[b-tpbgxsiw6q]::before {
        right: 22px;
        left: 22px;

        height: 3px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  h1 {
        margin-bottom: 19px;

        font-size: 27px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  h2 {
        margin: 32px 0 13px;
        padding-right: 15px;

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


    .animal-rich-content[b-tpbgxsiw6q]  h2::before {
        width: 5px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  h3 {
        margin: 27px 0 11px;

        font-size: 20px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  h4 {
        font-size: 18px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  p {
        margin-bottom: 18px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  ul,
    .animal-rich-content[b-tpbgxsiw6q]  ol {
        margin: 15px 0 22px;
        padding-right: 24px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  blockquote {
        margin: 23px 0;
        padding: 18px;

        font-size: 15px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  img {
        margin: 25px auto;

        border-width: 5px;

        border-radius:
            18px 34px 18px 34px;
    }


    .animal-rich-content[b-tpbgxsiw6q]  figure {
        margin: 25px 0;
    }


    .animal-rich-content[b-tpbgxsiw6q]  table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }


    .animal-rich-content[b-tpbgxsiw6q]  th,
    .animal-rich-content[b-tpbgxsiw6q]  td {
        padding: 11px 13px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalCtaSection.razor.rz.scp.css */
.animal-final-cta[b-gblov8lm75] {
    padding: 20px 0 100px;

    background: #fff;
}


.final-cta-card[b-gblov8lm75] {
    position: relative;

    padding: 44px 48px;

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

    gap: 35px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            #245f35,
            #3a7d44);

    color: #fff;
}


.final-cta-card[b-gblov8lm75]::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -140px;
    left: -80px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);
}


.final-cta-card > *[b-gblov8lm75] {
    position: relative;
    z-index: 2;
}


.final-cta-card span[b-gblov8lm75] {
    color: #ffd3a9;

    font-size: 13px;
    font-weight: 800;
}


.final-cta-card h2[b-gblov8lm75] {
    max-width: 720px;

    margin: 6px 0 8px;

    color: #fff;

    font-size: 30px;
    font-weight: 900;
    line-height: 1.6;
}


.final-cta-card p[b-gblov8lm75] {
    margin: 0;

    color:
        rgba(255, 255, 255, .78);

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


.public-button[b-gblov8lm75] {
    min-height: 48px;
    padding: 0 20px;

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

    flex: 0 0 auto;

    gap: 7px;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.public-button:hover[b-gblov8lm75] {
    transform: translateY(-2px);
}


.public-button.orange[b-gblov8lm75] {
    background: var(--orange);
    color: #fff;

    box-shadow:
        0 12px 26px rgba(238, 126, 44, .2);
}


@media (max-width: 850px) {

    .final-cta-card[b-gblov8lm75] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 620px) {

    .animal-final-cta[b-gblov8lm75] {
        padding-bottom: 70px;
    }


    .final-cta-card[b-gblov8lm75] {
        padding: 30px 24px;

        border-radius: 22px;
    }


    .final-cta-card h2[b-gblov8lm75] {
        font-size: 24px;
    }


    .final-cta-card .public-button[b-gblov8lm75] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalDoctorsSection.razor.rz.scp.css */
.animal-doctors[b-0qqhfyhymd] {
    padding: 72px 0 76px;

    background: #fff;
}


.section-head[b-0qqhfyhymd] {
    max-width: 780px;

    margin: 0 auto 36px;

    text-align: center;
}


.section-head > span[b-0qqhfyhymd] {
    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-0qqhfyhymd] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-0qqhfyhymd] {
    max-width: 720px;

    margin: 10px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.doctors-grid[b-0qqhfyhymd] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.doctor-card[b-0qqhfyhymd] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 24px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.doctor-card:hover[b-0qqhfyhymd] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .38);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, .1);
}


.doctor-image[b-0qqhfyhymd] {
    height: 215px;

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

    flex: 0 0 215px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .09),
            rgba(36, 89, 166, .08));
}


.doctor-image img[b-0qqhfyhymd] {
    width: 100%;
    height: 100%;

    display: block;

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

    transition:
        transform .35s ease;
}


.doctor-card:hover .doctor-image img[b-0qqhfyhymd] {
    transform: scale(1.035);
}


.image-placeholder[b-0qqhfyhymd] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--muted);

    font-size: 58px;
}


.doctor-body[b-0qqhfyhymd] {
    padding: 21px 22px 22px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.doctor-main-info[b-0qqhfyhymd] {
    width: 100%;

    padding-bottom: 17px;

    border-bottom: 1px solid var(--soft);
}


.doctor-body h3[b-0qqhfyhymd] {
    width: 100%;

    margin: 0 0 6px;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.6;

    text-align: center;
}


.doctor-specialty[b-0qqhfyhymd] {
    display: block;

    color: var(--green);

    font-size: 15px;
    font-weight: 900;
    line-height: 1.8;

    text-align: center;
}


.doctor-details[b-0qqhfyhymd] {
    width: 100%;

    margin: 16px 0 18px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;
}


.doctor-detail[b-0qqhfyhymd] {
    min-width: 0;
    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    gap: 3px;

    text-align: center;
}


.doctor-detail + .doctor-detail[b-0qqhfyhymd] {
    border-right: 1px solid var(--soft);
}


.doctor-detail:only-child[b-0qqhfyhymd] {
    grid-column: 1 / -1;
}


.doctor-detail > span[b-0qqhfyhymd] {
    color: #98a2b3;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}


.doctor-detail > strong[b-0qqhfyhymd] {
    max-width: 100%;

    color: #667085;

    font-size: 14px;
    font-weight: 800;
    line-height: 1.8;

    overflow-wrap: anywhere;
}


.doctor-action[b-0qqhfyhymd] {
    width: 100%;

    margin-top: auto;
    padding-top: 17px;

    border-top: 1px solid var(--soft);
}


.public-button[b-0qqhfyhymd] {
    width: 100%;
    min-height: 49px;
    padding: 0 20px;

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

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.public-button:hover[b-0qqhfyhymd] {
    transform: translateY(-2px);
}


.public-button.primary[b-0qqhfyhymd] {
    background: var(--green);
    color: #fff;

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .16);
}


.public-button.primary:hover[b-0qqhfyhymd] {
    filter: brightness(.97);
}


@media (max-width: 850px) {

    .doctors-grid[b-0qqhfyhymd] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .animal-doctors[b-0qqhfyhymd] {
        padding: 70px 0;
    }


    .section-head[b-0qqhfyhymd] {
        margin-bottom: 30px;
    }


    .section-head h2[b-0qqhfyhymd] {
        font-size: 28px;
    }


    .doctors-grid[b-0qqhfyhymd] {
        grid-template-columns: 1fr;
    }


    .doctor-image[b-0qqhfyhymd] {
        height: 300px;

        flex-basis: 300px;
    }


    .doctor-body[b-0qqhfyhymd] {
        padding: 22px;
    }


    .doctor-body h3[b-0qqhfyhymd] {
        font-size: 21px;
    }


    .doctor-specialty[b-0qqhfyhymd] {
        font-size: 14px;
    }


    .doctor-details[b-0qqhfyhymd] {
        margin: 16px 0 18px;
    }


    .doctor-detail > strong[b-0qqhfyhymd] {
        font-size: 13px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalHeroSection.razor.rz.scp.css */
.animal-hero[b-pd4bylleb7] {
    position: relative;

    min-height:
        calc(100svh - 40px);

    padding: 64px 0 78px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(241, 248, 242, .97),
            rgba(243, 247, 253, .96));
}


.animal-hero[b-pd4bylleb7]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle at 12% 18%,
            rgba(58, 125, 68, .08) 0 4px,
            transparent 5px),
        radial-gradient(
            circle at 87% 77%,
            rgba(36, 89, 166, .08) 0 5px,
            transparent 6px);

    background-size:
        90px 90px,
        120px 120px;
}


.animal-hero-shape[b-pd4bylleb7] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);
}


.shape-one[b-pd4bylleb7] {
    width: 360px;
    height: 360px;

    top: -190px;
    right: -120px;

    background:
        rgba(58, 125, 68, .09);
}


.shape-two[b-pd4bylleb7] {
    width: 300px;
    height: 300px;

    bottom: -180px;
    left: -100px;

    background:
        rgba(36, 89, 166, .09);
}


.animal-hero-wrap[b-pd4bylleb7] {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, .95fr);

    align-items: center;

    gap: 72px;
}


.animal-hero-content[b-pd4bylleb7] {
    min-width: 0;
    max-width: 720px;
}


.animal-eyebrow[b-pd4bylleb7] {
    min-height: 42px;
    padding: 0 17px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(58, 125, 68, .18);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .94);

    color: var(--green);

    box-shadow:
        0 10px 24px rgba(31, 41, 55, .05),
        0 0 0 0 rgba(58, 125, 68, 0);

    font-size: 16px;
    font-weight: 800;

    animation:
        category-label-pulse-b-pd4bylleb7
        3.4s ease-in-out infinite;
}


@keyframes category-label-pulse-b-pd4bylleb7 {

    0%,
    100% {
        border-color:
            rgba(58, 125, 68, .18);

        box-shadow:
            0 10px 24px rgba(31, 41, 55, .05),
            0 0 0 0 rgba(58, 125, 68, 0);
    }

    50% {
        border-color:
            rgba(58, 125, 68, .42);

        box-shadow:
            0 10px 24px rgba(31, 41, 55, .05),
            0 0 0 5px rgba(58, 125, 68, .07);
    }
}


.animal-hero-content h1[b-pd4bylleb7] {
    margin: 25px 0 20px;

    color: var(--text);

    font-size:
        clamp(40px, 4.2vw, 58px);

    font-weight: 900;
    line-height: 1.45;
}


.heading-prefix[b-pd4bylleb7],
.heading-animal[b-pd4bylleb7] {
    display: block;

    max-width: 100%;

    overflow-wrap: normal;
    word-break: normal;
}


.heading-animal[b-pd4bylleb7] {
    color: #2459a6;
}


.hero-description[b-pd4bylleb7] {
    width: 100%;
    max-width: 680px;

    margin: 0;

    display: block;

    overflow: visible;

    color: var(--muted);

    font-size: 19px;
    font-weight: 500;
    line-height: 2.15;

    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-overflow: clip;
}


.animal-hero-actions[b-pd4bylleb7] {
    margin-top: 34px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 14px;
}


.public-button[b-pd4bylleb7] {
    min-height: 54px;
    padding: 0 25px;

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

    gap: 7px;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


.public-button:hover[b-pd4bylleb7] {
    transform: translateY(-2px);
}


.public-button.primary[b-pd4bylleb7] {
    background: var(--green);
    color: #fff;

    box-shadow:
        0 13px 28px rgba(58, 125, 68, .2);
}


.public-button.primary:hover[b-pd4bylleb7] {
    filter: brightness(.97);
}


.public-button.outline[b-pd4bylleb7] {
    border-color:
        rgba(36, 89, 166, .2);

    background:
        rgba(255, 255, 255, .94);

    color: #2459a6;

    box-shadow:
        0 10px 24px rgba(36, 89, 166, .07);
}


.public-button.outline:hover[b-pd4bylleb7] {
    border-color: #2459a6;

    background:
        rgba(36, 89, 166, .05);

    color: #2459a6;
}


.animal-hero-media[b-pd4bylleb7] {
    position: relative;

    width: 100%;
    min-height: 480px;

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


.animal-hero-media[b-pd4bylleb7]::before {
    content: "";

    position: absolute;

    width: 88%;

    aspect-ratio: 1;

    border-radius:
        44% 56% 58% 42% /
        45% 42% 58% 55%;

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .18),
            rgba(36, 89, 166, .18));

    transform: rotate(-7deg);
}


.animal-hero-media > img[b-pd4bylleb7] {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 480px;

    object-fit: cover;

    border:
        10px solid rgba(255, 255, 255, .9);

    border-radius:
        36px 90px 36px 90px;

    box-shadow:
        0 30px 65px rgba(31, 41, 55, .16);
}


.animal-hero-icon[b-pd4bylleb7],
.animal-hero-placeholder[b-pd4bylleb7] {
    position: relative;
    z-index: 2;

    width: 340px;
    height: 340px;

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

    overflow: hidden;

    border:
        10px solid rgba(255, 255, 255, .9);

    border-radius:
        42% 58% 54% 46%;

    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(243, 247, 253, .96));

    box-shadow:
        0 30px 65px rgba(31, 41, 55, .14);
}


.animal-hero-icon img[b-pd4bylleb7] {
    width: 88%;
    height: 88%;

    object-fit: contain;
}


.animal-hero-placeholder[b-pd4bylleb7] {
    color: #2459a6;

    font-size: 105px;
}


@media (prefers-reduced-motion: reduce) {

    .animal-eyebrow[b-pd4bylleb7] {
        animation: none;
    }
}


@media (max-width: 1050px) {

    .animal-hero-wrap[b-pd4bylleb7] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .8fr);

        gap: 38px;
    }


    .animal-hero-content h1[b-pd4bylleb7] {
        font-size:
            clamp(38px, 4.5vw, 50px);
    }


    .animal-hero-media[b-pd4bylleb7],
    .animal-hero-media > img[b-pd4bylleb7] {
        min-height: 420px;
        height: 420px;
    }
}


@media (max-width: 850px) {

    .animal-hero[b-pd4bylleb7] {
        min-height: auto;

        padding: 55px 0 82px;

        display: block;
    }


    .animal-hero .animal-hero-wrap[b-pd4bylleb7] {
        width: calc(100% - 24px);

        grid-template-columns: 1fr;

        gap: 42px;
    }


    .animal-hero-content[b-pd4bylleb7] {
        width: 100%;
        max-width: none;

        text-align: center;
    }


    .hero-description[b-pd4bylleb7] {
        max-width: 680px;

        margin-right: auto;
        margin-left: auto;

        font-size: 16px;
    }


    .animal-hero-actions[b-pd4bylleb7] {
        justify-content: center;
    }


    .public-button[b-pd4bylleb7] {
        min-height: 50px;

        padding: 0 20px;

        font-size: 14px;
    }


    .animal-hero-media[b-pd4bylleb7] {
        width: 100%;
        max-width: 600px;

        margin: 0 auto;
    }
}


@media (max-width: 620px) {

    .animal-hero[b-pd4bylleb7] {
        padding: 40px 0 68px;
    }


    .animal-hero .animal-hero-wrap[b-pd4bylleb7] {
        width: calc(100% - 16px);

        gap: 40px;
    }


    .animal-eyebrow[b-pd4bylleb7] {
        min-height: 38px;
        padding: 0 14px;

        font-size: 14px;
    }


    .animal-hero-content h1[b-pd4bylleb7] {
        margin: 18px 0 16px;

        font-size:
            clamp(27px, 8vw, 34px);

        line-height: 1.55;
    }


    .heading-prefix[b-pd4bylleb7] {
        white-space: nowrap;
    }


    .heading-animal[b-pd4bylleb7] {
        margin-top: 2px;
    }


    .hero-description[b-pd4bylleb7] {
        width: 100%;
        max-width: none;

        margin: 0;

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

        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
        text-overflow: clip;
    }


    .animal-hero-actions[b-pd4bylleb7] {
        margin-top: 28px;

        align-items: stretch;
        flex-direction: column;
    }


    .animal-hero-actions .public-button[b-pd4bylleb7] {
        width: 100%;
    }


    .animal-hero-media[b-pd4bylleb7],
    .animal-hero-media > img[b-pd4bylleb7] {
        min-height: 290px;
        height: 290px;
    }


    .animal-hero-media > img[b-pd4bylleb7] {
        border-width: 7px;

        border-radius:
            26px 58px 26px 58px;
    }


    .animal-hero-icon[b-pd4bylleb7],
    .animal-hero-placeholder[b-pd4bylleb7] {
        width: 230px;
        height: 230px;
    }
}


@media (max-width: 350px) {

    .heading-prefix[b-pd4bylleb7] {
        white-space: normal;
    }


    .animal-hero-content h1[b-pd4bylleb7] {
        font-size: 27px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalProductsSection.razor.rz.scp.css */
.animal-products[b-026wkslf3x] {
    padding: 72px 0 76px;

    background: var(--cream);
}


.section-head[b-026wkslf3x] {
    margin-bottom: 36px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;
}


.section-head > div > span[b-026wkslf3x] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-026wkslf3x] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-026wkslf3x] {
    max-width: 720px;

    margin: 10px 0 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.public-button[b-026wkslf3x] {
    min-height: 48px;
    padding: 0 20px;

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

    flex: 0 0 auto;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.public-button:hover[b-026wkslf3x] {
    transform: translateY(-2px);
}


.public-button.outline[b-026wkslf3x] {
    border-color: var(--soft);

    background: #fff;
    color: var(--text);
}


.public-button.outline:hover[b-026wkslf3x] {
    border-color: var(--green);

    color: var(--green);
}


.products-grid[b-026wkslf3x] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.product-card-link[b-026wkslf3x] {
    min-width: 0;
    height: 100%;

    display: block;

    color: inherit;

    text-decoration: none;

    border-radius: 22px;

    outline: none;
}


.product-card-link:focus-visible[b-026wkslf3x] {
    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .16);
}


.product-card[b-026wkslf3x] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 22px;

    background: #fff;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.product-card-link:hover .product-card[b-026wkslf3x] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .36);

    box-shadow:
        0 18px 38px rgba(31, 41, 55, .1);
}


.product-image[b-026wkslf3x] {
    height: 220px;
    padding: 14px;

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

    flex: 0 0 220px;

    overflow: hidden;

    background: #f8faf8;
}


.product-image img[b-026wkslf3x] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.product-card-link:hover .product-image img[b-026wkslf3x] {
    transform: scale(1.04);
}


.image-placeholder[b-026wkslf3x] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--muted);

    font-size: 58px;
}


.product-body[b-026wkslf3x] {
    min-height: 220px;
    padding: 18px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.product-type[b-026wkslf3x] {
    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    align-self: center;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}


.product-body h3[b-026wkslf3x] {
    min-height: 64px;

    margin: 12px 0 6px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.7;

    text-align: center;
}


.product-brand[b-026wkslf3x],
.product-brand-placeholder[b-026wkslf3x] {
    width: 100%;
    min-height: 24px;
}


.product-brand[b-026wkslf3x] {
    margin: 0;

    color: #667085;

    direction: ltr;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;

    text-align: left;

    unicode-bidi: plaintext;
}


.product-brand-placeholder[b-026wkslf3x] {
    display: block;
}


.product-bottom[b-026wkslf3x] {
    margin-top: auto;
    padding-top: 14px;

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

    gap: 10px;

    border-top: 1px solid var(--soft);
}


.product-bottom strong[b-026wkslf3x] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link[b-026wkslf3x] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 10px;

    background: var(--orange);
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;

    transition:
        transform .2s ease,
        filter .2s ease;
}


.product-card-link:hover .card-link[b-026wkslf3x] {
    filter: brightness(.96);

    transform: translateY(-1px);
}


@media (max-width: 1050px) {

    .products-grid[b-026wkslf3x] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .section-head[b-026wkslf3x] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 620px) {

    .animal-products[b-026wkslf3x] {
        padding: 70px 0;
    }


    .section-head[b-026wkslf3x] {
        margin-bottom: 30px;
    }


    .section-head h2[b-026wkslf3x] {
        font-size: 28px;
    }


    .products-grid[b-026wkslf3x] {
        grid-template-columns: 1fr;
    }


    .product-image[b-026wkslf3x] {
        height: 240px;

        flex-basis: 240px;
    }


    .product-body[b-026wkslf3x] {
        min-height: 0;
    }


    .product-body h3[b-026wkslf3x] {
        min-height: 0;
    }


    .public-button[b-026wkslf3x] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PetCategoryDetails/AnimalServicesSection.razor.rz.scp.css */
.animal-services[b-mkmbuwuipz] {
    padding: 72px 0 76px;

    background: #fff;

    text-align: center;
}


.section-head[b-mkmbuwuipz] {
    max-width: 840px;

    margin: 0 auto 38px;

    text-align: center;
}


.section-head > span[b-mkmbuwuipz] {
    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: 17px;
    font-weight: 900;
}


.section-head h2[b-mkmbuwuipz] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-mkmbuwuipz] {
    max-width: 780px;

    margin: 12px auto 0;

    color: #667085;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.9;
}


.services-grid[b-mkmbuwuipz] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.service-card[b-mkmbuwuipz] {
    min-width: 0;
    min-height: 395px;

    padding: 28px 26px 26px;

    display: flex;
    align-items: center;
    flex-direction: column;

    border: 1px solid var(--soft);
    border-radius: 24px;

    background: #fff;

    text-align: center;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.service-card:hover[b-mkmbuwuipz] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .45);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, .08);
}


.service-image[b-mkmbuwuipz] {
    width: 112px;
    height: 112px;

    margin: 0 auto 20px;
    padding: 8px;

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

    flex: 0 0 112px;

    overflow: hidden;

    border-radius: 26px;

    background:
        rgba(58, 125, 68, .09);
}


.service-card:nth-child(2) .service-image[b-mkmbuwuipz] {
    background:
        rgba(36, 89, 166, .09);
}


.service-card:nth-child(3) .service-image[b-mkmbuwuipz] {
    background:
        rgba(238, 126, 44, .11);
}


.service-image img[b-mkmbuwuipz] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.service-card h3[b-mkmbuwuipz] {
    margin: 0 0 10px;

    color: var(--text);

    font-size: 25px;
    font-weight: 900;
    line-height: 1.55;

    text-align: center;
}


.service-card p[b-mkmbuwuipz] {
    width: 100%;

    margin: 0 0 20px;

    flex: 1;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.95;

    text-align: center;
}


.public-button[b-mkmbuwuipz] {
    min-width: 155px;
    min-height: 48px;
    padding: 0 22px;

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

    flex: 0 0 auto;

    border: 1px solid transparent;
    border-radius: 14px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.public-button:hover[b-mkmbuwuipz] {
    transform: translateY(-2px);
}


.public-button.primary[b-mkmbuwuipz] {
    background: var(--green);
    color: #fff;

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .16);
}


.public-button.primary:hover[b-mkmbuwuipz] {
    filter: brightness(.97);
}


@media (max-width: 850px) {

    .services-grid[b-mkmbuwuipz] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .animal-services[b-mkmbuwuipz] {
        padding: 72px 0;
    }


    .section-head[b-mkmbuwuipz] {
        margin-bottom: 34px;
    }


    .section-head > span[b-mkmbuwuipz] {
        margin-bottom: 9px;

        font-size: 16px;
    }


    .section-head h2[b-mkmbuwuipz] {
        font-size: 29px;
        line-height: 1.6;
    }


    .section-head p[b-mkmbuwuipz] {
        margin-top: 13px;

        color: #667085;

        font-size: 16px;
        line-height: 2;
    }


    .services-grid[b-mkmbuwuipz] {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .service-card[b-mkmbuwuipz] {
        min-height: 0;

        padding: 30px 22px 24px;

        text-align: center;
    }


    .service-image[b-mkmbuwuipz] {
        width: 82px;
        height: 82px;

        margin-bottom: 21px;
        padding: 8px;

        flex-basis: 82px;

        border-radius: 22px;
    }


    .service-card h3[b-mkmbuwuipz] {
        margin-bottom: 12px;

        font-size: 23px;
    }


    .service-card p[b-mkmbuwuipz] {
        margin-bottom: 24px;

        font-size: 15px;
        line-height: 2.05;
    }


    .public-button[b-mkmbuwuipz] {
        width: 100%;
        min-height: 50px;

        font-size: 15px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Drugs/Create.razor.rz.scp.css */
.create-pharmacy-drug-page[b-r38kl6i08y] {
    width: 100%;
}


.page-head[b-r38kl6i08y] {
    margin-bottom: 24px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}


.page-head > div > span[b-r38kl6i08y] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 19px;
    font-weight: 800;
}


.page-head h1[b-r38kl6i08y] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}


.page-head p[b-r38kl6i08y] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 19px;
}



.back-button[b-r38kl6i08y],
.change-button[b-r38kl6i08y] {

    min-height: 44px;

    padding: 0 16px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;

    color: var(--text);

    font-family: inherit;

    text-decoration: none;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}



.catalog-card[b-r38kl6i08y],
.form-card[b-r38kl6i08y] {

    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}



.catalog-search[b-r38kl6i08y] {

    display: flex;

    flex-direction: column;

    gap: 18px;
}



.catalog-search > div:first-child[b-r38kl6i08y] {

    display: flex;

    flex-direction: column;

    gap: 5px;
}



.catalog-search span[b-r38kl6i08y],
.field-help[b-r38kl6i08y],
.selected-product small[b-r38kl6i08y] {

    color: var(--muted);

    font-size: 16px;
}



.catalog-filters[b-r38kl6i08y] {

    display: grid;

    grid-template-columns: repeat(4,minmax(0,1fr));

    gap: 12px;
}



.catalog-filters select[b-r38kl6i08y],
.field-group input[b-r38kl6i08y] {

    min-height: 48px;

    padding: 0 13px;

    border: 1px solid var(--soft);

    border-radius: 11px;

    background: #fff;

    font-family: inherit;

    font-size: 17px;

    outline: none;
}



.catalog-filters button[b-r38kl6i08y],
.select-button[b-r38kl6i08y],
.submit-button[b-r38kl6i08y] {

    min-height: 46px;

    padding: 0 18px;

    border: 0;

    border-radius: 10px;

    background: var(--green);

    color: #fff;

    font-family: inherit;

    font-size: 17px;

    font-weight: 800;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;
}



/* لیست داروها با اسکرول */

.catalog-results-scroll[b-r38kl6i08y] {

    margin-top: 20px;

    max-height: 430px;

    overflow-y: auto;

    padding-left: 5px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.catalog-results-scroll[b-r38kl6i08y]::-webkit-scrollbar {

    width: 6px;
}


.catalog-results-scroll[b-r38kl6i08y]::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background: #d0d5dd;
}



.catalog-item[b-r38kl6i08y] {

    padding: 14px;

    border: 1px solid var(--soft);

    border-radius: 13px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;
}



.catalog-drug[b-r38kl6i08y] {

    display: flex;

    align-items: center;

    gap: 12px;
}



.catalog-image[b-r38kl6i08y],
.catalog-avatar[b-r38kl6i08y] {

    width: 52px;

    height: 52px;

    flex: 0 0 52px;

    border-radius: 13px;
}



.catalog-image[b-r38kl6i08y] {

    object-fit: cover;
}



.catalog-avatar[b-r38kl6i08y] {

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(58,125,68,.09);

    color: var(--green);

    font-weight: 900;
}



.catalog-drug > div:last-child[b-r38kl6i08y] {

    display: flex;

    flex-direction: column;

    gap: 3px;
}



.catalog-drug span[b-r38kl6i08y],
.catalog-drug small[b-r38kl6i08y] {

    color: var(--muted);

    font-size: 15px;
}



.catalog-actions[b-r38kl6i08y] {

    display: flex;

    align-items: center;

    gap: 8px;
}



.status-badge[b-r38kl6i08y] {

    min-height: 27px;

    padding: 0 9px;

    display: inline-flex;

    align-items: center;

    border-radius: 999px;

    font-size: 16px;

    font-weight: 800;
}



.status-badge.success[b-r38kl6i08y] {

    background: #ecfdf3;

    color: #027a48;
}



.empty-catalog[b-r38kl6i08y] {

    margin-top: 20px;

    min-height: 110px;

    padding: 20px;

    border: 1px dashed var(--soft);

    border-radius: 13px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 5px;
}



.selected-product[b-r38kl6i08y] {

    margin-top: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}



.selected-product > div[b-r38kl6i08y] {

    display: flex;

    flex-direction: column;

    gap: 4px;
}



.selected-product > div > span[b-r38kl6i08y] {

    color: var(--green);

    font-size: 16px;

    font-weight: 800;
}



.form-grid[b-r38kl6i08y] {

    margin-top: 18px;

    display: grid;

    grid-template-columns: repeat(2,minmax(0,1fr));

    gap: 18px;
}



.form-card.full[b-r38kl6i08y] {

    grid-column: 1 / -1;
}



.form-card h3[b-r38kl6i08y] {

    margin: 0 0 18px;
}



.field-group[b-r38kl6i08y] {

    display: flex;

    flex-direction: column;

    gap: 8px;
}



.field-group label[b-r38kl6i08y] {

    font-size: 17px;

    font-weight: 800;
}



.field-help[b-r38kl6i08y] {

    margin-top: 5px;

}



.submit-card[b-r38kl6i08y] {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;
}



.submit-card > div[b-r38kl6i08y] {

    display: flex;

    flex-direction: column;

    gap: 5px;
}



.form-error[b-r38kl6i08y] {

    margin-bottom: 18px;

    padding: 14px;

    border: 1px solid #fecdca;

    border-radius: 11px;

    background: #fff2f2;

    color: #b42318;
}



@media(max-width:1000px) {

    .catalog-filters[b-r38kl6i08y] {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}



@media(max-width:700px) {


    .page-head[b-r38kl6i08y],
    .catalog-item[b-r38kl6i08y],
    .submit-card[b-r38kl6i08y] {

        flex-direction: column;

        align-items: stretch;

    }



    .catalog-filters[b-r38kl6i08y],
    .form-grid[b-r38kl6i08y] {

        grid-template-columns: 1fr;

    }



    .form-card.full[b-r38kl6i08y] {

        grid-column: auto;

    }

}
.catalog-item.already-added[b-r38kl6i08y] {
    background: #f8faf8;
    border-color: #b7d8bc;
}


.catalog-item.already-added .catalog-drug strong[b-r38kl6i08y] {
    color: #667085;
}


.already-text[b-r38kl6i08y] {
    color: #b54708 !important;
    font-size: 15px;
    font-weight: 700;
}

.availability-description[b-r38kl6i08y] {
    margin: 8px 0 22px;
    color: #667085;
    font-size: 18px;
    line-height: 1.9;
}

.availability-options[b-r38kl6i08y] {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.availability-button[b-r38kl6i08y] {
    min-height: 64px;
    padding: 12px 20px;
    border: 2px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.availability-button:hover[b-r38kl6i08y] {
    transform: translateY(-1px);
}

.availability-icon[b-r38kl6i08y] {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f7;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.availability-button.available:hover[b-r38kl6i08y] {
    border-color: #3a7d44;
    color: #276532;
}

.availability-button.available.selected[b-r38kl6i08y] {
    border-color: #3a7d44;
    background: #3a7d44;
    color: #fff;
    box-shadow: 0 10px 24px rgba(58, 125, 68, .2);
}

.availability-button.unavailable:hover[b-r38kl6i08y] {
    border-color: #d92d20;
    color: #b42318;
}

.availability-button.unavailable.selected[b-r38kl6i08y] {
    border-color: #d92d20;
    background: #d92d20;
    color: #fff;
    box-shadow: 0 10px 24px rgba(217, 45, 32, .18);
}

.availability-button.selected .availability-icon[b-r38kl6i08y] {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.availability-button:focus-visible[b-r38kl6i08y] {
    outline: 3px solid rgba(47, 128, 237, .2);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .availability-options[b-r38kl6i08y] {
        grid-template-columns: 1fr;
    }

    .availability-button[b-r38kl6i08y] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Drugs/CreateNew.razor.rz.scp.css */
.create-pharmacy-drug-page[b-7km3026sog] {
    width: 100%;
}

.page-head[b-7km3026sog] {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.page-head > div > span[b-7km3026sog] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 14px;
    font-weight: 800;
}

.page-head h1[b-7km3026sog] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-7km3026sog] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.back-button[b-7km3026sog],
.change-button[b-7km3026sog] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.catalog-card[b-7km3026sog],
.form-card[b-7km3026sog],
.new-drug-box[b-7km3026sog] {
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.catalog-search[b-7km3026sog] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.catalog-search > div:first-child[b-7km3026sog] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.catalog-search span[b-7km3026sog],
.field-help[b-7km3026sog],
.selected-product small[b-7km3026sog],
.new-drug-box span[b-7km3026sog] {
    color: var(--muted);
    font-size: 11px;
}

.search-row[b-7km3026sog] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 10px;
}

.search-row input[b-7km3026sog],
.field-group input[b-7km3026sog] {
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    font-family: inherit;
    outline: none;
}

.search-row button[b-7km3026sog],
.select-button[b-7km3026sog],
.submit-button[b-7km3026sog],
.new-drug-button[b-7km3026sog] {
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.catalog-results[b-7km3026sog] {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.catalog-item[b-7km3026sog] {
    padding: 14px;
    border: 1px solid var(--soft);
    border-radius: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.catalog-drug[b-7km3026sog] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.catalog-image[b-7km3026sog],
.catalog-avatar[b-7km3026sog] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 13px;
}

.catalog-image[b-7km3026sog] {
    object-fit: cover;
}

.catalog-avatar[b-7km3026sog] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58,125,68,.09);
    color: var(--green);
    font-weight: 900;
}

.catalog-drug > div:last-child[b-7km3026sog] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.catalog-drug span[b-7km3026sog],
.catalog-drug small[b-7km3026sog] {
    color: var(--muted);
    font-size: 10px;
}

.catalog-actions[b-7km3026sog] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-badge[b-7km3026sog] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.status-badge.success[b-7km3026sog] {
    background: #ecfdf3;
    color: #027a48;
}

.empty-catalog[b-7km3026sog] {
    margin-top: 20px;
    min-height: 110px;
    padding: 20px;
    border: 1px dashed var(--soft);
    border-radius: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.selected-product[b-7km3026sog] {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-product > div[b-7km3026sog] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.selected-product > div > span[b-7km3026sog] {
    color: var(--green);
    font-size: 11px;
    font-weight: 800;
}

.form-grid[b-7km3026sog] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.form-card.full[b-7km3026sog] {
    grid-column: 1 / -1;
}

.form-card h3[b-7km3026sog] {
    margin: 0 0 18px;
}

.field-group[b-7km3026sog] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group label[b-7km3026sog] {
    font-size: 12px;
    font-weight: 800;
}

.submit-card[b-7km3026sog],
.new-drug-box[b-7km3026sog] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.submit-card > div[b-7km3026sog],
.new-drug-box > div[b-7km3026sog] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.new-drug-box[b-7km3026sog] {
    margin-top: 18px;
}

.form-error[b-7km3026sog] {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
}

@media(max-width:700px) {
    .page-head[b-7km3026sog],
    .catalog-item[b-7km3026sog],
    .submit-card[b-7km3026sog],
    .new-drug-box[b-7km3026sog] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-row[b-7km3026sog],
    .form-grid[b-7km3026sog] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-7km3026sog] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Drugs/Details.razor.rz.scp.css */
.pharmacy-drug-details-page[b-8oolr5hrrk] {
    width: 100%;
}

.page-head[b-8oolr5hrrk] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-8oolr5hrrk] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-8oolr5hrrk] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-8oolr5hrrk] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-8oolr5hrrk] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.primary-button[b-8oolr5hrrk],
.back-button[b-8oolr5hrrk] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.primary-button[b-8oolr5hrrk] {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
}

.primary-button:hover[b-8oolr5hrrk] {
    color: #fff;
    filter: brightness(.96);
}

.back-button[b-8oolr5hrrk] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.back-button:hover[b-8oolr5hrrk] {
    border-color: var(--green);
    color: var(--green);
}

.details-grid[b-8oolr5hrrk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.details-card[b-8oolr5hrrk] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.details-card.full[b-8oolr5hrrk] {
    grid-column: 1 / -1;
}

.details-card h3[b-8oolr5hrrk] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.loading-card[b-8oolr5hrrk] {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.form-error[b-8oolr5hrrk] {
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 18px;
}

.product-card[b-8oolr5hrrk] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.product-image[b-8oolr5hrrk] {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 22px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 24px;
    font-weight: 900;
}

.product-image img[b-8oolr5hrrk] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-info[b-8oolr5hrrk] {
    min-width: 0;
    flex: 1;
}

.product-type-label[b-8oolr5hrrk] {
    display: block;
    margin-bottom: 5px;
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
}

.product-info h2[b-8oolr5hrrk] {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 900;
}

.generic-name[b-8oolr5hrrk],
.brand-name[b-8oolr5hrrk] {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 18px;
}

.product-meta[b-8oolr5hrrk] {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.product-meta span[b-8oolr5hrrk] {
    color: var(--muted);
    font-size: 18px;
}

.product-meta strong[b-8oolr5hrrk] {
    color: var(--text);
}

.product-statuses[b-8oolr5hrrk] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.status-badge[b-8oolr5hrrk] {
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-8oolr5hrrk] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-8oolr5hrrk] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-8oolr5hrrk] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.info[b-8oolr5hrrk] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-8oolr5hrrk] {
    background: #f2f4f7;
    color: #667085;
}

.details-list[b-8oolr5hrrk] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-8oolr5hrrk] {
    min-height: 58px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #f1f2f4;
}

.detail-row:last-child[b-8oolr5hrrk] {
    border-bottom: 0;
}

.detail-row > span:first-child[b-8oolr5hrrk] {
    color: var(--muted);
    font-size: 18px;
}

.detail-row strong[b-8oolr5hrrk] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    text-align: left;
}

.price-value[b-8oolr5hrrk] {
    color: var(--green) !important;
}

.drug-info-grid[b-8oolr5hrrk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.drug-info-item[b-8oolr5hrrk] {
    min-width: 0;
    min-height: 82px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.drug-info-item > span:first-child[b-8oolr5hrrk] {
    color: var(--muted);
    font-size: 17px;
}

.drug-info-item strong[b-8oolr5hrrk] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.8;
}

.ltr-value[b-8oolr5hrrk] {
    direction: ltr;
    text-align: right;
}

.section-title-row[b-8oolr5hrrk] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.section-title-row h3[b-8oolr5hrrk] {
    margin: 0;
}

.section-title-row > span[b-8oolr5hrrk] {
    color: var(--muted);
    font-size: 17px;
}

.description-grid[b-8oolr5hrrk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.description-box[b-8oolr5hrrk] {
    min-width: 0;
    min-height: 150px;
    padding: 17px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.description-box strong[b-8oolr5hrrk] {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.description-box p[b-8oolr5hrrk] {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 2.1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.drug-gallery[b-8oolr5hrrk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gallery-item[b-8oolr5hrrk] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fff;
}

.gallery-image-shell[b-8oolr5hrrk] {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f8f9;
}

.gallery-image-shell img[b-8oolr5hrrk] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.gallery-placeholder[b-8oolr5hrrk] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.gallery-meta[b-8oolr5hrrk] {
    padding: 10px 12px;
}

.gallery-meta span[b-8oolr5hrrk] {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-details[b-8oolr5hrrk] {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 18px;
}

.note-box[b-8oolr5hrrk] {
    padding: 17px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffcf5;
    color: var(--text);
    font-size: 18px;
    line-height: 2;
    white-space: pre-wrap;
}

@media (max-width: 1100px) {
    .drug-info-grid[b-8oolr5hrrk],
    .drug-gallery[b-8oolr5hrrk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-8oolr5hrrk],
    .product-card[b-8oolr5hrrk] {
        flex-direction: column;
    }

    .page-head[b-8oolr5hrrk],
    .product-card[b-8oolr5hrrk] {
        align-items: flex-start;
    }

    .details-grid[b-8oolr5hrrk],
    .description-grid[b-8oolr5hrrk] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-8oolr5hrrk] {
        grid-column: auto;
    }

    .product-statuses[b-8oolr5hrrk] {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .head-actions[b-8oolr5hrrk] {
        width: 100%;
        flex-direction: column;
    }

    .primary-button[b-8oolr5hrrk],
    .back-button[b-8oolr5hrrk] {
        width: 100%;
        box-sizing: border-box;
    }

    .drug-info-grid[b-8oolr5hrrk],
    .drug-gallery[b-8oolr5hrrk] {
        grid-template-columns: 1fr;
    }

    .product-meta[b-8oolr5hrrk] {
        flex-direction: column;
        gap: 7px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Drugs/Drugs.razor.rz.scp.css */
.pharmacy-drugs-page[b-kk83uyzd4r] {
    width: 100%;
}

.create-drug-button[b-kk83uyzd4r] {
    min-height: 58px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.create-drug-button span[b-kk83uyzd4r] {
    font-size: 20px;
}

.create-drug-button:hover[b-kk83uyzd4r] {
    color: #fff;
    filter: brightness(.96);
}

.drug-cell[b-kk83uyzd4r] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.drug-cell > div:last-child[b-kk83uyzd4r] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.drug-cell strong[b-kk83uyzd4r] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.drug-cell span[b-kk83uyzd4r],
.drug-cell small[b-kk83uyzd4r] {
    color: var(--muted);
    font-size: 15px;
}

.status-badge[b-kk83uyzd4r] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge + .status-badge[b-kk83uyzd4r] {
    margin-inline-start: 6px;
}

.status-badge.success[b-kk83uyzd4r] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-kk83uyzd4r] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-kk83uyzd4r] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-kk83uyzd4r] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-kk83uyzd4r] {
    background: #eff8ff;
    color: #175cd3;
}

.row-actions[b-kk83uyzd4r] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-link[b-kk83uyzd4r] {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.action-link:hover[b-kk83uyzd4r] {
    border-color: var(--green);
    color: var(--green);
}

.warning-action[b-kk83uyzd4r] {
    border-color: #fedf89;
    background: #fffcf5;
    color: #b54708;
}

.warning-action:hover[b-kk83uyzd4r] {
    border-color: #b54708;
    color: #b54708;
}

@media (max-width: 700px) {
    .row-actions[b-kk83uyzd4r] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-link[b-kk83uyzd4r] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Drugs/Edit.razor.rz.scp.css */
.edit-pharmacy-drug-page[b-xfffjbiyvj] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-xfffjbiyvj] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-xfffjbiyvj] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-xfffjbiyvj] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-xfffjbiyvj] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.back-button[b-xfffjbiyvj] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 17px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-xfffjbiyvj] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Status Note
========================= */

.edit-status-note[b-xfffjbiyvj] {
    margin-bottom: 18px;
    padding: 16px 18px;

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

    gap: 18px;

    border: 1px solid #b2ddff;
    border-radius: 14px;

    background: #eff8ff;
}

.edit-status-note > div[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.edit-status-note strong[b-xfffjbiyvj] {
    color: #175cd3;

    font-size: 17px;
    font-weight: 900;
}

.edit-status-note > div > span[b-xfffjbiyvj] {
    color: #475467;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================
   Layout
========================= */

.form-grid[b-xfffjbiyvj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.form-card[b-xfffjbiyvj],
.admin-feedback-card[b-xfffjbiyvj] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card.full[b-xfffjbiyvj],
.admin-feedback-card.full[b-xfffjbiyvj] {
    grid-column: 1 / -1;
}

.form-card h3[b-xfffjbiyvj] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}


/* =========================
   Fields
========================= */

.fields-grid[b-xfffjbiyvj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.medical-grid[b-xfffjbiyvj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.description-field[b-xfffjbiyvj] {
    margin-top: 14px;
}

.field-group > label:first-child[b-xfffjbiyvj] {
    color: var(--text);

    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-xfffjbiyvj],
.field-group select[b-xfffjbiyvj],
.field-group textarea[b-xfffjbiyvj] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 18px;

    outline: none;
}

.field-group input[b-xfffjbiyvj],
.field-group select[b-xfffjbiyvj] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-xfffjbiyvj] {
    padding: 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-xfffjbiyvj],
.field-group select:focus[b-xfffjbiyvj],
.field-group textarea:focus[b-xfffjbiyvj] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.field-group input:disabled[b-xfffjbiyvj] {
    background: #f7f8f9;

    color: var(--muted);
}


/* =========================
   Switch
========================= */

.switch-list[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.switch-item[b-xfffjbiyvj] {
    min-height: 68px;
    padding: 12px 14px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.switch-item > div[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.switch-item strong[b-xfffjbiyvj] {
    color: var(--text);

    font-size: 17px;
}

.switch-item span[b-xfffjbiyvj] {
    color: var(--muted);

    font-size: 15px;
}

.switch-item input[b-xfffjbiyvj] {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    accent-color: var(--green);
}


/* =========================
   Categories
========================= */

.category-selector[b-xfffjbiyvj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.category-option[b-xfffjbiyvj] {
    min-height: 72px;
    padding: 12px 14px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    cursor: pointer;
}

.category-option:hover[b-xfffjbiyvj] {
    border-color: rgba(58, 125, 68, .35);

    background: rgba(58, 125, 68, .025);
}

.category-option input[b-xfffjbiyvj] {
    width: 17px;
    height: 17px;

    flex: 0 0 auto;

    accent-color: var(--green);
}

.category-option > div[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.category-option strong[b-xfffjbiyvj] {
    color: var(--text);

    font-size: 17px;
}

.category-option span[b-xfffjbiyvj] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Images
========================= */

.images-area[b-xfffjbiyvj] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

.current-image[b-xfffjbiyvj] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.image-placeholder[b-xfffjbiyvj] {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 13px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 17px;
    font-weight: 900;
}

.current-image > div:last-child[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.current-image strong[b-xfffjbiyvj] {
    color: var(--text);

    font-size: 17px;
}

.current-image span[b-xfffjbiyvj] {
    color: var(--muted);

    font-size: 15px;
}

.secondary-button[b-xfffjbiyvj] {
    min-height: 38px;
    padding: 0 14px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-xfffjbiyvj] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Admin Feedback
========================= */

.admin-feedback-card[b-xfffjbiyvj] {
    background: #fffaeb;

    border-color: #fedf89;
}

.admin-feedback-card strong[b-xfffjbiyvj] {
    display: block;

    margin-bottom: 7px;

    color: #b54708;

    font-size: 17px;
    font-weight: 900;
}

.admin-feedback-card p[b-xfffjbiyvj] {
    margin: 0;

    color: #7a2e0e;

    font-size: 16px;
    line-height: 1.9;
}


/* =========================
   Status
========================= */

.status-badge[b-xfffjbiyvj] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.info[b-xfffjbiyvj] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Submit
========================= */

.submit-card[b-xfffjbiyvj] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.submit-card > div:first-child[b-xfffjbiyvj] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.submit-card > div:first-child strong[b-xfffjbiyvj] {
    color: var(--text);

    font-size: 18px;
}

.submit-card > div:first-child span[b-xfffjbiyvj] {
    color: var(--muted);

    font-size: 16px;
}

.submit-actions[b-xfffjbiyvj] {
    display: flex;
    align-items: center;

    gap: 8px;
}

.cancel-button[b-xfffjbiyvj],
.submit-button[b-xfffjbiyvj] {
    min-height: 44px;
    padding: 0 17px;

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

    border-radius: 10px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
}

.cancel-button[b-xfffjbiyvj] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);

    text-decoration: none;
}

.cancel-button:hover[b-xfffjbiyvj] {
    border-color: var(--green);

    color: var(--green);
}

.submit-button[b-xfffjbiyvj] {
    border: 0;

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.submit-button:disabled[b-xfffjbiyvj] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .medical-grid[b-xfffjbiyvj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {

    .page-head[b-xfffjbiyvj],
    .edit-status-note[b-xfffjbiyvj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-grid[b-xfffjbiyvj],
    .fields-grid[b-xfffjbiyvj],
    .category-selector[b-xfffjbiyvj] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-xfffjbiyvj],
    .admin-feedback-card.full[b-xfffjbiyvj] {
        grid-column: auto;
    }

    .back-button[b-xfffjbiyvj] {
        width: 100%;
    }

    .images-area[b-xfffjbiyvj],
    .submit-card[b-xfffjbiyvj] {
        align-items: stretch;
        flex-direction: column;
    }

    .submit-actions[b-xfffjbiyvj] {
        flex-direction: column-reverse;
    }

    .secondary-button[b-xfffjbiyvj],
    .cancel-button[b-xfffjbiyvj],
    .submit-button[b-xfffjbiyvj] {
        width: 100%;
    }
}

.availability-description[b-xfffjbiyvj] {
    margin: 8px 0 22px;
    color: #667085;
    font-size: 18px;
    line-height: 1.9;
}

.availability-options[b-xfffjbiyvj] {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.availability-button[b-xfffjbiyvj] {
    min-height: 64px;
    padding: 12px 20px;
    border: 2px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.availability-button:hover[b-xfffjbiyvj] {
    transform: translateY(-1px);
}

.availability-icon[b-xfffjbiyvj] {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f7;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.availability-button.available:hover[b-xfffjbiyvj] {
    border-color: #3a7d44;
    color: #276532;
}

.availability-button.available.selected[b-xfffjbiyvj] {
    border-color: #3a7d44;
    background: #3a7d44;
    color: #fff;
    box-shadow: 0 10px 24px rgba(58, 125, 68, .2);
}

.availability-button.unavailable:hover[b-xfffjbiyvj] {
    border-color: #d92d20;
    color: #b42318;
}

.availability-button.unavailable.selected[b-xfffjbiyvj] {
    border-color: #d92d20;
    background: #d92d20;
    color: #fff;
    box-shadow: 0 10px 24px rgba(217, 45, 32, .18);
}

.availability-button.selected .availability-icon[b-xfffjbiyvj] {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.availability-button:focus-visible[b-xfffjbiyvj] {
    outline: 3px solid rgba(47, 128, 237, .2);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .availability-options[b-xfffjbiyvj] {
        grid-template-columns: 1fr;
    }

    .availability-button[b-xfffjbiyvj] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Finance/PharmacyFinance.razor.rz.scp.css */
.pharmacy-finance-page[b-ckl1wlrxwk] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.finance-summary[b-ckl1wlrxwk] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-ckl1wlrxwk] {
    min-height: 118px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-label[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-value[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-note[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Settlement
========================= */

.settlement-card[b-ckl1wlrxwk] {
    margin-bottom: 18px;
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.settlement-head[b-ckl1wlrxwk] {
    margin-bottom: 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.settlement-eyebrow[b-ckl1wlrxwk] {
    display: block;

    margin-bottom: 5px;

    color: var(--orange);

    font-size: 11px;
    font-weight: 800;
}

.settlement-head h2[b-ckl1wlrxwk] {
    margin: 0;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.settlement-head p[b-ckl1wlrxwk] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.settlement-grid[b-ckl1wlrxwk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.settlement-item[b-ckl1wlrxwk] {
    min-height: 86px;
    padding: 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 12px;
}

.settlement-item.highlight[b-ckl1wlrxwk] {
    background: rgba(58, 125, 68, .05);

    border-color: rgba(58, 125, 68, .16);
}

.settlement-item span[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 10px;
}

.settlement-item strong[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.settlement-item.highlight strong[b-ckl1wlrxwk] {
    color: var(--green);
}

.settlement-footer[b-ckl1wlrxwk] {
    margin-top: 16px;
    padding-top: 16px;

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

    gap: 20px;

    border-top: 1px solid #f0f2f4;
}

.settlement-footer > div[b-ckl1wlrxwk] {
    display: flex;
    align-items: center;

    gap: 8px;
}

.settlement-footer > div > span:first-child[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 11px;
}

.settlement-footer strong[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 12px;
}


/* =========================
   Finance Card
========================= */

.finance-card[b-ckl1wlrxwk] {
    margin-top: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;

    overflow: hidden;
}

.card-head[b-ckl1wlrxwk] {
    padding: 19px 20px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.card-head h2[b-ckl1wlrxwk] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-head p[b-ckl1wlrxwk] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Table
========================= */

.table-wrap[b-ckl1wlrxwk] {
    width: 100%;

    overflow-x: auto;
}

.finance-table[b-ckl1wlrxwk] {
    width: 100%;
    min-width: 950px;

    border-collapse: collapse;
}

.finance-table th[b-ckl1wlrxwk],
.finance-table td[b-ckl1wlrxwk] {
    padding: 14px 15px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.finance-table th[b-ckl1wlrxwk] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.finance-table td[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 11px;
}

.finance-table tbody tr:last-child td[b-ckl1wlrxwk] {
    border-bottom: 0;
}

.finance-table tbody tr:hover[b-ckl1wlrxwk] {
    background: #fcfdfd;
}


/* =========================
   Transaction
========================= */

.transaction-cell[b-ckl1wlrxwk] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.transaction-avatar[b-ckl1wlrxwk] {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.transaction-cell > div:last-child[b-ckl1wlrxwk] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.transaction-cell strong[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 11px;
}

.transaction-cell span[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 9px;
}

.reference-link[b-ckl1wlrxwk] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-ckl1wlrxwk] {
    text-decoration: underline;
}


/* =========================
   Amount
========================= */

.positive-amount[b-ckl1wlrxwk] {
    color: #027a48 !important;

    font-weight: 900;
}

.negative-amount[b-ckl1wlrxwk] {
    color: #b42318 !important;

    font-weight: 800;
}


/* =========================
   Status
========================= */

.status-badge[b-ckl1wlrxwk] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ckl1wlrxwk] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-ckl1wlrxwk] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-ckl1wlrxwk] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-ckl1wlrxwk] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-ckl1wlrxwk] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Action
========================= */

.action-link[b-ckl1wlrxwk] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-ckl1wlrxwk] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Empty
========================= */

.empty-state[b-ckl1wlrxwk] {
    min-height: 180px;

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

    gap: 6px;
}

.empty-state strong[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 13px;
}

.empty-state span[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Transaction Details
========================= */

.transaction-details-card[b-ckl1wlrxwk] {
    margin-top: 18px;
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-head[b-ckl1wlrxwk] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.details-head span[b-ckl1wlrxwk] {
    display: block;

    margin-bottom: 4px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 800;
}

.details-head h2[b-ckl1wlrxwk] {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.close-button[b-ckl1wlrxwk] {
    min-height: 34px;
    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.close-button:hover[b-ckl1wlrxwk] {
    border-color: var(--green);

    color: var(--green);
}

.details-grid[b-ckl1wlrxwk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.details-grid > div[b-ckl1wlrxwk] {
    min-height: 74px;
    padding: 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 11px;
}

.details-grid span[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 9px;
}

.details-grid strong[b-ckl1wlrxwk] {
    color: var(--text);

    font-size: 11px;
}

.transaction-description[b-ckl1wlrxwk] {
    margin-top: 12px;
    padding: 14px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 11px;
}

.transaction-description span[b-ckl1wlrxwk] {
    color: var(--muted);

    font-size: 10px;
    font-weight: 800;
}

.transaction-description p[b-ckl1wlrxwk] {
    margin: 6px 0 0;

    color: var(--text);

    font-size: 11px;
    line-height: 2;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .finance-summary[b-ckl1wlrxwk],
    .settlement-grid[b-ckl1wlrxwk] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .details-grid[b-ckl1wlrxwk] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .finance-summary[b-ckl1wlrxwk],
    .settlement-grid[b-ckl1wlrxwk],
    .details-grid[b-ckl1wlrxwk] {
        grid-template-columns: 1fr;
    }

    .settlement-head[b-ckl1wlrxwk],
    .settlement-footer[b-ckl1wlrxwk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .settlement-footer[b-ckl1wlrxwk] {
        width: 100%;
    }

    .settlement-footer > div[b-ckl1wlrxwk] {
        width: 100%;

        justify-content: space-between;
    }

    .details-head[b-ckl1wlrxwk] {
        flex-direction: column;
    }

    .close-button[b-ckl1wlrxwk] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Finance/PharmacySettlementDetails.razor.rz.scp.css */
.pharmacy-settlement-details-page[b-bbpnwongzw] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-bbpnwongzw] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-bbpnwongzw] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-bbpnwongzw] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-bbpnwongzw] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-bbpnwongzw] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-bbpnwongzw] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Settlement Summary
========================= */

.settlement-summary-card[b-bbpnwongzw] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.settlement-main[b-bbpnwongzw] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.settlement-avatar[b-bbpnwongzw] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.settlement-main > div:last-child[b-bbpnwongzw] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.settlement-main strong[b-bbpnwongzw] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.settlement-main span[b-bbpnwongzw] {
    color: var(--muted);

    font-size: 10px;
}

.settlement-statuses[b-bbpnwongzw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-bbpnwongzw] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-bbpnwongzw] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card.highlight[b-bbpnwongzw] {
    background: rgba(58, 125, 68, .04);

    border-color: rgba(58, 125, 68, .18);
}

.summary-card span[b-bbpnwongzw] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-bbpnwongzw] {
    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.summary-card.highlight strong[b-bbpnwongzw] {
    color: var(--green);
}

.summary-card small[b-bbpnwongzw] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Details
========================= */

.details-grid[b-bbpnwongzw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-bbpnwongzw] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-bbpnwongzw] {
    grid-column: 1 / -1;
}

.details-card h3[b-bbpnwongzw] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.details-list[b-bbpnwongzw] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-bbpnwongzw] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-bbpnwongzw] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-bbpnwongzw] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-bbpnwongzw] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-bbpnwongzw] {
    direction: ltr;
}


/* =========================
   Amounts
========================= */

.positive-value[b-bbpnwongzw] {
    color: #027a48 !important;

    font-weight: 900 !important;
}

.negative-value[b-bbpnwongzw] {
    color: #b42318 !important;

    font-weight: 800 !important;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-bbpnwongzw] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-bbpnwongzw] {
    margin-bottom: 5px;
}

.card-title-row p[b-bbpnwongzw] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Tables
========================= */

.table-wrap[b-bbpnwongzw] {
    width: 100%;

    overflow-x: auto;
}

.settlement-table[b-bbpnwongzw],
.adjustments-table[b-bbpnwongzw] {
    width: 100%;

    border-collapse: collapse;
}

.settlement-table[b-bbpnwongzw] {
    min-width: 1000px;
}

.adjustments-table[b-bbpnwongzw] {
    min-width: 700px;
}

.settlement-table th[b-bbpnwongzw],
.settlement-table td[b-bbpnwongzw],
.adjustments-table th[b-bbpnwongzw],
.adjustments-table td[b-bbpnwongzw] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.settlement-table th[b-bbpnwongzw],
.adjustments-table th[b-bbpnwongzw] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.settlement-table td[b-bbpnwongzw],
.adjustments-table td[b-bbpnwongzw] {
    color: var(--text);

    font-size: 12px;
}

.settlement-table tbody tr:last-child td[b-bbpnwongzw],
.adjustments-table tbody tr:last-child td[b-bbpnwongzw] {
    border-bottom: 0;
}

.settlement-table tbody tr:hover[b-bbpnwongzw],
.adjustments-table tbody tr:hover[b-bbpnwongzw] {
    background: #fcfdfd;
}


/* =========================
   Reference
========================= */

.reference-link[b-bbpnwongzw] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-bbpnwongzw] {
    text-decoration: underline;
}


/* =========================
   Description
========================= */

.description-box[b-bbpnwongzw] {
    min-height: 100px;
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}


/* =========================
   Status
========================= */

.status-badge[b-bbpnwongzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-bbpnwongzw] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-bbpnwongzw] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-bbpnwongzw] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-bbpnwongzw] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-bbpnwongzw] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-link[b-bbpnwongzw] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-bbpnwongzw] {
    border-color: var(--green);

    color: var(--green);
}

.action-list[b-bbpnwongzw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-bbpnwongzw] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.action-button:hover[b-bbpnwongzw] {
    border-color: var(--green);

    color: var(--green);
}

.primary-action[b-bbpnwongzw] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-bbpnwongzw] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .summary-grid[b-bbpnwongzw] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-bbpnwongzw] {
        flex-direction: column;
    }

    .settlement-summary-card[b-bbpnwongzw] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-bbpnwongzw] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-bbpnwongzw] {
        grid-column: auto;
    }

    .back-button[b-bbpnwongzw] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-bbpnwongzw] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Inventory/PharmacyInventory.razor.rz.scp.css */
.pharmacy-inventory-page[b-u9jkkywe0u] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.inventory-summary[b-u9jkkywe0u] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-u9jkkywe0u] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-u9jkkywe0u] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-u9jkkywe0u] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-u9jkkywe0u] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Drug Cell
========================= */

.drug-cell[b-u9jkkywe0u] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.drug-avatar[b-u9jkkywe0u] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.drug-cell > div:last-child[b-u9jkkywe0u] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.drug-cell strong[b-u9jkkywe0u] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.drug-cell span[b-u9jkkywe0u] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Status
========================= */

.status-badge[b-u9jkkywe0u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-u9jkkywe0u] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-u9jkkywe0u] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-u9jkkywe0u] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-u9jkkywe0u] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-u9jkkywe0u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-u9jkkywe0u] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-u9jkkywe0u] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .inventory-summary[b-u9jkkywe0u] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .inventory-summary[b-u9jkkywe0u] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Inventory/PharmacyInventoryDetails.razor.rz.scp.css */
.pharmacy-inventory-details-page[b-gpst4o7523] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-gpst4o7523] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-gpst4o7523] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-gpst4o7523] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-gpst4o7523] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-gpst4o7523] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-gpst4o7523] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Summary
========================= */

.inventory-summary-card[b-gpst4o7523] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.drug-main[b-gpst4o7523] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.drug-avatar[b-gpst4o7523] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.drug-main > div:last-child[b-gpst4o7523] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.drug-main strong[b-gpst4o7523] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.drug-main span[b-gpst4o7523] {
    color: var(--muted);

    font-size: 10px;
}

.summary-statuses[b-gpst4o7523] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Cards
========================= */

.summary-grid[b-gpst4o7523] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-gpst4o7523] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-gpst4o7523] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-gpst4o7523] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-gpst4o7523] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Cards
========================= */

.details-grid[b-gpst4o7523] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-gpst4o7523] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-gpst4o7523] {
    grid-column: 1 / -1;
}

.details-card h3[b-gpst4o7523] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-gpst4o7523] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-gpst4o7523] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-gpst4o7523] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-gpst4o7523] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-gpst4o7523] {
    color: var(--text);

    font-size: 13px;
}

.card-actions[b-gpst4o7523] {
    margin-top: 16px;
}


/* =========================
   Card Header
========================= */

.card-title-row[b-gpst4o7523] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-gpst4o7523] {
    margin-bottom: 5px;
}

.card-title-row p[b-gpst4o7523] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Adjustment
========================= */

.adjustment-grid[b-gpst4o7523] {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(110px, .6fr)
        minmax(260px, 2fr)
        auto;

    gap: 10px;

    align-items: end;
}

.field-group[b-gpst4o7523] {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.field-group label[b-gpst4o7523] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.field-group input[b-gpst4o7523],
.field-group select[b-gpst4o7523] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

.field-group input:focus[b-gpst4o7523],
.field-group select:focus[b-gpst4o7523] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.save-button[b-gpst4o7523] {
    min-height: 42px;
    padding: 0 17px;

    border: 0;
    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;
}

.save-button:disabled[b-gpst4o7523] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Tables
========================= */

.table-wrap[b-gpst4o7523] {
    width: 100%;

    overflow-x: auto;
}

.details-table[b-gpst4o7523] {
    width: 100%;
    min-width: 860px;

    border-collapse: collapse;
}

.details-table th[b-gpst4o7523],
.details-table td[b-gpst4o7523] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.details-table th[b-gpst4o7523] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.details-table td[b-gpst4o7523] {
    color: var(--text);

    font-size: 12px;
}

.details-table tbody tr:last-child td[b-gpst4o7523] {
    border-bottom: 0;
}

.details-table tbody tr:hover[b-gpst4o7523] {
    background: #fcfdfd;
}

.reference-link[b-gpst4o7523] {
    color: var(--green);

    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-gpst4o7523] {
    text-decoration: underline;
}

.table-action[b-gpst4o7523] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.table-action:hover[b-gpst4o7523] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Amount / Qty
========================= */

.positive-value[b-gpst4o7523] {
    color: #027a48 !important;

    font-weight: 900;
}

.negative-value[b-gpst4o7523] {
    color: #b42318 !important;

    font-weight: 900;
}


/* =========================
   Status
========================= */

.status-badge[b-gpst4o7523] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-gpst4o7523] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-gpst4o7523] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-gpst4o7523] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-gpst4o7523] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-gpst4o7523] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.action-list[b-gpst4o7523] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-gpst4o7523] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.action-button:hover[b-gpst4o7523] {
    border-color: var(--green);

    color: var(--green);
}

.primary-action[b-gpst4o7523] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-gpst4o7523] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .summary-grid[b-gpst4o7523] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .adjustment-grid[b-gpst4o7523] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .reason-field[b-gpst4o7523],
    .adjustment-action[b-gpst4o7523] {
        grid-column: 1 / -1;
    }

    .save-button[b-gpst4o7523] {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .page-head[b-gpst4o7523] {
        flex-direction: column;
    }

    .inventory-summary-card[b-gpst4o7523] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-gpst4o7523] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-gpst4o7523] {
        grid-column: auto;
    }

    .back-button[b-gpst4o7523] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-gpst4o7523],
    .adjustment-grid[b-gpst4o7523] {
        grid-template-columns: 1fr;
    }

    .reason-field[b-gpst4o7523],
    .adjustment-action[b-gpst4o7523] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Orders/PharmacyOrderDetails.razor.rz.scp.css */
.pharmacy-order-details-page[b-aooxfmfdn1] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Orders/PharmacyOrders.razor.rz.scp.css */
.panel-orders-page[b-sn91j9mbs9] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.panel-orders-page[b-sn91j9mbs9]  .data-table {
    min-width: 1150px;
}

.panel-orders-page[b-sn91j9mbs9]  .data-table th,
.panel-orders-page[b-sn91j9mbs9]  .data-table td {
    font-size: 16px;
    white-space: nowrap;
}

.order-cell[b-sn91j9mbs9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.8;
}

.order-cell strong[b-sn91j9mbs9] {
    color: var(--text, #475467);
    font-size: 17px;
    font-weight: 800;
}

.order-cell span[b-sn91j9mbs9],
.muted-value[b-sn91j9mbs9] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.order-money[b-sn91j9mbs9] {
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.delivery-line + .delivery-line[b-sn91j9mbs9] {
    margin-top: 10px;
}

.order-badge[b-sn91j9mbs9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.order-badge.success[b-sn91j9mbs9] {
    background: #ecfdf3;
    color: #027a48;
}

.order-badge.warning[b-sn91j9mbs9] {
    background: #fffaeb;
    color: #b54708;
}

.order-badge.info[b-sn91j9mbs9] {
    background: #eff8ff;
    color: #175cd3;
}

.order-badge.danger[b-sn91j9mbs9] {
    background: #fff1f1;
    color: #b42318;
}

.order-badge.neutral[b-sn91j9mbs9] {
    background: #f2f4f7;
    color: #667085;
}

.order-link[b-sn91j9mbs9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.order-link:hover[b-sn91j9mbs9] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.order-link:focus-visible[b-sn91j9mbs9] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/PharmacyDashboard.razor.rz.scp.css */
.pharmacy-dashboard[b-92wh0o024j] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.pharmacy-dashboard *[b-92wh0o024j] {
    box-sizing: border-box;
}

.dashboard-intro[b-92wh0o024j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid #dce9df;
    border-radius: 22px;
    background: linear-gradient(120deg, #f1f8f2, #fff);
}

.dashboard-intro > div[b-92wh0o024j] {
    min-width: 0;
}

.dashboard-eyebrow[b-92wh0o024j],
.section-eyebrow[b-92wh0o024j] {
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
}

.dashboard-intro h1[b-92wh0o024j] {
    margin: 9px 0;
    color: #344054;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.6;
}

.dashboard-intro p[b-92wh0o024j] {
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 2;
}

.dashboard-button[b-92wh0o024j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 46px;
    padding: 11px 17px;
    border: 1px solid #dfe5e1;
    border-radius: 11px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
    text-decoration: none;
}

.dashboard-intro > .dashboard-button[b-92wh0o024j] {
    flex-shrink: 0;
}

.dashboard-button.primary[b-92wh0o024j] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.section-heading[b-92wh0o024j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.section-heading h2[b-92wh0o024j] {
    margin: 0;
    color: #344054;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.8;
}

.section-heading > span[b-92wh0o024j] {
    color: #667085;
    font-size: 16px;
}

.section-heading .section-eyebrow[b-92wh0o024j] {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.quick-access-grid[b-92wh0o024j] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.quick-access-card[b-92wh0o024j] {
    --card-color: #3a7d44;
    --card-soft: #eef7f0;

    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 23px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.quick-access-card.blue[b-92wh0o024j] {
    --card-color: #2459a6;
    --card-soft: #eef4ff;
}

.quick-access-card.orange[b-92wh0o024j] {
    --card-color: #b54708;
    --card-soft: #fff5e9;
}

.quick-access-card.purple[b-92wh0o024j] {
    --card-color: #6941c6;
    --card-soft: #f4f0ff;
}

.quick-card-top[b-92wh0o024j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.quick-card-icon[b-92wh0o024j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--card-soft);
    color: var(--card-color);
    font-size: 25px;
    font-weight: 900;
    direction: ltr;
}

.quick-card-arrow[b-92wh0o024j] {
    color: #98a2b3;
    font-size: 25px;
}

.quick-access-card > strong[b-92wh0o024j] {
    color: #344054;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.8;
}

.quick-access-card p[b-92wh0o024j] {
    flex: 1;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.quick-card-action[b-92wh0o024j] {
    margin-top: 5px;
    color: var(--card-color);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-sections[b-92wh0o024j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.dashboard-section[b-92wh0o024j] {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
}

.dashboard-link-list[b-92wh0o024j] {
    display: flex;
    flex-direction: column;
}

.dashboard-link-list > a[b-92wh0o024j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #eef0f3;
    color: inherit;
    text-decoration: none;
}

.dashboard-link-list > a:last-child[b-92wh0o024j] {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-link-list > a > span:first-child[b-92wh0o024j] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dashboard-link-list strong[b-92wh0o024j] {
    color: #344054;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-link-list small[b-92wh0o024j] {
    color: #667085;
    font-size: 16px;
    line-height: 1.9;
}

.link-arrow[b-92wh0o024j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #f7f9fa;
    color: #667085;
    font-size: 27px;
}

.support-section[b-92wh0o024j] {
    background: linear-gradient(135deg, #fff, #f8fbff);
}

.support-description[b-92wh0o024j] {
    margin: 0;
    color: #667085;
    font-size: 17px;
    line-height: 2;
}

.support-actions[b-92wh0o024j] {
    margin-top: 22px;
}

.dashboard-tip[b-92wh0o024j] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #dce5f3;
    border-radius: 17px;
    background: #f3f7fd;
}

.tip-icon[b-92wh0o024j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #e5edfb;
    color: #2459a6;
    font-size: 24px;
    font-weight: 900;
}

.dashboard-tip > div[b-92wh0o024j] {
    flex: 1;
    min-width: 0;
}

.dashboard-tip strong[b-92wh0o024j] {
    color: #344054;
    font-size: 18px;
}

.dashboard-tip p[b-92wh0o024j] {
    margin: 6px 0 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.dashboard-tip > a[b-92wh0o024j] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.9;
}

.pharmacy-dashboard a:focus-visible[b-92wh0o024j] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}

@media (hover: hover) {
    .quick-access-card:hover[b-92wh0o024j] {
        transform: translateY(-3px);
        border-color: var(--card-color);
        box-shadow: 0 10px 25px rgba(16, 24, 40, .06);
    }

    .dashboard-link-list > a:hover strong[b-92wh0o024j] {
        color: var(--green, #3a7d44);
    }

    .dashboard-button:hover[b-92wh0o024j] {
        filter: brightness(.97);
    }
}

@media (max-width: 1200px) {
    .quick-access-grid[b-92wh0o024j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .dashboard-sections[b-92wh0o024j] {
        grid-template-columns: 1fr;
    }

    .dashboard-intro[b-92wh0o024j] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-tip[b-92wh0o024j] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-tip > a[b-92wh0o024j] {
        margin-right: 60px;
    }
}

@media (max-width: 520px) {
    .pharmacy-dashboard[b-92wh0o024j] {
        gap: 23px;
    }

    .dashboard-intro[b-92wh0o024j],
    .dashboard-section[b-92wh0o024j],
    .quick-access-card[b-92wh0o024j] {
        padding: 19px;
    }

    .dashboard-intro h1[b-92wh0o024j] {
        font-size: 27px;
    }

    .dashboard-intro p[b-92wh0o024j] {
        font-size: 17px;
    }

    .quick-access-grid[b-92wh0o024j] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dashboard-tip[b-92wh0o024j] {
        padding: 18px;
        gap: 12px;
    }

    .dashboard-tip > a[b-92wh0o024j] {
        margin-right: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-access-card[b-92wh0o024j] {
        transition: none;
    }

    .quick-access-card:hover[b-92wh0o024j] {
        transform: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Prescriptions/CustomerPrescriptionRequestDetails.razor.rz.scp.css */
.customer-prescription-details[b-i7irtzgoi3] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Prescriptions/PharmacyPrescriptionDetails.razor.rz.scp.css */
.pharmacy-prescription-details-page[b-bia09prf6a] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-bia09prf6a] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-bia09prf6a] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-bia09prf6a] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-bia09prf6a] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-bia09prf6a] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-bia09prf6a] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.prescription-summary-card[b-bia09prf6a] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.prescription-main[b-bia09prf6a] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.prescription-avatar[b-bia09prf6a] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.prescription-main > div:last-child[b-bia09prf6a] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.prescription-main strong[b-bia09prf6a] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.prescription-main span[b-bia09prf6a] {
    color: var(--muted);

    font-size: 10px;
}

.prescription-statuses[b-bia09prf6a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Cards
========================= */

.details-grid[b-bia09prf6a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-bia09prf6a] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-bia09prf6a] {
    grid-column: 1 / -1;
}

.details-card h3[b-bia09prf6a] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-bia09prf6a] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-bia09prf6a] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-bia09prf6a] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-bia09prf6a] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-bia09prf6a] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-bia09prf6a] {
    direction: ltr;
}


/* =========================
   Card Actions
========================= */

.card-actions[b-bia09prf6a] {
    margin-top: 16px;
}


/* =========================
   Card Title
========================= */

.card-title-row[b-bia09prf6a] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-bia09prf6a] {
    margin-bottom: 5px;
}

.card-title-row p[b-bia09prf6a] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Table
========================= */

.table-wrap[b-bia09prf6a] {
    width: 100%;

    overflow-x: auto;
}

.prescription-table[b-bia09prf6a] {
    width: 100%;
    min-width: 950px;

    border-collapse: collapse;
}

.prescription-table th[b-bia09prf6a],
.prescription-table td[b-bia09prf6a] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.prescription-table th[b-bia09prf6a] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.prescription-table td[b-bia09prf6a] {
    color: var(--text);

    font-size: 12px;
}

.prescription-table tbody tr:last-child td[b-bia09prf6a] {
    border-bottom: 0;
}


/* =========================
   Drug
========================= */

.drug-cell[b-bia09prf6a] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.drug-avatar[b-bia09prf6a] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.drug-cell > div:last-child[b-bia09prf6a] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.drug-cell strong[b-bia09prf6a] {
    color: var(--text);

    font-size: 12px;
}

.drug-cell span[b-bia09prf6a] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Note
========================= */

.note-box[b-bia09prf6a] {
    min-height: 100px;

    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}


/* =========================
   Status
========================= */

.status-badge[b-bia09prf6a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-bia09prf6a] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-bia09prf6a] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-bia09prf6a] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-bia09prf6a] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-bia09prf6a] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-bia09prf6a],
.action-list[b-bia09prf6a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.table-action[b-bia09prf6a],
.action-button[b-bia09prf6a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.table-action[b-bia09prf6a] {
    min-height: 31px;
    padding: 0 9px;

    border-radius: 8px;

    font-size: 10px;
}

.action-button[b-bia09prf6a] {
    min-height: 40px;
    padding: 0 14px;

    border-radius: 10px;

    font-size: 12px;
}

.table-action:hover[b-bia09prf6a],
.action-button:hover[b-bia09prf6a] {
    border-color: var(--green);

    color: var(--green);
}

.success-action[b-bia09prf6a] {
    color: var(--green);
}

.primary-action[b-bia09prf6a] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-bia09prf6a] {
    color: #fff;

    filter: brightness(.96);
}

.danger-action[b-bia09prf6a] {
    color: #b42318;
}

.danger-action:hover[b-bia09prf6a] {
    border-color: #fda29b;

    background: #fff7f7;
    color: #b42318;
}

.action-button:disabled[b-bia09prf6a],
.table-action:disabled[b-bia09prf6a] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {

    .page-head[b-bia09prf6a] {
        flex-direction: column;
    }

    .prescription-summary-card[b-bia09prf6a] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-bia09prf6a] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-bia09prf6a] {
        grid-column: auto;
    }

    .back-button[b-bia09prf6a] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Prescriptions/PharmacyPrescriptionRequestDetails.razor.rz.scp.css */
.pharmacy-prescription-details[b-g5ipfxs6so] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Prescriptions/PharmacyPrescriptionRequests.razor.rz.scp.css */
.pharmacy-requests-page[b-c8jc2rzjm9] {
    width: 100%;
    min-width: 0;
}

.pharmacy-requests-page[b-c8jc2rzjm9]  .data-table {
    min-width: 1150px;
}

.pharmacy-requests-page[b-c8jc2rzjm9]  .data-table th,
.pharmacy-requests-page[b-c8jc2rzjm9]  .data-table td {
    white-space: nowrap;
}

.request-cell[b-c8jc2rzjm9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.request-cell strong[b-c8jc2rzjm9] {
    font-size: 18px;
}

.request-cell span[b-c8jc2rzjm9] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.status-badge[b-c8jc2rzjm9] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-c8jc2rzjm9] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.info[b-c8jc2rzjm9] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.warning[b-c8jc2rzjm9] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-c8jc2rzjm9] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-c8jc2rzjm9] {
    background: #f2f4f7;
    color: #667085;
}

.action-link[b-c8jc2rzjm9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;
    background: #fff;
    color: var(--text, #344054);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.action-link.primary[b-c8jc2rzjm9] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.action-link:disabled[b-c8jc2rzjm9] {
    opacity: .55;
    cursor: not-allowed;
}

.action-error[b-c8jc2rzjm9] {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #fecdca;
    border-radius: 12px;
    background: #fff5f4;
    color: #b42318;
    font-size: 17px;
    line-height: 1.9;
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Prescriptions/PharmacyPrescriptions.razor.rz.scp.css */
.pharmacy-prescriptions-page[b-q9hwl9qqv0] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.prescription-summary[b-q9hwl9qqv0] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-q9hwl9qqv0] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-q9hwl9qqv0] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-q9hwl9qqv0] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-q9hwl9qqv0] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Prescription
========================= */

.prescription-cell[b-q9hwl9qqv0] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.prescription-avatar[b-q9hwl9qqv0] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.prescription-cell > div:last-child[b-q9hwl9qqv0] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.prescription-cell strong[b-q9hwl9qqv0] {
    color: var(--text);

    font-size: 13px;
}

.prescription-cell span[b-q9hwl9qqv0] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Patient
========================= */

.patient-cell[b-q9hwl9qqv0] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.patient-cell strong[b-q9hwl9qqv0] {
    color: var(--text);

    font-size: 13px;
}

.patient-cell span[b-q9hwl9qqv0] {
    color: var(--muted);

    font-size: 10px;
}

.ltr-value[b-q9hwl9qqv0] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Reference
========================= */

.reference-link[b-q9hwl9qqv0] {
    color: var(--green);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-q9hwl9qqv0] {
    text-decoration: underline;
}


/* =========================
   Status
========================= */

.status-badge[b-q9hwl9qqv0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-q9hwl9qqv0] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-q9hwl9qqv0] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-q9hwl9qqv0] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-q9hwl9qqv0] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-q9hwl9qqv0] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-q9hwl9qqv0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-q9hwl9qqv0] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-q9hwl9qqv0] {
    border-color: var(--green);
    color: var(--green);
}

.success-action[b-q9hwl9qqv0] {
    border-color: var(--green);

    color: var(--green);
}

.success-action:hover[b-q9hwl9qqv0] {
    background: rgba(58, 125, 68, .05);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .prescription-summary[b-q9hwl9qqv0] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .prescription-summary[b-q9hwl9qqv0] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Profile/Profile.razor.rz.scp.css */
.pharmacy-profile-page[b-q2nqvope1u] {
    width: 100%;
}


/* =========================
   Header
========================= */

.profile-head[b-q2nqvope1u] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.profile-head > div:first-child > span[b-q2nqvope1u] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 13px;
    font-weight: 800;
}

.profile-head h1[b-q2nqvope1u] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.profile-head p[b-q2nqvope1u] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}


/* =========================
   Status header
========================= */

.profile-status-card[b-q2nqvope1u] {
    min-width: 150px;

    padding: 14px 17px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
}

.profile-status-card span[b-q2nqvope1u] {
    color: var(--muted);

    font-size: 10px;
}

.profile-status-card strong[b-q2nqvope1u] {
    font-size: 14px;
    font-weight: 900;
}

.profile-status-card strong.active[b-q2nqvope1u] {
    color: #027a48;
}

.profile-status-card strong.inactive[b-q2nqvope1u] {
    color: #b42318;
}


/* =========================
   Note
========================= */

.profile-info-note[b-q2nqvope1u] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #d1e9ff;
    border-radius: 12px;

    background: #eff8ff;
    color: #175cd3;

    font-size: 11px;
    line-height: 1.9;
}


/* =========================
   Error / loading
========================= */

.form-error[b-q2nqvope1u] {
    padding: 15px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 12px;
    font-weight: 700;
}

.loading-card[b-q2nqvope1u],
.empty-card[b-q2nqvope1u] {
    min-height: 150px;

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

.empty-card[b-q2nqvope1u] {
    flex-direction: column;

    gap: 6px;
}

.empty-card strong[b-q2nqvope1u] {
    color: var(--text);

    font-size: 13px;
}

.empty-card span[b-q2nqvope1u] {
    color: var(--muted);

    font-size: 11px;
}


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

.profile-grid[b-q2nqvope1u] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.profile-card[b-q2nqvope1u] {
    padding: 21px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.profile-card.full[b-q2nqvope1u] {
    grid-column: 1 / -1;
}

.profile-card h3[b-q2nqvope1u] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}


/* =========================
   Identity
========================= */

.identity-card[b-q2nqvope1u] {
    display: flex;
    align-items: center;

    gap: 18px;
}

.pharmacy-avatar[b-q2nqvope1u] {
    width: 86px;
    height: 86px;

    flex: 0 0 86px;

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

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}

.pharmacy-avatar img[b-q2nqvope1u] {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.identity-info[b-q2nqvope1u] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.identity-info h2[b-q2nqvope1u] {
    margin: 0;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.identity-info > span[b-q2nqvope1u] {
    color: var(--muted);

    font-size: 11px;
}

.identity-badges[b-q2nqvope1u] {
    margin-top: 6px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.identity-meta[b-q2nqvope1u] {
    margin-right: auto;

    min-width: 115px;

    padding: 12px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.identity-meta span[b-q2nqvope1u] {
    color: var(--muted);

    font-size: 9px;
}

.identity-meta strong[b-q2nqvope1u] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-q2nqvope1u] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-q2nqvope1u] {
    min-height: 48px;

    padding: 10px 0;

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

    gap: 15px;

    border-bottom: 1px solid #f1f2f4;
}

.detail-item:last-child[b-q2nqvope1u] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-q2nqvope1u] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-q2nqvope1u] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.ltr-value[b-q2nqvope1u] {
    direction: ltr;
    unicode-bidi: plaintext;
}


/* =========================
   Status
========================= */

.status-badge[b-q2nqvope1u] {
    min-height: 28px;
    padding: 0 10px;

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

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-q2nqvope1u] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-q2nqvope1u] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.info[b-q2nqvope1u] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-q2nqvope1u] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Address / Description
========================= */

.address-box[b-q2nqvope1u],
.description-box[b-q2nqvope1u] {
    min-height: 80px;

    padding: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;

    color: var(--text);

    font-size: 12px;
    line-height: 2;
}

.empty-value[b-q2nqvope1u] {
    color: var(--muted);
}


/* =========================
   Actions
========================= */

.action-list[b-q2nqvope1u] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.action-button[b-q2nqvope1u] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.action-button:hover[b-q2nqvope1u] {
    border-color: var(--green);
    color: var(--green);
}

.action-button.primary-action[b-q2nqvope1u] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.action-button.primary-action:hover[b-q2nqvope1u] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {

    .profile-grid[b-q2nqvope1u] {
        grid-template-columns: 1fr;
    }

    .profile-card.full[b-q2nqvope1u] {
        grid-column: auto;
    }
}

@media (max-width: 700px) {

    .profile-head[b-q2nqvope1u] {
        flex-direction: column;
    }

    .profile-status-card[b-q2nqvope1u] {
        width: 100%;
    }

    .identity-card[b-q2nqvope1u] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .identity-meta[b-q2nqvope1u] {
        width: 100%;

        margin-right: 0;
    }
}

@media (max-width: 520px) {

    .identity-card[b-q2nqvope1u] {
        flex-direction: column;
    }

    .detail-item[b-q2nqvope1u] {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .action-list[b-q2nqvope1u] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-button[b-q2nqvope1u] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Tickets/CreatePharmacyTicket.razor.rz.scp.css */
.create-pharmacy-ticket-page[b-54vusga4pu] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-54vusga4pu] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-54vusga4pu] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-54vusga4pu] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-54vusga4pu] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-54vusga4pu] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-54vusga4pu] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Form Card
========================= */

.ticket-form-card[b-54vusga4pu] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-section[b-54vusga4pu] {
    padding-bottom: 22px;
    margin-bottom: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.form-section:last-of-type[b-54vusga4pu] {
    margin-bottom: 0;
}

.form-section h3[b-54vusga4pu] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-description[b-54vusga4pu] {
    margin: -10px 0 18px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}


/* =========================
   Fields
========================= */

.fields-grid[b-54vusga4pu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-54vusga4pu] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-54vusga4pu] {
    grid-column: 1 / -1;
}

.field-group label[b-54vusga4pu] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.field-group input[b-54vusga4pu],
.field-group select[b-54vusga4pu],
.field-group textarea[b-54vusga4pu] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.field-group input[b-54vusga4pu],
.field-group select[b-54vusga4pu] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-54vusga4pu] {
    padding: 12px 14px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-54vusga4pu],
.field-group select:focus[b-54vusga4pu],
.field-group textarea:focus[b-54vusga4pu] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Attachment
========================= */

.attachment-placeholder[b-54vusga4pu] {
    min-height: 100px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 14px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.attachment-icon[b-54vusga4pu] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 21px;
    font-weight: 700;
}

.attachment-placeholder > div:nth-child(2)[b-54vusga4pu] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.attachment-placeholder strong[b-54vusga4pu] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.attachment-placeholder span[b-54vusga4pu] {
    color: var(--muted);

    font-size: 10px;
}

.secondary-button[b-54vusga4pu] {
    min-height: 38px;
    padding: 0 14px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-54vusga4pu] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Note
========================= */

.ticket-note[b-54vusga4pu] {
    margin-top: 20px;
    padding: 14px 16px;

    border-radius: 12px;

    background: #fbfcfd;

    border: 1px solid var(--soft);

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}


/* =========================
   Submit
========================= */

.submit-row[b-54vusga4pu] {
    margin-top: 20px;

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

    gap: 8px;
}

.cancel-button[b-54vusga4pu],
.submit-button[b-54vusga4pu] {
    min-height: 42px;
    padding: 0 17px;

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

    border-radius: 10px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}

.cancel-button[b-54vusga4pu] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);

    text-decoration: none;
}

.cancel-button:hover[b-54vusga4pu] {
    border-color: var(--green);
    color: var(--green);
}

.submit-button[b-54vusga4pu] {
    border: 0;

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.submit-button:disabled[b-54vusga4pu] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .page-head[b-54vusga4pu] {
        flex-direction: column;
    }

    .back-button[b-54vusga4pu] {
        width: 100%;
    }

    .fields-grid[b-54vusga4pu] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-54vusga4pu] {
        grid-column: auto;
    }

    .attachment-placeholder[b-54vusga4pu] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-54vusga4pu] {
        width: 100%;
    }

    .submit-row[b-54vusga4pu] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cancel-button[b-54vusga4pu],
    .submit-button[b-54vusga4pu] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Tickets/PharmacyTicketDetails.razor.rz.scp.css */
.pharmacy-ticket-details-page[b-ni1b1q6ifl] {
    width: 100%;
}


/* =========================
   Header
========================= */

.ticket-head[b-ni1b1q6ifl] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.ticket-head > div:first-child > span[b-ni1b1q6ifl] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.ticket-head h1[b-ni1b1q6ifl] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.ticket-head p[b-ni1b1q6ifl] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-ni1b1q6ifl] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-ni1b1q6ifl] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.ticket-summary[b-ni1b1q6ifl] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.summary-main[b-ni1b1q6ifl] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-ni1b1q6ifl] {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 13px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.summary-main > div:last-child[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.summary-main strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.summary-main span[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 11px;
}

.summary-badges[b-ni1b1q6ifl] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-ni1b1q6ifl] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 1fr);

    gap: 18px;
}

.conversation-card[b-ni1b1q6ifl],
.details-card[b-ni1b1q6ifl] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.ticket-side[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Conversation
========================= */

.conversation-head[b-ni1b1q6ifl] {
    margin-bottom: 18px;
}

.conversation-head h2[b-ni1b1q6ifl] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.conversation-head p[b-ni1b1q6ifl] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.messages-list[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.message-item[b-ni1b1q6ifl] {
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 14px;
}

.pharmacy-message[b-ni1b1q6ifl] {
    margin-left: 45px;

    background: rgba(58, 125, 68, .035);

    border-color: rgba(58, 125, 68, .14);
}

.admin-message[b-ni1b1q6ifl] {
    margin-right: 45px;

    background: #fbfcfd;
}

.message-head[b-ni1b1q6ifl] {
    margin-bottom: 11px;

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

    gap: 14px;
}

.sender-info[b-ni1b1q6ifl] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.sender-avatar[b-ni1b1q6ifl] {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 9px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.admin-message .sender-avatar[b-ni1b1q6ifl] {
    background: #eff8ff;
    color: #175cd3;
}

.sender-info > div:last-child[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sender-info strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 11px;
    font-weight: 900;
}

.sender-info span[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 9px;
}

.message-body p[b-ni1b1q6ifl] {
    margin: 0;

    color: var(--text);

    font-size: 12px;
    line-height: 2;
}


/* =========================
   Attachment
========================= */

.attachment-item[b-ni1b1q6ifl] {
    margin-top: 13px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
}

.attachment-icon[b-ni1b1q6ifl] {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

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

    border-radius: 8px;

    background: #f2f4f7;
    color: var(--muted);

    font-size: 10px;
    font-weight: 900;
}

.attachment-item > div:nth-child(2)[b-ni1b1q6ifl] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.attachment-item strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 10px;
}

.attachment-item span[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 9px;
}

.attachment-button[b-ni1b1q6ifl] {
    min-height: 31px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-button:hover[b-ni1b1q6ifl] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Reply
========================= */

.reply-box[b-ni1b1q6ifl] {
    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid var(--soft);
}

.reply-head[b-ni1b1q6ifl] {
    margin-bottom: 10px;
}

.reply-head > div[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reply-head strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.reply-head span[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 10px;
}

.reply-box textarea[b-ni1b1q6ifl] {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.reply-box textarea:focus[b-ni1b1q6ifl] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.reply-toolbar[b-ni1b1q6ifl] {
    margin-top: 10px;

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

    gap: 10px;
}

.attachment-action[b-ni1b1q6ifl] {
    min-height: 39px;
    padding: 0 13px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-action:hover[b-ni1b1q6ifl] {
    border-color: var(--green);
    color: var(--green);
}

.send-button[b-ni1b1q6ifl] {
    min-height: 40px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.send-button:disabled[b-ni1b1q6ifl] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Side Cards
========================= */

.details-card h3[b-ni1b1q6ifl] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.details-list[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-ni1b1q6ifl] {
    min-height: 53px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-ni1b1q6ifl] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Subject
========================= */

.ticket-subject[b-ni1b1q6ifl] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;

    color: var(--text);

    font-size: 12px;
    line-height: 1.9;
}


/* =========================
   Reference
========================= */

.reference-card[b-ni1b1q6ifl] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.reference-icon[b-ni1b1q6ifl] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.reference-info[b-ni1b1q6ifl] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reference-info span[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 9px;
}

.reference-info strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 11px;
}

.reference-action[b-ni1b1q6ifl] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.reference-action:hover[b-ni1b1q6ifl] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Tracking
========================= */

.tracking-list[b-ni1b1q6ifl] {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 17px;
}

.tracking-item[b-ni1b1q6ifl] {
    position: relative;

    padding-right: 24px;
}

.tracking-item:not(:last-child)[b-ni1b1q6ifl]::after {
    content: "";

    position: absolute;

    top: 14px;
    right: 5px;

    width: 1px;
    height: calc(100% + 10px);

    background: #e4e7ec;
}

.tracking-dot[b-ni1b1q6ifl] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;

    z-index: 1;
}

.tracking-item.completed .tracking-dot[b-ni1b1q6ifl] {
    background: var(--green);
}

.tracking-item.active .tracking-dot[b-ni1b1q6ifl] {
    background: var(--orange);
}

.tracking-item > div:last-child[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.tracking-item strong[b-ni1b1q6ifl] {
    color: var(--text);

    font-size: 10px;
}

.tracking-item span[b-ni1b1q6ifl] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}


/* =========================
   Side Actions
========================= */

.side-actions[b-ni1b1q6ifl] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-ni1b1q6ifl] {
    min-height: 38px;
    padding: 0 12px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.side-action:hover[b-ni1b1q6ifl] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Status
========================= */

.status-badge[b-ni1b1q6ifl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-ni1b1q6ifl] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-ni1b1q6ifl] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-ni1b1q6ifl] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-ni1b1q6ifl] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-ni1b1q6ifl] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .ticket-layout[b-ni1b1q6ifl] {
        grid-template-columns: 1fr;
    }

    .pharmacy-message[b-ni1b1q6ifl],
    .admin-message[b-ni1b1q6ifl] {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 700px) {

    .ticket-head[b-ni1b1q6ifl],
    .ticket-summary[b-ni1b1q6ifl] {
        align-items: flex-start;
        flex-direction: column;
    }

    .back-button[b-ni1b1q6ifl] {
        width: 100%;
    }

    .reply-toolbar[b-ni1b1q6ifl] {
        align-items: stretch;
        flex-direction: column;
    }

    .attachment-action[b-ni1b1q6ifl],
    .send-button[b-ni1b1q6ifl] {
        width: 100%;
    }

    .message-head[b-ni1b1q6ifl] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Pharmacy/Pages/Tickets/PharmacyTickets.razor.rz.scp.css */
.pharmacy-tickets-page[b-s0vjet7h0o] {
    width: 100%;
}


/* =========================
   Create
========================= */

.create-ticket-button[b-s0vjet7h0o] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-ticket-button span[b-s0vjet7h0o] {
    font-size: 20px;

    line-height: 1;
}

.create-ticket-button:hover[b-s0vjet7h0o] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Ticket
========================= */

.ticket-cell[b-s0vjet7h0o] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.ticket-avatar[b-s0vjet7h0o] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-s0vjet7h0o] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.ticket-cell strong[b-s0vjet7h0o] {
    color: var(--text);

    font-size: 13px;
    font-weight: 800;
}

.ticket-cell span[b-s0vjet7h0o] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Status
========================= */

.status-badge[b-s0vjet7h0o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-s0vjet7h0o] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-s0vjet7h0o] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-s0vjet7h0o] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-s0vjet7h0o] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-s0vjet7h0o] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Actions
========================= */

.row-actions[b-s0vjet7h0o] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-s0vjet7h0o] {
    min-height: 32px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-s0vjet7h0o] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .create-ticket-button[b-s0vjet7h0o] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyBenefitsSection.razor.rz.scp.css */
.pharmacy-benefits[b-vkpln307g8] {
    position: relative;

    padding: 88px 0 96px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #f4f7fa 0%,
            #f8fafb 48%,
            #f1f7f3 100%);
}


.pharmacy-benefits[b-vkpln307g8]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .065) 0 3px,
            transparent 4px),
        radial-gradient(
            circle,
            rgba(36, 89, 166, .06) 0 3px,
            transparent 4px);

    background-position:
        0 0,
        65px 65px;

    background-size:
        130px 130px;

    opacity: .4;
}


.benefits-shape[b-vkpln307g8] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-vkpln307g8] {
    width: 350px;
    height: 350px;

    top: -230px;
    right: -110px;

    background:
        rgba(58, 125, 68, .06);
}


.shape-two[b-vkpln307g8] {
    width: 310px;
    height: 310px;

    bottom: -210px;
    left: -90px;

    background:
        rgba(36, 89, 166, .055);
}


.benefits-container[b-vkpln307g8] {
    position: relative;
    z-index: 2;
}


.benefits-heading[b-vkpln307g8] {
    max-width: 820px;

    margin: 0 auto 48px;

    text-align: center;
}


.benefits-heading > span[b-vkpln307g8] {
    display: block;

    margin-bottom: 10px;

    color: #2459a6;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.benefits-heading h2[b-vkpln307g8] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(32px, 3.7vw, 43px);

    font-weight: 900;
    line-height: 1.55;
}


.benefits-heading p[b-vkpln307g8] {
    max-width: 780px;

    margin: 14px auto 0;

    color: #536071;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.1;
}


.benefits-grid[b-vkpln307g8] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.benefit-item[b-vkpln307g8] {
    position: relative;

    min-width: 0;
    min-height: 235px;
    padding: 34px 30px 30px;

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, .09);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(249, 252, 250, .92));

    box-shadow:
        0 14px 36px rgba(31, 41, 55, .055);

    text-align: right;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


.benefit-item:nth-child(even)[b-vkpln307g8] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(247, 250, 254, .93));
}


.benefit-item[b-vkpln307g8]::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    bottom: -88px;
    left: -73px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .055);

    transition:
        transform .3s ease;
}


.benefit-item:nth-child(even)[b-vkpln307g8]::after {
    background:
        rgba(36, 89, 166, .055);
}


.benefit-item:hover[b-vkpln307g8] {
    transform: translateY(-5px);

    border-color:
        rgba(58, 125, 68, .23);

    box-shadow:
        0 20px 43px rgba(31, 41, 55, .085);
}


.benefit-item:nth-child(even):hover[b-vkpln307g8] {
    border-color:
        rgba(36, 89, 166, .22);
}


.benefit-item:hover[b-vkpln307g8]::after {
    transform: scale(1.2);
}


.benefit-number[b-vkpln307g8] {
    position: absolute;

    top: 20px;
    left: 23px;

    color:
        rgba(58, 125, 68, .11);

    font-family:
        Arial,
        sans-serif;

    font-size: 47px;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;

    transition:
        color .24s ease,
        transform .24s ease;
}


.benefit-item:nth-child(even)
.benefit-number[b-vkpln307g8] {
    color:
        rgba(36, 89, 166, .11);
}


.benefit-item:hover
.benefit-number[b-vkpln307g8] {
    color:
        rgba(58, 125, 68, .17);

    transform: translateY(-2px);
}


.benefit-item:nth-child(even):hover
.benefit-number[b-vkpln307g8] {
    color:
        rgba(36, 89, 166, .17);
}


.benefit-accent[b-vkpln307g8] {
    width: 48px;
    height: 4px;

    margin-bottom: 27px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            rgba(58, 125, 68, .25));
}


.benefit-item:nth-child(even)
.benefit-accent[b-vkpln307g8] {
    background:
        linear-gradient(
            90deg,
            #2459a6,
            rgba(36, 89, 166, .25));
}


.benefit-item h3[b-vkpln307g8] {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.7;
}


.benefit-item p[b-vkpln307g8] {
    position: relative;
    z-index: 2;

    margin: 13px 0 0;

    color: #526071;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.05;
}


@media (max-width: 1000px) {

    .benefits-grid[b-vkpln307g8] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 680px) {

    .pharmacy-benefits[b-vkpln307g8] {
        padding: 70px 0 76px;
    }


    .benefits-heading[b-vkpln307g8] {
        margin-bottom: 34px;
    }


    .benefits-heading > span[b-vkpln307g8] {
        font-size: 15px;
    }


    .benefits-heading h2[b-vkpln307g8] {
        font-size: 29px;
        line-height: 1.65;
    }


    .benefits-heading p[b-vkpln307g8] {
        margin-top: 11px;

        font-size: 16px;
        line-height: 2.05;
    }


    .benefits-grid[b-vkpln307g8] {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .benefit-item[b-vkpln307g8] {
        min-height: 210px;
        padding: 29px 24px 25px;

        border-radius: 21px;
    }


    .benefit-number[b-vkpln307g8] {
        top: 18px;
        left: 20px;

        font-size: 41px;
    }


    .benefit-accent[b-vkpln307g8] {
        width: 43px;

        margin-bottom: 23px;
    }


    .benefit-item h3[b-vkpln307g8] {
        font-size: 20px;
    }


    .benefit-item p[b-vkpln307g8] {
        margin-top: 10px;

        font-size: 15px;
        line-height: 2;
    }
}



@media (hover: none) {

    .benefit-item:hover[b-vkpln307g8] {
        transform: none;
    }


    .benefit-item:hover
    .benefit-number[b-vkpln307g8] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .benefit-item[b-vkpln307g8],
    .benefit-item[b-vkpln307g8]::after,
    .benefit-number[b-vkpln307g8] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyCtaSection.razor.rz.scp.css */
.home-cta[b-7vgkzprzrs] {
    position: relative;

    min-height: 620px;
    padding: 100px 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #285da8 0%,
            #2f7187 47%,
            #347d46 100%);

    background-size: 180% 180%;

    color: #fff;

    animation:
        cta-gradient-motion-b-7vgkzprzrs 18s
        ease-in-out infinite;
}


.home-cta[b-7vgkzprzrs]::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(31, 80, 154, .16),
            rgba(58, 125, 68, .08)),
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, .055),
            transparent 48%);

    pointer-events: none;

    animation:
        cta-overlay-breathe-b-7vgkzprzrs 9s
        ease-in-out infinite;
}


.home-cta[b-7vgkzprzrs]::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size:
        54px 54px;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, .48),
            transparent 72%);

    opacity: .45;
}


.home-cta .container[b-7vgkzprzrs] {
    position: relative;
    z-index: 4;

    width: 100%;
}


.cta-shape[b-7vgkzprzrs] {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.shape-top[b-7vgkzprzrs] {
    width: 500px;
    height: 500px;

    top: -275px;
    right: -125px;

    background:
        rgba(255, 255, 255, .085);

    animation:
        cta-shape-top-b-7vgkzprzrs 12s
        ease-in-out infinite;
}


.shape-bottom[b-7vgkzprzrs] {
    width: 540px;
    height: 540px;

    bottom: -345px;
    left: -115px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        cta-shape-bottom-b-7vgkzprzrs 14s
        ease-in-out infinite;
}


.cta-light[b-7vgkzprzrs] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(4px);

    will-change:
        transform,
        opacity;
}


.light-one[b-7vgkzprzrs] {
    width: 280px;
    height: 280px;

    top: 6%;
    left: 18%;

    background:
        radial-gradient(
            circle,
            rgba(100, 174, 220, .14),
            transparent 68%);

    animation:
        cta-light-one-b-7vgkzprzrs 10s
        ease-in-out infinite;
}


.light-two[b-7vgkzprzrs] {
    width: 300px;
    height: 300px;

    right: 15%;
    bottom: 3%;

    background:
        radial-gradient(
            circle,
            rgba(126, 192, 135, .13),
            transparent 68%);

    animation:
        cta-light-two-b-7vgkzprzrs 11s
        ease-in-out infinite;
}


.cta-content[b-7vgkzprzrs] {
    position: relative;

    max-width: 1080px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    direction: rtl;

    text-align: center;
}


.cta-badge[b-7vgkzprzrs] {
    min-height: 47px;
    padding: 0 22px;

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

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .11);

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 10px 30px rgba(15, 44, 69, .08);

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.cta-badge:hover[b-7vgkzprzrs] {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, .38);

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 13px 32px rgba(15, 44, 69, .12);
}


.cta-content h2[b-7vgkzprzrs] {
    max-width: 1060px;

    margin: 32px auto 0;

    color: #fff;

    font-size:
        clamp(40px, 5vw, 64px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.8px;

    text-shadow:
        0 5px 22px rgba(19, 50, 70, .12);

    text-wrap: balance;
}


.cta-content p[b-7vgkzprzrs] {
    max-width: 800px;

    margin: 30px auto 0;

    color:
        rgba(255, 255, 255, .94);

    font-size:
        clamp(16px, 1.55vw, 20px);

    font-weight: 600;
    line-height: 2.2;

    text-wrap: balance;
}


.cta-actions[b-7vgkzprzrs] {
    margin-top: 47px;

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

    gap: 18px;
}


.cta-button[b-7vgkzprzrs] {
    min-width: 270px;
    min-height: 66px;
    padding: 0 27px;

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

    gap: 10px;

    border:
        1px solid transparent;

    border-radius: 15px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 14px 34px rgba(14, 39, 61, .12);

    transition:
        transform .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        color .28s ease,
        box-shadow .28s ease;
}


.cta-button svg[b-7vgkzprzrs] {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .28s ease;
}


.cta-button.primary[b-7vgkzprzrs] {
    border-color:
        rgba(255, 255, 255, .9);

    background: #fff;
    color: #2459a6;
}


.cta-button.primary:hover[b-7vgkzprzrs] {
    transform: translateY(-4px);

    background: #f8fbff;

    box-shadow:
        0 19px 40px rgba(14, 39, 61, .2);
}


.cta-button.primary:hover svg[b-7vgkzprzrs] {
    transform:
        translateY(-1px)
        rotate(-4deg);
}


.cta-button.secondary[b-7vgkzprzrs] {
    border-color:
        rgba(255, 255, 255, .34);

    background:
        rgba(255, 255, 255, .06);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 14px 34px rgba(14, 39, 61, .09);

    backdrop-filter: blur(8px);
}


.cta-button.secondary:hover[b-7vgkzprzrs] {
    transform: translateY(-4px);

    border-color:
        rgba(255, 255, 255, .58);

    background:
        rgba(255, 255, 255, .13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 19px 40px rgba(14, 39, 61, .15);
}


.cta-button.secondary:hover svg[b-7vgkzprzrs] {
    transform:
        translateX(-2px)
        rotate(-3deg);
}


.cta-button:active[b-7vgkzprzrs] {
    transform:
        translateY(-1px)
        scale(.985);
}


.cta-button:focus-visible[b-7vgkzprzrs] {
    outline:
        4px solid rgba(255, 255, 255, .25);

    outline-offset: 4px;
}


@keyframes cta-gradient-motion-b-7vgkzprzrs {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


@keyframes cta-overlay-breathe-b-7vgkzprzrs {

    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: 1;
    }
}


@keyframes cta-shape-top-b-7vgkzprzrs {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .78;
    }

    50% {
        transform:
            translate3d(-18px, 17px, 0)
            scale(1.06);

        opacity: 1;
    }
}


@keyframes cta-shape-bottom-b-7vgkzprzrs {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .72;
    }

    50% {
        transform:
            translate3d(20px, -16px, 0)
            scale(1.055);

        opacity: .92;
    }
}


@keyframes cta-light-one-b-7vgkzprzrs {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.95);

        opacity: .55;
    }

    50% {
        transform:
            translate3d(24px, 14px, 0)
            scale(1.08);

        opacity: .9;
    }
}


@keyframes cta-light-two-b-7vgkzprzrs {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);

        opacity: .5;
    }

    50% {
        transform:
            translate3d(-22px, -15px, 0)
            scale(1.09);

        opacity: .88;
    }
}


@media (max-width: 1050px) {

    .home-cta[b-7vgkzprzrs] {
        min-height: 570px;
        padding: 88px 0;
    }


    .shape-top[b-7vgkzprzrs] {
        width: 420px;
        height: 420px;

        top: -235px;
        right: -130px;
    }


    .shape-bottom[b-7vgkzprzrs] {
        width: 450px;
        height: 450px;

        bottom: -290px;
        left: -125px;
    }


    .cta-content h2[b-7vgkzprzrs] {
        max-width: 850px;

        font-size:
            clamp(38px, 5.7vw, 54px);
    }
}


@media (max-width: 750px) {

    .home-cta[b-7vgkzprzrs] {
        min-height: auto;
        padding: 78px 0;
    }


    .cta-content h2[b-7vgkzprzrs] {
        margin-top: 27px;

        font-size:
            clamp(33px, 7vw, 45px);

        line-height: 1.65;
    }


    .cta-content p[b-7vgkzprzrs] {
        max-width: 600px;

        margin-top: 23px;

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


    .cta-actions[b-7vgkzprzrs] {
        width: 100%;
        max-width: 470px;

        margin-top: 37px;

        flex-direction: column;

        gap: 13px;
    }


    .cta-button[b-7vgkzprzrs] {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 620px) {

    .home-cta[b-7vgkzprzrs] {
        padding: 68px 0 72px;
    }


    .shape-top[b-7vgkzprzrs] {
        width: 290px;
        height: 290px;

        top: -165px;
        right: -105px;
    }


    .shape-bottom[b-7vgkzprzrs] {
        width: 330px;
        height: 330px;

        bottom: -225px;
        left: -120px;
    }


    .light-one[b-7vgkzprzrs] {
        width: 190px;
        height: 190px;

        left: -30px;
    }


    .light-two[b-7vgkzprzrs] {
        width: 210px;
        height: 210px;

        right: -50px;
    }


    .cta-badge[b-7vgkzprzrs] {
        min-height: 42px;
        padding: 0 17px;

        font-size: 14px;
    }


    .cta-content h2[b-7vgkzprzrs] {
        margin-top: 23px;

        font-size: 31px;
        line-height: 1.7;

        letter-spacing: 0;
    }


    .cta-content p[b-7vgkzprzrs] {
        margin-top: 18px;

        font-size: 15px;
        line-height: 2.05;
    }


    .cta-actions[b-7vgkzprzrs] {
        margin-top: 31px;
    }


    .cta-button[b-7vgkzprzrs] {
        min-height: 59px;
        padding: 0 20px;

        border-radius: 14px;

        font-size: 16px;
    }
}


@media (max-width: 390px) {

    .home-cta[b-7vgkzprzrs] {
        padding: 62px 0 66px;
    }


    .cta-content h2[b-7vgkzprzrs] {
        font-size: 28px;
    }


    .cta-content p[b-7vgkzprzrs] {
        font-size: 14px;
    }


    .cta-button[b-7vgkzprzrs] {
        min-height: 56px;

        font-size: 15px;
    }
}


@media (hover: none) {

    .cta-badge:hover[b-7vgkzprzrs],
    .cta-button.primary:hover[b-7vgkzprzrs],
    .cta-button.secondary:hover[b-7vgkzprzrs] {
        transform: none;
    }


    .cta-button.primary:active[b-7vgkzprzrs],
    .cta-button.secondary:active[b-7vgkzprzrs] {
        transform: scale(.98);
    }
}


@media (prefers-reduced-motion: reduce) {

    .home-cta[b-7vgkzprzrs],
    .home-cta[b-7vgkzprzrs]::before,
    .cta-shape[b-7vgkzprzrs],
    .cta-light[b-7vgkzprzrs] {
        animation: none;
    }


    .cta-badge[b-7vgkzprzrs],
    .cta-button[b-7vgkzprzrs],
    .cta-button svg[b-7vgkzprzrs] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyFaqSection.razor.rz.scp.css */
.home-faq[b-1g5d1ocopg] {
    position: relative;

    padding: 96px 0 104px;

    overflow: hidden;

    background: #fff;
}


.home-faq[b-1g5d1ocopg]::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -245px;
    right: -145px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .045);

    pointer-events: none;
}


.home-faq[b-1g5d1ocopg]::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -235px;
    left: -135px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .035);

    pointer-events: none;
}


.home-faq .container[b-1g5d1ocopg] {
    position: relative;
    z-index: 2;
}


.faq-heading[b-1g5d1ocopg] {
    max-width: 820px;

    margin: 0 auto 58px;

    direction: rtl;

    text-align: center;
}


.faq-heading > span[b-1g5d1ocopg] {
    display: block;

    margin-bottom: 12px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-heading h2[b-1g5d1ocopg] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(34px, 4.4vw, 50px);

    font-weight: 900;
    line-height: 1.5;

    letter-spacing: -.5px;
}


.faq-heading p[b-1g5d1ocopg] {
    max-width: 760px;

    margin: 20px auto 0;

    color: #7a8699;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.1;

    text-wrap: balance;
}


.faq-list[b-1g5d1ocopg] {
    width: 100%;
    max-width: 1130px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 18px;

    direction: rtl;
}


.faq-item[b-1g5d1ocopg] {
    position: relative;

    overflow: hidden;

    border:
        1px solid #e1e6ec;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #f3f5f8,
            #f1f3f6);

    transition:
        border-color .3s ease,
        background-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.faq-item:hover[b-1g5d1ocopg] {
    transform: translateY(-2px);

    border-color:
        rgba(36, 89, 166, .16);

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .055);
}


.faq-item.active[b-1g5d1ocopg] {
    border-color:
        rgba(58, 125, 68, .18);

    background:
        linear-gradient(
            135deg,
            #f5f8f6,
            #f1f4f7);

    box-shadow:
        0 15px 36px rgba(31, 41, 55, .065);
}


.faq-item h3[b-1g5d1ocopg] {
    margin: 0;
}


.faq-question[b-1g5d1ocopg] {
    width: 100%;
    min-height: 116px;
    padding: 28px 35px 28px 38px;

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

    gap: 28px;

    border: 0;

    background: transparent;
    color: var(--text);

    direction: rtl;

    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;

    text-align: right;

    cursor: pointer;

    appearance: none;

    transition:
        color .3s ease;
}


.faq-question:hover[b-1g5d1ocopg] {
    color: #2459a6;
}


.faq-item.active .faq-question[b-1g5d1ocopg] {
    color: var(--text);
}


.faq-question:focus-visible[b-1g5d1ocopg] {
    outline:
        3px solid rgba(58, 125, 68, .17);

    outline-offset: -5px;
}


.question-text[b-1g5d1ocopg] {
    min-width: 0;

    overflow-wrap: anywhere;
}


.faq-toggle[b-1g5d1ocopg] {
    position: relative;

    width: 54px;
    height: 54px;

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

    flex: 0 0 54px;

    order: 2;

    border:
        1px solid rgba(36, 89, 166, .06);

    border-radius: 50%;

    background: #fff;
    color: #2459a6;

    box-shadow:
        0 8px 21px rgba(31, 41, 55, .045);

    transition:
        transform .35s ease,
        border-color .3s ease,
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.faq-question:hover .faq-toggle[b-1g5d1ocopg] {
    transform: scale(1.06);

    border-color:
        rgba(36, 89, 166, .15);

    box-shadow:
        0 11px 25px rgba(36, 89, 166, .09);
}


.toggle-line[b-1g5d1ocopg] {
    position: absolute;

    display: block;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform .35s
            cubic-bezier(.2, .72, .2, 1),
        opacity .25s ease;
}


.toggle-line.horizontal[b-1g5d1ocopg] {
    width: 15px;
    height: 3px;
}


.toggle-line.vertical[b-1g5d1ocopg] {
    width: 3px;
    height: 15px;
}


.faq-item.active .faq-toggle[b-1g5d1ocopg] {
    transform: rotate(90deg);

    border-color:
        rgba(58, 125, 68, .12);

    color: var(--green);

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .1);
}


.faq-item.active
.toggle-line.vertical[b-1g5d1ocopg] {
    opacity: 0;

    transform: scaleY(0);
}


.faq-item.active
.faq-question:hover
.faq-toggle[b-1g5d1ocopg] {
    transform:
        rotate(90deg)
        scale(1.06);
}


.faq-answer[b-1g5d1ocopg] {
    display: grid;

    grid-template-rows: 0fr;

    visibility: hidden;

    opacity: 0;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .3s ease,
        visibility 0s linear .45s;
}


.faq-item.active
.faq-answer[b-1g5d1ocopg] {
    grid-template-rows: 1fr;

    visibility: visible;

    opacity: 1;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .35s ease .08s,
        visibility 0s linear 0s;
}


.answer-inner[b-1g5d1ocopg] {
    min-height: 0;

    overflow: hidden;
}


.answer-inner p[b-1g5d1ocopg] {
    margin: 0;
    padding: 0 35px 37px 127px;

    color: #718096;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;

    white-space: pre-line;
    overflow-wrap: anywhere;

    transform: translateY(-8px);

    transition:
        transform .4s ease;
}


.faq-item.active
.answer-inner p[b-1g5d1ocopg] {
    transform: translateY(0);
}


.faq-state[b-1g5d1ocopg] {
    width: 100%;
    max-width: 900px;
    min-height: 150px;
    padding: 30px 34px;

    margin: 0 auto;

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

    gap: 18px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #f5f8fb);

    color: #667085;

    direction: rtl;

    text-align: right;
}


.faq-state > div[b-1g5d1ocopg] {
    min-width: 0;
}


.faq-state strong[b-1g5d1ocopg] {
    display: block;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-state p[b-1g5d1ocopg] {
    margin: 5px 0 0;

    color: #7a8699;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


.faq-state.error[b-1g5d1ocopg] {
    border-color:
        rgba(36, 89, 166, .14);

    background:
        linear-gradient(
            135deg,
            #f6f9fd,
            #f8faf9);
}


.faq-state.empty[b-1g5d1ocopg] {
    max-width: 760px;
}


.state-icon[b-1g5d1ocopg] {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}


.faq-state.error
.state-icon[b-1g5d1ocopg] {
    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;
}


.loading-spinner[b-1g5d1ocopg],
.button-spinner[b-1g5d1ocopg] {
    display: block;

    border-style: solid;
    border-color:
        rgba(58, 125, 68, .18);

    border-top-color:
        var(--green);

    border-radius: 50%;

    animation:
        faq-spinner-b-1g5d1ocopg .75s linear infinite;
}


.loading-spinner[b-1g5d1ocopg] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-width: 4px;
}


.button-spinner[b-1g5d1ocopg] {
    width: 18px;
    height: 18px;

    border-width: 2px;
}


.retry-button[b-1g5d1ocopg] {
    min-height: 45px;
    padding: 0 18px;

    margin-right: auto;

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

    gap: 8px;

    flex: 0 0 auto;

    border:
        1px solid var(--green);

    border-radius: 13px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.retry-button:hover:not(:disabled)[b-1g5d1ocopg] {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(58, 125, 68, .17);

    filter: brightness(.97);
}


.retry-button:disabled[b-1g5d1ocopg] {
    cursor: wait;

    opacity: .7;
}


.retry-button .button-spinner[b-1g5d1ocopg] {
    border-color:
        rgba(255, 255, 255, .3);

    border-top-color: #fff;
}


@keyframes faq-spinner-b-1g5d1ocopg {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 850px) {

    .home-faq[b-1g5d1ocopg] {
        padding: 82px 0 88px;
    }


    .faq-heading[b-1g5d1ocopg] {
        margin-bottom: 45px;
    }


    .faq-question[b-1g5d1ocopg] {
        min-height: 105px;
        padding: 24px 27px;

        font-size: 18px;
    }


    .answer-inner p[b-1g5d1ocopg] {
        padding:
            0 27px 31px 105px;

        font-size: 15px;
    }
}


@media (max-width: 620px) {

    .home-faq[b-1g5d1ocopg] {
        padding: 70px 0 74px;
    }


    .faq-heading[b-1g5d1ocopg] {
        margin-bottom: 36px;
    }


    .faq-heading > span[b-1g5d1ocopg] {
        margin-bottom: 9px;

        font-size: 15px;
    }


    .faq-heading h2[b-1g5d1ocopg] {
        font-size: 29px;
        line-height: 1.6;
    }


    .faq-heading p[b-1g5d1ocopg] {
        margin-top: 13px;

        font-size: 15px;
        line-height: 2;
    }


    .faq-list[b-1g5d1ocopg] {
        gap: 12px;
    }


    .faq-item[b-1g5d1ocopg] {
        border-radius: 19px;
    }


    .faq-question[b-1g5d1ocopg] {
        min-height: 88px;
        padding: 20px 18px;

        gap: 15px;

        font-size: 16px;
        line-height: 1.8;
    }


    .faq-toggle[b-1g5d1ocopg] {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .toggle-line.horizontal[b-1g5d1ocopg] {
        width: 13px;
        height: 2px;
    }


    .toggle-line.vertical[b-1g5d1ocopg] {
        width: 2px;
        height: 13px;
    }


    .answer-inner p[b-1g5d1ocopg] {
        padding:
            0 18px 24px;

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


    .faq-state[b-1g5d1ocopg] {
        min-height: 170px;
        padding: 25px 20px;

        align-items: center;
        flex-direction: column;

        gap: 12px;

        text-align: center;
    }


    .retry-button[b-1g5d1ocopg] {
        width: 100%;

        margin: 4px 0 0;
    }
}


@media (hover: none) {

    .faq-item:hover[b-1g5d1ocopg] {
        transform: none;

        box-shadow: none;
    }


    .faq-question:hover .faq-toggle[b-1g5d1ocopg] {
        transform: none;
    }


    .faq-item.active
    .faq-question:hover
    .faq-toggle[b-1g5d1ocopg] {
        transform: rotate(90deg);
    }
}


@media (prefers-reduced-motion: reduce) {

    .faq-item[b-1g5d1ocopg],
    .faq-toggle[b-1g5d1ocopg],
    .toggle-line[b-1g5d1ocopg],
    .faq-answer[b-1g5d1ocopg],
    .answer-inner p[b-1g5d1ocopg],
    .retry-button[b-1g5d1ocopg] {
        transition-duration: .01ms !important;
    }


    .loading-spinner[b-1g5d1ocopg],
    .button-spinner[b-1g5d1ocopg] {
        animation-duration: 1.5s;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyHeroSection.razor.rz.scp.css */
.pharmacy-hero[b-5u832mlleh] {
    position: relative;

    min-height:
        calc(100vh - 78px);
    padding: 24px 0 30px;

    display: flex;
    align-items: center;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            135deg,
            #f6f8fb 0%,
            #fbfcfd 48%,
            #f0f6f2 100%);
}


.pharmacy-hero[b-5u832mlleh]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 92%,
            rgba(36, 89, 166, .07),
            transparent 27%),
        radial-gradient(
            circle at 90% 8%,
            rgba(58, 125, 68, .08),
            transparent 25%);
}


.hero-glow[b-5u832mlleh] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);
}


.glow-green[b-5u832mlleh] {
    width: 430px;
    height: 430px;

    top: -260px;
    right: -120px;

    background:
        rgba(58, 125, 68, .06);
}


.glow-blue[b-5u832mlleh] {
    width: 390px;
    height: 390px;

    bottom: -250px;
    left: -120px;

    background:
        rgba(36, 89, 166, .06);
}


.hero-container[b-5u832mlleh] {
    position: relative;
    z-index: 2;
}


.hero-content[b-5u832mlleh] {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    text-align: center;
}


.hero-badge[b-5u832mlleh] {
    min-height: 45px;
    padding: 0 21px;

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

    gap: 9px;

    border:
        1px solid rgba(58, 125, 68, .16);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .82);

    color: var(--green);

    box-shadow:
        0 10px 28px rgba(31, 41, 55, .045);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;

    backdrop-filter: blur(10px);
}


.badge-capsule[b-5u832mlleh] {
    position: relative;

    width: 18px;
    height: 10px;

    display: inline-block;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--orange) 0 50%,
            #f7d4cc 50% 100%);

    transform: rotate(-42deg);
}


.badge-capsule[b-5u832mlleh]::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        rgba(255, 255, 255, .9);
}


.hero-content h1[b-5u832mlleh] {
    max-width: 960px;

    margin: 28px 0 0;

    color: #475467;

    font-size:
        clamp(43px, 4.2vw, 61px);

    font-weight: 900;
    line-height: 1.55;

    letter-spacing: -.7px;
}


.hero-content h1 span[b-5u832mlleh] {
    display: block;

    color: #2459a6;
}


.hero-description[b-5u832mlleh] {
    max-width: 920px;

    margin: 24px auto 0;

    color: #778196;

    font-size: 18px;
    font-weight: 500;
    line-height: 2.15;
}


.hero-actions[b-5u832mlleh] {
    width: 100%;

    margin-top: 31px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.hero-button[b-5u832mlleh] {
    min-height: 62px;
    padding: 0 24px;

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

    border:
        1px solid transparent;

    border-radius: 16px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;

    text-align: center;
    text-decoration: none;

    transition:
        transform .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}


.hero-button:hover[b-5u832mlleh] {
    transform: translateY(-3px);
}


.hero-button.primary[b-5u832mlleh] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;

    box-shadow:
        0 13px 28px rgba(58, 125, 68, .17);
}


.hero-button.primary:hover[b-5u832mlleh] {
    background: #326f3c;

    box-shadow:
        0 17px 34px rgba(58, 125, 68, .22);
}


.hero-button.outline[b-5u832mlleh] {
    border-color:
        rgba(36, 89, 166, .4);

    background:
        rgba(255, 255, 255, .78);

    color: #2459a6;

    box-shadow:
        0 10px 24px rgba(31, 41, 55, .045);
}


.hero-button.outline:hover[b-5u832mlleh] {
    border-color: #2459a6;

    background: #fff;
}


.hero-button.secondary[b-5u832mlleh] {
    border-color: #2b62b1;

    background: #2b62b1;
    color: #fff;

    box-shadow:
        0 13px 28px rgba(36, 89, 166, .17);
}


.hero-button.secondary:hover[b-5u832mlleh] {
    background: #2459a6;

    box-shadow:
        0 17px 34px rgba(36, 89, 166, .22);
}


.hero-information[b-5u832mlleh] {
    width: 100%;

    margin-top: 27px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.information-item[b-5u832mlleh] {
    min-width: 0;
    min-height: 112px;
    padding: 20px 18px;

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

    gap: 8px;

    border:
        1px solid rgba(31, 41, 55, .1);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .76);

    box-shadow:
        0 10px 30px rgba(31, 41, 55, .035);

    backdrop-filter: blur(9px);
}


.information-item strong[b-5u832mlleh] {
    color: #344054;

    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;
}


.information-item span[b-5u832mlleh] {
    color: #7b8497;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}


.hero-button:focus-visible[b-5u832mlleh] {
    outline:
        3px solid rgba(36, 89, 166, .18);

    outline-offset: 3px;
}


@media (min-width: 901px) and (max-height: 820px) {

    .pharmacy-hero[b-5u832mlleh] {
        padding:
            16px 0 20px;
    }


    .hero-badge[b-5u832mlleh] {
        min-height: 40px;

        font-size: 15px;
    }


    .hero-content h1[b-5u832mlleh] {
        margin-top: 18px;

        font-size:
            clamp(38px, 3.7vw, 51px);

        line-height: 1.47;
    }


    .hero-description[b-5u832mlleh] {
        margin-top: 15px;

        font-size: 16px;
        line-height: 2;
    }


    .hero-actions[b-5u832mlleh] {
        margin-top: 21px;
    }


    .hero-button[b-5u832mlleh] {
        min-height: 55px;

        font-size: 16px;
    }


    .hero-information[b-5u832mlleh] {
        margin-top: 18px;
    }


    .information-item[b-5u832mlleh] {
        min-height: 94px;
        padding:
            14px 16px;
    }


    .information-item strong[b-5u832mlleh] {
        font-size: 16px;
    }


    .information-item span[b-5u832mlleh] {
        font-size: 13px;
    }
}


@media (min-width: 901px) and (min-height: 950px) {

    .hero-content[b-5u832mlleh] {
        max-width: 1060px;
    }


    .hero-content h1[b-5u832mlleh] {
        margin-top: 34px;
    }


    .hero-description[b-5u832mlleh] {
        margin-top: 27px;
    }


    .hero-actions[b-5u832mlleh] {
        margin-top: 38px;
    }


    .hero-information[b-5u832mlleh] {
        margin-top: 31px;
    }
}


@media (max-width: 900px) {

    .pharmacy-hero[b-5u832mlleh] {
        min-height: auto;
        padding:
            68px 0 72px;
    }


    .hero-content h1[b-5u832mlleh] {
        font-size:
            clamp(37px, 6vw, 49px);
    }


    .hero-description[b-5u832mlleh] {
        max-width: 720px;

        font-size: 17px;
    }


    .hero-actions[b-5u832mlleh],
    .hero-information[b-5u832mlleh] {
        max-width: 720px;
    }
}


@media (max-width: 700px) {

    .pharmacy-hero[b-5u832mlleh] {
        padding:
            55px 0 62px;
    }


    .hero-badge[b-5u832mlleh] {
        min-height: 41px;
        padding:
            0 17px;

        font-size: 14px;
    }


    .hero-content h1[b-5u832mlleh] {
        margin-top: 22px;

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


    .hero-description[b-5u832mlleh] {
        margin-top: 18px;

        font-size: 16px;
        line-height: 2.05;
    }


    .hero-actions[b-5u832mlleh] {
        margin-top: 26px;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .hero-button[b-5u832mlleh] {
        width: 100%;
        min-height: 56px;

        font-size: 16px;
    }


    .hero-information[b-5u832mlleh] {
        margin-top: 22px;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .information-item[b-5u832mlleh] {
        min-height: 96px;

        border-radius: 17px;
    }


    .information-item strong[b-5u832mlleh] {
        font-size: 16px;
    }


    .information-item span[b-5u832mlleh] {
        font-size: 14px;
    }
}


@media (max-width: 420px) {

    .pharmacy-hero[b-5u832mlleh] {
        padding:
            46px 0 54px;
    }


    .hero-content h1[b-5u832mlleh] {
        font-size: 29px;
    }


    .hero-description[b-5u832mlleh] {
        font-size: 15px;
    }
}


@media (hover: none) {

    .hero-button:hover[b-5u832mlleh] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .hero-button[b-5u832mlleh] {
        transition-duration: .01ms !important;
    }
}

button.hero-button[b-5u832mlleh] {
    font-family: inherit;
    cursor: pointer;
}

button.hero-button.primary[b-5u832mlleh] {
    border: 1px solid transparent;
}

button.hero-button:disabled[b-5u832mlleh] {
    opacity: .55;
    cursor: not-allowed;
}

.hero-account-message[b-5u832mlleh] {
    margin-top: 16px;
    padding: 13px 16px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffcf5;
    color: #875408;
    font-size: 15px;
    line-height: 1.9;
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyMedicineDeliverySection.razor.rz.scp.css */
.medicine-delivery[b-dcamm2vrir] {
    min-height:
        calc(100vh - 78px);
    padding: 44px 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    direction: rtl;

    background: #fff;
}


.delivery-layout[b-dcamm2vrir] {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: clamp(62px, 8vw, 130px);

    direction: ltr;
}


.delivery-process[b-dcamm2vrir] {
    padding: 35px;

    display: flex;
    flex-direction: column;

    gap: 19px;

    direction: rtl;

    border:
        1px solid rgba(31, 41, 55, .08);

    border-radius: 35px;

    background: #fff;

    box-shadow:
        0 24px 60px rgba(31, 41, 55, .1);
}


.process-step[b-dcamm2vrir] {
    min-height: 151px;
    padding: 25px 26px;

    display: flex;
    align-items: flex-start;

    gap: 21px;

    border:
        1px solid rgba(31, 41, 55, .08);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #f7f9fc,
            #f1f4f8);

    text-align: right;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}


.process-step:hover[b-dcamm2vrir] {
    transform: translateY(-3px);

    border-color:
        rgba(58, 125, 68, .2);

    box-shadow:
        0 14px 30px rgba(31, 41, 55, .065);
}


.step-icon[b-dcamm2vrir] {
    width: 68px;
    height: 68px;

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

    flex: 0 0 68px;

    border-radius: 20px;

    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;
}


.process-step:nth-child(2)
.step-icon[b-dcamm2vrir] {
    background:
        rgba(58, 125, 68, .09);

    color: var(--green);
}


.step-icon svg[b-dcamm2vrir] {
    width: 32px;
    height: 32px;

    display: block;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.step-content[b-dcamm2vrir] {
    min-width: 0;

    padding-top: 1px;
}


.step-content h3[b-dcamm2vrir] {
    margin: 0;

    color: var(--text);

    font-size: 23px;
    font-weight: 900;
    line-height: 1.65;
}


.step-content p[b-dcamm2vrir] {
    max-width: 470px;

    margin: 9px 0 0;

    color: #475467;

    font-size: 17px;
    font-weight: 550;
    line-height: 2.05;
}


.delivery-content[b-dcamm2vrir] {
    max-width: 700px;

    direction: rtl;

    text-align: right;
}


.section-label[b-dcamm2vrir] {
    display: block;

    margin-bottom: 18px;

    color: #2459a6;

    font-size: 18px;
    font-weight: 900;
    line-height: 1.85;
}


.delivery-content h2[b-dcamm2vrir] {
    max-width: 670px;

    margin: 0;

    color: var(--text);

    font-size:
        clamp(39px, 3.9vw, 50px);

    font-weight: 900;
    line-height: 1.62;
}


.delivery-content > p[b-dcamm2vrir] {
    max-width: 700px;

    margin: 23px 0 0;

    color: #475467;

    font-size: 18px;
    font-weight: 550;
    line-height: 2.15;
}


.delivery-actions[b-dcamm2vrir] {
    margin-top: 32px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.delivery-button[b-dcamm2vrir] {
    min-height: 60px;
    padding: 0 25px;

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

    border:
        1px solid transparent;

    border-radius: 15px;

    font-family: inherit;
    font-size: 18px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}


.delivery-button:hover[b-dcamm2vrir] {
    transform: translateY(-2px);
}


.delivery-button.primary[b-dcamm2vrir] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;

    box-shadow:
        0 12px 27px rgba(58, 125, 68, .16);
}


.delivery-button.primary:hover[b-dcamm2vrir] {
    background: #326f3c;

    box-shadow:
        0 16px 32px rgba(58, 125, 68, .21);
}


.delivery-button.secondary[b-dcamm2vrir] {
    border-color:
        rgba(36, 89, 166, .38);

    background: #fff;
    color: #2459a6;
}


.delivery-button.secondary:hover[b-dcamm2vrir] {
    border-color: #2459a6;

    background:
        rgba(36, 89, 166, .035);
}


.delivery-button:focus-visible[b-dcamm2vrir] {
    outline:
        3px solid rgba(36, 89, 166, .17);

    outline-offset: 3px;
}


@media (min-width: 1001px) and (max-height: 820px) {

    .medicine-delivery[b-dcamm2vrir] {
        padding: 27px 0;
    }


    .delivery-layout[b-dcamm2vrir] {
        gap:
            clamp(45px, 6vw, 90px);
    }


    .delivery-process[b-dcamm2vrir] {
        padding: 25px;

        gap: 13px;

        border-radius: 29px;
    }


    .process-step[b-dcamm2vrir] {
        min-height: 124px;
        padding: 18px 20px;

        gap: 17px;

        border-radius: 21px;
    }


    .step-icon[b-dcamm2vrir] {
        width: 59px;
        height: 59px;

        flex-basis: 59px;

        border-radius: 17px;
    }


    .step-icon svg[b-dcamm2vrir] {
        width: 28px;
        height: 28px;
    }


    .step-content h3[b-dcamm2vrir] {
        font-size: 20px;
    }


    .step-content p[b-dcamm2vrir] {
        margin-top: 5px;

        color: #475467;

        font-size: 16px;
        line-height: 1.95;
    }


    .section-label[b-dcamm2vrir] {
        margin-bottom: 11px;

        font-size: 17px;
    }


    .delivery-content h2[b-dcamm2vrir] {
        font-size:
            clamp(34px, 3.4vw, 43px);

        line-height: 1.55;
    }


    .delivery-content > p[b-dcamm2vrir] {
        margin-top: 16px;

        color: #475467;

        font-size: 17px;
        line-height: 2.05;
    }


    .delivery-actions[b-dcamm2vrir] {
        margin-top: 23px;
    }


    .delivery-button[b-dcamm2vrir] {
        min-height: 55px;

        font-size: 17px;
    }
}


@media (max-width: 1000px) {

    .medicine-delivery[b-dcamm2vrir] {
        min-height: auto;
        padding: 75px 0;
    }


    .delivery-layout[b-dcamm2vrir] {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .delivery-content[b-dcamm2vrir] {
        max-width: 760px;

        grid-row: 1;

        margin: 0 auto;

        text-align: center;
    }


    .delivery-content h2[b-dcamm2vrir],
    .delivery-content > p[b-dcamm2vrir] {
        margin-right: auto;
        margin-left: auto;
    }


    .delivery-process[b-dcamm2vrir] {
        width: 100%;
        max-width: 760px;

        grid-row: 2;

        margin: 0 auto;
    }


    .delivery-actions[b-dcamm2vrir] {
        max-width: 600px;

        margin-right: auto;
        margin-left: auto;
    }
}


@media (max-width: 650px) {

    .medicine-delivery[b-dcamm2vrir] {
        padding: 62px 0;
    }


    .delivery-layout[b-dcamm2vrir] {
        gap: 34px;
    }


    .section-label[b-dcamm2vrir] {
        margin-bottom: 11px;

        font-size: 16px;
    }


    .delivery-content h2[b-dcamm2vrir] {
        font-size: 30px;
        line-height: 1.7;
    }


    .delivery-content > p[b-dcamm2vrir] {
        margin-top: 17px;

        color: #475467;

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


    .delivery-actions[b-dcamm2vrir] {
        margin-top: 26px;

        grid-template-columns: 1fr;

        gap: 11px;
    }


    .delivery-button[b-dcamm2vrir] {
        width: 100%;
        min-height: 57px;

        font-size: 17px;
    }


    .delivery-process[b-dcamm2vrir] {
        padding: 16px;

        gap: 12px;

        border-radius: 24px;
    }


    .process-step[b-dcamm2vrir] {
        min-height: 0;
        padding: 20px 18px;

        gap: 15px;

        border-radius: 19px;
    }


    .step-icon[b-dcamm2vrir] {
        width: 54px;
        height: 54px;

        flex-basis: 54px;

        border-radius: 16px;
    }


    .step-icon svg[b-dcamm2vrir] {
        width: 26px;
        height: 26px;
    }


    .step-content h3[b-dcamm2vrir] {
        font-size: 20px;
    }


    .step-content p[b-dcamm2vrir] {
        margin-top: 6px;

        color: #475467;

        font-size: 16px;
        line-height: 2;
    }
}


@media (max-width: 400px) {

    .process-step[b-dcamm2vrir] {
        align-items: center;
        flex-direction: column;

        text-align: center;
    }


    .step-content p[b-dcamm2vrir] {
        max-width: 310px;
    }
}


@media (hover: none) {

    .process-step:hover[b-dcamm2vrir],
    .delivery-button:hover[b-dcamm2vrir] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .process-step[b-dcamm2vrir],
    .delivery-button[b-dcamm2vrir] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyMedicinesSection.razor.rz.scp.css */
.pharmacy-medicines[b-5zsexze0up] {
    position: relative;

    padding: 92px 0 100px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f8fbf9 48%,
            #fff 100%);
}


.pharmacy-medicines[b-5zsexze0up]::before,
.pharmacy-medicines[b-5zsexze0up]::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.pharmacy-medicines[b-5zsexze0up]::before {
    width: 410px;
    height: 410px;

    top: -285px;
    right: -160px;

    background:
        rgba(58, 125, 68, .045);
}


.pharmacy-medicines[b-5zsexze0up]::after {
    width: 430px;
    height: 430px;

    bottom: -305px;
    left: -170px;

    background:
        rgba(36, 89, 166, .04);
}


.pharmacy-medicines .container[b-5zsexze0up] {
    position: relative;
    z-index: 2;
}


.categories-head[b-5zsexze0up] {
    max-width: 790px;

    margin: 0 auto 47px;

    direction: rtl;

    text-align: center;
}


.categories-head > span[b-5zsexze0up] {
    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.categories-head h2[b-5zsexze0up] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(31px, 3.7vw, 42px);

    font-weight: 900;
    line-height: 1.5;
}


.categories-head p[b-5zsexze0up] {
    max-width: 710px;

    margin: 12px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}


.categories-slider[b-5zsexze0up] {
    position: relative;
}


.categories-scroll[b-5zsexze0up] {
    padding: 8px 4px 23px;

    overflow-x: auto;
    overflow-y: hidden;

    cursor: grab;

    scroll-behavior: smooth;
    scrollbar-width: none;

    touch-action: pan-y;
}


.categories-scroll[b-5zsexze0up]::-webkit-scrollbar {
    display: none;
}


.categories-scroll.is-dragging[b-5zsexze0up] {
    cursor: grabbing;

    scroll-behavior: auto;
}


.categories-grid[b-5zsexze0up] {
    min-width: max-content;
    padding: 0 58px;

    display: grid;

    grid-auto-flow: column;
    grid-auto-columns: 170px;

    gap: 22px;

    direction: rtl;
}


.category-card[b-5zsexze0up] {
    position: relative;

    min-height: 190px;
    padding: 24px 16px 21px;

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

    gap: 15px;

    overflow: hidden;

    border:
        1px solid var(--soft);

    border-radius: 23px;

    background: #f5f7fa;
    color: var(--text);

    font-family: inherit;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.category-card:hover[b-5zsexze0up] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .38);

    background: #fff;
}


.category-card.active[b-5zsexze0up] {
    border-color: #2b62b1;

    background: #fff;

    /* box-shadow:
        0 18px 42px rgba(36, 89, 166, .12); */
}


.category-icon[b-5zsexze0up] {
    width: 85px;
    height: 85px;

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

    overflow: hidden;

    border-radius: 25px;

    background:
        rgba(58, 125, 68, .09);
}


.category-card:nth-child(even)
.category-icon[b-5zsexze0up] {
    background:
        rgba(36, 89, 166, .08);
}


.category-icon img[b-5zsexze0up] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    pointer-events: none;
}


.category-fallback[b-5zsexze0up] {
    font-size: 40px;
}


.category-card strong[b-5zsexze0up] {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.6;
}


.selected-indicator[b-5zsexze0up] {
    position: absolute;

    width: 27px;
    height: 27px;

    top: 12px;
    left: 12px;

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

    border-radius: 50%;

    background: #2b62b1;
    color: #fff;

    opacity: 0;

    transform: scale(.7);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.category-card.active
.selected-indicator[b-5zsexze0up] {
    opacity: 1;

    transform: scale(1);
}


.selected-indicator svg[b-5zsexze0up] {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.categories-arrow[b-5zsexze0up] {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

    top: 50%;

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

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #1c274c;

    box-shadow:
        0 14px 35px rgba(31, 41, 55, .11);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        transform .22s ease,
        color .22s ease;
}


.categories-arrow:hover[b-5zsexze0up] {
    color: var(--green);

    transform:
        translateY(-50%)
        scale(1.06);
}


.categories-arrow svg[b-5zsexze0up] {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.arrow-right[b-5zsexze0up] {
    right: -24px;
}


.arrow-left[b-5zsexze0up] {
    left: -24px;
}


.medicines-divider[b-5zsexze0up] {
    margin: 43px 0 38px;

    display: grid;

    grid-template-columns:
        minmax(30px, 1fr)
        auto
        minmax(30px, 1fr);

    align-items: center;

    gap: 20px;

    direction: rtl;
}


.medicines-divider > span[b-5zsexze0up] {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(31, 41, 55, .13),
            transparent);
}


.medicines-divider > div[b-5zsexze0up] {
    display: flex;
    align-items: center;

    gap: 8px;
}


.medicines-divider small[b-5zsexze0up] {
    color: #98a2b3;

    font-size: 13px;
    font-weight: 700;
}


.medicines-divider strong[b-5zsexze0up] {
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.medicine-results[b-5zsexze0up] {
    scroll-margin-top: 100px;
}


.medicines-head[b-5zsexze0up] {
    margin-bottom: 31px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    direction: rtl;
}


.medicines-head > div > span[b-5zsexze0up] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 15px;
    font-weight: 900;
}


.medicines-head h2[b-5zsexze0up] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(29px, 3.3vw, 38px);

    font-weight: 900;
    line-height: 1.5;
}


.medicines-head p[b-5zsexze0up] {
    margin: 8px 0 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.9;
}


.results-count[b-5zsexze0up] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}


.products-grid[b-5zsexze0up] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.product-card-link[b-5zsexze0up] {
    min-width: 0;
    height: 100%;

    display: block;

    color: inherit;

    text-decoration: none;

    border-radius: 22px;

    outline: none;
}


.product-card-link:focus-visible[b-5zsexze0up] {
    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .16);
}


.product-card[b-5zsexze0up] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid var(--soft);

    border-radius: 22px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.product-card-link:hover
.product-card[b-5zsexze0up] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .36);

    box-shadow:
        0 18px 38px rgba(31, 41, 55, .09);
}


.product-image[b-5zsexze0up] {
    position: relative;

    height: 220px;
    padding: 14px;

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

    flex: 0 0 220px;

    overflow: hidden;

    background: #f8faf8;
}


.product-image img[b-5zsexze0up] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.product-card-link:hover
.product-image img[b-5zsexze0up] {
    transform: scale(1.04);
}


.image-placeholder[b-5zsexze0up] {
    width: 64px;
    height: 64px;

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

    border-radius: 20px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 38px;
    font-weight: 500;
}


.prescription-badge[b-5zsexze0up] {
    position: absolute;

    top: 13px;
    right: 13px;

    min-height: 30px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(58, 125, 68, .15);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .94);

    color: var(--green);

    box-shadow:
        0 8px 20px rgba(31, 41, 55, .07);

    font-size: 11px;
    font-weight: 900;
}


.product-body[b-5zsexze0up] {
    min-height: 220px;
    padding: 18px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.product-type[b-5zsexze0up] {
    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    align-self: center;

    border-radius: 999px;

    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;

    font-size: 13px;
    font-weight: 900;
}


.product-body h3[b-5zsexze0up] {
    min-height: 64px;

    margin: 12px 0 6px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.7;
}


.product-brand[b-5zsexze0up],
.product-brand-placeholder[b-5zsexze0up] {
    width: 100%;
    min-height: 24px;
}


.product-brand[b-5zsexze0up] {
    margin: 0;
    padding-top: .5rem;

    color: #667085;

    direction: ltr;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;

    text-align: left;

    unicode-bidi: plaintext;
}


.product-brand-placeholder[b-5zsexze0up] {
    display: block;
}


.product-bottom[b-5zsexze0up] {
    margin-top: auto;
    padding-top: 14px;

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

    gap: 10px;

    border-top:
        1px solid var(--soft);
}


.product-bottom strong[b-5zsexze0up] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link[b-5zsexze0up] {
    min-height: 39px;
    padding: 0 13px;

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

    border-radius: 10px;

    background: #2b62b1;
    color: #fff;

    font-size: 13px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link.prescription[b-5zsexze0up] {
    /* border:
        1px solid rgba(58, 125, 68, .25); */

    background: #2b62b1;
    color: #eef1f4;
}


.card-link.unavailable[b-5zsexze0up] {
    background: #eef1f4;
    color: #98a2b3;
}


.results-enter[b-5zsexze0up] {
    animation:
        resultsEnter-b-5zsexze0up .28s ease both;
}


@keyframes resultsEnter-b-5zsexze0up {

    from {
        opacity: 0;

        transform:
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


.pagination[b-5zsexze0up] {
    margin-top: 39px;

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

    gap: 12px;

    direction: rtl;
}


.pagination-pages[b-5zsexze0up] {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.page-button[b-5zsexze0up],
.pagination-arrow[b-5zsexze0up] {
    width: 43px;
    height: 43px;

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

    border:
        1px solid var(--soft);

    border-radius: 12px;

    background: #fff;
    color: #667085;

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease;
}


.page-button:hover[b-5zsexze0up],
.pagination-arrow:hover[b-5zsexze0up] {
    transform: translateY(-2px);

    border-color:
        rgba(58, 125, 68, .35);

    color: var(--green);
}


.page-button.active[b-5zsexze0up] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;

    box-shadow:
        0 9px 22px rgba(58, 125, 68, .17);
}


.pagination-arrow svg[b-5zsexze0up] {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.pagination-arrow.disabled[b-5zsexze0up] {
    opacity: .42;

    pointer-events: none;
}


.pagination-summary[b-5zsexze0up] {
    margin: 12px 0 0;

    color: #98a2b3;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
}


.section-state[b-5zsexze0up] {
    min-height: 130px;
    padding: 24px;

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

    gap: 17px;

    border:
        1px solid var(--soft);

    border-radius: 20px;

    background: #fff;

    direction: rtl;

    text-align: right;
}


.section-state .state-icon[b-5zsexze0up] {
    width: 46px;
    height: 46px;

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

    flex: 0 0 46px;

    border-radius: 15px;

    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;

    font-size: 21px;
    font-weight: 900;
}


.section-state strong[b-5zsexze0up] {
    display: block;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}


.section-state p[b-5zsexze0up] {
    margin: 5px 0 0;

    color: #667085;

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


.section-state button[b-5zsexze0up] {
    min-height: 42px;
    padding: 0 17px;

    margin-right: auto;

    border: 0;
    border-radius: 12px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-weight: 900;

    cursor: pointer;
}


.section-state.error
.state-icon[b-5zsexze0up] {
    background:
        rgba(217, 83, 79, .09);

    color: #c94743;
}


.medicines-state[b-5zsexze0up] {
    margin-top: 4px;
}


.skeleton-category[b-5zsexze0up],
.skeleton-product[b-5zsexze0up] {
    pointer-events: none;
}


.skeleton-category-image[b-5zsexze0up],
.skeleton-category-title[b-5zsexze0up],
.skeleton-product-image[b-5zsexze0up],
.skeleton-line[b-5zsexze0up] {
    display: block;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #edf0f3 25%,
            #f7f8fa 50%,
            #edf0f3 75%);

    background-size: 200% 100%;

    animation:
        skeletonLoading-b-5zsexze0up 1.25s linear infinite;
}


.skeleton-category-image[b-5zsexze0up] {
    width: 85px;
    height: 85px;

    border-radius: 25px;
}


.skeleton-category-title[b-5zsexze0up] {
    width: 75px;
    height: 18px;
}


.skeleton-product-image[b-5zsexze0up] {
    height: 220px;

    border-radius: 0;
}


.skeleton-line[b-5zsexze0up] {
    height: 18px;

    margin-right: auto;
    margin-left: auto;
}


.skeleton-line.type[b-5zsexze0up] {
    width: 75px;
    height: 31px;

    border-radius: 999px;
}


.skeleton-line.title[b-5zsexze0up] {
    width: 80%;

    margin-top: 17px;
}


.skeleton-line.brand[b-5zsexze0up] {
    width: 54%;

    margin-top: 18px;
}


.skeleton-line.action[b-5zsexze0up] {
    width: 100%;
    height: 42px;

    margin-top: auto;
}


@keyframes skeletonLoading-b-5zsexze0up {

    to {
        background-position:
            -200% 0;
    }
}


@media (max-width: 1050px) {

    .products-grid[b-5zsexze0up] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .pharmacy-medicines[b-5zsexze0up] {
        padding:
            78px 0 86px;
    }


    .products-grid[b-5zsexze0up] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .medicines-head[b-5zsexze0up] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 700px) {

    .categories-grid[b-5zsexze0up] {
        grid-auto-columns: 150px;

        padding: 0 43px;

        gap: 15px;
    }


    .category-card[b-5zsexze0up] {
        min-height: 173px;

        border-radius: 20px;
    }


    .category-icon[b-5zsexze0up] {
        width: 76px;
        height: 76px;

        border-radius: 22px;
    }


    .categories-arrow[b-5zsexze0up] {
        width: 44px;
        height: 44px;
    }


    .arrow-right[b-5zsexze0up] {
        right: -10px;
    }


    .arrow-left[b-5zsexze0up] {
        left: -10px;
    }
}


@media (max-width: 620px) {

    .pharmacy-medicines[b-5zsexze0up] {
        padding:
            68px 0 74px;
    }


    .categories-head[b-5zsexze0up] {
        margin-bottom: 32px;
    }


    .categories-head h2[b-5zsexze0up],
    .medicines-head h2[b-5zsexze0up] {
        font-size: 28px;
    }


    .categories-head p[b-5zsexze0up] {
        font-size: 15px;
    }


    .medicines-divider[b-5zsexze0up] {
        margin:
            31px 0 28px;

        gap: 10px;
    }


    .medicines-divider > div[b-5zsexze0up] {
        align-items: center;
        flex-direction: column;

        gap: 1px;
    }


    .products-grid[b-5zsexze0up] {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .product-image[b-5zsexze0up],
    .skeleton-product-image[b-5zsexze0up] {
        height: 245px;

        flex-basis: 245px;
    }


    .product-body[b-5zsexze0up] {
        min-height: 0;
    }


    .product-body h3[b-5zsexze0up] {
        min-height: 0;
    }


    .pagination[b-5zsexze0up] {
        gap: 8px;
    }


    .pagination-pages[b-5zsexze0up] {
        gap: 5px;
    }


    .page-button[b-5zsexze0up],
    .pagination-arrow[b-5zsexze0up] {
        width: 39px;
        height: 39px;

        border-radius: 10px;
    }


    .section-state[b-5zsexze0up] {
        padding: 21px 17px;

        text-align: center;
    }


    .section-state button[b-5zsexze0up] {
        width: 100%;

        margin-right: 0;
    }
}


@media (hover: none) {

    .category-card:hover[b-5zsexze0up],
    .product-card-link:hover
    .product-card[b-5zsexze0up],
    .page-button:hover[b-5zsexze0up],
    .pagination-arrow:hover[b-5zsexze0up] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .category-card[b-5zsexze0up],
    .selected-indicator[b-5zsexze0up],
    .categories-arrow[b-5zsexze0up],
    .product-card[b-5zsexze0up],
    .product-image img[b-5zsexze0up],
    .page-button[b-5zsexze0up],
    .pagination-arrow[b-5zsexze0up] {
        transition-duration:
            .01ms !important;
    }


    .results-enter[b-5zsexze0up],
    .skeleton-category-image[b-5zsexze0up],
    .skeleton-category-title[b-5zsexze0up],
    .skeleton-product-image[b-5zsexze0up],
    .skeleton-line[b-5zsexze0up] {
        animation-duration:
            .01ms !important;
    }
}











.page-button[b-5zsexze0up],
.pagination-arrow[b-5zsexze0up] {
    font-family: inherit;
    cursor: pointer;
}

.page-button:disabled[b-5zsexze0up],
.pagination-arrow:disabled[b-5zsexze0up] {
    cursor: default;
}

.page-button.active:disabled[b-5zsexze0up] {
    opacity: 1;
}

.pagination-arrow:disabled[b-5zsexze0up] {
    opacity: .42;
    pointer-events: none;
}
/* _content/PopProject.BlazorSSR/Components/Features/PharmacyPublic/PharmacyOnlineVisitBannerSection.razor.rz.scp.css */
.vetban-showcase[b-acong0oiiy] {
    position: relative;
    padding: 34px 0 96px;
    overflow: hidden;
    background: #fff;
}


.showcase-banner[b-acong0oiiy] {
    position: relative;
    min-height: 390px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);
    align-items: center;

    direction: rtl;
    overflow: hidden;
    isolation: isolate;

    border-radius: 34px 64px 34px 64px;

    background:
        linear-gradient(
            125deg,
            #347f49 0%,
            #1f5c34 45%,
            #164b2d 100%);

    background-size: 190% 190%;

    box-shadow:
        0 27px 65px rgba(27, 78, 43, .23);

    animation:
        showcase-gradient-b-acong0oiiy 16s ease-in-out infinite;
}


.showcase-banner[b-acong0oiiy]::before {
    content: "";

    position: absolute;
    z-index: -2;
    inset: -45%;

    background:
        radial-gradient(
            circle at 19% 28%,
            rgba(117, 193, 130, .3),
            transparent 24%),
        radial-gradient(
            circle at 72% 21%,
            rgba(255, 255, 255, .105),
            transparent 23%),
        radial-gradient(
            circle at 50% 84%,
            rgba(7, 48, 26, .48),
            transparent 29%),
        radial-gradient(
            circle at 89% 73%,
            rgba(86, 164, 105, .23),
            transparent 25%);

    filter: blur(25px);

    animation:
        showcase-aurora-b-acong0oiiy 19s ease-in-out infinite;
}


.showcase-banner[b-acong0oiiy]::after {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size: 48px 48px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .2),
            transparent 76%);

    opacity: .6;
}


.showcase-shape[b-acong0oiiy] {
    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.shape-one[b-acong0oiiy] {
    width: 360px;
    height: 360px;

    top: -235px;
    right: -105px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        shape-one-motion-b-acong0oiiy 12s ease-in-out infinite;
}


.shape-two[b-acong0oiiy] {
    width: 310px;
    height: 310px;

    bottom: -210px;
    left: 35%;

    background:
        rgba(109, 190, 123, .1);

    animation:
        shape-two-motion-b-acong0oiiy 14s ease-in-out infinite;
}


.shape-three[b-acong0oiiy] {
    width: 200px;
    height: 200px;

    top: 44%;
    right: 44%;

    border:
        1px solid rgba(255, 255, 255, .07);

    border-radius: 50%;

    animation:
        shape-three-motion-b-acong0oiiy 18s linear infinite;
}


.showcase-content[b-acong0oiiy] {
    position: relative;
    z-index: 4;

    padding: 53px 64px 53px 40px;

    color: #fff;
}


.showcase-badge[b-acong0oiiy] {
    min-height: 39px;
    padding: 0 17px;

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

    border:
        1px solid rgba(255, 255, 255, .2);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .105);

    color:
        rgba(255, 255, 255, .96);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .09);

    font-size: 14px;
    font-weight: 900;

    backdrop-filter: blur(8px);
}


.showcase-content h2[b-acong0oiiy] {
    max-width: 740px;

    margin: 19px 0 0;

    color: #fff;

    font-size:
        clamp(33px, 3.5vw, 44px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.4px;

    text-wrap: balance;

    text-shadow:
        0 5px 22px rgba(7, 38, 20, .13);
}


.showcase-content p[b-acong0oiiy] {
    max-width: 680px;

    margin: 15px 0 0;

    color:
        rgba(255, 255, 255, .88);

    font-size: 16px;
    font-weight: 600;
    line-height: 2.05;

    text-wrap: balance;
}


.showcase-actions[b-acong0oiiy] {
    margin-top: 27px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}


.showcase-action[b-acong0oiiy] {
    min-height: 52px;
    padding: 0 21px;

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

    gap: 9px;

    border:
        1px solid rgba(255, 255, 255, .9);

    border-radius: 14px;

    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.showcase-action.primary[b-acong0oiiy] {
    background: #fff;
    color: var(--green);

    box-shadow:
        0 13px 30px rgba(8, 42, 23, .14);
}


.showcase-action.secondary[b-acong0oiiy] {
    border-color:
        rgba(255, 255, 255, .32);

    background:
        rgba(255, 255, 255, .09);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .07);

    backdrop-filter: blur(8px);
}


.showcase-action svg[b-acong0oiiy] {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .25s ease;
}


.showcase-action:hover[b-acong0oiiy] {
    transform: translateY(-3px);
}


.showcase-action.primary:hover[b-acong0oiiy] {
    border-color:
        rgba(255, 255, 255, .65);

    background:
        rgba(255, 255, 255, .1);

    color: #fff;

    box-shadow:
        0 17px 36px rgba(8, 42, 23, .2);
}


.showcase-action.secondary:hover[b-acong0oiiy] {
    border-color:
        rgba(255, 255, 255, .75);

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        0 14px 30px rgba(8, 42, 23, .14);
}


.showcase-action:hover svg[b-acong0oiiy] {
    transform: translateX(-3px);
}


.showcase-action:active[b-acong0oiiy] {
    transform:
        translateY(-1px)
        scale(.985);
}


.showcase-action:focus-visible[b-acong0oiiy] {
    outline:
        4px solid rgba(255, 255, 255, .2);

    outline-offset: 4px;
}


.showcase-visual[b-acong0oiiy] {
    position: relative;
    z-index: 3;

    min-width: 0;
    height: 100%;
    min-height: 390px;

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

    direction: ltr;
    overflow: hidden;
}


.showcase-visual[b-acong0oiiy]::before {
    content: "";

    position: absolute;

    width: 370px;
    height: 370px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .15),
            rgba(255, 255, 255, .035) 52%,
            transparent 71%);

    filter: blur(2px);

    animation:
        visual-glow-b-acong0oiiy 7s ease-in-out infinite;
}


.brand-stage[b-acong0oiiy] {
    position: relative;
    z-index: 4;

    width: 255px;
    height: 255px;

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

    border:
        1px solid rgba(255, 255, 255, .35);

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 13px rgba(255, 255, 255, .05),
        0 23px 55px rgba(5, 39, 20, .24),
        inset 0 1px 0 rgba(255, 255, 255, 1);

    animation:
        brand-stage-float-b-acong0oiiy 6s ease-in-out infinite;
}


.brand-glow[b-acong0oiiy] {
    position: absolute;
    z-index: -1;
    inset: -22px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(137, 211, 148, .22),
            transparent 68%);

    animation:
        brand-glow-pulse-b-acong0oiiy 5s ease-in-out infinite;
}


.vetban-logo[b-acong0oiiy] {
    width: 82%;
    height: 82%;

    display: block;

    object-fit: contain;
    mix-blend-mode: multiply;

    filter:
        contrast(1.02)
        saturate(.95);

    transition:
        transform .45s ease,
        filter .45s ease;
}


.brand-stage:hover
.vetban-logo[b-acong0oiiy] {
    transform: scale(1.035);

    filter:
        contrast(1.04)
        saturate(1.02);
}


.brand-orbit[b-acong0oiiy] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-outer[b-acong0oiiy] {
    width: 350px;
    height: 350px;

    border:
        1px dashed rgba(255, 255, 255, .25);

    animation:
        orbit-clockwise-b-acong0oiiy 30s linear infinite;
}


.orbit-middle[b-acong0oiiy] {
    width: 305px;
    height: 305px;

    border:
        1px solid rgba(255, 255, 255, .12);

    animation:
        orbit-counter-clockwise-b-acong0oiiy 24s linear infinite;
}


.orbit-node[b-acong0oiiy] {
    position: absolute;
    z-index: 5;

    width: 48px;
    height: 48px;

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

    border:
        1px solid rgba(255, 255, 255, .3);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .14);

    color: #fff;

    box-shadow:
        0 10px 25px rgba(7, 42, 22, .16),
        inset 0 1px 0 rgba(255, 255, 255, .13);

    backdrop-filter: blur(9px);

    animation:
        node-float-b-acong0oiiy 5s ease-in-out infinite;
}


.orbit-node svg[b-acong0oiiy] {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.consultation-node[b-acong0oiiy] {
    top: 41px;
    right: 73px;

    animation-delay: -.8s;
}


.prescription-node[b-acong0oiiy] {
    right: 45px;
    bottom: 51px;

    animation-delay: -2.4s;
}


.pharmacy-node[b-acong0oiiy] {
    bottom: 42px;
    left: 61px;

    animation-delay: -3.6s;
}


.visual-dot[b-acong0oiiy] {
    position: absolute;
    z-index: 3;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .6);

    box-shadow:
        0 0 15px rgba(255, 255, 255, .28);

    animation:
        dot-breathe-b-acong0oiiy 4s ease-in-out infinite;
}


.dot-one[b-acong0oiiy] {
    width: 7px;
    height: 7px;

    top: 25%;
    left: 16%;
}


.dot-two[b-acong0oiiy] {
    width: 5px;
    height: 5px;

    top: 17%;
    right: 22%;

    animation-delay: -1.1s;
}


.dot-three[b-acong0oiiy] {
    width: 8px;
    height: 8px;

    right: 12%;
    bottom: 25%;

    animation-delay: -2.1s;
}


.dot-four[b-acong0oiiy] {
    width: 4px;
    height: 4px;

    bottom: 17%;
    left: 20%;

    animation-delay: -3s;
}


@keyframes showcase-gradient-b-acong0oiiy {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}


@keyframes showcase-aurora-b-acong0oiiy {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate3d(2%, -1%, 0)
            rotate(8deg)
            scale(1.07);
    }
}


@keyframes shape-one-motion-b-acong0oiiy {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-17px, 14px, 0)
            scale(1.06);
    }
}


@keyframes shape-two-motion-b-acong0oiiy {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(18px, -13px, 0)
            scale(1.08);
    }
}


@keyframes shape-three-motion-b-acong0oiiy {
    to {
        transform: rotate(360deg);
    }
}


@keyframes visual-glow-b-acong0oiiy {
    0%,
    100% {
        transform: scale(.96);
        opacity: .72;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}


@keyframes brand-stage-float-b-acong0oiiy {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(0, -8px, 0)
            rotate(-1deg);
    }
}


@keyframes brand-glow-pulse-b-acong0oiiy {
    0%,
    100% {
        transform: scale(.95);
        opacity: .65;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}


@keyframes orbit-clockwise-b-acong0oiiy {
    to {
        transform: rotate(360deg);
    }
}


@keyframes orbit-counter-clockwise-b-acong0oiiy {
    to {
        transform: rotate(-360deg);
    }
}


@keyframes node-float-b-acong0oiiy {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(0, -7px, 0)
            scale(1.04);
    }
}


@keyframes dot-breathe-b-acong0oiiy {
    0%,
    100% {
        transform: scale(.7);
        opacity: .35;
    }

    50% {
        transform: scale(1.25);
        opacity: .9;
    }
}


@media (max-width: 1050px) {
    .showcase-banner[b-acong0oiiy] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .82fr);
    }

    .showcase-content[b-acong0oiiy] {
        padding:
            49px 46px 49px 34px;
    }

    .showcase-content h2[b-acong0oiiy] {
        font-size:
            clamp(31px, 4vw, 39px);
    }

    .brand-stage[b-acong0oiiy] {
        width: 225px;
        height: 225px;
    }

    .orbit-outer[b-acong0oiiy] {
        width: 315px;
        height: 315px;
    }

    .orbit-middle[b-acong0oiiy] {
        width: 275px;
        height: 275px;
    }
}


@media (max-width: 850px) {
    .vetban-showcase[b-acong0oiiy] {
        padding: 25px 0 78px;
    }

    .showcase-banner[b-acong0oiiy] {
        grid-template-columns: 1fr;

        border-radius:
            29px 52px 29px 52px;
    }

    .showcase-content[b-acong0oiiy] {
        padding:
            46px 34px 25px;

        text-align: center;
    }

    .showcase-content h2[b-acong0oiiy],
    .showcase-content p[b-acong0oiiy] {
        margin-right: auto;
        margin-left: auto;
    }

    .showcase-actions[b-acong0oiiy] {
        justify-content: center;
    }

    .showcase-visual[b-acong0oiiy] {
        min-height: 355px;
    }

    .shape-three[b-acong0oiiy] {
        display: none;
    }

    .showcase-banner[b-acong0oiiy]::after {
        mask-image:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .25),
                transparent 84%);
    }
}


@media (max-width: 620px) {
    .vetban-showcase[b-acong0oiiy] {
        padding: 20px 0 68px;
    }

    .showcase-banner[b-acong0oiiy] {
        min-height: auto;

        border-radius:
            24px 40px 24px 40px;
    }

    .showcase-content[b-acong0oiiy] {
        padding:
            37px 21px 19px;
    }

    .showcase-badge[b-acong0oiiy] {
        min-height: 36px;
        padding: 0 14px;

        font-size: 13px;
    }

    .showcase-content h2[b-acong0oiiy] {
        margin-top: 17px;

        font-size: 29px;
        line-height: 1.7;

        letter-spacing: 0;
    }

    .showcase-content p[b-acong0oiiy] {
        margin-top: 12px;

        font-size: 15px;
        line-height: 2;
    }

    .showcase-actions[b-acong0oiiy] {
        margin-top: 22px;

        align-items: stretch;
        flex-direction: column;
    }

    .showcase-action[b-acong0oiiy] {
        width: 100%;
        min-height: 51px;
    }

    .showcase-visual[b-acong0oiiy] {
        min-height: 305px;
    }

    .showcase-visual[b-acong0oiiy]::before {
        width: 285px;
        height: 285px;
    }

    .brand-stage[b-acong0oiiy] {
        width: 185px;
        height: 185px;

        box-shadow:
            0 0 0 10px rgba(255, 255, 255, .05),
            0 19px 43px rgba(5, 39, 20, .22),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .orbit-outer[b-acong0oiiy] {
        width: 260px;
        height: 260px;
    }

    .orbit-middle[b-acong0oiiy] {
        width: 225px;
        height: 225px;
    }

    .orbit-node[b-acong0oiiy] {
        width: 41px;
        height: 41px;
    }

    .orbit-node svg[b-acong0oiiy] {
        width: 20px;
        height: 20px;
    }

    .consultation-node[b-acong0oiiy] {
        top: 25px;
        right: 52px;
    }

    .prescription-node[b-acong0oiiy] {
        right: 29px;
        bottom: 38px;
    }

    .pharmacy-node[b-acong0oiiy] {
        bottom: 31px;
        left: 40px;
    }

    .shape-one[b-acong0oiiy] {
        width: 260px;
        height: 260px;

        top: -175px;
        right: -110px;
    }

    .shape-two[b-acong0oiiy] {
        width: 240px;
        height: 240px;

        bottom: -170px;
        left: -95px;
    }
}


@media (max-width: 380px) {
    .showcase-content[b-acong0oiiy] {
        padding:
            34px 17px 15px;
    }

    .showcase-content h2[b-acong0oiiy] {
        font-size: 26px;
    }

    .showcase-content p[b-acong0oiiy] {
        font-size: 14px;
    }

    .showcase-visual[b-acong0oiiy] {
        min-height: 280px;
    }

    .brand-stage[b-acong0oiiy] {
        width: 165px;
        height: 165px;
    }

    .orbit-outer[b-acong0oiiy] {
        width: 235px;
        height: 235px;
    }

    .orbit-middle[b-acong0oiiy] {
        width: 205px;
        height: 205px;
    }
}


@media (hover: none) {
    .showcase-action:hover[b-acong0oiiy] {
        transform: none;
    }

    .showcase-action.primary:hover[b-acong0oiiy] {
        border-color:
            rgba(255, 255, 255, .9);

        background: #fff;
        color: var(--green);
    }

    .showcase-action.secondary:hover[b-acong0oiiy] {
        border-color:
            rgba(255, 255, 255, .32);

        background:
            rgba(255, 255, 255, .09);

        color: #fff;
    }

    .showcase-action:active[b-acong0oiiy] {
        transform: scale(.98);
    }
}


@media (prefers-reduced-motion: reduce) {
    .showcase-banner[b-acong0oiiy],
    .showcase-banner[b-acong0oiiy]::before,
    .showcase-shape[b-acong0oiiy],
    .showcase-visual[b-acong0oiiy]::before,
    .brand-stage[b-acong0oiiy],
    .brand-glow[b-acong0oiiy],
    .brand-orbit[b-acong0oiiy],
    .orbit-node[b-acong0oiiy],
    .visual-dot[b-acong0oiiy] {
        animation: none;
    }

    .showcase-action[b-acong0oiiy],
    .showcase-action svg[b-acong0oiiy],
    .vetban-logo[b-acong0oiiy] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/PrescriptionRequests/PrescriptionRequestWorkspace.razor.rz.scp.css */
.request-workspace[b-460kcztvio] {
    width: 100%;
    min-width: 0;
    color: var(--text, #344054);
    font-size: 17px;
}

.workspace-head[b-460kcztvio] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.workspace-head > div > span[b-460kcztvio] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

.workspace-head h1[b-460kcztvio] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

.workspace-head p[b-460kcztvio],
.secondary[b-460kcztvio] {
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 2;
}

.workspace-grid[b-460kcztvio] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 22px;
}

.workspace-main[b-460kcztvio] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.workspace-card[b-460kcztvio] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;
    background: #fff;
}

.workspace-card h2[b-460kcztvio] {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 900;
}

.workspace-card h3[b-460kcztvio] {
    margin: 20px 0 10px;
    font-size: 18px;
}

.card-head[b-460kcztvio] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.card-head h2[b-460kcztvio] {
    margin-bottom: 5px;
}

.workspace-button[b-460kcztvio] {
    min-height: 42px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #344054);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.workspace-button.primary[b-460kcztvio] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.workspace-button.remove[b-460kcztvio] {
    color: #b42318;
    border-color: #fecdca;
}

.workspace-button:disabled[b-460kcztvio] {
    opacity: .5;
    cursor: not-allowed;
}

.request-status[b-460kcztvio],
.quote-state[b-460kcztvio] {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff8ff;
    color: #175cd3;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.8;
}

.request-details[b-460kcztvio] {
    margin: 0;
}

.request-details > div[b-460kcztvio] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f3;
    font-size: 17px;
    line-height: 1.9;
}

.request-details dt[b-460kcztvio] {
    color: var(--muted, #667085);
    flex-shrink: 0;
}

.request-details dd[b-460kcztvio] {
    min-width: 0;
    margin: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-align: left;
}

.multiline[b-460kcztvio] {
    font-size: 17px;
    line-height: 2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.quote-meta[b-460kcztvio] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.quote-table-scroll[b-460kcztvio] {
    overflow-x: auto;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
}

.quote-table[b-460kcztvio] {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
}

.quote-table th[b-460kcztvio],
.quote-table td[b-460kcztvio] {
    padding: 14px;
    border-bottom: 1px solid #eef0f3;
    font-size: 16px;
    text-align: right;
    line-height: 1.9;
}

.quote-table th[b-460kcztvio] {
    background: #f8faf9;
    color: var(--muted, #667085);
}

.quote-table td:last-child[b-460kcztvio] {
    white-space: nowrap;
}

.quote-table tr:last-child td[b-460kcztvio] {
    border-bottom: 0;
}

.quote-total[b-460kcztvio] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding: 17px;
    border-radius: 12px;
    background: #eef8f0;
    color: var(--green, #3a7d44);
    font-size: 18px;
}

.quote-total strong[b-460kcztvio] {
    font-size: 21px;
}

.quote-note[b-460kcztvio] {
    margin-bottom: 0;
    color: var(--muted, #667085);
}

.quote-editor-row[b-460kcztvio] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.quote-editor-row .field[b-460kcztvio] {
    margin: 0;
}

.field[b-460kcztvio] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 20px 0;
}

.field label[b-460kcztvio] {
    font-size: 16px;
    font-weight: 800;
}

.field input[b-460kcztvio],
.field textarea[b-460kcztvio] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.9;
    background: #fff;
    color: var(--text, #344054);
}

.field textarea[b-460kcztvio] {
    resize: vertical;
}

.editor-total[b-460kcztvio] {
    margin: 18px 0;
    font-size: 17px;
    line-height: 2;
}

.checkbox-field[b-460kcztvio] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 2;
}

.checkbox-field input[b-460kcztvio] {
    margin-top: 9px;
    flex-shrink: 0;
}

.request-message[b-460kcztvio] {
    margin-bottom: 16px;
    padding: 17px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f9fbfa;
}

.message-head[b-460kcztvio] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.message-head strong[b-460kcztvio] {
    font-size: 16px;
}

.message-head span[b-460kcztvio] {
    color: var(--muted, #667085);
    font-size: 14px;
}

.request-message p[b-460kcztvio] {
    margin-bottom: 0;
}

.change-warning[b-460kcztvio] {
    padding: 14px;
    border-radius: 10px;
    background: #fffaeb;
    color: #b54708;
    font-size: 16px;
    line-height: 2;
}

.workspace-state[b-460kcztvio],
.workspace-error[b-460kcztvio] {
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: #fff;
    font-size: 17px;
    line-height: 2;
}

.workspace-error[b-460kcztvio] {
    margin-bottom: 20px;
    border-color: #fecdca;
    background: #fff5f4;
    color: #b42318;
}

.progress-card ol[b-460kcztvio] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.progress-card li[b-460kcztvio] {
    padding: 16px 14px;
    margin-bottom: 12px;
    border-right: 3px solid #e4e7ec;
    background: #f9fafb;
    border-radius: 9px;
}

.progress-card li.done[b-460kcztvio] {
    border-color: var(--green, #3a7d44);
    background: #f0f8f2;
}

.progress-card li strong[b-460kcztvio],
.progress-card li span[b-460kcztvio] {
    display: block;
    line-height: 1.9;
}

.progress-card li strong[b-460kcztvio] {
    font-size: 16px;
}

.progress-card li span[b-460kcztvio] {
    margin-top: 5px;
    color: var(--muted, #667085);
    font-size: 14px;
}

@media (max-width: 1100px) {
    .workspace-grid[b-460kcztvio] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .workspace-head[b-460kcztvio] {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-card[b-460kcztvio] {
        padding: 18px;
    }

    .quote-editor-row[b-460kcztvio] {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        border: 1px solid #e4e7ec;
        border-radius: 12px;
    }

    .request-details > div[b-460kcztvio] {
        flex-direction: column;
        gap: 6px;
    }

    .request-details dd[b-460kcztvio] {
        text-align: right;
    }
}
.quote-actions[b-460kcztvio] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eef0f3;
}

.workspace-success[b-460kcztvio] {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #abefc6;
    border-radius: 12px;
    background: #ecfdf3;
    color: #027a48;
    font-size: 17px;
    line-height: 1.9;
}

.quote-document-actions[b-460kcztvio] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.quote-pdf-preview[b-460kcztvio] {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 12px;
    background: #f2f4f7;
}

.quote-pdf-preview iframe[b-460kcztvio] {
    display: block;
    width: 100%;
    height: 680px;
    border: 0;
}

@media (max-width: 650px) {
    .quote-document-actions > *[b-460kcztvio] {
        flex: 1 1 100%;
    }

    .quote-pdf-preview iframe[b-460kcztvio] {
        height: 520px;
    }
}
.quote-amount-input[b-460kcztvio] {
    text-align: left;
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 800;
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/DrugInformationSection.razor.rz.scp.css */
.drug-information[b-5vly17tnn5] {
    padding: 86px 0 92px;

    background: #fff;
}


.section-head[b-5vly17tnn5] {
    max-width: 800px;

    margin: 0 auto 40px;

    text-align: center;
}


.section-head > span[b-5vly17tnn5] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-5vly17tnn5] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.7vw, 42px);

    font-weight: 900;
    line-height: 1.5;
}


.section-head p[b-5vly17tnn5] {
    max-width: 700px;

    margin: 11px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}


.drug-summary-grid[b-5vly17tnn5] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.summary-card[b-5vly17tnn5] {
    min-width: 0;
    min-height: 112px;
    padding: 18px 20px;

    display: flex;
    justify-content: center;
    flex-direction: column;

    gap: 7px;

    border:
        1px solid rgba(58, 125, 68, .13);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f7fbf8);

    transition:
        border-color .2s ease,
        background .2s ease;
}


.summary-card:hover[b-5vly17tnn5] {
    border-color:
        rgba(58, 125, 68, .34);

    background:
        linear-gradient(
            145deg,
            #fff,
            #f1f8f3);
}


.summary-card span[b-5vly17tnn5] {
    color: #667085;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}


.summary-card strong[b-5vly17tnn5] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
    line-height: 1.75;

    overflow-wrap: anywhere;
}


.summary-card.prescription[b-5vly17tnn5] {
    border-color:
        rgba(36, 89, 166, .15);

    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(243, 247, 253, .96));
}


.summary-card.prescription strong[b-5vly17tnn5] {
    color: #2459a6;
}


.summary-card.brand-card[b-5vly17tnn5] {
    border-color:
        rgba(36, 89, 166, .14);

    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(245, 248, 253, .96));
}


.summary-card.brand-card strong[b-5vly17tnn5] {
    color: #2459a6;
}


.summary-card.availability-card[b-5vly17tnn5] {
    border-color:
        rgba(58, 125, 68, .16);

    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(243, 249, 244, .97));
}


.available-value[b-5vly17tnn5] {
    color: var(--green) !important;
}


.unavailable-value[b-5vly17tnn5] {
    color: #2459a6 !important;
}


.drug-details-panel[b-5vly17tnn5] {
    height: 470px;

    margin-top: 34px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(58, 125, 68, .17);

    border-radius: 24px;

    background: #fff;

    box-shadow:
        0 16px 40px rgba(31, 41, 55, .065);
}


.details-tabs[b-5vly17tnn5] {
    min-height: 76px;
    padding: 0 20px;

    display: flex;
    align-items: stretch;

    flex: 0 0 auto;

    gap: 4px;

    overflow-x: auto;
    overflow-y: hidden;

    border-bottom:
        1px solid rgba(58, 125, 68, .12);

    background:
        linear-gradient(
            135deg,
            rgba(247, 251, 248, .98),
            rgba(245, 248, 253, .96));

    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .25)
        transparent;
}


.details-tabs[b-5vly17tnn5]::-webkit-scrollbar {
    height: 5px;
}


.details-tabs[b-5vly17tnn5]::-webkit-scrollbar-track {
    background: transparent;
}


.details-tabs[b-5vly17tnn5]::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .25);
}


.details-tab[b-5vly17tnn5] {
    position: relative;

    min-width: max-content;
    min-height: 76px;
    padding: 0 17px;

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

    flex: 0 0 auto;

    border: 0;

    background: transparent;
    color: #566173;

    cursor: pointer;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;

    transition:
        color .2s ease,
        background .2s ease;
}


.details-tab[b-5vly17tnn5]::after {
    content: "";

    position: absolute;

    right: 17px;
    bottom: 0;
    left: 17px;

    height: 3px;

    border-radius:
        999px 999px 0 0;

    background: transparent;

    transform: scaleX(0);

    transition:
        transform .2s ease,
        background .2s ease;
}


.details-tab:hover[b-5vly17tnn5] {
    color: var(--green);

    background:
        rgba(58, 125, 68, .045);
}


.details-tab.active[b-5vly17tnn5] {
    color: var(--green);
}


.details-tab.active[b-5vly17tnn5]::after {
    background: var(--green);

    transform: scaleX(1);
}


.details-tab:focus-visible[b-5vly17tnn5] {
    outline:
        3px solid rgba(36, 89, 166, .16);

    outline-offset: -4px;
}


.details-content[b-5vly17tnn5] {
    min-height: 0;
    padding: 27px 30px 30px;

    display: flex;
    flex: 1;
    flex-direction: column;

    background: #fff;
}


.details-content-head[b-5vly17tnn5] {
    margin-bottom: 16px;

    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 11px;
}


.content-mark[b-5vly17tnn5] {
    width: 5px;
    height: 29px;

    display: block;

    flex: 0 0 5px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--green),
            #2459a6);
}


.details-content-head h3[b-5vly17tnn5] {
    margin: 0;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.7;
}


.details-content-body[b-5vly17tnn5] {
    min-height: 0;
    padding: 0 2px 10px 14px;

    flex: 1;

    overflow-y: auto;
    overflow-x: hidden;

    color: #596579;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.15;

    white-space: pre-line;
    overflow-wrap: anywhere;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .32)
        transparent;
}


.details-content-body[b-5vly17tnn5]::-webkit-scrollbar {
    width: 7px;
}


.details-content-body[b-5vly17tnn5]::-webkit-scrollbar-track {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .045);
}


.details-content-body[b-5vly17tnn5]::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .32);
}


.details-content-body[b-5vly17tnn5]  div,
.details-content-body[b-5vly17tnn5]  p {
    margin: 0 0 13px;
}


.details-content-body[b-5vly17tnn5]  div:last-child,
.details-content-body[b-5vly17tnn5]  p:last-child {
    margin-bottom: 0;
}


.details-content-body[b-5vly17tnn5]  h1,
.details-content-body[b-5vly17tnn5]  h2,
.details-content-body[b-5vly17tnn5]  h3,
.details-content-body[b-5vly17tnn5]  h4 {
    margin: 22px 0 10px;

    color: var(--text);

    font-weight: 900;
    line-height: 1.7;
}


.details-content-body[b-5vly17tnn5]  h1:first-child,
.details-content-body[b-5vly17tnn5]  h2:first-child,
.details-content-body[b-5vly17tnn5]  h3:first-child,
.details-content-body[b-5vly17tnn5]  h4:first-child {
    margin-top: 0;
}


.details-content-body[b-5vly17tnn5]  ul,
.details-content-body[b-5vly17tnn5]  ol {
    margin: 12px 0 18px;
    padding-right: 26px;
}


.details-content-body[b-5vly17tnn5]  li {
    margin-bottom: 7px;
}


.details-content-body[b-5vly17tnn5]  li::marker {
    color: var(--green);

    font-weight: 900;
}


.details-content-body[b-5vly17tnn5]  strong {
    color: var(--text);

    font-weight: 900;
}


.details-content-body[b-5vly17tnn5]  a {
    color: #2459a6;

    font-weight: 800;

    text-decoration: underline;
    text-underline-offset: 4px;
}


.details-content-body[b-5vly17tnn5]  blockquote {
    margin: 18px 0;
    padding: 16px 19px;

    border-right:
        4px solid var(--green);

    border-radius:
        14px 4px 4px 14px;

    background:
        rgba(58, 125, 68, .055);
}


.details-content-body[b-5vly17tnn5]  table {
    width: 100%;

    margin: 18px 0;

    border-collapse: collapse;
}


.details-content-body[b-5vly17tnn5]  th,
.details-content-body[b-5vly17tnn5]  td {
    padding: 11px 13px;

    border:
        1px solid rgba(58, 125, 68, .13);

    text-align: right;
}


.details-content-body[b-5vly17tnn5]  th {
    background:
        rgba(58, 125, 68, .07);

    color: var(--text);

    font-weight: 900;
}


.details-content-body[b-5vly17tnn5]  img {
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 18px auto;

    display: block;

    border-radius: 16px;
}


.prescription-notice[b-5vly17tnn5] {
    margin-top: 26px;
    padding: 22px 25px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    border:
        1px solid rgba(36, 89, 166, .16);

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            rgba(243, 247, 253, .97),
            rgba(255, 255, 255, .98));
}


.prescription-notice strong[b-5vly17tnn5] {
    min-height: 34px;
    padding: 0 12px;

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

    flex: 0 0 auto;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .11);

    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}


.prescription-notice p[b-5vly17tnn5] {
    margin: 1px 0 0;

    color: #4f6073;

    font-size: 15px;
    font-weight: 600;
    line-height: 2;
}


@media (max-width: 1050px) {

    .drug-summary-grid[b-5vly17tnn5] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .details-tabs[b-5vly17tnn5] {
        padding: 0 12px;
    }


    .details-tab[b-5vly17tnn5] {
        padding: 0 14px;
    }
}


@media (max-width: 620px) {

    .drug-information[b-5vly17tnn5] {
        padding: 68px 0 72px;
    }


    .section-head[b-5vly17tnn5] {
        margin-bottom: 31px;
    }


    .section-head h2[b-5vly17tnn5] {
        font-size: 28px;
    }


    .section-head p[b-5vly17tnn5] {
        font-size: 15px;
    }


    .drug-summary-grid[b-5vly17tnn5] {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .summary-card[b-5vly17tnn5] {
        min-height: 94px;
        padding: 16px 17px;
    }


    .summary-card span[b-5vly17tnn5] {
        font-size: 14px;
    }


    .summary-card strong[b-5vly17tnn5] {
        font-size: 17px;
    }


    .drug-details-panel[b-5vly17tnn5] {
        height: 430px;

        margin-top: 25px;

        border-radius: 20px;
    }


    .details-tabs[b-5vly17tnn5] {
        min-height: 64px;
        padding: 0 8px;
    }


    .details-tab[b-5vly17tnn5] {
        min-height: 64px;
        padding: 0 13px;

        font-size: 14px;
    }


    .details-tab[b-5vly17tnn5]::after {
        right: 13px;
        left: 13px;
    }


    .details-content[b-5vly17tnn5] {
        padding: 21px 19px 23px;
    }


    .details-content-head[b-5vly17tnn5] {
        margin-bottom: 12px;
    }


    .content-mark[b-5vly17tnn5] {
        height: 25px;
    }


    .details-content-head h3[b-5vly17tnn5] {
        font-size: 20px;
    }


    .details-content-body[b-5vly17tnn5] {
        padding-left: 8px;

        font-size: 15px;
        line-height: 2.05;
    }


    .prescription-notice[b-5vly17tnn5] {
        padding: 19px;

        flex-direction: column;

        gap: 10px;
    }


    .prescription-notice p[b-5vly17tnn5] {
        font-size: 14px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/EquipmentInformationSection.razor.rz.scp.css */
.equipment-information[b-0yggizgmg0] {
    padding: 86px 0 92px;
    background: #fff;
}

.section-head[b-0yggizgmg0] {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-head > span[b-0yggizgmg0] {
    display: block;
    margin-bottom: 7px;
    color: var(--green);
    font-size: 16px;
    font-weight: 900;
}

.section-head h2[b-0yggizgmg0] {
    margin: 0;
    color: var(--text);
    font-size: clamp(30px, 3.7vw, 42px);
    font-weight: 900;
    line-height: 1.5;
}

.section-head p[b-0yggizgmg0] {
    max-width: 700px;
    margin: 11px auto 0;
    color: #667085;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}

.equipment-summary-grid[b-0yggizgmg0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.summary-card[b-0yggizgmg0] {
    min-width: 0;
    min-height: 112px;
    padding: 18px 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(58, 125, 68, .13);
    border-radius: 19px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f7fbf8);
    transition:
        border-color .2s ease,
        background .2s ease;
}

.summary-card:hover[b-0yggizgmg0] {
    border-color: rgba(58, 125, 68, .34);
    background:
        linear-gradient(
            145deg,
            #fff,
            #f1f8f3);
}

.summary-card span[b-0yggizgmg0] {
    color: #667085;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}

.summary-card strong[b-0yggizgmg0] {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.summary-card.brand-card[b-0yggizgmg0] {
    border-color: rgba(36, 89, 166, .14);
    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(245, 248, 253, .96));
}

.summary-card.brand-card strong[b-0yggizgmg0] {
    color: #2459a6;
}

.summary-card.availability-card[b-0yggizgmg0] {
    border-color: rgba(58, 125, 68, .16);
    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(243, 249, 244, .97));
}

.available-value[b-0yggizgmg0] {
    color: var(--green) !important;
}

.unavailable-value[b-0yggizgmg0] {
    color: #2459a6 !important;
}

.equipment-details-panel[b-0yggizgmg0] {
    height: 470px;
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(58, 125, 68, .17);
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 16px 40px rgba(31, 41, 55, .065);
}

.details-tabs[b-0yggizgmg0] {
    min-height: 76px;
    padding: 0 20px;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgba(58, 125, 68, .12);
    background:
        linear-gradient(
            135deg,
            rgba(247, 251, 248, .98),
            rgba(245, 248, 253, .96));
    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .25)
        transparent;
}

.details-tabs[b-0yggizgmg0]::-webkit-scrollbar {
    height: 5px;
}

.details-tabs[b-0yggizgmg0]::-webkit-scrollbar-track {
    background: transparent;
}

.details-tabs[b-0yggizgmg0]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(58, 125, 68, .25);
}

.details-tab[b-0yggizgmg0] {
    position: relative;
    min-width: max-content;
    min-height: 76px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #566173;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        color .2s ease,
        background .2s ease;
}

.details-tab[b-0yggizgmg0]::after {
    content: "";
    position: absolute;
    right: 17px;
    bottom: 0;
    left: 17px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    transform: scaleX(0);
    transition:
        transform .2s ease,
        background .2s ease;
}

.details-tab:hover[b-0yggizgmg0] {
    color: var(--green);
    background: rgba(58, 125, 68, .045);
}

.details-tab.active[b-0yggizgmg0] {
    color: var(--green);
}

.details-tab.active[b-0yggizgmg0]::after {
    background: var(--green);
    transform: scaleX(1);
}

.details-tab:focus-visible[b-0yggizgmg0] {
    outline: 3px solid rgba(36, 89, 166, .16);
    outline-offset: -4px;
}

.details-content[b-0yggizgmg0] {
    min-height: 0;
    padding: 27px 30px 30px;
    display: flex;
    flex: 1;
    flex-direction: column;
    background: #fff;
}

.details-content-head[b-0yggizgmg0] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 11px;
}

.content-mark[b-0yggizgmg0] {
    width: 5px;
    height: 29px;
    display: block;
    flex: 0 0 5px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--green),
            #2459a6);
}

.details-content-head h3[b-0yggizgmg0] {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.7;
}

.details-content-body[b-0yggizgmg0] {
    min-height: 0;
    padding: 0 2px 10px 14px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    color: #596579;
    font-size: 17px;
    font-weight: 500;
    line-height: 2.15;
    white-space: pre-line;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .32)
        transparent;
}

.details-content-body[b-0yggizgmg0]::-webkit-scrollbar {
    width: 7px;
}

.details-content-body[b-0yggizgmg0]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(58, 125, 68, .045);
}

.details-content-body[b-0yggizgmg0]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(58, 125, 68, .32);
}

.details-content-body[b-0yggizgmg0]  div,
.details-content-body[b-0yggizgmg0]  p {
    margin: 0 0 13px;
}

.details-content-body[b-0yggizgmg0]  div:last-child,
.details-content-body[b-0yggizgmg0]  p:last-child {
    margin-bottom: 0;
}

.details-content-body[b-0yggizgmg0]  h1,
.details-content-body[b-0yggizgmg0]  h2,
.details-content-body[b-0yggizgmg0]  h3,
.details-content-body[b-0yggizgmg0]  h4 {
    margin: 22px 0 10px;
    color: var(--text);
    font-weight: 900;
    line-height: 1.7;
}

.details-content-body[b-0yggizgmg0]  h1:first-child,
.details-content-body[b-0yggizgmg0]  h2:first-child,
.details-content-body[b-0yggizgmg0]  h3:first-child,
.details-content-body[b-0yggizgmg0]  h4:first-child {
    margin-top: 0;
}

.details-content-body[b-0yggizgmg0]  ul,
.details-content-body[b-0yggizgmg0]  ol {
    margin: 12px 0 18px;
    padding-right: 26px;
}

.details-content-body[b-0yggizgmg0]  li {
    margin-bottom: 7px;
}

.details-content-body[b-0yggizgmg0]  li::marker {
    color: var(--green);
    font-weight: 900;
}

.details-content-body[b-0yggizgmg0]  strong {
    color: var(--text);
    font-weight: 900;
}

.details-content-body[b-0yggizgmg0]  a {
    color: #2459a6;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.details-content-body[b-0yggizgmg0]  blockquote {
    margin: 18px 0;
    padding: 16px 19px;
    border-right: 4px solid var(--green);
    border-radius: 14px 4px 4px 14px;
    background: rgba(58, 125, 68, .055);
}

.details-content-body[b-0yggizgmg0]  table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
}

.details-content-body[b-0yggizgmg0]  th,
.details-content-body[b-0yggizgmg0]  td {
    padding: 11px 13px;
    border: 1px solid rgba(58, 125, 68, .13);
    text-align: right;
}

.details-content-body[b-0yggizgmg0]  th {
    background: rgba(58, 125, 68, .07);
    color: var(--text);
    font-weight: 900;
}

.details-content-body[b-0yggizgmg0]  img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
    display: block;
    border-radius: 16px;
}

@media (max-width: 1050px) {
    .equipment-summary-grid[b-0yggizgmg0] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .details-tabs[b-0yggizgmg0] {
        padding: 0 12px;
    }

    .details-tab[b-0yggizgmg0] {
        padding: 0 14px;
    }
}

@media (max-width: 620px) {
    .equipment-information[b-0yggizgmg0] {
        padding: 68px 0 72px;
    }

    .section-head[b-0yggizgmg0] {
        margin-bottom: 31px;
    }

    .section-head h2[b-0yggizgmg0] {
        font-size: 28px;
    }

    .section-head p[b-0yggizgmg0] {
        font-size: 15px;
    }

    .equipment-summary-grid[b-0yggizgmg0] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .summary-card[b-0yggizgmg0] {
        min-height: 94px;
        padding: 16px 17px;
    }

    .summary-card span[b-0yggizgmg0] {
        font-size: 14px;
    }

    .summary-card strong[b-0yggizgmg0] {
        font-size: 17px;
    }

    .equipment-details-panel[b-0yggizgmg0] {
        height: 430px;
        margin-top: 25px;
        border-radius: 20px;
    }

    .details-tabs[b-0yggizgmg0] {
        min-height: 64px;
        padding: 0 8px;
    }

    .details-tab[b-0yggizgmg0] {
        min-height: 64px;
        padding: 0 13px;
        font-size: 14px;
    }

    .details-tab[b-0yggizgmg0]::after {
        right: 13px;
        left: 13px;
    }

    .details-content[b-0yggizgmg0] {
        padding: 21px 19px 23px;
    }

    .details-content-head[b-0yggizgmg0] {
        margin-bottom: 12px;
    }

    .content-mark[b-0yggizgmg0] {
        height: 25px;
    }

    .details-content-head h3[b-0yggizgmg0] {
        font-size: 20px;
    }

    .details-content-body[b-0yggizgmg0] {
        padding-left: 8px;
        font-size: 15px;
        line-height: 2.05;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/FoodInformationSection.razor.rz.scp.css */
.food-information[b-9qcunq5ukx] {
    padding: 86px 0 92px;
    background: #fff;
}

.section-head[b-9qcunq5ukx] {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-head > span[b-9qcunq5ukx] {
    display: block;
    margin-bottom: 7px;
    color: var(--green);
    font-size: 16px;
    font-weight: 900;
}

.section-head h2[b-9qcunq5ukx] {
    margin: 0;
    color: var(--text);
    font-size: clamp(30px, 3.7vw, 42px);
    font-weight: 900;
    line-height: 1.5;
}

.section-head p[b-9qcunq5ukx] {
    max-width: 700px;
    margin: 11px auto 0;
    color: #667085;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}

.food-summary-grid[b-9qcunq5ukx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.summary-card[b-9qcunq5ukx] {
    min-width: 0;
    min-height: 112px;
    padding: 18px 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border: 1px solid rgba(58, 125, 68, .13);
    border-radius: 19px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f7fbf8);
    transition:
        border-color .2s ease,
        background .2s ease;
}

.summary-card:hover[b-9qcunq5ukx] {
    border-color: rgba(58, 125, 68, .34);
    background:
        linear-gradient(
            145deg,
            #fff,
            #f1f8f3);
}

.summary-card span[b-9qcunq5ukx] {
    color: #667085;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}

.summary-card strong[b-9qcunq5ukx] {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.summary-card.brand-card[b-9qcunq5ukx] {
    border-color: rgba(36, 89, 166, .14);
    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(245, 248, 253, .96));
}

.summary-card.brand-card strong[b-9qcunq5ukx] {
    color: #2459a6;
}

.summary-card.availability-card[b-9qcunq5ukx] {
    border-color: rgba(58, 125, 68, .16);
    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(243, 249, 244, .97));
}

.available-value[b-9qcunq5ukx] {
    color: var(--green) !important;
}

.unavailable-value[b-9qcunq5ukx] {
    color: #2459a6 !important;
}

.food-details-panel[b-9qcunq5ukx] {
    height: 470px;
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(58, 125, 68, .17);
    border-radius: 24px;
    background: #fff;
    box-shadow:
        0 16px 40px rgba(31, 41, 55, .065);
}

.details-tabs[b-9qcunq5ukx] {
    min-height: 76px;
    padding: 0 20px;
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid rgba(58, 125, 68, .12);
    background:
        linear-gradient(
            135deg,
            rgba(247, 251, 248, .98),
            rgba(245, 248, 253, .96));
    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .25)
        transparent;
}

.details-tabs[b-9qcunq5ukx]::-webkit-scrollbar {
    height: 5px;
}

.details-tabs[b-9qcunq5ukx]::-webkit-scrollbar-track {
    background: transparent;
}

.details-tabs[b-9qcunq5ukx]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(58, 125, 68, .25);
}

.details-tab[b-9qcunq5ukx] {
    position: relative;
    min-width: max-content;
    min-height: 76px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #566173;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    transition:
        color .2s ease,
        background .2s ease;
}

.details-tab[b-9qcunq5ukx]::after {
    content: "";
    position: absolute;
    right: 17px;
    bottom: 0;
    left: 17px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: transparent;
    transform: scaleX(0);
    transition:
        transform .2s ease,
        background .2s ease;
}

.details-tab:hover[b-9qcunq5ukx] {
    color: var(--green);
    background: rgba(58, 125, 68, .045);
}

.details-tab.active[b-9qcunq5ukx] {
    color: var(--green);
}

.details-tab.active[b-9qcunq5ukx]::after {
    background: var(--green);
    transform: scaleX(1);
}

.details-tab:focus-visible[b-9qcunq5ukx] {
    outline: 3px solid rgba(36, 89, 166, .16);
    outline-offset: -4px;
}

.details-content[b-9qcunq5ukx] {
    min-height: 0;
    padding: 27px 30px 30px;
    display: flex;
    flex: 1;
    flex-direction: column;
    background: #fff;
}

.details-content-head[b-9qcunq5ukx] {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 11px;
}

.content-mark[b-9qcunq5ukx] {
    width: 5px;
    height: 29px;
    display: block;
    flex: 0 0 5px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--green),
            #2459a6);
}

.details-content-head h3[b-9qcunq5ukx] {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.7;
}

.details-content-body[b-9qcunq5ukx] {
    min-height: 0;
    padding: 0 2px 10px 14px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    color: #596579;
    font-size: 17px;
    font-weight: 500;
    line-height: 2.15;
    white-space: pre-line;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .32)
        transparent;
}

.details-content-body[b-9qcunq5ukx]::-webkit-scrollbar {
    width: 7px;
}

.details-content-body[b-9qcunq5ukx]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(58, 125, 68, .045);
}

.details-content-body[b-9qcunq5ukx]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(58, 125, 68, .32);
}

.details-content-body[b-9qcunq5ukx]  div,
.details-content-body[b-9qcunq5ukx]  p {
    margin: 0 0 13px;
}

.details-content-body[b-9qcunq5ukx]  div:last-child,
.details-content-body[b-9qcunq5ukx]  p:last-child {
    margin-bottom: 0;
}

.details-content-body[b-9qcunq5ukx]  h1,
.details-content-body[b-9qcunq5ukx]  h2,
.details-content-body[b-9qcunq5ukx]  h3,
.details-content-body[b-9qcunq5ukx]  h4 {
    margin: 22px 0 10px;
    color: var(--text);
    font-weight: 900;
    line-height: 1.7;
}

.details-content-body[b-9qcunq5ukx]  h1:first-child,
.details-content-body[b-9qcunq5ukx]  h2:first-child,
.details-content-body[b-9qcunq5ukx]  h3:first-child,
.details-content-body[b-9qcunq5ukx]  h4:first-child {
    margin-top: 0;
}

.details-content-body[b-9qcunq5ukx]  ul,
.details-content-body[b-9qcunq5ukx]  ol {
    margin: 12px 0 18px;
    padding-right: 26px;
}

.details-content-body[b-9qcunq5ukx]  li {
    margin-bottom: 7px;
}

.details-content-body[b-9qcunq5ukx]  li::marker {
    color: var(--green);
    font-weight: 900;
}

.details-content-body[b-9qcunq5ukx]  strong {
    color: var(--text);
    font-weight: 900;
}

.details-content-body[b-9qcunq5ukx]  a {
    color: #2459a6;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.details-content-body[b-9qcunq5ukx]  blockquote {
    margin: 18px 0;
    padding: 16px 19px;
    border-right: 4px solid var(--green);
    border-radius: 14px 4px 4px 14px;
    background: rgba(58, 125, 68, .055);
}

.details-content-body[b-9qcunq5ukx]  table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
}

.details-content-body[b-9qcunq5ukx]  th,
.details-content-body[b-9qcunq5ukx]  td {
    padding: 11px 13px;
    border: 1px solid rgba(58, 125, 68, .13);
    text-align: right;
}

.details-content-body[b-9qcunq5ukx]  th {
    background: rgba(58, 125, 68, .07);
    color: var(--text);
    font-weight: 900;
}

.details-content-body[b-9qcunq5ukx]  img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
    display: block;
    border-radius: 16px;
}

@media (max-width: 1050px) {
    .food-summary-grid[b-9qcunq5ukx] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .details-tabs[b-9qcunq5ukx] {
        padding: 0 12px;
    }

    .details-tab[b-9qcunq5ukx] {
        padding: 0 14px;
    }
}

@media (max-width: 620px) {
    .food-information[b-9qcunq5ukx] {
        padding: 68px 0 72px;
    }

    .section-head[b-9qcunq5ukx] {
        margin-bottom: 31px;
    }

    .section-head h2[b-9qcunq5ukx] {
        font-size: 28px;
    }

    .section-head p[b-9qcunq5ukx] {
        font-size: 15px;
    }

    .food-summary-grid[b-9qcunq5ukx] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .summary-card[b-9qcunq5ukx] {
        min-height: 94px;
        padding: 16px 17px;
    }

    .summary-card span[b-9qcunq5ukx] {
        font-size: 14px;
    }

    .summary-card strong[b-9qcunq5ukx] {
        font-size: 17px;
    }

    .food-details-panel[b-9qcunq5ukx] {
        height: 430px;
        margin-top: 25px;
        border-radius: 20px;
    }

    .details-tabs[b-9qcunq5ukx] {
        min-height: 64px;
        padding: 0 8px;
    }

    .details-tab[b-9qcunq5ukx] {
        min-height: 64px;
        padding: 0 13px;
        font-size: 14px;
    }

    .details-tab[b-9qcunq5ukx]::after {
        right: 13px;
        left: 13px;
    }

    .details-content[b-9qcunq5ukx] {
        padding: 21px 19px 23px;
    }

    .details-content-head[b-9qcunq5ukx] {
        margin-bottom: 12px;
    }

    .content-mark[b-9qcunq5ukx] {
        height: 25px;
    }

    .details-content-head h3[b-9qcunq5ukx] {
        font-size: 20px;
    }

    .details-content-body[b-9qcunq5ukx] {
        padding-left: 8px;
        font-size: 15px;
        line-height: 2.05;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/ProductCategoriesSection.razor.rz.scp.css */
.product-categories[b-sdci77sgdl] {
    position: relative;
    z-index: 4;

    margin-top: 0;
    padding: 72px 0;

    background: #fff;
}


.categories-panel[b-sdci77sgdl] {
    position: relative;

    padding: 32px 38px;

    display: grid;

    grid-template-columns:
        minmax(270px, .85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap: 42px;

    overflow: hidden;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius:
        28px 58px 28px 58px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .98),
            rgba(246, 251, 247, .97));

    box-shadow:
        0 22px 55px rgba(31, 41, 55, .09);
}


.categories-panel[b-sdci77sgdl]::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -115px;
    left: -65px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .08);

    pointer-events: none;
}


.categories-heading[b-sdci77sgdl] {
    position: relative;
    z-index: 2;
}


.categories-heading > span[b-sdci77sgdl] {
    display: block;

    margin-bottom: 7px;

    color: #2459a6;

    font-size: 16px;
    font-weight: 900;
}


.categories-heading h2[b-sdci77sgdl] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(26px, 2.8vw, 34px);

    font-weight: 900;
    line-height: 1.55;
}


.categories-heading p[b-sdci77sgdl] {
    margin: 10px 0 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.95;
}


.categories-list[b-sdci77sgdl] {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;

    gap: 13px;

    overflow-x: auto;
    overflow-y: hidden;

    direction: rtl;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .28)
        transparent;

    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
}


.categories-list[b-sdci77sgdl]::-webkit-scrollbar {
    height: 6px;
}


.categories-list[b-sdci77sgdl]::-webkit-scrollbar-track {
    background: transparent;
}


.categories-list[b-sdci77sgdl]::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .28);
}


.categories-list:has(
    .category-item:only-child)[b-sdci77sgdl] {
    justify-content: flex-end;
}


.categories-list:has(
    .category-item:nth-child(2):last-child)[b-sdci77sgdl] {
    justify-content: flex-start;
}


.category-item[b-sdci77sgdl] {
    min-width: 132px;
    min-height: 128px;
    padding: 15px 17px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 132px;
    flex-direction: column;

    gap: 10px;

    border:
        1px solid rgba(58, 125, 68, .1);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .86);

    text-align: center;

    scroll-snap-align: start;

    transition:
        border-color .2s ease;
}


.category-item:hover[b-sdci77sgdl] {
    border-color:
        rgba(58, 125, 68, .32);

    box-shadow: none;
    transform: none;
}


.category-icon[b-sdci77sgdl] {
    width: 68px;
    height: 68px;
    padding: 7px;

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

    flex: 0 0 68px;

    overflow: hidden;

    border-radius: 18px;

    background:
        rgba(58, 125, 68, .08);
}


.category-item:nth-child(even)
.category-icon[b-sdci77sgdl] {
    background:
        rgba(36, 89, 166, .09);
}


.category-icon img[b-sdci77sgdl] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.category-icon span[b-sdci77sgdl] {
    font-size: 33px;
}


.category-item strong[b-sdci77sgdl] {
    color: var(--text);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.6;
}


@media (max-width: 850px) {

    .categories-panel[b-sdci77sgdl] {
        grid-template-columns: 1fr;

        gap: 26px;
    }


    .categories-heading[b-sdci77sgdl] {
        text-align: center;
    }


    .categories-list[b-sdci77sgdl] {
        width: 100%;
    }
}


@media (max-width: 620px) {

    .product-categories[b-sdci77sgdl] {
        margin-top: 0;
        padding: 60px 0;
    }


    .categories-panel[b-sdci77sgdl] {
        padding: 28px 18px;

        border-radius:
            23px 42px 23px 42px;
    }


    .categories-heading > span[b-sdci77sgdl] {
        font-size: 15px;
    }


    .categories-heading h2[b-sdci77sgdl] {
        font-size: 26px;
    }


    .categories-heading p[b-sdci77sgdl] {
        font-size: 15px;
    }


    .categories-list[b-sdci77sgdl] {
        gap: 10px;
    }


    .category-item[b-sdci77sgdl] {
        min-width: 126px;
        min-height: 116px;
        padding: 13px 10px;

        flex-basis: 126px;
    }


    .category-icon[b-sdci77sgdl] {
        width: 60px;
        height: 60px;

        flex-basis: 60px;
    }


    .category-icon span[b-sdci77sgdl] {
        font-size: 30px;
    }


    .category-item strong[b-sdci77sgdl] {
        font-size: 15px;
    }
}


@media (max-width: 360px) {

    .category-item[b-sdci77sgdl] {
        min-width:
            calc(100vw - 76px);

        flex-basis:
            calc(100vw - 76px);
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/ProductHeroSection.razor.rz.scp.css */
.product-hero[b-5rpwtkllos] {
    position: relative;
    padding: 40px 0 48px;
    overflow: hidden;
    color: var(--text, #475467);
    background: linear-gradient(135deg, #f1f8f2, #f3f7fd);
}

.product-hero[b-5rpwtkllos],
.product-hero *[b-5rpwtkllos] {
    box-sizing: border-box;
}

.product-hero[b-5rpwtkllos]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(58, 125, 68, .06) 3px, transparent 4px);
    background-size: 100px 100px;
}

.product-hero-shape[b-5rpwtkllos] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

.shape-one[b-5rpwtkllos] {
    top: 80px;
    right: -180px;
    background: rgba(58, 125, 68, .06);
}

.shape-two[b-5rpwtkllos] {
    bottom: -210px;
    left: -100px;
    background: rgba(36, 89, 166, .07);
}

.product-hero-wrap[b-5rpwtkllos] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 36px;
}

.product-gallery[b-5rpwtkllos],
.product-hero-content[b-5rpwtkllos] {
    width: 100%;
    min-width: 0;
}

.product-gallery[b-5rpwtkllos] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.main-image[b-5rpwtkllos] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 430px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid #e4e7ec;
    border-radius: 24px;
    background: #fff;
}

.main-image > img[b-5rpwtkllos] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.image-placeholder[b-5rpwtkllos] {
    font-size: 90px;
}

.prescription-badge[b-5rpwtkllos] {
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2459a6;
    font-size: 15px;
    font-weight: 800;
}

.image-thumbnails[b-5rpwtkllos] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 5px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.thumbnail-button[b-5rpwtkllos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    flex: 0 0 68px;
    padding: 7px;
    border: 2px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.thumbnail-button.active[b-5rpwtkllos] {
    border-color: var(--green, #3a7d44);
}

.thumbnail-button img[b-5rpwtkllos] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-hero-content[b-5rpwtkllos] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
}

.product-brand[b-5rpwtkllos] {
    display: block;
    margin-bottom: 8px;
    color: var(--green, #3a7d44);
    font-size: 17px;
    font-weight: 800;
}

.product-title-block h1[b-5rpwtkllos] {
    margin: 0;
    font-size: clamp(27px, 2.6vw, 37px);
    font-weight: 900;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.english-name[b-5rpwtkllos] {
    margin: 8px 0 0;
    color: #667085;
    font-size: 18px;
    line-height: 1.8;
    text-align: right;
    overflow-wrap: anywhere;
}

.product-description[b-5rpwtkllos] {
    max-height: 150px;
    padding-left: 8px;
    overflow-y: auto;
    color: #596579;
    font-size: 17px;
    line-height: 2;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
}

.product-description[b-5rpwtkllos]  p,
.product-description[b-5rpwtkllos]  div {
    margin: 0 0 8px;
}

.product-description[b-5rpwtkllos]  p:last-child,
.product-description[b-5rpwtkllos]  div:last-child {
    margin-bottom: 0;
}

.product-description[b-5rpwtkllos]  ul,
.product-description[b-5rpwtkllos]  ol {
    margin: 8px 0;
    padding-right: 24px;
}

.product-description[b-5rpwtkllos]  img {
    max-width: 100%;
    height: auto;
}

.product-price-box[b-5rpwtkllos] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 18px 20px;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
}

.product-price[b-5rpwtkllos] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.product-price > span[b-5rpwtkllos] {
    color: #667085;
    font-size: 16px;
}

.product-price > strong[b-5rpwtkllos] {
    color: var(--green, #3a7d44);
    font-size: 25px;
    font-weight: 900;
    line-height: 1.8;
}

.stock-badge[b-5rpwtkllos] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.8;
}

.stock-badge.available[b-5rpwtkllos] {
    background: #edf7ef;
    color: #286b35;
}

.stock-badge.unavailable[b-5rpwtkllos] {
    background: #fff1f0;
    color: #b42318;
}

.stock-badge.neutral[b-5rpwtkllos] {
    background: #f2f4f7;
    color: #667085;
}

.product-availability-note[b-5rpwtkllos] {
    padding: 16px 18px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: rgba(255, 255, 255, .8);
    color: #667085;
    font-size: 17px;
    line-height: 1.9;
}

.thumbnail-button:focus-visible[b-5rpwtkllos] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 1000px) {
    .product-hero-wrap[b-5rpwtkllos] {
        gap: 24px;
    }

    .main-image[b-5rpwtkllos] {
        height: 360px;
        padding: 22px;
    }
}

@media (max-width: 850px) {
    .product-hero[b-5rpwtkllos] {
        padding: 28px 0 34px;
    }

    .product-hero-wrap[b-5rpwtkllos] {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .product-gallery[b-5rpwtkllos] {
        max-width: 600px;
        margin: 0 auto;
    }

    .main-image[b-5rpwtkllos] {
        height: 350px;
    }
}

@media (max-width: 520px) {
    .main-image[b-5rpwtkllos] {
        height: 290px;
        padding: 20px;
        border-radius: 18px;
    }

    .product-hero-content[b-5rpwtkllos] {
        gap: 15px;
    }

    .product-price-box[b-5rpwtkllos] {
        padding: 16px;
    }

    .product-price > strong[b-5rpwtkllos] {
        font-size: 23px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/ProductPurchaseSection.razor.rz.scp.css */
.product-purchase-section[b-1b77131hv2] {
    padding: 24px 0 38px;
    color: var(--text, #475467);
    font-size: 17px;
}

.product-purchase-section *[b-1b77131hv2] {
    box-sizing: border-box;
}

.purchase-card[b-1b77131hv2] {
    min-width: 0;
    padding: 28px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(16, 24, 40, .04);
}

.purchase-head[b-1b77131hv2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.purchase-head > div[b-1b77131hv2] {
    min-width: 0;
}

.purchase-head > div > span[b-1b77131hv2] {
    color: var(--orange, #b54708);
    font-size: 17px;
    font-weight: 800;
}

.purchase-head h2[b-1b77131hv2] {
    margin: 8px 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.8;
}

.purchase-head p[b-1b77131hv2] {
    margin: 0;
    color: var(--muted, #667085);
    font-size: 17px;
    line-height: 1.9;
}

.purchase-grid[b-1b77131hv2] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(130px, 1fr);
    gap: 20px;
}

.purchase-field[b-1b77131hv2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.purchase-field label[b-1b77131hv2] {
    font-size: 17px;
    font-weight: 800;
}

.purchase-field input[b-1b77131hv2],
.purchase-field select[b-1b77131hv2] {
    width: 100%;
    min-width: 0;
    min-height: 49px;
    padding: 10px 12px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 17px;
}

.purchase-field small[b-1b77131hv2] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.9;
}

.purchase-price[b-1b77131hv2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 19px;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #fbfcfd;
}

.purchase-price span[b-1b77131hv2] {
    color: var(--muted, #667085);
    font-size: 16px;
}

.purchase-price strong[b-1b77131hv2] {
    font-size: 23px;
    font-weight: 900;
}

.purchase-price.total[b-1b77131hv2] {
    border-color: #d5e7d9;
    background: #f0f7f2;
}

.purchase-price.total strong[b-1b77131hv2] {
    color: var(--green, #3a7d44);
}

.purchase-footer[b-1b77131hv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #eef0f3;
}

.purchase-footer p[b-1b77131hv2] {
    margin: 0;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 1.9;
}

.purchase-button[b-1b77131hv2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 11px 18px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.8;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.purchase-button.primary[b-1b77131hv2] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.purchase-button.secondary:hover[b-1b77131hv2] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.purchase-button:disabled[b-1b77131hv2] {
    opacity: .5;
    cursor: not-allowed;
}

.purchase-notice[b-1b77131hv2],
.purchase-message[b-1b77131hv2] {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.purchase-notice[b-1b77131hv2] {
    border-color: #fedf89;
    background: #fffcf5;
    color: #875408;
}

.purchase-message.error[b-1b77131hv2] {
    border-color: #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.purchase-message.success[b-1b77131hv2] {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #027a48;
}

.purchase-message.success a[b-1b77131hv2] {
    display: inline-block;
    margin-right: 10px;
    color: #027a48;
    font-weight: 900;
    text-underline-offset: 5px;
}

.purchase-state[b-1b77131hv2] {
    padding: 24px 15px;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--muted, #667085);
    text-align: center;
    line-height: 1.9;
}

button:focus-visible[b-1b77131hv2],
a:focus-visible[b-1b77131hv2],
input:focus-visible[b-1b77131hv2],
select:focus-visible[b-1b77131hv2] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .purchase-card[b-1b77131hv2] {
        padding: 20px;
    }

    .purchase-head[b-1b77131hv2],
    .purchase-footer[b-1b77131hv2] {
        flex-direction: column;
        align-items: stretch;
    }

    .purchase-grid[b-1b77131hv2] {
        grid-template-columns: 1fr;
    }

    .purchase-button[b-1b77131hv2] {
        white-space: normal;
    }
}
.product-purchase-section.embedded[b-1b77131hv2] {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.embedded .purchase-inner[b-1b77131hv2] {
    width: 100%;
    min-width: 0;
}

.embedded .purchase-card[b-1b77131hv2] {
    padding: 20px;
    border-radius: 16px;
    box-shadow: none;
}

.embedded .purchase-head[b-1b77131hv2] {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.embedded .purchase-head h2[b-1b77131hv2] {
    margin: 5px 0 0;
    font-size: 20px;
}

.embedded .purchase-head > div > span[b-1b77131hv2] {
    font-size: 16px;
}

.embedded .purchase-grid[b-1b77131hv2] {
    grid-template-columns: minmax(0, 1fr) minmax(95px, .45fr);
    gap: 15px;
}

.purchase-selection-total[b-1b77131hv2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding: 15px;
    border: 1px solid #d5e7d9;
    border-radius: 12px;
    background: #f0f7f2;
    font-size: 17px;
    line-height: 1.9;
}

.purchase-selection-total strong[b-1b77131hv2] {
    color: var(--green, #3a7d44);
    font-size: 23px;
    font-weight: 900;
}

.embedded .purchase-footer[b-1b77131hv2] {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
}

.embedded .purchase-footer .purchase-button[b-1b77131hv2] {
    width: 100%;
    min-height: 50px;
}

.embedded .purchase-head .purchase-button[b-1b77131hv2] {
    min-height: 40px;
    padding: 7px 12px;
    font-size: 16px;
}

@media (max-width: 520px) {
    .embedded .purchase-card[b-1b77131hv2] {
        padding: 16px;
    }

    .embedded .purchase-grid[b-1b77131hv2] {
        grid-template-columns: 1fr;
    }
}

.single-pharmacy-label[b-1b77131hv2] {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
}

.single-pharmacy[b-1b77131hv2] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
/* _content/PopProject.BlazorSSR/Components/Features/ProductDetails/Components/Sections/ProductRelatedProductsSection.razor.rz.scp.css */
.related-products[b-co76wktw8y] {
    padding: 72px 0 76px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(246, 251, 247, .98),
            rgba(245, 248, 253, .96));
}


.section-head[b-co76wktw8y] {
    max-width: 780px;

    margin: 0 auto 36px;

    text-align: center;
}


.section-head > span[b-co76wktw8y] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-co76wktw8y] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-co76wktw8y] {
    max-width: 700px;

    margin: 10px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.products-scroll[b-co76wktw8y] {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;

    gap: 20px;

    overflow-x: auto;
    overflow-y: hidden;

    direction: rtl;

    padding: 4px 4px 20px;

    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(58, 125, 68, .28)
        transparent;
}


.products-scroll[b-co76wktw8y]::-webkit-scrollbar {
    height: 7px;
}


.products-scroll[b-co76wktw8y]::-webkit-scrollbar-track {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .045);
}


.products-scroll[b-co76wktw8y]::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(58, 125, 68, .28);
}


.product-card-link[b-co76wktw8y] {
    width: 280px;
    min-width: 280px;
    height: auto;

    display: block;

    flex: 0 0 280px;

    color: inherit;

    text-decoration: none;

    border-radius: 22px;

    outline: none;

    scroll-snap-align: start;
}


.product-card-link:focus-visible[b-co76wktw8y] {
    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .16);
}


.product-card[b-co76wktw8y] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 22px;

    background: #fff;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.product-card-link:hover .product-card[b-co76wktw8y] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .36);

    /* box-shadow:
        0 18px 38px rgba(31, 41, 55, .1); */
}


.product-image[b-co76wktw8y] {
    height: 210px;
    padding: 14px;

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

    flex: 0 0 210px;

    overflow: hidden;

    background: #f8faf8;
}


.product-image img[b-co76wktw8y] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.product-card-link:hover .product-image img[b-co76wktw8y] {
    transform: scale(1.04);
}


.image-placeholder[b-co76wktw8y] {
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--muted);

    font-size: 58px;
}


.product-body[b-co76wktw8y] {
    min-height: 220px;
    padding: 18px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.product-type[b-co76wktw8y] {
    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    align-self: center;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}


.product-body h3[b-co76wktw8y] {
    min-height: 64px;

    margin: 12px 0 6px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.7;

    text-align: center;

    overflow-wrap: anywhere;
}


.product-brand[b-co76wktw8y],
.product-brand-placeholder[b-co76wktw8y] {
    width: 100%;
    min-height: 24px;
}


.product-brand[b-co76wktw8y] {
    margin: 0;
    padding-top: .5rem;

    color: #667085;

    direction: ltr;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;

    text-align: left;

    unicode-bidi: plaintext;
}


.product-brand-placeholder[b-co76wktw8y] {
    display: block;
}


.product-bottom[b-co76wktw8y] {
    margin-top: auto;
    padding-top: 14px;

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

    gap: 10px;

    border-top: 1px solid var(--soft);
}


.product-bottom strong[b-co76wktw8y] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link[b-co76wktw8y] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 10px;

    background: #2459a6;
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;

    transition:
        transform .2s ease,
        filter .2s ease;
}


.product-card-link:hover .card-link[b-co76wktw8y] {
    filter: brightness(.96);

    transform: translateY(-1px);
}


.section-action[b-co76wktw8y] {
    margin-top: 28px;

    display: flex;
    justify-content: center;
}


.marketplace-button[b-co76wktw8y] {
    min-height: 50px;
    padding: 0 24px;

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

    gap: 9px;

    border:
        1px solid rgba(58, 125, 68, .16);

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    box-shadow:
        0 11px 25px rgba(58, 125, 68, .17);

    font-size: 15px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .2s ease,
        filter .2s ease;
}


.marketplace-button:hover[b-co76wktw8y] {
    transform: translateY(-2px);

    filter: brightness(.97);
}


.marketplace-button:focus-visible[b-co76wktw8y] {
    outline:
        3px solid rgba(36, 89, 166, .17);

    outline-offset: 3px;
}


@media (max-width: 620px) {

    .related-products[b-co76wktw8y] {
        padding: 64px 0 68px;
    }


    .section-head[b-co76wktw8y] {
        margin-bottom: 30px;
    }


    .section-head h2[b-co76wktw8y] {
        font-size: 28px;
    }


    .section-head p[b-co76wktw8y] {
        font-size: 15px;
    }


    .products-scroll[b-co76wktw8y] {
        gap: 14px;

        padding-bottom: 17px;
    }


    .product-card-link[b-co76wktw8y] {
        width: min(82vw, 290px);
        min-width: min(82vw, 290px);

        flex-basis: min(82vw, 290px);
    }


    .product-image[b-co76wktw8y] {
        height: 220px;

        flex-basis: 220px;
    }


    .product-body[b-co76wktw8y] {
        min-height: 0;
    }


    .product-body h3[b-co76wktw8y] {
        min-height: 0;
    }


    .section-action[b-co76wktw8y] {
        margin-top: 23px;
    }


    .marketplace-button[b-co76wktw8y] {
        width: 100%;
        min-height: 50px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Settlements/PartySettlementsWorkspace.razor.rz.scp.css */
.party-settlements[b-4jrrje2j16] {
    width: 100%;
}

.page-head[b-4jrrje2j16] {
    margin-bottom: 24px;
}

.page-head > span[b-4jrrje2j16],
.page-head p[b-4jrrje2j16],
.muted[b-4jrrje2j16] {
    color: var(--muted);
}

.page-head h1[b-4jrrje2j16] {
    margin: 8px 0 12px;
    font-size: 26px;
    color: var(--text);
}

.page-head p[b-4jrrje2j16] {
    line-height: 1.9;
}

.summary-grid[b-4jrrje2j16] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.summary-grid article[b-4jrrje2j16],
.filters-card[b-4jrrje2j16],
.batch-details[b-4jrrje2j16],
.state-card[b-4jrrje2j16] {
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.summary-grid article[b-4jrrje2j16] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-grid article span[b-4jrrje2j16] {
    color: var(--muted);
    font-size: 13px;
}

.summary-grid article strong[b-4jrrje2j16] {
    color: var(--green);
    font-size: 19px;
}

.filters-card[b-4jrrje2j16] {
    margin-bottom: 20px;
}

.filters-grid[b-4jrrje2j16] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.field[b-4jrrje2j16] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.field label[b-4jrrje2j16] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.field input[b-4jrrje2j16],
.field select[b-4jrrje2j16] {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    box-sizing: border-box;
}

.filter-actions[b-4jrrje2j16],
.pagination[b-4jrrje2j16],
.details-head[b-4jrrje2j16] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-actions[b-4jrrje2j16] {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--soft);
}

.settlement-action[b-4jrrje2j16] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.settlement-action.primary[b-4jrrje2j16] {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
}

.settlement-action:disabled[b-4jrrje2j16] {
    opacity: .5;
    cursor: default;
}

.table-wrap[b-4jrrje2j16] {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 14px;
}

table[b-4jrrje2j16] {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    text-align: right;
}

th[b-4jrrje2j16],
td[b-4jrrje2j16] {
    padding: 15px 13px;
    border-bottom: 1px solid var(--soft);
    font-size: 12px;
    vertical-align: middle;
}

th[b-4jrrje2j16] {
    background: #f8fafc;
    color: var(--muted);
    white-space: nowrap;
}

tbody tr:last-child td[b-4jrrje2j16] {
    border-bottom: 0;
}

.cell-stack[b-4jrrje2j16] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.cell-stack span[b-4jrrje2j16] {
    color: var(--muted);
    font-size: 11px;
}

.status[b-4jrrje2j16] {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7e6;
    color: #925c00;
    white-space: nowrap;
    font-weight: 700;
}

.status.paid[b-4jrrje2j16] {
    background: #ecfdf3;
    color: #027a48;
}

.pagination[b-4jrrje2j16] {
    justify-content: center;
    margin: 18px 0;
    font-size: 12px;
    color: var(--muted);
}

.batch-details[b-4jrrje2j16] {
    margin-top: 28px;
    scroll-margin-top: 110px;
}

.details-head[b-4jrrje2j16] {
    justify-content: space-between;
    margin-bottom: 20px;
}

.details-head h2[b-4jrrje2j16] {
    margin: 0;
    font-size: 19px;
}

.batch-notice[b-4jrrje2j16] {
    padding: 16px;
    border-radius: 12px;
    background: #eff8f1;
    color: #285a31;
    font-size: 13px;
    line-height: 2.2;
}

.payment-date[b-4jrrje2j16] {
    color: var(--muted);
    font-size: 13px;
    line-height: 2;
}

.batch-details h3[b-4jrrje2j16] {
    margin: 24px 0 14px;
    font-size: 15px;
}

.description[b-4jrrje2j16] {
    padding: 18px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #f8fafc;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 2;
    font-size: 13px;
}

.receipt-grid[b-4jrrje2j16] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.error-message[b-4jrrje2j16] {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff1f1;
    color: #b42318;
    line-height: 1.9;
}

.state-card[b-4jrrje2j16] {
    color: var(--muted);
    text-align: center;
}

@media (max-width: 1000px) {
    .filters-grid[b-4jrrje2j16] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .summary-grid[b-4jrrje2j16],
    .filters-grid[b-4jrrje2j16],
    .receipt-grid[b-4jrrje2j16] {
        grid-template-columns: 1fr;
    }

    .summary-grid article[b-4jrrje2j16],
    .filters-card[b-4jrrje2j16],
    .batch-details[b-4jrrje2j16] {
        padding: 16px;
    }

    .page-head h1[b-4jrrje2j16] {
        font-size: 23px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Settlements/SettlementImageViewer.razor.rz.scp.css */
.receipt-thumbnail[b-idzxn9nj0k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid #dce7df;
    border-radius: 12px;
    background: #f8fbf9;
    color: #3a7d44;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.receipt-thumbnail img[b-idzxn9nj0k] {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
}

.receipt-thumbnail span[b-idzxn9nj0k] {
    font-size: 13px;
}

.receipt-dialog[b-idzxn9nj0k] {
    width: min(1100px, calc(100vw - 32px));
    height: min(850px, 90dvh);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid #475467;
    border-radius: 18px;
    background: #182230;
    color: #fff;
    overflow: hidden;
}

.receipt-dialog[b-idzxn9nj0k]::backdrop {
    background: rgba(16, 24, 40, .88);
}

.receipt-dialog-content[b-idzxn9nj0k] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.receipt-toolbar[b-idzxn9nj0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid #344054;
}

.receipt-tools[b-idzxn9nj0k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.receipt-tools button[b-idzxn9nj0k] {
    min-width: 40px;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid #667085;
    border-radius: 9px;
    background: #344054;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.receipt-tools button:disabled[b-idzxn9nj0k] {
    opacity: .4;
    cursor: not-allowed;
}

.receipt-stage[b-idzxn9nj0k] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 12px;
    direction: ltr;
    overscroll-behavior: contain;
}

.receipt-canvas[b-idzxn9nj0k] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 100%;
}

.receipt-canvas img[b-idzxn9nj0k] {
    display: block;
    object-fit: contain;
}

button:focus-visible[b-idzxn9nj0k] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .receipt-dialog[b-idzxn9nj0k] {
        width: calc(100vw - 16px);
        height: 92dvh;
        border-radius: 12px;
    }
}

dialog[open][b-idzxn9nj0k] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(1100px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: 90dvh;
    box-sizing: border-box;
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Finance/ShopFinance.razor.rz.scp.css */
.shop-finance-page[b-q0l0fpv2xk] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.finance-summary[b-q0l0fpv2xk] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-q0l0fpv2xk] {
    min-height: 118px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-label[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-value[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-note[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Settlement
========================= */

.settlement-card[b-q0l0fpv2xk] {
    margin-bottom: 18px;
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.settlement-head[b-q0l0fpv2xk] {
    margin-bottom: 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.settlement-eyebrow[b-q0l0fpv2xk] {
    display: block;

    margin-bottom: 5px;

    color: var(--orange);

    font-size: 11px;
    font-weight: 800;
}

.settlement-head h2[b-q0l0fpv2xk] {
    margin: 0;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.settlement-head p[b-q0l0fpv2xk] {
    margin: 6px 0 0;

    color: var(--muted);

    font-size: 11px;
}

.settlement-grid[b-q0l0fpv2xk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.settlement-item[b-q0l0fpv2xk] {
    min-height: 86px;
    padding: 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 12px;
}

.settlement-item.highlight[b-q0l0fpv2xk] {
    background: rgba(58, 125, 68, .05);
    border-color: rgba(58, 125, 68, .16);
}

.settlement-item span[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 10px;
}

.settlement-item strong[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.settlement-item.highlight strong[b-q0l0fpv2xk] {
    color: var(--green);
}

.settlement-footer[b-q0l0fpv2xk] {
    margin-top: 16px;
    padding-top: 16px;

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

    gap: 20px;

    border-top: 1px solid #f0f2f4;
}

.settlement-footer > div[b-q0l0fpv2xk] {
    display: flex;
    align-items: center;

    gap: 8px;
}

.settlement-footer > div > span:first-child[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 11px;
}

.settlement-footer strong[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 12px;
}


/* =========================
   Finance Card
========================= */

.finance-card[b-q0l0fpv2xk] {
    margin-top: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;

    overflow: hidden;
}

.card-head[b-q0l0fpv2xk] {
    padding: 19px 20px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.card-head h2[b-q0l0fpv2xk] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-head p[b-q0l0fpv2xk] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Table
========================= */

.table-wrap[b-q0l0fpv2xk] {
    width: 100%;

    overflow-x: auto;
}

.finance-table[b-q0l0fpv2xk] {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;
}

.finance-table th[b-q0l0fpv2xk],
.finance-table td[b-q0l0fpv2xk] {
    padding: 14px 15px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.finance-table th[b-q0l0fpv2xk] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.finance-table td[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 11px;
}

.finance-table tbody tr:last-child td[b-q0l0fpv2xk] {
    border-bottom: 0;
}

.finance-table tbody tr:hover[b-q0l0fpv2xk] {
    background: #fcfdfd;
}


/* =========================
   Transaction
========================= */

.transaction-cell[b-q0l0fpv2xk] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.transaction-avatar[b-q0l0fpv2xk] {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.transaction-cell > div:last-child[b-q0l0fpv2xk] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.transaction-cell strong[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 11px;
}

.transaction-cell span[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 9px;
}

.reference-link[b-q0l0fpv2xk] {
    color: var(--green);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.reference-link:hover[b-q0l0fpv2xk] {
    text-decoration: underline;
}


/* =========================
   Amount
========================= */

.positive-amount[b-q0l0fpv2xk] {
    color: #027a48 !important;

    font-weight: 900;
}

.negative-amount[b-q0l0fpv2xk] {
    color: #b42318 !important;

    font-weight: 800;
}


/* =========================
   Status
========================= */

.status-badge[b-q0l0fpv2xk] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-q0l0fpv2xk] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-q0l0fpv2xk] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-q0l0fpv2xk] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-q0l0fpv2xk] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-q0l0fpv2xk] {
    background: #eff8ff;
    color: #175cd3;
}


/* =========================
   Action
========================= */

.action-link[b-q0l0fpv2xk] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.action-link:hover[b-q0l0fpv2xk] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Empty
========================= */

.empty-state[b-q0l0fpv2xk] {
    min-height: 180px;

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

    gap: 6px;
}

.empty-state strong[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 13px;
}

.empty-state span[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Transaction Details
========================= */

.transaction-details-card[b-q0l0fpv2xk] {
    margin-top: 18px;
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-head[b-q0l0fpv2xk] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.details-head span[b-q0l0fpv2xk] {
    display: block;

    margin-bottom: 4px;

    color: var(--orange);

    font-size: 10px;
    font-weight: 800;
}

.details-head h2[b-q0l0fpv2xk] {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.close-button[b-q0l0fpv2xk] {
    min-height: 34px;
    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.close-button:hover[b-q0l0fpv2xk] {
    border-color: var(--green);
    color: var(--green);
}

.details-grid[b-q0l0fpv2xk] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.details-grid > div[b-q0l0fpv2xk] {
    min-height: 74px;
    padding: 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 11px;
}

.details-grid span[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 9px;
}

.details-grid strong[b-q0l0fpv2xk] {
    color: var(--text);

    font-size: 11px;
}

.transaction-description[b-q0l0fpv2xk] {
    margin-top: 12px;
    padding: 14px;

    background: #fafbfc;

    border: 1px solid #f0f2f4;
    border-radius: 11px;
}

.transaction-description span[b-q0l0fpv2xk] {
    color: var(--muted);

    font-size: 10px;
    font-weight: 800;
}

.transaction-description p[b-q0l0fpv2xk] {
    margin: 6px 0 0;

    color: var(--text);

    font-size: 11px;
    line-height: 2;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .finance-summary[b-q0l0fpv2xk],
    .settlement-grid[b-q0l0fpv2xk] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .details-grid[b-q0l0fpv2xk] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .finance-summary[b-q0l0fpv2xk],
    .settlement-grid[b-q0l0fpv2xk],
    .details-grid[b-q0l0fpv2xk] {
        grid-template-columns: 1fr;
    }

    .settlement-head[b-q0l0fpv2xk],
    .settlement-footer[b-q0l0fpv2xk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .settlement-footer[b-q0l0fpv2xk] {
        width: 100%;
    }

    .settlement-footer > div[b-q0l0fpv2xk] {
        width: 100%;

        justify-content: space-between;
    }

    .details-head[b-q0l0fpv2xk] {
        flex-direction: column;
    }

    .close-button[b-q0l0fpv2xk] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Finance/ShopSettlementDetails.razor.rz.scp.css */
.shop-settlement-details-page[b-8cq90eyoai] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-8cq90eyoai] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-8cq90eyoai] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-8cq90eyoai] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-8cq90eyoai] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-8cq90eyoai] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-8cq90eyoai] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Summary
========================= */

.settlement-summary-card[b-8cq90eyoai] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.settlement-main[b-8cq90eyoai] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.settlement-avatar[b-8cq90eyoai] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.settlement-main > div:last-child[b-8cq90eyoai] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.settlement-main strong[b-8cq90eyoai] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.settlement-main span[b-8cq90eyoai] {
    color: var(--muted);

    font-size: 10px;
}

.settlement-statuses[b-8cq90eyoai] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Cards
========================= */

.summary-grid[b-8cq90eyoai] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-8cq90eyoai] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card.highlight[b-8cq90eyoai] {
    background: rgba(58, 125, 68, .04);

    border-color: rgba(58, 125, 68, .18);
}

.summary-card span[b-8cq90eyoai] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-8cq90eyoai] {
    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.summary-card.highlight strong[b-8cq90eyoai] {
    color: var(--green);
}

.summary-card small[b-8cq90eyoai] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Details Grid
========================= */

.details-grid[b-8cq90eyoai] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-8cq90eyoai] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-8cq90eyoai] {
    grid-column: 1 / -1;
}

.details-card h3[b-8cq90eyoai] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-8cq90eyoai] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-8cq90eyoai] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-8cq90eyoai] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-8cq90eyoai] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-8cq90eyoai] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-8cq90eyoai] {
    direction: ltr;
}


/* =========================
   Amounts
========================= */

.positive-value[b-8cq90eyoai] {
    color: #027a48 !important;

    font-weight: 900 !important;
}

.negative-value[b-8cq90eyoai] {
    color: #b42318 !important;

    font-weight: 800 !important;
}


/* =========================
   Card Title
========================= */

.card-title-row[b-8cq90eyoai] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-8cq90eyoai] {
    margin-bottom: 5px;
}

.card-title-row p[b-8cq90eyoai] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Table
========================= */

.table-wrap[b-8cq90eyoai] {
    width: 100%;

    overflow-x: auto;
}

.settlement-table[b-8cq90eyoai] {
    width: 100%;
    min-width: 800px;

    border-collapse: collapse;
}

.settlement-table th[b-8cq90eyoai],
.settlement-table td[b-8cq90eyoai] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.settlement-table th[b-8cq90eyoai] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.settlement-table td[b-8cq90eyoai] {
    color: var(--text);

    font-size: 12px;
}

.settlement-table tbody tr:last-child td[b-8cq90eyoai] {
    border-bottom: 0;
}

.settlement-table tbody tr:hover[b-8cq90eyoai] {
    background: #fcfdfc;
}


/* =========================
   Description
========================= */

.description-box[b-8cq90eyoai] {
    min-height: 100px;
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}


/* =========================
   Status
========================= */

.status-badge[b-8cq90eyoai] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-8cq90eyoai] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-8cq90eyoai] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-8cq90eyoai] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-8cq90eyoai] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.action-link[b-8cq90eyoai] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-8cq90eyoai] {
    border-color: var(--green);
    color: var(--green);
}

.action-list[b-8cq90eyoai] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-8cq90eyoai] {
    min-height: 40px;
    padding: 0 14px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.action-button:hover[b-8cq90eyoai] {
    border-color: var(--green);
    color: var(--green);
}

.primary-action[b-8cq90eyoai] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-8cq90eyoai] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .summary-grid[b-8cq90eyoai] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-8cq90eyoai] {
        flex-direction: column;
    }

    .settlement-summary-card[b-8cq90eyoai] {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-grid[b-8cq90eyoai] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-8cq90eyoai] {
        grid-column: auto;
    }

    .back-button[b-8cq90eyoai] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-8cq90eyoai] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Inventory/ShopInventory.razor.rz.scp.css */
.shop-inventory-page[b-p8o8lugatq] {
    width: 100%;
}


/* =========================
   Summary
========================= */

.inventory-summary[b-p8o8lugatq] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-p8o8lugatq] {
    min-height: 112px;
    padding: 18px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-p8o8lugatq] {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.summary-card strong[b-p8o8lugatq] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-p8o8lugatq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Inventory Cell
========================= */

.inventory-cell[b-p8o8lugatq] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.inventory-avatar[b-p8o8lugatq] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.inventory-cell > div:last-child[b-p8o8lugatq] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.inventory-cell strong[b-p8o8lugatq] {
    color: var(--text);

    font-size: 13px;
}

.inventory-cell span[b-p8o8lugatq] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Status
========================= */

.status-badge[b-p8o8lugatq] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-p8o8lugatq] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-p8o8lugatq] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-p8o8lugatq] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-p8o8lugatq] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-p8o8lugatq] {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-p8o8lugatq] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;
}

.action-link:hover[b-p8o8lugatq] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .inventory-summary[b-p8o8lugatq] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .inventory-summary[b-p8o8lugatq] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Inventory/ShopInventoryDetails.razor.rz.scp.css */
.shop-inventory-details-page[b-vg9h60yk0p] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-vg9h60yk0p] {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.page-head > div:first-child > span[b-vg9h60yk0p] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-vg9h60yk0p] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-vg9h60yk0p] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-vg9h60yk0p] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-vg9h60yk0p] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Main Summary
========================= */

.inventory-summary-card[b-vg9h60yk0p] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.product-main[b-vg9h60yk0p] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.product-avatar[b-vg9h60yk0p] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.product-main > div:last-child[b-vg9h60yk0p] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.product-main strong[b-vg9h60yk0p] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.product-main span[b-vg9h60yk0p] {
    color: var(--muted);

    font-size: 10px;
}

.summary-statuses[b-vg9h60yk0p] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary Cards
========================= */

.summary-grid[b-vg9h60yk0p] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-vg9h60yk0p] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.summary-card span[b-vg9h60yk0p] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-vg9h60yk0p] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-vg9h60yk0p] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Details
========================= */

.details-grid[b-vg9h60yk0p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-vg9h60yk0p] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-vg9h60yk0p] {
    grid-column: 1 / -1;
}

.details-card h3[b-vg9h60yk0p] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.details-list[b-vg9h60yk0p] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-vg9h60yk0p] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-vg9h60yk0p] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-vg9h60yk0p] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-vg9h60yk0p] {
    color: var(--text);

    font-size: 13px;
}

.card-actions[b-vg9h60yk0p] {
    margin-top: 16px;
}

.action-button[b-vg9h60yk0p] {
    min-height: 38px;
    padding: 0 13px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

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

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.action-button:hover[b-vg9h60yk0p] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Card Title
========================= */

.card-title-row[b-vg9h60yk0p] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-vg9h60yk0p] {
    margin-bottom: 5px;
}

.card-title-row p[b-vg9h60yk0p] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Adjustment
========================= */

.adjustment-grid[b-vg9h60yk0p] {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(120px, .6fr)
        minmax(240px, 2fr)
        auto;

    gap: 10px;

    align-items: end;
}

.field-group[b-vg9h60yk0p] {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.field-group label[b-vg9h60yk0p] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.field-group input[b-vg9h60yk0p],
.field-group select[b-vg9h60yk0p] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 12px;

    outline: none;
}

.field-group input:focus[b-vg9h60yk0p],
.field-group select:focus[b-vg9h60yk0p] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.save-button[b-vg9h60yk0p] {
    min-height: 42px;
    padding: 0 17px;

    border: 0;
    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    white-space: nowrap;
}

.save-button:disabled[b-vg9h60yk0p] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Tables
========================= */

.table-wrap[b-vg9h60yk0p] {
    width: 100%;

    overflow-x: auto;
}

.details-table[b-vg9h60yk0p] {
    width: 100%;
    min-width: 720px;

    border-collapse: collapse;
}

.details-table th[b-vg9h60yk0p],
.details-table td[b-vg9h60yk0p] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.details-table th[b-vg9h60yk0p] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.details-table td[b-vg9h60yk0p] {
    color: var(--text);

    font-size: 12px;
}

.details-table tbody tr:last-child td[b-vg9h60yk0p] {
    border-bottom: 0;
}

.table-action[b-vg9h60yk0p] {
    min-height: 30px;
    padding: 0 8px;

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

    border: 1px solid var(--soft);
    border-radius: 7px;

    color: var(--text);

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;
}

.table-action:hover[b-vg9h60yk0p] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Status
========================= */

.status-badge[b-vg9h60yk0p] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-vg9h60yk0p] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-vg9h60yk0p] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-vg9h60yk0p] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-vg9h60yk0p] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .summary-grid[b-vg9h60yk0p] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .adjustment-grid[b-vg9h60yk0p] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .reason-field[b-vg9h60yk0p] {
        grid-column: 1 / -1;
    }

    .adjustment-action[b-vg9h60yk0p] {
        grid-column: 1 / -1;
    }

    .save-button[b-vg9h60yk0p] {
        width: 100%;
    }
}

@media (max-width: 800px) {

    .page-head[b-vg9h60yk0p] {
        flex-direction: column;
    }

    .inventory-summary-card[b-vg9h60yk0p] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-vg9h60yk0p] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-vg9h60yk0p] {
        grid-column: auto;
    }

    .back-button[b-vg9h60yk0p] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-vg9h60yk0p],
    .adjustment-grid[b-vg9h60yk0p] {
        grid-template-columns: 1fr;
    }

    .reason-field[b-vg9h60yk0p],
    .adjustment-action[b-vg9h60yk0p] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Orders/ShopOrderDetails.razor.rz.scp.css */
.shop-order-details-page[b-gqqjps4ioh] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-gqqjps4ioh] {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.page-head > div:first-child > span[b-gqqjps4ioh] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-gqqjps4ioh] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-gqqjps4ioh] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-gqqjps4ioh] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-gqqjps4ioh] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.order-summary-card[b-gqqjps4ioh] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.order-main[b-gqqjps4ioh] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.order-avatar[b-gqqjps4ioh],
.product-avatar[b-gqqjps4ioh] {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-weight: 900;
}

.order-avatar[b-gqqjps4ioh] {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 12px;
}

.order-main > div:last-child[b-gqqjps4ioh] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.order-main strong[b-gqqjps4ioh] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.order-main span[b-gqqjps4ioh] {
    color: var(--muted);

    font-size: 10px;
}

.order-statuses[b-gqqjps4ioh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Cards
========================= */

.details-grid[b-gqqjps4ioh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-gqqjps4ioh] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.details-card.full[b-gqqjps4ioh] {
    grid-column: 1 / -1;
}

.details-card h3[b-gqqjps4ioh] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-title-row[b-gqqjps4ioh] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.card-title-row h3[b-gqqjps4ioh] {
    margin-bottom: 5px;
}

.card-title-row p[b-gqqjps4ioh] {
    margin: 0;

    color: var(--muted);

    font-size: 11px;
}


/* =========================
   Details
========================= */

.details-list[b-gqqjps4ioh] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-gqqjps4ioh] {
    min-height: 56px;

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

    gap: 18px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-gqqjps4ioh] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-gqqjps4ioh] {
    color: var(--muted);

    font-size: 12px;
}

.detail-item strong[b-gqqjps4ioh] {
    color: var(--text);

    font-size: 13px;
}

.ltr-value[b-gqqjps4ioh] {
    direction: ltr;
}


/* =========================
   Items Table
========================= */

.items-table-wrap[b-gqqjps4ioh] {
    width: 100%;

    overflow-x: auto;
}

.items-table[b-gqqjps4ioh] {
    width: 100%;
    min-width: 700px;

    border-collapse: collapse;
}

.items-table th[b-gqqjps4ioh],
.items-table td[b-gqqjps4ioh] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.items-table th[b-gqqjps4ioh] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.items-table td[b-gqqjps4ioh] {
    color: var(--text);

    font-size: 12px;
}

.items-table tbody tr:last-child td[b-gqqjps4ioh] {
    border-bottom: 0;
}

.product-cell[b-gqqjps4ioh] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.product-avatar[b-gqqjps4ioh] {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border-radius: 10px;

    font-size: 11px;
}

.product-cell > div:last-child[b-gqqjps4ioh] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.product-cell strong[b-gqqjps4ioh] {
    font-size: 12px;
}

.product-cell span[b-gqqjps4ioh] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Notes
========================= */

.note-box[b-gqqjps4ioh] {
    min-height: 100px;
    padding: 16px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 13px;
    line-height: 2;
}


/* =========================
   Status
========================= */

.status-badge[b-gqqjps4ioh] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-gqqjps4ioh] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-gqqjps4ioh] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-gqqjps4ioh] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-gqqjps4ioh] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.action-list[b-gqqjps4ioh] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-gqqjps4ioh] {
    min-height: 40px;
    padding: 0 14px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.action-button:hover[b-gqqjps4ioh] {
    border-color: var(--green);
    color: var(--green);
}

.action-button:disabled[b-gqqjps4ioh] {
    opacity: .55;

    cursor: not-allowed;
}

.primary-action[b-gqqjps4ioh] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-gqqjps4ioh] {
    color: #fff;

    filter: brightness(.96);
}

.danger-action[b-gqqjps4ioh] {
    color: #b42318;
}

.danger-action:hover[b-gqqjps4ioh] {
    border-color: #fda29b;

    background: #fff7f7;
    color: #b42318;
}


/* =========================
   Responsive
========================= */

@media (max-width: 800px) {

    .page-head[b-gqqjps4ioh] {
        flex-direction: column;
    }

    .order-summary-card[b-gqqjps4ioh] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-grid[b-gqqjps4ioh] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-gqqjps4ioh] {
        grid-column: auto;
    }

    .back-button[b-gqqjps4ioh] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Orders/ShopOrders.razor.rz.scp.css */
.shop-orders-page[b-0urlu2o2fo] {
    width: 100%;
}


/* =========================
   Order
========================= */

.order-cell[b-0urlu2o2fo] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.order-avatar[b-0urlu2o2fo] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.order-cell > div:last-child[b-0urlu2o2fo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-cell strong[b-0urlu2o2fo] {
    font-size: 13px;
}

.order-cell span[b-0urlu2o2fo] {
    color: var(--muted);
    font-size: 10px;
}


/* =========================
   Customer
========================= */

.customer-cell[b-0urlu2o2fo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.customer-cell strong[b-0urlu2o2fo] {
    color: var(--text);
    font-size: 13px;
}

.customer-cell span[b-0urlu2o2fo] {
    color: var(--muted);
    font-size: 10px;
}


/* =========================
   Status
========================= */

.status-badge[b-0urlu2o2fo] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-0urlu2o2fo] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-0urlu2o2fo] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-0urlu2o2fo] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-0urlu2o2fo] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-0urlu2o2fo] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-0urlu2o2fo] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-0urlu2o2fo] {
    border-color: var(--green);
    color: var(--green);
}

.success-action[b-0urlu2o2fo] {
    color: var(--green);
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Products/CreateShopProduct.razor.rz.scp.css */
.create-shop-product-page[b-jrhy2t1wo9] {
    width: 100%;
}

.page-head[b-jrhy2t1wo9] {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.page-head > div > span[b-jrhy2t1wo9] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-jrhy2t1wo9] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-jrhy2t1wo9] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.back-button[b-jrhy2t1wo9],
.change-button[b-jrhy2t1wo9] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.catalog-card[b-jrhy2t1wo9],
.form-card[b-jrhy2t1wo9] {
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.catalog-search[b-jrhy2t1wo9] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.catalog-search > div:first-child[b-jrhy2t1wo9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.catalog-search span[b-jrhy2t1wo9],
.field-help[b-jrhy2t1wo9],
.selected-product small[b-jrhy2t1wo9] {
    color: var(--muted);
    font-size: 16px;
}

.catalog-filters[b-jrhy2t1wo9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.catalog-filters input[b-jrhy2t1wo9],
.catalog-filters select[b-jrhy2t1wo9],
.field-group input[b-jrhy2t1wo9] {
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 17px;
    outline: none;
}

.catalog-filters button[b-jrhy2t1wo9],
.select-button[b-jrhy2t1wo9],
.submit-button[b-jrhy2t1wo9] {
    min-height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.catalog-filters button:disabled[b-jrhy2t1wo9],
.select-button:disabled[b-jrhy2t1wo9],
.submit-button:disabled[b-jrhy2t1wo9] {
    opacity: .55;
    cursor: not-allowed;
}

.catalog-results-scroll[b-jrhy2t1wo9] {
    margin-top: 20px;
    max-height: 430px;
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.catalog-results-scroll[b-jrhy2t1wo9]::-webkit-scrollbar {
    width: 6px;
}

.catalog-results-scroll[b-jrhy2t1wo9]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d5dd;
}

.catalog-item[b-jrhy2t1wo9] {
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--soft);
    border-radius: 13px;
}

.catalog-product[b-jrhy2t1wo9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.catalog-image[b-jrhy2t1wo9],
.catalog-avatar[b-jrhy2t1wo9] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 13px;
}

.catalog-image[b-jrhy2t1wo9] {
    object-fit: cover;
}

.catalog-avatar[b-jrhy2t1wo9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 17px;
    font-weight: 900;
}

.catalog-product > div:last-child[b-jrhy2t1wo9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.catalog-product span[b-jrhy2t1wo9],
.catalog-product small[b-jrhy2t1wo9] {
    color: var(--muted);
    font-size: 15px;
}

.catalog-actions[b-jrhy2t1wo9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-badge[b-jrhy2t1wo9] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
}

.status-badge.success[b-jrhy2t1wo9] {
    background: #ecfdf3;
    color: #027a48;
}

.empty-catalog[b-jrhy2t1wo9] {
    margin-top: 20px;
    min-height: 110px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: 1px dashed var(--soft);
    border-radius: 13px;
}

.empty-catalog span[b-jrhy2t1wo9] {
    color: var(--muted);
    font-size: 15px;
}

.selected-product[b-jrhy2t1wo9] {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-product > div[b-jrhy2t1wo9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.selected-product > div > span[b-jrhy2t1wo9] {
    color: var(--green);
    font-size: 15px;
    font-weight: 800;
}

.form-grid[b-jrhy2t1wo9] {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-card.full[b-jrhy2t1wo9] {
    grid-column: 1 / -1;
}

.form-card h3[b-jrhy2t1wo9] {
    margin: 0 0 18px;
}

.field-group[b-jrhy2t1wo9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group label[b-jrhy2t1wo9] {
    font-size: 17px;
    font-weight: 800;
}

.field-help[b-jrhy2t1wo9] {
    margin-top: 5px;
}

.submit-card[b-jrhy2t1wo9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.submit-card > div[b-jrhy2t1wo9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submit-card > div span[b-jrhy2t1wo9] {
    color: var(--muted);
    font-size: 15px;
}

.form-error[b-jrhy2t1wo9] {
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
}

.catalog-item.already-added[b-jrhy2t1wo9] {
    border-color: #b7d8bc;
    background: #f8faf8;
}

.catalog-item.already-added .catalog-product strong[b-jrhy2t1wo9] {
    color: #667085;
}

.already-text[b-jrhy2t1wo9] {
    color: #b54708 !important;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 1000px) {
    .catalog-filters[b-jrhy2t1wo9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .page-head[b-jrhy2t1wo9],
    .catalog-item[b-jrhy2t1wo9],
    .submit-card[b-jrhy2t1wo9] {
        flex-direction: column;
        align-items: stretch;
    }

    .catalog-filters[b-jrhy2t1wo9],
    .form-grid[b-jrhy2t1wo9] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-jrhy2t1wo9] {
        grid-column: auto;
    }

    .catalog-actions[b-jrhy2t1wo9],
    .change-button[b-jrhy2t1wo9],
    .select-button[b-jrhy2t1wo9],
    .submit-button[b-jrhy2t1wo9] {
        width: 100%;
    }
}

.availability-description[b-jrhy2t1wo9] {
    margin: 8px 0 22px;
    color: #667085;
    font-size: 15px;
    line-height: 1.9;
}

.availability-options[b-jrhy2t1wo9] {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.availability-button[b-jrhy2t1wo9] {
    min-height: 64px;
    padding: 12px 20px;
    border: 2px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.availability-button:hover[b-jrhy2t1wo9] {
    transform: translateY(-1px);
}

.availability-icon[b-jrhy2t1wo9] {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #f2f4f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
}

.availability-button.available:hover[b-jrhy2t1wo9] {
    border-color: #3a7d44;
    color: #276532;
}

.availability-button.available.selected[b-jrhy2t1wo9] {
    border-color: #3a7d44;
    background: #3a7d44;
    color: #fff;
    box-shadow: 0 10px 24px rgba(58, 125, 68, .2);
}

.availability-button.unavailable:hover[b-jrhy2t1wo9] {
    border-color: #d92d20;
    color: #b42318;
}

.availability-button.unavailable.selected[b-jrhy2t1wo9] {
    border-color: #d92d20;
    background: #d92d20;
    color: #fff;
    box-shadow: 0 10px 24px rgba(217, 45, 32, .18);
}

.availability-button.selected .availability-icon[b-jrhy2t1wo9] {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.availability-button:focus-visible[b-jrhy2t1wo9] {
    outline: 3px solid rgba(47, 128, 237, .2);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .availability-options[b-jrhy2t1wo9] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Products/EditShopProduct.razor.rz.scp.css */
.edit-shop-product-page[b-l046ct5lto] {
    width: 100%;
}

.page-head[b-l046ct5lto] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-l046ct5lto] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-l046ct5lto] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-l046ct5lto] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.back-button[b-l046ct5lto] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
}

.back-button:hover[b-l046ct5lto] {
    border-color: var(--green);
    color: var(--green);
}

.form-grid[b-l046ct5lto] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-card[b-l046ct5lto] {
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.form-card.full[b-l046ct5lto] {
    grid-column: 1 / -1;
}

.form-card h3[b-l046ct5lto] {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.loading-card[b-l046ct5lto] {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.product-card[b-l046ct5lto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.product-card > div[b-l046ct5lto] {
    min-width: 0;
}

.product-card > div > span[b-l046ct5lto] {
    display: block;
    margin-bottom: 5px;
    color: var(--green);
    font-size: 16px;
    font-weight: 800;
}

.product-card h3[b-l046ct5lto] {
    margin: 0;
    font-size: 18px;
}

.product-card p[b-l046ct5lto] {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 17px;
}

.status-badge[b-l046ct5lto] {
    min-height: 29px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f2f4f7;
    color: #667085;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.field-group[b-l046ct5lto] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-group label[b-l046ct5lto] {
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-l046ct5lto] {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 18px;
    outline: none;
    box-sizing: border-box;
}

.field-group input:focus[b-l046ct5lto] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .07);
}

.field-help[b-l046ct5lto] {
    color: var(--muted);
    font-size: 16px;
}

.submit-card[b-l046ct5lto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-card > div[b-l046ct5lto] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.submit-card strong[b-l046ct5lto] {
    color: var(--text);
    font-size: 18px;
}

.submit-card span[b-l046ct5lto] {
    color: var(--muted);
    font-size: 16px;
}

.submit-button[b-l046ct5lto] {
    min-height: 46px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--green);
    color: #fff;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
}

.submit-button:disabled[b-l046ct5lto] {
    opacity: .55;
    cursor: not-allowed;
}

.form-error[b-l046ct5lto] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 17px;
}

@media (max-width: 700px) {
    .page-head[b-l046ct5lto],
    .product-card[b-l046ct5lto],
    .submit-card[b-l046ct5lto] {
        flex-direction: column;
        align-items: stretch;
    }

    .form-grid[b-l046ct5lto] {
        grid-template-columns: 1fr;
    }

    .form-card.full[b-l046ct5lto] {
        grid-column: auto;
    }

    .back-button[b-l046ct5lto],
    .submit-button[b-l046ct5lto] {
        width: 100%;
        box-sizing: border-box;
    }
}

.availability-description[b-l046ct5lto] {
    margin: 8px 0 22px;
    color: #667085;
    font-size: 18px;
    line-height: 1.9;
}

.availability-options[b-l046ct5lto] {
    width: min(100%, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.availability-button[b-l046ct5lto] {
    min-height: 64px;
    padding: 12px 20px;
    border: 2px solid #e4e7ec;
    border-radius: 16px;
    background: #fff;
    color: #475467;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}

.availability-button:hover[b-l046ct5lto] {
    transform: translateY(-1px);
}

.availability-icon[b-l046ct5lto] {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #f2f4f7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
}

.availability-button.available:hover[b-l046ct5lto] {
    border-color: #3a7d44;
    color: #276532;
}

.availability-button.available.selected[b-l046ct5lto] {
    border-color: #3a7d44;
    background: #3a7d44;
    color: #fff;
    box-shadow: 0 10px 24px rgba(58, 125, 68, .2);
}

.availability-button.unavailable:hover[b-l046ct5lto] {
    border-color: #d92d20;
    color: #b42318;
}

.availability-button.unavailable.selected[b-l046ct5lto] {
    border-color: #d92d20;
    background: #d92d20;
    color: #fff;
    box-shadow: 0 10px 24px rgba(217, 45, 32, .18);
}

.availability-button.selected .availability-icon[b-l046ct5lto] {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.availability-button:focus-visible[b-l046ct5lto] {
    outline: 3px solid rgba(47, 128, 237, .2);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    .availability-options[b-l046ct5lto] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Products/ShopProductDetails.razor.rz.scp.css */
.shop-product-details-page[b-o4a75sj3tz] {
    width: 100%;
}

.page-head[b-o4a75sj3tz] {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head > div:first-child > span[b-o4a75sj3tz] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-o4a75sj3tz] {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 900;
}

.page-head p[b-o4a75sj3tz] {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-o4a75sj3tz] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.primary-button[b-o4a75sj3tz],
.back-button[b-o4a75sj3tz] {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.primary-button[b-o4a75sj3tz] {
    border: 1px solid var(--green);
    background: var(--green);
    color: #fff;
}

.primary-button:hover[b-o4a75sj3tz] {
    color: #fff;
    filter: brightness(.96);
}

.back-button[b-o4a75sj3tz] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.back-button:hover[b-o4a75sj3tz] {
    border-color: var(--green);
    color: var(--green);
}

.details-grid[b-o4a75sj3tz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.details-card[b-o4a75sj3tz] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
}

.details-card.full[b-o4a75sj3tz] {
    grid-column: 1 / -1;
}

.details-card h3[b-o4a75sj3tz] {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.loading-card[b-o4a75sj3tz] {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.form-error[b-o4a75sj3tz] {
    padding: 14px 16px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 18px;
}

.product-card[b-o4a75sj3tz] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.product-image[b-o4a75sj3tz] {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 22px;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.product-image img[b-o4a75sj3tz] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.product-info[b-o4a75sj3tz] {
    min-width: 0;
    flex: 1;
}

.product-type-label[b-o4a75sj3tz] {
    display: block;
    margin-bottom: 5px;
    color: var(--green);
    font-size: 17px;
    font-weight: 800;
}

.product-info h2[b-o4a75sj3tz] {
    margin: 0;
    color: var(--text);
    font-size: 24px;
    font-weight: 900;
}

.secondary-name[b-o4a75sj3tz],
.brand-name[b-o4a75sj3tz] {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 18px;
}

.product-meta[b-o4a75sj3tz] {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.product-meta span[b-o4a75sj3tz] {
    color: var(--muted);
    font-size: 18px;
}

.product-meta strong[b-o4a75sj3tz] {
    color: var(--text);
}

.product-statuses[b-o4a75sj3tz] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.status-badge[b-o4a75sj3tz] {
    min-height: 30px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-o4a75sj3tz] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-o4a75sj3tz] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-o4a75sj3tz] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.info[b-o4a75sj3tz] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-o4a75sj3tz] {
    background: #f2f4f7;
    color: #667085;
}

.details-list[b-o4a75sj3tz] {
    display: flex;
    flex-direction: column;
}

.detail-row[b-o4a75sj3tz] {
    min-height: 58px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #f1f2f4;
}

.detail-row:last-child[b-o4a75sj3tz] {
    border-bottom: 0;
}

.detail-row > span:first-child[b-o4a75sj3tz] {
    color: var(--muted);
    font-size: 18px;
}

.detail-row strong[b-o4a75sj3tz] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    text-align: left;
}

.price-value[b-o4a75sj3tz] {
    color: var(--green) !important;
}

.product-info-grid[b-o4a75sj3tz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.product-info-item[b-o4a75sj3tz] {
    min-width: 0;
    min-height: 82px;
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.product-info-item > span:first-child[b-o4a75sj3tz] {
    color: var(--muted);
    font-size: 17px;
}

.product-info-item strong[b-o4a75sj3tz] {
    color: var(--text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.8;
}

.ltr-value[b-o4a75sj3tz] {
    direction: ltr;
    text-align: right;
}

.section-title-row[b-o4a75sj3tz] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.section-title-row h3[b-o4a75sj3tz] {
    margin: 0;
}

.section-title-row > span[b-o4a75sj3tz] {
    color: var(--muted);
    font-size: 17px;
}

.description-grid[b-o4a75sj3tz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.description-box[b-o4a75sj3tz] {
    min-width: 0;
    min-height: 150px;
    padding: 17px;
    border: 1px solid var(--soft);
    border-radius: 12px;
    background: #fbfcfd;
}

.description-box strong[b-o4a75sj3tz] {
    display: block;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

.description-box p[b-o4a75sj3tz] {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    line-height: 2.1;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.product-gallery[b-o4a75sj3tz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.gallery-item[b-o4a75sj3tz] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 14px;
    background: #fff;
}

.gallery-image-shell[b-o4a75sj3tz] {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f8f9;
}

.gallery-image-shell img[b-o4a75sj3tz] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.gallery-placeholder[b-o4a75sj3tz] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(58, 125, 68, .09);
    color: var(--green);
    font-size: 18px;
    font-weight: 900;
}

.gallery-meta[b-o4a75sj3tz] {
    padding: 10px 12px;
}

.gallery-meta span[b-o4a75sj3tz] {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty-details[b-o4a75sj3tz] {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--soft);
    border-radius: 12px;
    color: var(--muted);
    font-size: 18px;
}

.note-box[b-o4a75sj3tz] {
    padding: 17px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffcf5;
    color: var(--text);
    font-size: 18px;
    line-height: 2;
    white-space: pre-wrap;
}

@media (max-width: 1100px) {
    .product-info-grid[b-o4a75sj3tz],
    .product-gallery[b-o4a75sj3tz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head[b-o4a75sj3tz],
    .product-card[b-o4a75sj3tz] {
        flex-direction: column;
        align-items: flex-start;
    }

    .details-grid[b-o4a75sj3tz],
    .description-grid[b-o4a75sj3tz] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-o4a75sj3tz] {
        grid-column: auto;
    }

    .product-statuses[b-o4a75sj3tz] {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .head-actions[b-o4a75sj3tz] {
        width: 100%;
        flex-direction: column;
    }

    .primary-button[b-o4a75sj3tz],
    .back-button[b-o4a75sj3tz] {
        width: 100%;
        box-sizing: border-box;
    }

    .product-info-grid[b-o4a75sj3tz],
    .product-gallery[b-o4a75sj3tz] {
        grid-template-columns: 1fr;
    }

    .product-meta[b-o4a75sj3tz] {
        flex-direction: column;
        gap: 7px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Products/ShopProducts.razor.rz.scp.css */
.shop-products-page[b-o3x8x31a3g] {
    width: 100%;
}

.create-product-button[b-o3x8x31a3g] {
    min-height: 58px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 14px;
    background: var(--green);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: .2s;
}

.create-product-button span[b-o3x8x31a3g] {
    font-size: 20px;
}

.create-product-button:hover[b-o3x8x31a3g] {
    color: #fff;
    filter: brightness(.96);
}

.product-cell[b-o3x8x31a3g] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.product-cell > div:last-child[b-o3x8x31a3g] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.product-cell strong[b-o3x8x31a3g] {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

.product-cell span[b-o3x8x31a3g],
.product-cell small[b-o3x8x31a3g] {
    color: var(--muted);
    font-size: 15px;
}

.status-badge[b-o3x8x31a3g] {
    min-height: 27px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge + .status-badge[b-o3x8x31a3g] {
    margin-inline-start: 6px;
}

.status-badge.success[b-o3x8x31a3g] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-o3x8x31a3g] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-o3x8x31a3g] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-o3x8x31a3g] {
    background: #f2f4f7;
    color: #667085;
}

.status-badge.info[b-o3x8x31a3g] {
    background: #eff8ff;
    color: #175cd3;
}

.row-actions[b-o3x8x31a3g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.action-link[b-o3x8x31a3g] {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.action-link:hover[b-o3x8x31a3g] {
    border-color: var(--green);
    color: var(--green);
}

.warning-action[b-o3x8x31a3g] {
    border-color: #fedf89;
    background: #fffcf5;
    color: #b54708;
}

.warning-action:hover[b-o3x8x31a3g] {
    border-color: #b54708;
    color: #b54708;
}

@media (max-width: 700px) {
    .row-actions[b-o3x8x31a3g] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-link[b-o3x8x31a3g] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Profile/ShopProfile.razor.rz.scp.css */
.shop-profile-page[b-cwfl9b5n7d] {
    width: 100%;
}


/* =========================
   Header
========================= */

.profile-head[b-cwfl9b5n7d] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.profile-head > div:first-child > span[b-cwfl9b5n7d] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 13px;
    font-weight: 800;
}

.profile-head h1[b-cwfl9b5n7d] {
    margin: 0;

    color: var(--text);

    font-size: 30px;
    font-weight: 900;
}

.profile-head p[b-cwfl9b5n7d] {
    margin: 9px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}


/* =========================
   Status header
========================= */

.profile-status-card[b-cwfl9b5n7d] {
    min-width: 150px;

    padding: 14px 17px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
}

.profile-status-card span[b-cwfl9b5n7d] {
    color: var(--muted);

    font-size: 10px;
}

.profile-status-card strong[b-cwfl9b5n7d] {
    font-size: 14px;
    font-weight: 900;
}

.profile-status-card strong.active[b-cwfl9b5n7d] {
    color: #027a48;
}

.profile-status-card strong.inactive[b-cwfl9b5n7d] {
    color: #b42318;
}


/* =========================
   Note
========================= */

.profile-info-note[b-cwfl9b5n7d] {
    margin-bottom: 18px;
    padding: 14px 16px;

    border: 1px solid #d1e9ff;
    border-radius: 12px;

    background: #eff8ff;
    color: #175cd3;

    font-size: 11px;
    line-height: 1.9;
}


/* =========================
   Error / loading
========================= */

.form-error[b-cwfl9b5n7d] {
    padding: 15px 16px;

    border: 1px solid #fecdca;
    border-radius: 12px;

    background: #fff1f1;
    color: #b42318;

    font-size: 12px;
    font-weight: 700;
}

.loading-card[b-cwfl9b5n7d],
.empty-card[b-cwfl9b5n7d] {
    min-height: 150px;

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

.empty-card[b-cwfl9b5n7d] {
    flex-direction: column;

    gap: 6px;
}

.empty-card strong[b-cwfl9b5n7d] {
    color: var(--text);

    font-size: 13px;
}

.empty-card span[b-cwfl9b5n7d] {
    color: var(--muted);

    font-size: 11px;
}


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

.profile-grid[b-cwfl9b5n7d] {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.profile-card[b-cwfl9b5n7d] {
    padding: 21px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.profile-card.full[b-cwfl9b5n7d] {
    grid-column: 1 / -1;
}

.profile-card h3[b-cwfl9b5n7d] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}


/* =========================
   Identity
========================= */

.identity-card[b-cwfl9b5n7d] {
    display: flex;
    align-items: center;

    gap: 18px;
}

.shop-avatar[b-cwfl9b5n7d] {
    width: 86px;
    height: 86px;

    flex: 0 0 86px;

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

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}

.shop-avatar img[b-cwfl9b5n7d] {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}

.identity-info[b-cwfl9b5n7d] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.identity-info h2[b-cwfl9b5n7d] {
    margin: 0;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.identity-info > span[b-cwfl9b5n7d] {
    color: var(--muted);

    font-size: 11px;
}

.identity-badges[b-cwfl9b5n7d] {
    margin-top: 6px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.identity-meta[b-cwfl9b5n7d] {
    margin-right: auto;

    min-width: 115px;

    padding: 12px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;
}

.identity-meta span[b-cwfl9b5n7d] {
    color: var(--muted);

    font-size: 9px;
}

.identity-meta strong[b-cwfl9b5n7d] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-cwfl9b5n7d] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-cwfl9b5n7d] {
    min-height: 48px;

    padding: 10px 0;

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

    gap: 15px;

    border-bottom: 1px solid #f1f2f4;
}

.detail-item:last-child[b-cwfl9b5n7d] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-cwfl9b5n7d] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-cwfl9b5n7d] {
    color: var(--text);

    font-size: 11px;
    font-weight: 800;
}

.ltr-value[b-cwfl9b5n7d] {
    direction: ltr;
    unicode-bidi: plaintext;
}


/* =========================
   Status
========================= */

.status-badge[b-cwfl9b5n7d] {
    min-height: 28px;
    padding: 0 10px;

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

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-cwfl9b5n7d] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-cwfl9b5n7d] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.info[b-cwfl9b5n7d] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-cwfl9b5n7d] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Address / Description
========================= */

.address-box[b-cwfl9b5n7d],
.description-box[b-cwfl9b5n7d] {
    min-height: 80px;

    padding: 15px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fafbfc;

    color: var(--text);

    font-size: 12px;
    line-height: 2;
}

.empty-value[b-cwfl9b5n7d] {
    color: var(--muted);
}


/* =========================
   Actions
========================= */

.action-list[b-cwfl9b5n7d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.action-button[b-cwfl9b5n7d] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.action-button:hover[b-cwfl9b5n7d] {
    border-color: var(--green);
    color: var(--green);
}

.action-button.primary-action[b-cwfl9b5n7d] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.action-button.primary-action:hover[b-cwfl9b5n7d] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {
    .profile-grid[b-cwfl9b5n7d] {
        grid-template-columns: 1fr;
    }

    .profile-card.full[b-cwfl9b5n7d] {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .profile-head[b-cwfl9b5n7d] {
        flex-direction: column;
    }

    .profile-status-card[b-cwfl9b5n7d] {
        width: 100%;
        box-sizing: border-box;
    }

    .identity-card[b-cwfl9b5n7d] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .identity-meta[b-cwfl9b5n7d] {
        width: 100%;

        margin-right: 0;
    }
}

@media (max-width: 520px) {
    .identity-card[b-cwfl9b5n7d] {
        flex-direction: column;
    }

    .detail-item[b-cwfl9b5n7d] {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }

    .action-list[b-cwfl9b5n7d] {
        flex-direction: column;
        align-items: stretch;
    }

    .action-button[b-cwfl9b5n7d] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Tickets/CreateShopTicket.razor.rz.scp.css */
.create-shop-ticket-page[b-7iksis95k5] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-7iksis95k5] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-7iksis95k5] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-7iksis95k5] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-7iksis95k5] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-7iksis95k5] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-7iksis95k5] {
    border-color: var(--green);
    color: var(--green);
}


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

.ticket-form-card[b-7iksis95k5] {
    padding: 22px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 18px;
}

.form-section[b-7iksis95k5] {
    padding-bottom: 22px;
    margin-bottom: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.form-section:last-of-type[b-7iksis95k5] {
    margin-bottom: 0;
}

.form-section h3[b-7iksis95k5] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}


/* =========================
   Fields
========================= */

.fields-grid[b-7iksis95k5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-7iksis95k5] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-7iksis95k5] {
    grid-column: 1 / -1;
}

.field-group label[b-7iksis95k5] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.field-group input[b-7iksis95k5],
.field-group select[b-7iksis95k5],
.field-group textarea[b-7iksis95k5] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;

    outline: none;
}

.field-group input[b-7iksis95k5],
.field-group select[b-7iksis95k5] {
    min-height: 44px;

    padding: 0 12px;
}

.field-group textarea[b-7iksis95k5] {
    padding: 12px 14px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-7iksis95k5],
.field-group select:focus[b-7iksis95k5],
.field-group textarea:focus[b-7iksis95k5] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Attachment
========================= */

.attachment-placeholder[b-7iksis95k5] {
    min-height: 100px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 14px;

    border: 1px dashed var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.attachment-icon[b-7iksis95k5] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 21px;
    font-weight: 700;
}

.attachment-placeholder > div:nth-child(2)[b-7iksis95k5] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.attachment-placeholder strong[b-7iksis95k5] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.attachment-placeholder span[b-7iksis95k5] {
    color: var(--muted);

    font-size: 10px;
}

.secondary-button[b-7iksis95k5] {
    min-height: 38px;
    padding: 0 14px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.secondary-button:hover[b-7iksis95k5] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Note
========================= */

.ticket-note[b-7iksis95k5] {
    margin-top: 20px;
    padding: 14px 16px;

    border-radius: 12px;

    background: #fbfcfd;
    border: 1px solid var(--soft);

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}


/* =========================
   Submit
========================= */

.submit-row[b-7iksis95k5] {
    margin-top: 20px;

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

    gap: 8px;
}

.cancel-button[b-7iksis95k5],
.submit-button[b-7iksis95k5] {
    min-height: 42px;
    padding: 0 17px;

    border-radius: 10px;

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

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
}

.cancel-button[b-7iksis95k5] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);

    text-decoration: none;
}

.cancel-button:hover[b-7iksis95k5] {
    border-color: var(--green);
    color: var(--green);
}

.submit-button[b-7iksis95k5] {
    border: 0;

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.submit-button:disabled[b-7iksis95k5] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

    .page-head[b-7iksis95k5] {
        flex-direction: column;
    }

    .back-button[b-7iksis95k5] {
        width: 100%;
    }

    .fields-grid[b-7iksis95k5] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-7iksis95k5] {
        grid-column: auto;
    }

    .attachment-placeholder[b-7iksis95k5] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-button[b-7iksis95k5] {
        width: 100%;
    }

    .submit-row[b-7iksis95k5] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .cancel-button[b-7iksis95k5],
    .submit-button[b-7iksis95k5] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Tickets/ShopTicketDetails.razor.rz.scp.css */
.shop-ticket-details-page[b-g1byb8881e] {
    width: 100%;
}


/* =========================
   Header
========================= */

.ticket-head[b-g1byb8881e] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.ticket-head > div:first-child > span[b-g1byb8881e] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.ticket-head h1[b-g1byb8881e] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.ticket-head p[b-g1byb8881e] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-g1byb8881e] {
    min-height: 42px;
    padding: 0 15px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

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

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-g1byb8881e] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Summary
========================= */

.ticket-summary[b-g1byb8881e] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.summary-main[b-g1byb8881e] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-g1byb8881e] {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.summary-main > div:last-child[b-g1byb8881e] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.summary-main strong[b-g1byb8881e] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.summary-main span[b-g1byb8881e] {
    color: var(--muted);

    font-size: 11px;
}

.summary-badges[b-g1byb8881e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-g1byb8881e] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    gap: 18px;
}

.conversation-card[b-g1byb8881e],
.details-card[b-g1byb8881e] {
    padding: 22px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.conversation-card h2[b-g1byb8881e],
.details-card h3[b-g1byb8881e] {
    margin: 0 0 18px;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.ticket-side[b-g1byb8881e] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Messages
========================= */

.messages-list[b-g1byb8881e] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.message-item[b-g1byb8881e] {
    padding: 14px 16px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fbfcfd;
}

.message-head[b-g1byb8881e] {
    margin-bottom: 8px;

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

    gap: 12px;
}

.message-head strong[b-g1byb8881e] {
    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.message-head span[b-g1byb8881e] {
    color: var(--muted);

    font-size: 10px;
}

.message-item p[b-g1byb8881e] {
    margin: 0;

    color: var(--text);

    font-size: 13px;
    line-height: 2;
}

.shop-message[b-g1byb8881e] {
    background: rgba(58, 125, 68, .035);
}

.admin-message[b-g1byb8881e] {
    background: #fbfcfd;
}


/* =========================
   Reply
========================= */

.reply-box[b-g1byb8881e] {
    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid var(--soft);

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.reply-box label[b-g1byb8881e] {
    color: var(--text);

    font-size: 12px;
    font-weight: 800;
}

.reply-box textarea[b-g1byb8881e] {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.reply-box textarea:focus[b-g1byb8881e] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.reply-actions[b-g1byb8881e] {
    display: flex;
    justify-content: flex-end;
}

.send-button[b-g1byb8881e] {
    min-height: 40px;
    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.send-button:disabled[b-g1byb8881e] {
    opacity: .55;

    cursor: not-allowed;
}


/* =========================
   Details
========================= */

.details-list[b-g1byb8881e] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-g1byb8881e] {
    min-height: 54px;

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

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-g1byb8881e] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-g1byb8881e] {
    color: var(--muted);

    font-size: 11px;
}

.detail-item strong[b-g1byb8881e] {
    color: var(--text);

    font-size: 12px;
}

.ticket-subject[b-g1byb8881e] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--text);

    font-size: 13px;
}


/* =========================
   Status
========================= */

.status-badge[b-g1byb8881e] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-g1byb8881e] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-g1byb8881e] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-g1byb8881e] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-g1byb8881e] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .ticket-layout[b-g1byb8881e] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .ticket-head[b-g1byb8881e] {
        flex-direction: column;
    }

    .ticket-summary[b-g1byb8881e] {
        align-items: flex-start;
        flex-direction: column;
    }

    .back-button[b-g1byb8881e],
    .send-button[b-g1byb8881e] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Shop/Pages/Tickets/ShopTickets.razor.rz.scp.css */
.shop-tickets-page[b-jmuf5npbsb] {
    width: 100%;
}

.create-ticket-button[b-jmuf5npbsb] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition: .2s;
}

.create-ticket-button span[b-jmuf5npbsb] {
    font-size: 20px;
    line-height: 1;
}

.create-ticket-button:hover[b-jmuf5npbsb] {
    color: #fff;
    filter: brightness(.96);
}

.ticket-cell[b-jmuf5npbsb] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.ticket-avatar[b-jmuf5npbsb] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 12px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-jmuf5npbsb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-cell strong[b-jmuf5npbsb] {
    font-size: 13px;
}

.ticket-cell span[b-jmuf5npbsb] {
    color: var(--muted);
    font-size: 10px;
}

.status-badge[b-jmuf5npbsb] {
    display: inline-flex;
    align-items: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-jmuf5npbsb] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.danger[b-jmuf5npbsb] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.warning[b-jmuf5npbsb] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-jmuf5npbsb] {
    background: #f2f4f7;
    color: #667085;
}

.row-actions[b-jmuf5npbsb] {
    display: flex;
    align-items: center;
    gap: 6px;

    white-space: nowrap;
}

.action-link[b-jmuf5npbsb] {
    min-height: 32px;
    padding: 0 9px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

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

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    cursor: pointer;
}

.action-link:hover[b-jmuf5npbsb] {
    border-color: var(--green);
    color: var(--green);
}

@media (max-width: 700px) {

    .create-ticket-button[b-jmuf5npbsb] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreBenefitsSection.razor.rz.scp.css */
.pharmacy-benefits[b-vwlfp0cnje] {
    position: relative;

    padding: 88px 0 96px;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #f4f7fa 0%,
            #f8fafb 48%,
            #f1f7f3 100%);
}


.pharmacy-benefits[b-vwlfp0cnje]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(58, 125, 68, .065) 0 3px,
            transparent 4px),
        radial-gradient(
            circle,
            rgba(36, 89, 166, .06) 0 3px,
            transparent 4px);

    background-position:
        0 0,
        65px 65px;

    background-size:
        130px 130px;

    opacity: .4;
}


.benefits-shape[b-vwlfp0cnje] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-vwlfp0cnje] {
    width: 350px;
    height: 350px;

    top: -230px;
    right: -110px;

    background:
        rgba(58, 125, 68, .06);
}


.shape-two[b-vwlfp0cnje] {
    width: 310px;
    height: 310px;

    bottom: -210px;
    left: -90px;

    background:
        rgba(36, 89, 166, .055);
}


.benefits-container[b-vwlfp0cnje] {
    position: relative;
    z-index: 2;
}


.benefits-heading[b-vwlfp0cnje] {
    max-width: 820px;

    margin: 0 auto 48px;

    text-align: center;
}


.benefits-heading > span[b-vwlfp0cnje] {
    display: block;

    margin-bottom: 10px;

    color: #2459a6;

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.benefits-heading h2[b-vwlfp0cnje] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(32px, 3.7vw, 43px);

    font-weight: 900;
    line-height: 1.55;
}


.benefits-heading p[b-vwlfp0cnje] {
    max-width: 780px;

    margin: 14px auto 0;

    color: #536071;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.1;
}


.benefits-grid[b-vwlfp0cnje] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.benefit-item[b-vwlfp0cnje] {
    position: relative;

    min-width: 0;
    min-height: 235px;
    padding: 34px 27px 30px;

    overflow: hidden;

    border:
        1px solid rgba(31, 41, 55, .09);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(249, 252, 250, .92));

    box-shadow:
        0 14px 36px rgba(31, 41, 55, .055);

    text-align: right;

    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}


.benefit-item:nth-child(even)[b-vwlfp0cnje] {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .96),
            rgba(247, 250, 254, .93));
}


.benefit-item[b-vwlfp0cnje]::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    bottom: -88px;
    left: -73px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .055);

    transition:
        transform .3s ease;
}


.benefit-item:nth-child(even)[b-vwlfp0cnje]::after {
    background:
        rgba(36, 89, 166, .055);
}


.benefit-item:hover[b-vwlfp0cnje] {
    transform: translateY(-5px);

    border-color:
        rgba(58, 125, 68, .23);

    box-shadow:
        0 20px 43px rgba(31, 41, 55, .085);
}


.benefit-item:nth-child(even):hover[b-vwlfp0cnje] {
    border-color:
        rgba(36, 89, 166, .22);
}


.benefit-item:hover[b-vwlfp0cnje]::after {
    transform: scale(1.2);
}


.benefit-number[b-vwlfp0cnje] {
    position: absolute;

    top: 20px;
    left: 23px;

    color:
        rgba(58, 125, 68, .11);

    font-family:
        Arial,
        sans-serif;

    font-size: 47px;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;

    transition:
        color .24s ease,
        transform .24s ease;
}


.benefit-item:nth-child(even)
.benefit-number[b-vwlfp0cnje] {
    color:
        rgba(36, 89, 166, .11);
}


.benefit-item:hover
.benefit-number[b-vwlfp0cnje] {
    color:
        rgba(58, 125, 68, .17);

    transform: translateY(-2px);
}


.benefit-item:nth-child(even):hover
.benefit-number[b-vwlfp0cnje] {
    color:
        rgba(36, 89, 166, .17);
}


.benefit-accent[b-vwlfp0cnje] {
    width: 48px;
    height: 4px;

    margin-bottom: 27px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            rgba(58, 125, 68, .25));
}


.benefit-item:nth-child(even)
.benefit-accent[b-vwlfp0cnje] {
    background:
        linear-gradient(
            90deg,
            #2459a6,
            rgba(36, 89, 166, .25));
}


.benefit-item h3[b-vwlfp0cnje] {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--text);

    font-size: 22px;
    font-weight: 900;
    line-height: 1.7;
}


.benefit-item p[b-vwlfp0cnje] {
    position: relative;
    z-index: 2;

    margin: 13px 0 0;

    color: #526071;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.05;
}


@media (max-width: 1100px) {

    .benefits-grid[b-vwlfp0cnje] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 680px) {

    .pharmacy-benefits[b-vwlfp0cnje] {
        padding: 70px 0 76px;
    }


    .benefits-heading[b-vwlfp0cnje] {
        margin-bottom: 34px;
    }


    .benefits-heading > span[b-vwlfp0cnje] {
        font-size: 15px;
    }


    .benefits-heading h2[b-vwlfp0cnje] {
        font-size: 29px;
        line-height: 1.65;
    }


    .benefits-heading p[b-vwlfp0cnje] {
        margin-top: 11px;

        font-size: 16px;
        line-height: 2.05;
    }


    .benefits-grid[b-vwlfp0cnje] {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .benefit-item[b-vwlfp0cnje] {
        min-height: 210px;
        padding: 29px 24px 25px;

        border-radius: 21px;
    }


    .benefit-number[b-vwlfp0cnje] {
        top: 18px;
        left: 20px;

        font-size: 41px;
    }


    .benefit-accent[b-vwlfp0cnje] {
        width: 43px;

        margin-bottom: 23px;
    }


    .benefit-item h3[b-vwlfp0cnje] {
        font-size: 20px;
    }


    .benefit-item p[b-vwlfp0cnje] {
        margin-top: 10px;

        font-size: 15px;
        line-height: 2;
    }
}


@media (hover: none) {

    .benefit-item:hover[b-vwlfp0cnje] {
        transform: none;
    }


    .benefit-item:hover
    .benefit-number[b-vwlfp0cnje] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .benefit-item[b-vwlfp0cnje],
    .benefit-item[b-vwlfp0cnje]::after,
    .benefit-number[b-vwlfp0cnje] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreCtaSection.razor.rz.scp.css */
.home-cta[b-o30hwqbbsq] {
    position: relative;

    min-height: 620px;
    padding: 100px 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #285da8 0%,
            #2f7187 47%,
            #347d46 100%);

    background-size: 180% 180%;

    color: #fff;

    animation:
        cta-gradient-motion-b-o30hwqbbsq 18s
        ease-in-out infinite;
}


.home-cta[b-o30hwqbbsq]::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            115deg,
            rgba(31, 80, 154, .16),
            rgba(58, 125, 68, .08)),
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, .055),
            transparent 48%);

    pointer-events: none;

    animation:
        cta-overlay-breathe-b-o30hwqbbsq 9s
        ease-in-out infinite;
}


.home-cta[b-o30hwqbbsq]::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);

    background-size:
        54px 54px;

    mask-image:
        radial-gradient(
            circle at center,
            rgba(0, 0, 0, .48),
            transparent 72%);

    opacity: .45;
}


.home-cta .container[b-o30hwqbbsq] {
    position: relative;
    z-index: 4;

    width: 100%;
}


.cta-shape[b-o30hwqbbsq] {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.shape-top[b-o30hwqbbsq] {
    width: 500px;
    height: 500px;

    top: -275px;
    right: -125px;

    background:
        rgba(255, 255, 255, .085);

    animation:
        cta-shape-top-b-o30hwqbbsq 12s
        ease-in-out infinite;
}


.shape-bottom[b-o30hwqbbsq] {
    width: 540px;
    height: 540px;

    bottom: -345px;
    left: -115px;

    background:
        rgba(255, 255, 255, .075);

    animation:
        cta-shape-bottom-b-o30hwqbbsq 14s
        ease-in-out infinite;
}


.cta-light[b-o30hwqbbsq] {
    position: absolute;
    z-index: 2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(4px);

    will-change:
        transform,
        opacity;
}


.light-one[b-o30hwqbbsq] {
    width: 280px;
    height: 280px;

    top: 6%;
    left: 18%;

    background:
        radial-gradient(
            circle,
            rgba(100, 174, 220, .14),
            transparent 68%);

    animation:
        cta-light-one-b-o30hwqbbsq 10s
        ease-in-out infinite;
}


.light-two[b-o30hwqbbsq] {
    width: 300px;
    height: 300px;

    right: 15%;
    bottom: 3%;

    background:
        radial-gradient(
            circle,
            rgba(126, 192, 135, .13),
            transparent 68%);

    animation:
        cta-light-two-b-o30hwqbbsq 11s
        ease-in-out infinite;
}


.cta-content[b-o30hwqbbsq] {
    position: relative;

    max-width: 1080px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    direction: rtl;

    text-align: center;
}


.cta-badge[b-o30hwqbbsq] {
    min-height: 47px;
    padding: 0 22px;

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

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .11);

    color: #fff;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 10px 30px rgba(15, 44, 69, .08);

    backdrop-filter: blur(8px);

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.cta-badge:hover[b-o30hwqbbsq] {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, .38);

    background:
        rgba(255, 255, 255, .16);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 13px 32px rgba(15, 44, 69, .12);
}


.cta-content h2[b-o30hwqbbsq] {
    max-width: 1060px;

    margin: 32px auto 0;

    color: #fff;

    font-size:
        clamp(40px, 5vw, 64px);

    font-weight: 900;
    line-height: 1.65;

    letter-spacing: -.8px;

    text-shadow:
        0 5px 22px rgba(19, 50, 70, .12);

    text-wrap: balance;
}


.cta-content p[b-o30hwqbbsq] {
    max-width: 800px;

    margin: 30px auto 0;

    color:
        rgba(255, 255, 255, .94);

    font-size:
        clamp(16px, 1.55vw, 20px);

    font-weight: 600;
    line-height: 2.2;

    text-wrap: balance;
}


.cta-actions[b-o30hwqbbsq] {
    margin-top: 47px;

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

    gap: 18px;
}


.cta-button[b-o30hwqbbsq] {
    min-width: 270px;
    min-height: 66px;
    padding: 0 27px;

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

    gap: 10px;

    border:
        1px solid transparent;

    border-radius: 15px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;

    text-decoration: none;

    box-shadow:
        0 14px 34px rgba(14, 39, 61, .12);

    transition:
        transform .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        color .28s ease,
        box-shadow .28s ease;
}


.cta-button svg[b-o30hwqbbsq] {
    width: 23px;
    height: 23px;

    flex: 0 0 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform .28s ease;
}


.cta-button.primary[b-o30hwqbbsq] {
    border-color:
        rgba(255, 255, 255, .9);

    background: #fff;
    color: #2459a6;
}


.cta-button.primary:hover[b-o30hwqbbsq] {
    transform: translateY(-4px);

    background: #f8fbff;

    box-shadow:
        0 19px 40px rgba(14, 39, 61, .2);
}


.cta-button.primary:hover svg[b-o30hwqbbsq] {
    transform:
        translateY(-1px)
        rotate(-4deg);
}


.cta-button.secondary[b-o30hwqbbsq] {
    border-color:
        rgba(255, 255, 255, .34);

    background:
        rgba(255, 255, 255, .06);

    color: #fff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 14px 34px rgba(14, 39, 61, .09);

    backdrop-filter: blur(8px);
}


.cta-button.secondary:hover[b-o30hwqbbsq] {
    transform: translateY(-4px);

    border-color:
        rgba(255, 255, 255, .58);

    background:
        rgba(255, 255, 255, .13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .13),
        0 19px 40px rgba(14, 39, 61, .15);
}


.cta-button.secondary:hover svg[b-o30hwqbbsq] {
    transform:
        translateX(-2px)
        rotate(-3deg);
}


.cta-button:active[b-o30hwqbbsq] {
    transform:
        translateY(-1px)
        scale(.985);
}


.cta-button:focus-visible[b-o30hwqbbsq] {
    outline:
        4px solid rgba(255, 255, 255, .25);

    outline-offset: 4px;
}


@keyframes cta-gradient-motion-b-o30hwqbbsq {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


@keyframes cta-overlay-breathe-b-o30hwqbbsq {

    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: 1;
    }
}


@keyframes cta-shape-top-b-o30hwqbbsq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .78;
    }

    50% {
        transform:
            translate3d(-18px, 17px, 0)
            scale(1.06);

        opacity: 1;
    }
}


@keyframes cta-shape-bottom-b-o30hwqbbsq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);

        opacity: .72;
    }

    50% {
        transform:
            translate3d(20px, -16px, 0)
            scale(1.055);

        opacity: .92;
    }
}


@keyframes cta-light-one-b-o30hwqbbsq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.95);

        opacity: .55;
    }

    50% {
        transform:
            translate3d(24px, 14px, 0)
            scale(1.08);

        opacity: .9;
    }
}


@keyframes cta-light-two-b-o30hwqbbsq {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);

        opacity: .5;
    }

    50% {
        transform:
            translate3d(-22px, -15px, 0)
            scale(1.09);

        opacity: .88;
    }
}


@media (max-width: 1050px) {

    .home-cta[b-o30hwqbbsq] {
        min-height: 570px;
        padding: 88px 0;
    }


    .shape-top[b-o30hwqbbsq] {
        width: 420px;
        height: 420px;

        top: -235px;
        right: -130px;
    }


    .shape-bottom[b-o30hwqbbsq] {
        width: 450px;
        height: 450px;

        bottom: -290px;
        left: -125px;
    }


    .cta-content h2[b-o30hwqbbsq] {
        max-width: 850px;

        font-size:
            clamp(38px, 5.7vw, 54px);
    }
}


@media (max-width: 750px) {

    .home-cta[b-o30hwqbbsq] {
        min-height: auto;
        padding: 78px 0;
    }


    .cta-content h2[b-o30hwqbbsq] {
        margin-top: 27px;

        font-size:
            clamp(33px, 7vw, 45px);

        line-height: 1.65;
    }


    .cta-content p[b-o30hwqbbsq] {
        max-width: 600px;

        margin-top: 23px;

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


    .cta-actions[b-o30hwqbbsq] {
        width: 100%;
        max-width: 470px;

        margin-top: 37px;

        flex-direction: column;

        gap: 13px;
    }


    .cta-button[b-o30hwqbbsq] {
        width: 100%;
        min-width: 0;
    }
}


@media (max-width: 620px) {

    .home-cta[b-o30hwqbbsq] {
        padding: 68px 0 72px;
    }


    .shape-top[b-o30hwqbbsq] {
        width: 290px;
        height: 290px;

        top: -165px;
        right: -105px;
    }


    .shape-bottom[b-o30hwqbbsq] {
        width: 330px;
        height: 330px;

        bottom: -225px;
        left: -120px;
    }


    .light-one[b-o30hwqbbsq] {
        width: 190px;
        height: 190px;

        left: -30px;
    }


    .light-two[b-o30hwqbbsq] {
        width: 210px;
        height: 210px;

        right: -50px;
    }


    .cta-badge[b-o30hwqbbsq] {
        min-height: 42px;
        padding: 0 17px;

        font-size: 14px;
    }


    .cta-content h2[b-o30hwqbbsq] {
        margin-top: 23px;

        font-size: 31px;
        line-height: 1.7;

        letter-spacing: 0;
    }


    .cta-content p[b-o30hwqbbsq] {
        margin-top: 18px;

        font-size: 15px;
        line-height: 2.05;
    }


    .cta-actions[b-o30hwqbbsq] {
        margin-top: 31px;
    }


    .cta-button[b-o30hwqbbsq] {
        min-height: 59px;
        padding: 0 20px;

        border-radius: 14px;

        font-size: 16px;
    }
}


@media (max-width: 390px) {

    .home-cta[b-o30hwqbbsq] {
        padding: 62px 0 66px;
    }


    .cta-content h2[b-o30hwqbbsq] {
        font-size: 28px;
    }


    .cta-content p[b-o30hwqbbsq] {
        font-size: 14px;
    }


    .cta-button[b-o30hwqbbsq] {
        min-height: 56px;

        font-size: 15px;
    }
}


@media (hover: none) {

    .cta-badge:hover[b-o30hwqbbsq],
    .cta-button.primary:hover[b-o30hwqbbsq],
    .cta-button.secondary:hover[b-o30hwqbbsq] {
        transform: none;
    }


    .cta-button.primary:active[b-o30hwqbbsq],
    .cta-button.secondary:active[b-o30hwqbbsq] {
        transform: scale(.98);
    }
}


@media (prefers-reduced-motion: reduce) {

    .home-cta[b-o30hwqbbsq],
    .home-cta[b-o30hwqbbsq]::before,
    .cta-shape[b-o30hwqbbsq],
    .cta-light[b-o30hwqbbsq] {
        animation: none;
    }


    .cta-badge[b-o30hwqbbsq],
    .cta-button[b-o30hwqbbsq],
    .cta-button svg[b-o30hwqbbsq] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreFaqSection.razor.rz.scp.css */
.home-faq[b-ppdmh2bsdz] {
    position: relative;

    padding: 96px 0 104px;

    overflow: hidden;

    background: #fff;
}


.home-faq[b-ppdmh2bsdz]::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -245px;
    right: -145px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .045);

    pointer-events: none;
}


.home-faq[b-ppdmh2bsdz]::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -235px;
    left: -135px;

    border-radius: 50%;

    background:
        rgba(36, 89, 166, .035);

    pointer-events: none;
}


.home-faq .container[b-ppdmh2bsdz] {
    position: relative;
    z-index: 2;
}


.faq-heading[b-ppdmh2bsdz] {
    max-width: 820px;

    margin: 0 auto 58px;

    direction: rtl;

    text-align: center;
}


.faq-heading > span[b-ppdmh2bsdz] {
    display: block;

    margin-bottom: 12px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-heading h2[b-ppdmh2bsdz] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(34px, 4.4vw, 50px);

    font-weight: 900;
    line-height: 1.5;

    letter-spacing: -.5px;
}


.faq-heading p[b-ppdmh2bsdz] {
    max-width: 760px;

    margin: 20px auto 0;

    color: #7a8699;

    font-size: 17px;
    font-weight: 500;
    line-height: 2.1;

    text-wrap: balance;
}


.faq-list[b-ppdmh2bsdz] {
    width: 100%;
    max-width: 1130px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 18px;

    direction: rtl;
}


.faq-item[b-ppdmh2bsdz] {
    position: relative;

    overflow: hidden;

    border:
        1px solid #e1e6ec;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #f3f5f8,
            #f1f3f6);

    transition:
        border-color .3s ease,
        background-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


.faq-item:hover[b-ppdmh2bsdz] {
    transform: translateY(-2px);

    border-color:
        rgba(36, 89, 166, .16);

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .055);
}


.faq-item.active[b-ppdmh2bsdz] {
    border-color:
        rgba(58, 125, 68, .18);

    background:
        linear-gradient(
            135deg,
            #f5f8f6,
            #f1f4f7);

    box-shadow:
        0 15px 36px rgba(31, 41, 55, .065);
}


.faq-item h3[b-ppdmh2bsdz] {
    margin: 0;
}


.faq-question[b-ppdmh2bsdz] {
    width: 100%;
    min-height: 116px;
    padding: 28px 35px 28px 38px;

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

    gap: 28px;

    border: 0;

    background: transparent;
    color: var(--text);

    direction: rtl;

    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;

    text-align: right;

    cursor: pointer;

    appearance: none;

    transition:
        color .3s ease;
}


.faq-question:hover[b-ppdmh2bsdz] {
    color: #2459a6;
}


.faq-item.active .faq-question[b-ppdmh2bsdz] {
    color: var(--text);
}


.faq-question:focus-visible[b-ppdmh2bsdz] {
    outline:
        3px solid rgba(58, 125, 68, .17);

    outline-offset: -5px;
}


.question-text[b-ppdmh2bsdz] {
    min-width: 0;

    overflow-wrap: anywhere;
}


.faq-toggle[b-ppdmh2bsdz] {
    position: relative;

    width: 54px;
    height: 54px;

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

    flex: 0 0 54px;

    order: 2;

    border:
        1px solid rgba(36, 89, 166, .06);

    border-radius: 50%;

    background: #fff;
    color: #2459a6;

    box-shadow:
        0 8px 21px rgba(31, 41, 55, .045);

    transition:
        transform .35s ease,
        border-color .3s ease,
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.faq-question:hover .faq-toggle[b-ppdmh2bsdz] {
    transform: scale(1.06);

    border-color:
        rgba(36, 89, 166, .15);

    box-shadow:
        0 11px 25px rgba(36, 89, 166, .09);
}


.toggle-line[b-ppdmh2bsdz] {
    position: absolute;

    display: block;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform .35s
            cubic-bezier(.2, .72, .2, 1),
        opacity .25s ease;
}


.toggle-line.horizontal[b-ppdmh2bsdz] {
    width: 15px;
    height: 3px;
}


.toggle-line.vertical[b-ppdmh2bsdz] {
    width: 3px;
    height: 15px;
}


.faq-item.active .faq-toggle[b-ppdmh2bsdz] {
    transform: rotate(90deg);

    border-color:
        rgba(58, 125, 68, .12);

    color: var(--green);

    box-shadow:
        0 10px 24px rgba(58, 125, 68, .1);
}


.faq-item.active
.toggle-line.vertical[b-ppdmh2bsdz] {
    opacity: 0;

    transform: scaleY(0);
}


.faq-item.active
.faq-question:hover
.faq-toggle[b-ppdmh2bsdz] {
    transform:
        rotate(90deg)
        scale(1.06);
}


.faq-answer[b-ppdmh2bsdz] {
    display: grid;

    grid-template-rows: 0fr;

    visibility: hidden;

    opacity: 0;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .3s ease,
        visibility 0s linear .45s;
}


.faq-item.active
.faq-answer[b-ppdmh2bsdz] {
    grid-template-rows: 1fr;

    visibility: visible;

    opacity: 1;

    transition:
        grid-template-rows .45s
            cubic-bezier(.2, .72, .2, 1),
        opacity .35s ease .08s,
        visibility 0s linear 0s;
}


.answer-inner[b-ppdmh2bsdz] {
    min-height: 0;

    overflow: hidden;
}


.answer-inner p[b-ppdmh2bsdz] {
    margin: 0;
    padding: 0 35px 37px 127px;

    color: #718096;

    font-size: 16px;
    font-weight: 500;
    line-height: 2.2;

    white-space: pre-line;
    overflow-wrap: anywhere;

    transform: translateY(-8px);

    transition:
        transform .4s ease;
}


.faq-item.active
.answer-inner p[b-ppdmh2bsdz] {
    transform: translateY(0);
}


.faq-state[b-ppdmh2bsdz] {
    width: 100%;
    max-width: 900px;
    min-height: 150px;
    padding: 30px 34px;

    margin: 0 auto;

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

    gap: 18px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #f7faf8,
            #f5f8fb);

    color: #667085;

    direction: rtl;

    text-align: right;
}


.faq-state > div[b-ppdmh2bsdz] {
    min-width: 0;
}


.faq-state strong[b-ppdmh2bsdz] {
    display: block;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}


.faq-state p[b-ppdmh2bsdz] {
    margin: 5px 0 0;

    color: #7a8699;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.9;
}


.faq-state.error[b-ppdmh2bsdz] {
    border-color:
        rgba(36, 89, 166, .14);

    background:
        linear-gradient(
            135deg,
            #f6f9fd,
            #f8faf9);
}


.faq-state.empty[b-ppdmh2bsdz] {
    max-width: 760px;
}


.state-icon[b-ppdmh2bsdz] {
    width: 48px;
    height: 48px;

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

    flex: 0 0 48px;

    border-radius: 50%;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 20px;
    font-weight: 900;
}


.faq-state.error
.state-icon[b-ppdmh2bsdz] {
    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;
}


.loading-spinner[b-ppdmh2bsdz],
.button-spinner[b-ppdmh2bsdz] {
    display: block;

    border-style: solid;
    border-color:
        rgba(58, 125, 68, .18);

    border-top-color:
        var(--green);

    border-radius: 50%;

    animation:
        faq-spinner-b-ppdmh2bsdz .75s linear infinite;
}


.loading-spinner[b-ppdmh2bsdz] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-width: 4px;
}


.button-spinner[b-ppdmh2bsdz] {
    width: 18px;
    height: 18px;

    border-width: 2px;
}


.retry-button[b-ppdmh2bsdz] {
    min-height: 45px;
    padding: 0 18px;

    margin-right: auto;

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

    gap: 8px;

    flex: 0 0 auto;

    border:
        1px solid var(--green);

    border-radius: 13px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.retry-button:hover:not(:disabled)[b-ppdmh2bsdz] {
    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(58, 125, 68, .17);

    filter: brightness(.97);
}


.retry-button:disabled[b-ppdmh2bsdz] {
    cursor: wait;

    opacity: .7;
}


.retry-button .button-spinner[b-ppdmh2bsdz] {
    border-color:
        rgba(255, 255, 255, .3);

    border-top-color: #fff;
}


@keyframes faq-spinner-b-ppdmh2bsdz {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 850px) {

    .home-faq[b-ppdmh2bsdz] {
        padding: 82px 0 88px;
    }


    .faq-heading[b-ppdmh2bsdz] {
        margin-bottom: 45px;
    }


    .faq-question[b-ppdmh2bsdz] {
        min-height: 105px;
        padding: 24px 27px;

        font-size: 18px;
    }


    .answer-inner p[b-ppdmh2bsdz] {
        padding:
            0 27px 31px 105px;

        font-size: 15px;
    }
}


@media (max-width: 620px) {

    .home-faq[b-ppdmh2bsdz] {
        padding: 70px 0 74px;
    }


    .faq-heading[b-ppdmh2bsdz] {
        margin-bottom: 36px;
    }


    .faq-heading > span[b-ppdmh2bsdz] {
        margin-bottom: 9px;

        font-size: 15px;
    }


    .faq-heading h2[b-ppdmh2bsdz] {
        font-size: 29px;
        line-height: 1.6;
    }


    .faq-heading p[b-ppdmh2bsdz] {
        margin-top: 13px;

        font-size: 15px;
        line-height: 2;
    }


    .faq-list[b-ppdmh2bsdz] {
        gap: 12px;
    }


    .faq-item[b-ppdmh2bsdz] {
        border-radius: 19px;
    }


    .faq-question[b-ppdmh2bsdz] {
        min-height: 88px;
        padding: 20px 18px;

        gap: 15px;

        font-size: 16px;
        line-height: 1.8;
    }


    .faq-toggle[b-ppdmh2bsdz] {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }


    .toggle-line.horizontal[b-ppdmh2bsdz] {
        width: 13px;
        height: 2px;
    }


    .toggle-line.vertical[b-ppdmh2bsdz] {
        width: 2px;
        height: 13px;
    }


    .answer-inner p[b-ppdmh2bsdz] {
        padding:
            0 18px 24px;

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


    .faq-state[b-ppdmh2bsdz] {
        min-height: 170px;
        padding: 25px 20px;

        align-items: center;
        flex-direction: column;

        gap: 12px;

        text-align: center;
    }


    .retry-button[b-ppdmh2bsdz] {
        width: 100%;

        margin: 4px 0 0;
    }
}


@media (hover: none) {

    .faq-item:hover[b-ppdmh2bsdz] {
        transform: none;

        box-shadow: none;
    }


    .faq-question:hover .faq-toggle[b-ppdmh2bsdz] {
        transform: none;
    }


    .faq-item.active
    .faq-question:hover
    .faq-toggle[b-ppdmh2bsdz] {
        transform: rotate(90deg);
    }
}


@media (prefers-reduced-motion: reduce) {

    .faq-item[b-ppdmh2bsdz],
    .faq-toggle[b-ppdmh2bsdz],
    .toggle-line[b-ppdmh2bsdz],
    .faq-answer[b-ppdmh2bsdz],
    .answer-inner p[b-ppdmh2bsdz],
    .retry-button[b-ppdmh2bsdz] {
        transition-duration: .01ms !important;
    }


    .loading-spinner[b-ppdmh2bsdz],
    .button-spinner[b-ppdmh2bsdz] {
        animation-duration: 1.5s;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreHeroSection.razor.rz.scp.css */
.pharmacy-hero[b-dz2hxajv55] {
    position: relative;

    min-height:
        calc(100vh - 78px);
    padding: 24px 0 30px;

    display: flex;
    align-items: center;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            135deg,
            #f6f8fb 0%,
            #fbfcfd 48%,
            #f0f6f2 100%);
}


.pharmacy-hero[b-dz2hxajv55]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 92%,
            rgba(36, 89, 166, .07),
            transparent 27%),
        radial-gradient(
            circle at 90% 8%,
            rgba(58, 125, 68, .08),
            transparent 25%);
}


.hero-glow[b-dz2hxajv55] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);
}


.glow-green[b-dz2hxajv55] {
    width: 430px;
    height: 430px;

    top: -260px;
    right: -120px;

    background:
        rgba(58, 125, 68, .06);
}


.glow-blue[b-dz2hxajv55] {
    width: 390px;
    height: 390px;

    bottom: -250px;
    left: -120px;

    background:
        rgba(36, 89, 166, .06);
}


.hero-container[b-dz2hxajv55] {
    position: relative;
    z-index: 2;
}


.hero-content[b-dz2hxajv55] {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    flex-direction: column;

    text-align: center;
}


.hero-badge[b-dz2hxajv55] {
    min-height: 45px;
    padding: 0 21px;

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

    gap: 9px;

    border:
        1px solid rgba(58, 125, 68, .16);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .82);

    color: var(--green);

    box-shadow:
        0 10px 28px rgba(31, 41, 55, .045);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.8;

    backdrop-filter: blur(10px);
}


.badge-capsule[b-dz2hxajv55] {
    position: relative;

    width: 18px;
    height: 10px;

    display: inline-block;

    overflow: hidden;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--orange) 0 50%,
            #f7d4cc 50% 100%);

    transform: rotate(-42deg);
}


.badge-capsule[b-dz2hxajv55]::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        rgba(255, 255, 255, .9);
}


.hero-content h1[b-dz2hxajv55] {
    max-width: 960px;

    margin: 28px 0 0;

    color: #475467;

    font-size:
        clamp(43px, 4.2vw, 61px);

    font-weight: 900;
    line-height: 1.55;

    letter-spacing: -.7px;
}


.hero-content h1 span[b-dz2hxajv55] {
    display: block;

    color: #2459a6;
}


.hero-description[b-dz2hxajv55] {
    max-width: 920px;

    margin: 24px auto 0;

    color: #778196;

    font-size: 18px;
    font-weight: 500;
    line-height: 2.15;
}


.hero-actions[b-dz2hxajv55] {
    width: 100%;

    margin-top: 31px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.hero-button[b-dz2hxajv55] {
    min-height: 62px;
    padding: 0 24px;

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

    border:
        1px solid transparent;

    border-radius: 16px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;

    text-align: center;
    text-decoration: none;

    transition:
        transform .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}


.hero-button:hover[b-dz2hxajv55] {
    transform: translateY(-3px);
}


.hero-button.primary[b-dz2hxajv55] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;

    box-shadow:
        0 13px 28px rgba(58, 125, 68, .17);
}


.hero-button.primary:hover[b-dz2hxajv55] {
    background: #326f3c;

    box-shadow:
        0 17px 34px rgba(58, 125, 68, .22);
}


.hero-button.outline[b-dz2hxajv55] {
    border-color:
        rgba(36, 89, 166, .4);

    background:
        rgba(255, 255, 255, .78);

    color: #2459a6;

    box-shadow:
        0 10px 24px rgba(31, 41, 55, .045);
}


.hero-button.outline:hover[b-dz2hxajv55] {
    border-color: #2459a6;

    background: #fff;
}


.hero-button.secondary[b-dz2hxajv55] {
    border-color: #2b62b1;

    background: #2b62b1;
    color: #fff;

    box-shadow:
        0 13px 28px rgba(36, 89, 166, .17);
}


.hero-button.secondary:hover[b-dz2hxajv55] {
    background: #2459a6;

    box-shadow:
        0 17px 34px rgba(36, 89, 166, .22);
}


.hero-information[b-dz2hxajv55] {
    width: 100%;

    margin-top: 27px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


.information-item[b-dz2hxajv55] {
    min-width: 0;
    min-height: 112px;
    padding: 20px 18px;

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

    gap: 8px;

    border:
        1px solid rgba(31, 41, 55, .1);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .76);

    box-shadow:
        0 10px 30px rgba(31, 41, 55, .035);

    backdrop-filter: blur(9px);
}


.information-item strong[b-dz2hxajv55] {
    color: #344054;

    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;
}


.information-item span[b-dz2hxajv55] {
    color: #7b8497;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
}


.hero-button:focus-visible[b-dz2hxajv55] {
    outline:
        3px solid rgba(36, 89, 166, .18);

    outline-offset: 3px;
}


@media (min-width: 901px) and (max-height: 820px) {

    .pharmacy-hero[b-dz2hxajv55] {
        padding:
            16px 0 20px;
    }


    .hero-badge[b-dz2hxajv55] {
        min-height: 40px;

        font-size: 15px;
    }


    .hero-content h1[b-dz2hxajv55] {
        margin-top: 18px;

        font-size:
            clamp(38px, 3.7vw, 51px);

        line-height: 1.47;
    }


    .hero-description[b-dz2hxajv55] {
        margin-top: 15px;

        font-size: 16px;
        line-height: 2;
    }


    .hero-actions[b-dz2hxajv55] {
        margin-top: 21px;
    }


    .hero-button[b-dz2hxajv55] {
        min-height: 55px;

        font-size: 16px;
    }


    .hero-information[b-dz2hxajv55] {
        margin-top: 18px;
    }


    .information-item[b-dz2hxajv55] {
        min-height: 94px;
        padding:
            14px 16px;
    }


    .information-item strong[b-dz2hxajv55] {
        font-size: 16px;
    }


    .information-item span[b-dz2hxajv55] {
        font-size: 13px;
    }
}


@media (min-width: 901px) and (min-height: 950px) {

    .hero-content[b-dz2hxajv55] {
        max-width: 1060px;
    }


    .hero-content h1[b-dz2hxajv55] {
        margin-top: 34px;
    }


    .hero-description[b-dz2hxajv55] {
        margin-top: 27px;
    }


    .hero-actions[b-dz2hxajv55] {
        margin-top: 38px;
    }


    .hero-information[b-dz2hxajv55] {
        margin-top: 31px;
    }
}


@media (max-width: 900px) {

    .pharmacy-hero[b-dz2hxajv55] {
        min-height: auto;
        padding:
            68px 0 72px;
    }


    .hero-content h1[b-dz2hxajv55] {
        font-size:
            clamp(37px, 6vw, 49px);
    }


    .hero-description[b-dz2hxajv55] {
        max-width: 720px;

        font-size: 17px;
    }


    .hero-actions[b-dz2hxajv55],
    .hero-information[b-dz2hxajv55] {
        max-width: 720px;
    }
}


@media (max-width: 700px) {

    .pharmacy-hero[b-dz2hxajv55] {
        padding:
            55px 0 62px;
    }


    .hero-badge[b-dz2hxajv55] {
        min-height: 41px;
        padding:
            0 17px;

        font-size: 14px;
    }


    .hero-content h1[b-dz2hxajv55] {
        margin-top: 22px;

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


    .hero-description[b-dz2hxajv55] {
        margin-top: 18px;

        font-size: 16px;
        line-height: 2.05;
    }


    .hero-actions[b-dz2hxajv55] {
        margin-top: 26px;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .hero-button[b-dz2hxajv55] {
        width: 100%;
        min-height: 56px;

        font-size: 16px;
    }


    .hero-information[b-dz2hxajv55] {
        margin-top: 22px;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .information-item[b-dz2hxajv55] {
        min-height: 96px;

        border-radius: 17px;
    }


    .information-item strong[b-dz2hxajv55] {
        font-size: 16px;
    }


    .information-item span[b-dz2hxajv55] {
        font-size: 14px;
    }
}


@media (max-width: 420px) {

    .pharmacy-hero[b-dz2hxajv55] {
        padding:
            46px 0 54px;
    }


    .hero-content h1[b-dz2hxajv55] {
        font-size: 29px;
    }


    .hero-description[b-dz2hxajv55] {
        font-size: 15px;
    }
}


@media (hover: none) {

    .hero-button:hover[b-dz2hxajv55] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .hero-button[b-dz2hxajv55] {
        transition-duration: .01ms !important;
    }
}

button.hero-button[b-dz2hxajv55] {
    font-family: inherit;
    cursor: pointer;
}

button.hero-button.primary[b-dz2hxajv55] {
    border: 1px solid transparent;
}

button.hero-button:focus-visible[b-dz2hxajv55] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreOnlineVisitBannerSection.razor.rz.scp.css */
.vetban-showcase[b-jhap8er2ak] {
    position: relative;
    padding: 34px 0 96px;
    overflow: hidden;
    background: #fff;
}

.showcase-banner[b-jhap8er2ak] {
    position: relative;
    min-height: 390px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    align-items: center;
    direction: rtl;
    overflow: hidden;
    isolation: isolate;
    border-radius: 34px 64px 34px 64px;
    background:
        linear-gradient(
            125deg,
            #347f49 0%,
            #1f5c34 45%,
            #164b2d 100%);
    background-size: 190% 190%;
    box-shadow: 0 27px 65px rgba(27, 78, 43, .23);
    animation: showcase-gradient-b-jhap8er2ak 16s ease-in-out infinite;
}

.showcase-banner[b-jhap8er2ak]::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -45%;
    background:
        radial-gradient(
            circle at 19% 28%,
            rgba(117, 193, 130, .3),
            transparent 24%),
        radial-gradient(
            circle at 72% 21%,
            rgba(255, 255, 255, .105),
            transparent 23%),
        radial-gradient(
            circle at 50% 84%,
            rgba(7, 48, 26, .48),
            transparent 29%),
        radial-gradient(
            circle at 89% 73%,
            rgba(86, 164, 105, .23),
            transparent 25%);
    filter: blur(25px);
    animation: showcase-aurora-b-jhap8er2ak 19s ease-in-out infinite;
}

.showcase-banner[b-jhap8er2ak]::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px);
    background-size: 48px 48px;
    mask-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .2),
            transparent 76%);
    opacity: .6;
}

.showcase-shape[b-jhap8er2ak] {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.shape-one[b-jhap8er2ak] {
    width: 360px;
    height: 360px;
    top: -235px;
    right: -105px;
    background: rgba(255, 255, 255, .075);
    animation: shape-one-motion-b-jhap8er2ak 12s ease-in-out infinite;
}

.shape-two[b-jhap8er2ak] {
    width: 310px;
    height: 310px;
    bottom: -210px;
    left: 35%;
    background: rgba(109, 190, 123, .1);
    animation: shape-two-motion-b-jhap8er2ak 14s ease-in-out infinite;
}

.shape-three[b-jhap8er2ak] {
    width: 200px;
    height: 200px;
    top: 44%;
    right: 44%;
    border: 1px solid rgba(255, 255, 255, .07);
    animation: shape-three-motion-b-jhap8er2ak 18s linear infinite;
}

.showcase-content[b-jhap8er2ak] {
    position: relative;
    z-index: 4;
    padding: 53px 64px 53px 40px;
    color: #fff;
}

.showcase-badge[b-jhap8er2ak] {
    min-height: 39px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .105);
    color: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
    font-size: 14px;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

.showcase-content h2[b-jhap8er2ak] {
    max-width: 740px;
    margin: 19px 0 0;
    color: #fff;
    font-size: clamp(33px, 3.5vw, 44px);
    font-weight: 900;
    line-height: 1.65;
    letter-spacing: -.4px;
    text-wrap: balance;
    text-shadow: 0 5px 22px rgba(7, 38, 20, .13);
}

.showcase-content p[b-jhap8er2ak] {
    max-width: 680px;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 16px;
    font-weight: 600;
    line-height: 2.05;
    text-wrap: balance;
}

.showcase-actions[b-jhap8er2ak] {
    margin-top: 27px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.showcase-action[b-jhap8er2ak] {
    min-height: 52px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.showcase-action.primary[b-jhap8er2ak] {
    background: #fff;
    color: var(--green);
    box-shadow: 0 13px 30px rgba(8, 42, 23, .14);
}

.showcase-action.secondary[b-jhap8er2ak] {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: blur(8px);
}

.showcase-action svg[b-jhap8er2ak] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.showcase-action:hover[b-jhap8er2ak] {
    transform: translateY(-3px);
}

.showcase-action.primary:hover[b-jhap8er2ak] {
    border-color: rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    box-shadow: 0 17px 36px rgba(8, 42, 23, .2);
}

.showcase-action.secondary:hover[b-jhap8er2ak] {
    border-color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 14px 30px rgba(8, 42, 23, .14);
}

.showcase-action:hover svg[b-jhap8er2ak] {
    transform: translateX(-3px);
}

.showcase-action:active[b-jhap8er2ak] {
    transform: translateY(-1px) scale(.985);
}

.showcase-action:focus-visible[b-jhap8er2ak] {
    outline: 4px solid rgba(255, 255, 255, .2);
    outline-offset: 4px;
}

.showcase-visual[b-jhap8er2ak] {
    position: relative;
    z-index: 3;
    min-width: 0;
    height: 100%;
    min-height: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    overflow: hidden;
}

.showcase-visual[b-jhap8er2ak]::before {
    content: "";
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .15),
            rgba(255, 255, 255, .035) 52%,
            transparent 71%);
    filter: blur(2px);
    animation: visual-glow-b-jhap8er2ak 7s ease-in-out infinite;
}

.brand-stage[b-jhap8er2ak] {
    position: relative;
    z-index: 4;
    width: 255px;
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 13px rgba(255, 255, 255, .05),
        0 23px 55px rgba(5, 39, 20, .24),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    animation: brand-stage-float-b-jhap8er2ak 6s ease-in-out infinite;
}

.brand-glow[b-jhap8er2ak] {
    position: absolute;
    z-index: -1;
    inset: -22px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(137, 211, 148, .22),
            transparent 68%);
    animation: brand-glow-pulse-b-jhap8er2ak 5s ease-in-out infinite;
}

.vetban-logo[b-jhap8er2ak] {
    width: 82%;
    height: 82%;
    display: block;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: contrast(1.02) saturate(.95);
    transition:
        transform .45s ease,
        filter .45s ease;
}

.brand-stage:hover .vetban-logo[b-jhap8er2ak] {
    transform: scale(1.035);
    filter: contrast(1.04) saturate(1.02);
}

.brand-orbit[b-jhap8er2ak] {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}

.orbit-outer[b-jhap8er2ak] {
    width: 350px;
    height: 350px;
    border: 1px dashed rgba(255, 255, 255, .25);
    animation: orbit-clockwise-b-jhap8er2ak 30s linear infinite;
}

.orbit-middle[b-jhap8er2ak] {
    width: 305px;
    height: 305px;
    border: 1px solid rgba(255, 255, 255, .12);
    animation: orbit-counter-clockwise-b-jhap8er2ak 24s linear infinite;
}

.orbit-node[b-jhap8er2ak] {
    position: absolute;
    z-index: 5;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow:
        0 10px 25px rgba(7, 42, 22, .16),
        inset 0 1px 0 rgba(255, 255, 255, .13);
    backdrop-filter: blur(9px);
    animation: node-float-b-jhap8er2ak 5s ease-in-out infinite;
}

.orbit-node svg[b-jhap8er2ak] {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.consultation-node[b-jhap8er2ak] {
    top: 41px;
    right: 73px;
    animation-delay: -.8s;
}

.prescription-node[b-jhap8er2ak] {
    right: 45px;
    bottom: 51px;
    animation-delay: -2.4s;
}

.pharmacy-node[b-jhap8er2ak] {
    bottom: 42px;
    left: 61px;
    animation-delay: -3.6s;
}

.visual-dot[b-jhap8er2ak] {
    position: absolute;
    z-index: 3;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 15px rgba(255, 255, 255, .28);
    animation: dot-breathe-b-jhap8er2ak 4s ease-in-out infinite;
}

.dot-one[b-jhap8er2ak] {
    width: 7px;
    height: 7px;
    top: 25%;
    left: 16%;
}

.dot-two[b-jhap8er2ak] {
    width: 5px;
    height: 5px;
    top: 17%;
    right: 22%;
    animation-delay: -1.1s;
}

.dot-three[b-jhap8er2ak] {
    width: 8px;
    height: 8px;
    right: 12%;
    bottom: 25%;
    animation-delay: -2.1s;
}

.dot-four[b-jhap8er2ak] {
    width: 4px;
    height: 4px;
    bottom: 17%;
    left: 20%;
    animation-delay: -3s;
}

@keyframes showcase-gradient-b-jhap8er2ak {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes showcase-aurora-b-jhap8er2ak {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translate3d(2%, -1%, 0)
            rotate(8deg)
            scale(1.07);
    }
}

@keyframes shape-one-motion-b-jhap8er2ak {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-17px, 14px, 0)
            scale(1.06);
    }
}

@keyframes shape-two-motion-b-jhap8er2ak {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(18px, -13px, 0)
            scale(1.08);
    }
}

@keyframes shape-three-motion-b-jhap8er2ak {
    to {
        transform: rotate(360deg);
    }
}

@keyframes visual-glow-b-jhap8er2ak {
    0%,
    100% {
        transform: scale(.96);
        opacity: .72;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes brand-stage-float-b-jhap8er2ak {
    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

@keyframes brand-glow-pulse-b-jhap8er2ak {
    0%,
    100% {
        opacity: .65;
        transform: scale(.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes orbit-clockwise-b-jhap8er2ak {
    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-counter-clockwise-b-jhap8er2ak {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes node-float-b-jhap8er2ak {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes dot-breathe-b-jhap8er2ak {
    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@media (max-width: 1050px) {
    .showcase-banner[b-jhap8er2ak] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .8fr);
    }

    .showcase-content[b-jhap8er2ak] {
        padding:
            48px 45px 48px 30px;
    }

    .showcase-content h2[b-jhap8er2ak] {
        font-size:
            clamp(31px, 3.8vw, 40px);
    }

    .brand-stage[b-jhap8er2ak] {
        width: 225px;
        height: 225px;
    }

    .orbit-outer[b-jhap8er2ak] {
        width: 315px;
        height: 315px;
    }

    .orbit-middle[b-jhap8er2ak] {
        width: 275px;
        height: 275px;
    }
}

@media (max-width: 820px) {
    .vetban-showcase[b-jhap8er2ak] {
        padding: 28px 0 80px;
    }

    .showcase-banner[b-jhap8er2ak] {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 30px 52px 30px 52px;
    }

    .showcase-content[b-jhap8er2ak] {
        padding:
            46px 38px 22px;
        text-align: center;
    }

    .showcase-content h2[b-jhap8er2ak],
    .showcase-content p[b-jhap8er2ak] {
        margin-right: auto;
        margin-left: auto;
    }

    .showcase-actions[b-jhap8er2ak] {
        justify-content: center;
    }

    .showcase-visual[b-jhap8er2ak] {
        min-height: 350px;
    }

    .shape-three[b-jhap8er2ak] {
        display: none;
    }

    .showcase-banner[b-jhap8er2ak]::after {
        mask-image:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .25),
                transparent 84%);
    }
}

@media (max-width: 620px) {
    .vetban-showcase[b-jhap8er2ak] {
        padding: 20px 0 68px;
    }

    .showcase-banner[b-jhap8er2ak] {
        min-height: auto;
        border-radius:
            24px 40px 24px 40px;
    }

    .showcase-content[b-jhap8er2ak] {
        padding:
            37px 21px 19px;
    }

    .showcase-badge[b-jhap8er2ak] {
        min-height: 36px;
        padding: 0 14px;
        font-size: 13px;
    }

    .showcase-content h2[b-jhap8er2ak] {
        margin-top: 17px;
        font-size: 29px;
        line-height: 1.7;
        letter-spacing: 0;
    }

    .showcase-content p[b-jhap8er2ak] {
        margin-top: 12px;
        font-size: 15px;
        line-height: 2;
    }

    .showcase-actions[b-jhap8er2ak] {
        margin-top: 22px;
        align-items: stretch;
        flex-direction: column;
    }

    .showcase-action[b-jhap8er2ak] {
        width: 100%;
        min-height: 51px;
    }

    .showcase-visual[b-jhap8er2ak] {
        min-height: 305px;
    }

    .showcase-visual[b-jhap8er2ak]::before {
        width: 285px;
        height: 285px;
    }

    .brand-stage[b-jhap8er2ak] {
        width: 185px;
        height: 185px;
        box-shadow:
            0 0 0 10px rgba(255, 255, 255, .05),
            0 19px 43px rgba(5, 39, 20, .22),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }

    .orbit-outer[b-jhap8er2ak] {
        width: 260px;
        height: 260px;
    }

    .orbit-middle[b-jhap8er2ak] {
        width: 225px;
        height: 225px;
    }

    .orbit-node[b-jhap8er2ak] {
        width: 41px;
        height: 41px;
    }

    .orbit-node svg[b-jhap8er2ak] {
        width: 20px;
        height: 20px;
    }

    .consultation-node[b-jhap8er2ak] {
        top: 25px;
        right: 52px;
    }

    .prescription-node[b-jhap8er2ak] {
        right: 29px;
        bottom: 38px;
    }

    .pharmacy-node[b-jhap8er2ak] {
        bottom: 31px;
        left: 40px;
    }

    .shape-one[b-jhap8er2ak] {
        width: 260px;
        height: 260px;
        top: -175px;
        right: -110px;
    }

    .shape-two[b-jhap8er2ak] {
        width: 240px;
        height: 240px;
        bottom: -170px;
        left: -95px;
    }
}

@media (max-width: 380px) {
    .showcase-content[b-jhap8er2ak] {
        padding:
            34px 17px 15px;
    }

    .showcase-content h2[b-jhap8er2ak] {
        font-size: 26px;
    }

    .showcase-content p[b-jhap8er2ak] {
        font-size: 14px;
    }

    .showcase-visual[b-jhap8er2ak] {
        min-height: 280px;
    }

    .brand-stage[b-jhap8er2ak] {
        width: 165px;
        height: 165px;
    }

    .orbit-outer[b-jhap8er2ak] {
        width: 235px;
        height: 235px;
    }

    .orbit-middle[b-jhap8er2ak] {
        width: 205px;
        height: 205px;
    }
}

@media (hover: none) {
    .showcase-action:hover[b-jhap8er2ak] {
        transform: none;
    }

    .showcase-action.primary:hover[b-jhap8er2ak] {
        border-color:
            rgba(255, 255, 255, .9);
        background: #fff;
        color: var(--green);
    }

    .showcase-action.secondary:hover[b-jhap8er2ak] {
        border-color:
            rgba(255, 255, 255, .32);
        background:
            rgba(255, 255, 255, .09);
        color: #fff;
    }

    .showcase-action:active[b-jhap8er2ak] {
        transform: scale(.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .showcase-banner[b-jhap8er2ak],
    .showcase-banner[b-jhap8er2ak]::before,
    .showcase-shape[b-jhap8er2ak],
    .showcase-visual[b-jhap8er2ak]::before,
    .brand-stage[b-jhap8er2ak],
    .brand-glow[b-jhap8er2ak],
    .brand-orbit[b-jhap8er2ak],
    .orbit-node[b-jhap8er2ak],
    .visual-dot[b-jhap8er2ak] {
        animation: none;
    }

    .showcase-action[b-jhap8er2ak],
    .showcase-action svg[b-jhap8er2ak],
    .vetban-logo[b-jhap8er2ak] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreProductDeliverySection.razor.rz.scp.css */
/* _content/PopProject.BlazorSSR/Components/Features/Store/StoreProductsSection.razor.rz.scp.css */
.pharmacy-medicines[b-qfggf51c23] {
    position: relative;

    padding: 92px 0 100px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #f8fbf9 48%,
            #fff 100%);
}


.pharmacy-medicines[b-qfggf51c23]::before,
.pharmacy-medicines[b-qfggf51c23]::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.pharmacy-medicines[b-qfggf51c23]::before {
    width: 410px;
    height: 410px;

    top: -285px;
    right: -160px;

    background:
        rgba(58, 125, 68, .045);
}


.pharmacy-medicines[b-qfggf51c23]::after {
    width: 430px;
    height: 430px;

    bottom: -305px;
    left: -170px;

    background:
        rgba(36, 89, 166, .04);
}


.pharmacy-medicines .container[b-qfggf51c23] {
    position: relative;
    z-index: 2;
}


.categories-head[b-qfggf51c23] {
    max-width: 790px;

    margin: 0 auto 47px;

    direction: rtl;

    text-align: center;
}


.categories-head > span[b-qfggf51c23] {
    display: block;

    margin-bottom: 8px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.categories-head h2[b-qfggf51c23] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(31px, 3.7vw, 42px);

    font-weight: 900;
    line-height: 1.5;
}


.categories-head p[b-qfggf51c23] {
    max-width: 710px;

    margin: 12px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}


.categories-slider[b-qfggf51c23] {
    position: relative;
}


.categories-scroll[b-qfggf51c23] {
    padding: 8px 4px 23px;

    overflow-x: auto;
    overflow-y: hidden;

    cursor: grab;

    scroll-behavior: smooth;
    scrollbar-width: none;

    touch-action: pan-y;
}


.categories-scroll[b-qfggf51c23]::-webkit-scrollbar {
    display: none;
}


.categories-scroll.is-dragging[b-qfggf51c23] {
    cursor: grabbing;

    scroll-behavior: auto;
}


.categories-grid[b-qfggf51c23] {
    min-width: max-content;
    padding: 0 58px;

    display: grid;

    grid-auto-flow: column;
    grid-auto-columns: 170px;

    gap: 22px;

    direction: rtl;
}


.category-card[b-qfggf51c23] {
    position: relative;

    min-height: 190px;
    padding: 24px 16px 21px;

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

    gap: 15px;

    overflow: hidden;

    border:
        1px solid var(--soft);

    border-radius: 23px;

    background: #f5f7fa;
    color: var(--text);

    font-family: inherit;

    cursor: pointer;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}


.category-card:hover[b-qfggf51c23] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .38);

    background: #fff;
}


.category-card.active[b-qfggf51c23] {
    border-color: #2b62b1;

    background: #fff;

    /* box-shadow:
        0 18px 42px rgba(36, 89, 166, .12); */
}


.category-icon[b-qfggf51c23] {
    width: 85px;
    height: 85px;

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

    overflow: hidden;

    border-radius: 25px;

    background:
        rgba(58, 125, 68, .09);
}


.category-card:nth-child(even)
.category-icon[b-qfggf51c23] {
    background:
        rgba(36, 89, 166, .08);
}


.category-icon img[b-qfggf51c23] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    pointer-events: none;
}


.category-fallback[b-qfggf51c23] {
    font-size: 40px;
}


.category-card strong[b-qfggf51c23] {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.6;
}


.selected-indicator[b-qfggf51c23] {
    position: absolute;

    width: 27px;
    height: 27px;

    top: 12px;
    left: 12px;

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

    border-radius: 50%;

    background: #2b62b1;
    color: #fff;

    opacity: 0;

    transform: scale(.7);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.category-card.active
.selected-indicator[b-qfggf51c23] {
    opacity: 1;

    transform: scale(1);
}


.selected-indicator svg[b-qfggf51c23] {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.categories-arrow[b-qfggf51c23] {
    position: absolute;
    z-index: 5;

    width: 52px;
    height: 52px;

    top: 50%;

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

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #1c274c;

    box-shadow:
        0 14px 35px rgba(31, 41, 55, .11);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        transform .22s ease,
        color .22s ease;
}


.categories-arrow:hover[b-qfggf51c23] {
    color: var(--green);

    transform:
        translateY(-50%)
        scale(1.06);
}


.categories-arrow svg[b-qfggf51c23] {
    width: 31px;
    height: 31px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.arrow-right[b-qfggf51c23] {
    right: -24px;
}


.arrow-left[b-qfggf51c23] {
    left: -24px;
}


.medicines-divider[b-qfggf51c23] {
    margin: 43px 0 38px;

    display: grid;

    grid-template-columns:
        minmax(30px, 1fr)
        auto
        minmax(30px, 1fr);

    align-items: center;

    gap: 20px;

    direction: rtl;
}


.medicines-divider > span[b-qfggf51c23] {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(31, 41, 55, .13),
            transparent);
}


.medicines-divider > div[b-qfggf51c23] {
    display: flex;
    align-items: center;

    gap: 8px;
}


.medicines-divider small[b-qfggf51c23] {
    color: #98a2b3;

    font-size: 13px;
    font-weight: 700;
}


.medicines-divider strong[b-qfggf51c23] {
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.medicine-results[b-qfggf51c23] {
    scroll-margin-top: 100px;
}


.medicines-head[b-qfggf51c23] {
    margin-bottom: 31px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    direction: rtl;
}


.medicines-head > div > span[b-qfggf51c23] {
    display: block;

    margin-bottom: 7px;

    color: var(--orange);

    font-size: 15px;
    font-weight: 900;
}


.medicines-head h2[b-qfggf51c23] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(29px, 3.3vw, 38px);

    font-weight: 900;
    line-height: 1.5;
}


.medicines-head p[b-qfggf51c23] {
    margin: 8px 0 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.9;
}


.results-count[b-qfggf51c23] {
    min-height: 42px;
    padding: 0 15px;

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

    flex: 0 0 auto;

    border-radius: 999px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}


.products-grid[b-qfggf51c23] {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.product-card-link[b-qfggf51c23] {
    min-width: 0;
    height: 100%;

    display: block;

    color: inherit;

    text-decoration: none;

    border-radius: 22px;

    outline: none;
}


.product-card-link:focus-visible[b-qfggf51c23] {
    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .16);
}


.product-card[b-qfggf51c23] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid var(--soft);

    border-radius: 22px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.product-card-link:hover
.product-card[b-qfggf51c23] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .36);

    box-shadow:
        0 18px 38px rgba(31, 41, 55, .09);
}


.product-image[b-qfggf51c23] {
    position: relative;

    height: 220px;
    padding: 14px;

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

    flex: 0 0 220px;

    overflow: hidden;

    background: #f8faf8;
}


.product-image img[b-qfggf51c23] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.product-card-link:hover
.product-image img[b-qfggf51c23] {
    transform: scale(1.04);
}


.image-placeholder[b-qfggf51c23] {
    width: 64px;
    height: 64px;

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

    border-radius: 20px;

    background:
        rgba(58, 125, 68, .09);

    color: var(--green);

    font-size: 38px;
    font-weight: 500;
}


.prescription-badge[b-qfggf51c23] {
    position: absolute;

    top: 13px;
    right: 13px;

    min-height: 30px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(58, 125, 68, .15);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .94);

    color: var(--green);

    box-shadow:
        0 8px 20px rgba(31, 41, 55, .07);

    font-size: 11px;
    font-weight: 900;
}


.product-body[b-qfggf51c23] {
    min-height: 220px;
    padding: 18px;

    display: flex;
    flex: 1;
    flex-direction: column;

    text-align: center;
}


.product-type[b-qfggf51c23] {
    min-height: 31px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    align-self: center;

    border-radius: 999px;

    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;

    font-size: 13px;
    font-weight: 900;
}


.product-body h3[b-qfggf51c23] {
    min-height: 64px;

    margin: 12px 0 6px;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
    line-height: 1.7;
}


.product-brand[b-qfggf51c23],
.product-brand-placeholder[b-qfggf51c23] {
    width: 100%;
    min-height: 24px;
}


.product-brand[b-qfggf51c23] {
    margin: 0;
    padding-top: .5rem;

    color: #667085;

    direction: ltr;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;

    text-align: left;

    unicode-bidi: plaintext;
}


.product-brand-placeholder[b-qfggf51c23] {
    display: block;
}


.product-bottom[b-qfggf51c23] {
    margin-top: auto;
    padding-top: 14px;

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

    gap: 10px;

    border-top:
        1px solid var(--soft);
}


.product-bottom strong[b-qfggf51c23] {
    color: var(--green);

    font-size: 17px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link[b-qfggf51c23] {
    min-height: 39px;
    padding: 0 13px;

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

    border-radius: 10px;

    background: #2b62b1;
    color: #fff;

    font-size: 13px;
    font-weight: 900;

    white-space: nowrap;
}


.card-link.prescription[b-qfggf51c23] {
    /* border:
        1px solid rgba(58, 125, 68, .25); */

    background: #2b62b1;
    color: #eef1f4;
}


.card-link.unavailable[b-qfggf51c23] {
    background: #eef1f4;
    color: #98a2b3;
}


.results-enter[b-qfggf51c23] {
    animation:
        resultsEnter-b-qfggf51c23 .28s ease both;
}


@keyframes resultsEnter-b-qfggf51c23 {

    from {
        opacity: 0;

        transform:
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


.pagination[b-qfggf51c23] {
    margin-top: 39px;

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

    gap: 12px;

    direction: rtl;
}


.pagination-pages[b-qfggf51c23] {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
}


.page-button[b-qfggf51c23],
.pagination-arrow[b-qfggf51c23] {
    width: 43px;
    height: 43px;

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

    border:
        1px solid var(--soft);

    border-radius: 12px;

    background: #fff;
    color: #667085;

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease;
}


.page-button:hover[b-qfggf51c23],
.pagination-arrow:hover[b-qfggf51c23] {
    transform: translateY(-2px);

    border-color:
        rgba(58, 125, 68, .35);

    color: var(--green);
}


.page-button.active[b-qfggf51c23] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;

    box-shadow:
        0 9px 22px rgba(58, 125, 68, .17);
}


.pagination-arrow svg[b-qfggf51c23] {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.pagination-arrow.disabled[b-qfggf51c23] {
    opacity: .42;

    pointer-events: none;
}


.pagination-summary[b-qfggf51c23] {
    margin: 12px 0 0;

    color: #98a2b3;

    font-size: 13px;
    font-weight: 700;

    text-align: center;
}


.section-state[b-qfggf51c23] {
    min-height: 130px;
    padding: 24px;

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

    gap: 17px;

    border:
        1px solid var(--soft);

    border-radius: 20px;

    background: #fff;

    direction: rtl;

    text-align: right;
}


.section-state .state-icon[b-qfggf51c23] {
    width: 46px;
    height: 46px;

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

    flex: 0 0 46px;

    border-radius: 15px;

    background:
        rgba(36, 89, 166, .08);

    color: #2459a6;

    font-size: 21px;
    font-weight: 900;
}


.section-state strong[b-qfggf51c23] {
    display: block;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}


.section-state p[b-qfggf51c23] {
    margin: 5px 0 0;

    color: #667085;

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


.section-state button[b-qfggf51c23] {
    min-height: 42px;
    padding: 0 17px;

    margin-right: auto;

    border: 0;
    border-radius: 12px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-weight: 900;

    cursor: pointer;
}


.section-state.error
.state-icon[b-qfggf51c23] {
    background:
        rgba(217, 83, 79, .09);

    color: #c94743;
}


.medicines-state[b-qfggf51c23] {
    margin-top: 4px;
}


.skeleton-category[b-qfggf51c23],
.skeleton-product[b-qfggf51c23] {
    pointer-events: none;
}


.skeleton-category-image[b-qfggf51c23],
.skeleton-category-title[b-qfggf51c23],
.skeleton-product-image[b-qfggf51c23],
.skeleton-line[b-qfggf51c23] {
    display: block;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #edf0f3 25%,
            #f7f8fa 50%,
            #edf0f3 75%);

    background-size: 200% 100%;

    animation:
        skeletonLoading-b-qfggf51c23 1.25s linear infinite;
}


.skeleton-category-image[b-qfggf51c23] {
    width: 85px;
    height: 85px;

    border-radius: 25px;
}


.skeleton-category-title[b-qfggf51c23] {
    width: 75px;
    height: 18px;
}


.skeleton-product-image[b-qfggf51c23] {
    height: 220px;

    border-radius: 0;
}


.skeleton-line[b-qfggf51c23] {
    height: 18px;

    margin-right: auto;
    margin-left: auto;
}


.skeleton-line.type[b-qfggf51c23] {
    width: 75px;
    height: 31px;

    border-radius: 999px;
}


.skeleton-line.title[b-qfggf51c23] {
    width: 80%;

    margin-top: 17px;
}


.skeleton-line.brand[b-qfggf51c23] {
    width: 54%;

    margin-top: 18px;
}


.skeleton-line.action[b-qfggf51c23] {
    width: 100%;
    height: 42px;

    margin-top: auto;
}


@keyframes skeletonLoading-b-qfggf51c23 {

    to {
        background-position:
            -200% 0;
    }
}


@media (max-width: 1050px) {

    .products-grid[b-qfggf51c23] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 850px) {

    .pharmacy-medicines[b-qfggf51c23] {
        padding:
            78px 0 86px;
    }


    .products-grid[b-qfggf51c23] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .medicines-head[b-qfggf51c23] {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 700px) {

    .categories-grid[b-qfggf51c23] {
        grid-auto-columns: 150px;

        padding: 0 43px;

        gap: 15px;
    }


    .category-card[b-qfggf51c23] {
        min-height: 173px;

        border-radius: 20px;
    }


    .category-icon[b-qfggf51c23] {
        width: 76px;
        height: 76px;

        border-radius: 22px;
    }


    .categories-arrow[b-qfggf51c23] {
        width: 44px;
        height: 44px;
    }


    .arrow-right[b-qfggf51c23] {
        right: -10px;
    }


    .arrow-left[b-qfggf51c23] {
        left: -10px;
    }
}


@media (max-width: 620px) {

    .pharmacy-medicines[b-qfggf51c23] {
        padding:
            68px 0 74px;
    }


    .categories-head[b-qfggf51c23] {
        margin-bottom: 32px;
    }


    .categories-head h2[b-qfggf51c23],
    .medicines-head h2[b-qfggf51c23] {
        font-size: 28px;
    }


    .categories-head p[b-qfggf51c23] {
        font-size: 15px;
    }


    .medicines-divider[b-qfggf51c23] {
        margin:
            31px 0 28px;

        gap: 10px;
    }


    .medicines-divider > div[b-qfggf51c23] {
        align-items: center;
        flex-direction: column;

        gap: 1px;
    }


    .products-grid[b-qfggf51c23] {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .product-image[b-qfggf51c23],
    .skeleton-product-image[b-qfggf51c23] {
        height: 245px;

        flex-basis: 245px;
    }


    .product-body[b-qfggf51c23] {
        min-height: 0;
    }


    .product-body h3[b-qfggf51c23] {
        min-height: 0;
    }


    .pagination[b-qfggf51c23] {
        gap: 8px;
    }


    .pagination-pages[b-qfggf51c23] {
        gap: 5px;
    }


    .page-button[b-qfggf51c23],
    .pagination-arrow[b-qfggf51c23] {
        width: 39px;
        height: 39px;

        border-radius: 10px;
    }


    .section-state[b-qfggf51c23] {
        padding: 21px 17px;

        text-align: center;
    }


    .section-state button[b-qfggf51c23] {
        width: 100%;

        margin-right: 0;
    }
}


@media (hover: none) {

    .category-card:hover[b-qfggf51c23],
    .product-card-link:hover
    .product-card[b-qfggf51c23],
    .page-button:hover[b-qfggf51c23],
    .pagination-arrow:hover[b-qfggf51c23] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .category-card[b-qfggf51c23],
    .selected-indicator[b-qfggf51c23],
    .categories-arrow[b-qfggf51c23],
    .product-card[b-qfggf51c23],
    .product-image img[b-qfggf51c23],
    .page-button[b-qfggf51c23],
    .pagination-arrow[b-qfggf51c23] {
        transition-duration:
            .01ms !important;
    }


    .results-enter[b-qfggf51c23],
    .skeleton-category-image[b-qfggf51c23],
    .skeleton-category-title[b-qfggf51c23],
    .skeleton-product-image[b-qfggf51c23],
    .skeleton-line[b-qfggf51c23] {
        animation-duration:
            .01ms !important;
    }
}











.page-button[b-qfggf51c23],
.pagination-arrow[b-qfggf51c23] {
    font-family: inherit;
    cursor: pointer;
}

.page-button:disabled[b-qfggf51c23],
.pagination-arrow:disabled[b-qfggf51c23] {
    cursor: default;
}

.page-button.active:disabled[b-qfggf51c23] {
    opacity: 1;
}

.pagination-arrow:disabled[b-qfggf51c23] {
    opacity: .42;
    pointer-events: none;
}
/* _content/PopProject.BlazorSSR/Components/Features/Support/Pages/Tickets/SupportTicketDetails.razor.rz.scp.css */
.support-ticket-details-page[b-4zqa0yvbjm] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-4zqa0yvbjm] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-4zqa0yvbjm] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-4zqa0yvbjm] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-4zqa0yvbjm] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-4zqa0yvbjm] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Hero
========================= */

.ticket-hero[b-4zqa0yvbjm] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.ticket-main[b-4zqa0yvbjm] {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-4zqa0yvbjm] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.ticket-main > div:last-child[b-4zqa0yvbjm] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.ticket-main strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.ticket-main span[b-4zqa0yvbjm] {
    overflow: hidden;

    color: var(--muted);

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-badges[b-4zqa0yvbjm] {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-4zqa0yvbjm] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-4zqa0yvbjm] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-4zqa0yvbjm] {
    overflow: hidden;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-card small[b-4zqa0yvbjm] {
    overflow: hidden;

    color: var(--muted);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-4zqa0yvbjm] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(285px, .8fr);

    gap: 18px;

    align-items: start;
}

.ticket-main-column[b-4zqa0yvbjm],
.ticket-side[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Cards
========================= */

.details-card[b-4zqa0yvbjm],
.conversation-card[b-4zqa0yvbjm],
.reply-card[b-4zqa0yvbjm],
.side-card[b-4zqa0yvbjm],
.closed-ticket-card[b-4zqa0yvbjm] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card[b-4zqa0yvbjm],
.reply-card[b-4zqa0yvbjm],
.side-card[b-4zqa0yvbjm] {
    padding: 20px;
}

.card-head[b-4zqa0yvbjm] {
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h2[b-4zqa0yvbjm],
.conversation-head h2[b-4zqa0yvbjm] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-head p[b-4zqa0yvbjm],
.conversation-head p[b-4zqa0yvbjm] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Details
========================= */

.details-grid[b-4zqa0yvbjm] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.detail-item[b-4zqa0yvbjm] {
    min-height: 61px;
    padding: 10px 11px;

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

    gap: 12px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.detail-item > span:first-child[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}

.detail-item strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Reference
========================= */

.reference-card[b-4zqa0yvbjm] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.reference-avatar[b-4zqa0yvbjm] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.reference-info[b-4zqa0yvbjm] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reference-info span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}

.reference-info strong[b-4zqa0yvbjm] {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-action[b-4zqa0yvbjm] {
    min-height: 34px;
    padding: 0 10px;

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

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Conversation
========================= */

.conversation-card[b-4zqa0yvbjm] {
    overflow: hidden;
}

.conversation-head[b-4zqa0yvbjm] {
    padding: 19px 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.messages-list[b-4zqa0yvbjm] {
    padding: 20px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    background: #fbfcfd;
}

.message-row[b-4zqa0yvbjm] {
    display: flex;
    align-items: flex-start;

    gap: 10px;
}

.message-avatar[b-4zqa0yvbjm] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.support-message .message-avatar[b-4zqa0yvbjm] {
    background: rgba(58, 125, 68, .09);
}

.message-content[b-4zqa0yvbjm] {
    width: min(720px, calc(100% - 48px));
    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fff;
}

.customer-message .message-content[b-4zqa0yvbjm] {
    border-color: #d1e9ff;

    background: #f9fcff;
}

.support-message .message-content[b-4zqa0yvbjm] {
    border-color: #d1fadf;

    background: #f9fdf9;
}

.message-head[b-4zqa0yvbjm] {
    margin-bottom: 9px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.message-head > div[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.message-head strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 9px;
}

.message-head span[b-4zqa0yvbjm],
.message-head small[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 7px;
}

.message-body p[b-4zqa0yvbjm] {
    margin: 0;

    color: var(--text);

    font-size: 10px;
    line-height: 2;
}


/* =========================
   Attachments
========================= */

.message-attachments[b-4zqa0yvbjm] {
    margin-top: 11px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.attachment-item[b-4zqa0yvbjm] {
    min-height: 46px;
    padding: 7px 9px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;

    font-family: inherit;

    cursor: pointer;
}

.attachment-icon[b-4zqa0yvbjm] {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

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

    border-radius: 7px;

    background: #f2f4f7;
    color: #475467;

    font-size: 8px;
    font-weight: 900;
}

.attachment-info[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.attachment-info strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 8px;
}

.attachment-info small[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 7px;
}


/* =========================
   Reply
========================= */

.field-group[b-4zqa0yvbjm] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group label[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label span[b-4zqa0yvbjm] {
    color: #b42318;
}

.field-group textarea[b-4zqa0yvbjm],
.field-group select[b-4zqa0yvbjm] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.field-group textarea[b-4zqa0yvbjm] {
    padding: 11px 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group select[b-4zqa0yvbjm] {
    min-height: 42px;

    padding: 0 11px;
}

.field-group textarea:focus[b-4zqa0yvbjm],
.field-group select:focus[b-4zqa0yvbjm] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}

.field-meta[b-4zqa0yvbjm] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.field-meta span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}

.counter[b-4zqa0yvbjm] {
    direction: ltr;

    white-space: nowrap;
}

.reply-options[b-4zqa0yvbjm] {
    margin-top: 14px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.reply-attachment[b-4zqa0yvbjm] {
    margin-top: 12px;
    padding: 11px 12px;

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

    gap: 12px;

    border: 1px dashed #d0d5dd;
    border-radius: 10px;

    background: #fbfcfd;
}

.reply-attachment > div[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.reply-attachment strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 9px;
}

.reply-attachment span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}

.attachment-button[b-4zqa0yvbjm] {
    min-height: 33px;
    padding: 0 10px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.reply-actions[b-4zqa0yvbjm] {
    margin-top: 14px;

    display: flex;
    justify-content: flex-end;
}

.primary-button[b-4zqa0yvbjm] {
    min-height: 40px;
    padding: 0 15px;

    border: 1px solid var(--green);
    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.primary-button:disabled[b-4zqa0yvbjm] {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================
   Form Messages
========================= */

.form-message[b-4zqa0yvbjm] {
    margin-top: 12px;
    padding: 11px 12px;

    border-radius: 9px;

    font-size: 9px;
}

.error-message[b-4zqa0yvbjm] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-4zqa0yvbjm] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
    color: #027a48;
}


/* =========================
   Closed
========================= */

.closed-ticket-card[b-4zqa0yvbjm] {
    padding: 19px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-color: #d1fadf;

    background: #f9fdf9;
}

.closed-icon[b-4zqa0yvbjm] {
    width: 41px;
    height: 41px;

    flex: 0 0 41px;

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

    border-radius: 10px;

    background: #ecfdf3;
    color: #027a48;

    font-size: 12px;
    font-weight: 900;
}

.closed-ticket-card > div:last-child[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.closed-ticket-card strong[b-4zqa0yvbjm] {
    color: #027a48;

    font-size: 10px;
}

.closed-ticket-card span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   User Side
========================= */

.side-card h3[b-4zqa0yvbjm] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.user-profile[b-4zqa0yvbjm] {
    padding: 11px;

    display: flex;
    align-items: center;

    gap: 9px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fbfcfd;
}

.user-avatar[b-4zqa0yvbjm] {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.user-profile > div:last-child[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.user-profile strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 9px;
}

.user-profile span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}

.ltr-value[b-4zqa0yvbjm] {
    direction: ltr;

    unicode-bidi: plaintext;
}

.side-details[b-4zqa0yvbjm] {
    margin-top: 10px;

    display: flex;
    flex-direction: column;
}

.side-details > div[b-4zqa0yvbjm] {
    min-height: 44px;

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

    gap: 10px;

    border-bottom: 1px solid #f0f2f4;
}

.side-details > div:last-child[b-4zqa0yvbjm] {
    border-bottom: 0;
}

.side-details span[b-4zqa0yvbjm] {
    color: var(--muted);

    font-size: 8px;
}

.side-details strong[b-4zqa0yvbjm] {
    color: var(--text);

    font-size: 8px;
}

.full-side-action[b-4zqa0yvbjm] {
    width: 100%;
    min-height: 37px;

    margin-top: 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Status Actions
========================= */

.status-actions[b-4zqa0yvbjm] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-4zqa0yvbjm] {
    width: 100%;
    min-height: 37px;
    padding: 0 10px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.side-action:disabled[b-4zqa0yvbjm] {
    opacity: .5;

    cursor: not-allowed;
}

.warning-side-action[b-4zqa0yvbjm] {
    border-color: #fdb022;

    color: #b54708;
}

.success-side-action[b-4zqa0yvbjm] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Warning
========================= */

.warning-card[b-4zqa0yvbjm] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-4zqa0yvbjm] {
    color: #b54708;
}

.warning-card p[b-4zqa0yvbjm] {
    margin: 0;

    color: #667085;

    font-size: 8px;
    line-height: 1.9;
}


/* =========================
   Badges
========================= */

.status-badge[b-4zqa0yvbjm],
.priority-badge[b-4zqa0yvbjm] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-4zqa0yvbjm],
.priority-badge.success[b-4zqa0yvbjm] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-4zqa0yvbjm],
.priority-badge.warning[b-4zqa0yvbjm] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-4zqa0yvbjm],
.priority-badge.info[b-4zqa0yvbjm] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-4zqa0yvbjm],
.priority-badge.danger[b-4zqa0yvbjm] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-4zqa0yvbjm],
.priority-badge.neutral[b-4zqa0yvbjm] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .ticket-layout[b-4zqa0yvbjm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .summary-grid[b-4zqa0yvbjm] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .page-head[b-4zqa0yvbjm],
    .ticket-hero[b-4zqa0yvbjm],
    .conversation-head[b-4zqa0yvbjm] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-4zqa0yvbjm] {
        width: 100%;
    }

    .details-grid[b-4zqa0yvbjm],
    .reply-options[b-4zqa0yvbjm] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {

    .summary-grid[b-4zqa0yvbjm] {
        grid-template-columns: 1fr;
    }

    .reference-card[b-4zqa0yvbjm],
    .reply-attachment[b-4zqa0yvbjm] {
        align-items: stretch;
        flex-direction: column;
    }

    .reference-action[b-4zqa0yvbjm],
    .attachment-button[b-4zqa0yvbjm],
    .primary-button[b-4zqa0yvbjm] {
        width: 100%;
    }

    .message-row[b-4zqa0yvbjm] {
        gap: 7px;
    }

    .message-avatar[b-4zqa0yvbjm] {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

    .message-content[b-4zqa0yvbjm] {
        width: calc(100% - 39px);
    }

    .message-head[b-4zqa0yvbjm] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Support/Pages/Tickets/SupportTickets.razor.rz.scp.css */
.support-tickets-page[b-cz9ytmmj0u] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-cz9ytmmj0u] {
    margin-bottom: 22px;
}

.page-head > div:first-child > span[b-cz9ytmmj0u] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-cz9ytmmj0u] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-cz9ytmmj0u] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}


/* =========================
   Summary
========================= */

.summary-grid[b-cz9ytmmj0u] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-cz9ytmmj0u] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-cz9ytmmj0u] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-cz9ytmmj0u] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-cz9ytmmj0u] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Filters
========================= */

.filters-card[b-cz9ytmmj0u] {
    margin-bottom: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(280px, 1.5fr)
        repeat(3, minmax(150px, .7fr));

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-cz9ytmmj0u],
.filters-card select[b-cz9ytmmj0u] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.filters-card input:focus[b-cz9ytmmj0u],
.filters-card select:focus[b-cz9ytmmj0u] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Table
========================= */

.tickets-card[b-cz9ytmmj0u] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.table-wrap[b-cz9ytmmj0u] {
    width: 100%;

    overflow-x: auto;
}

.tickets-table[b-cz9ytmmj0u] {
    width: 100%;
    min-width: 1250px;

    border-collapse: collapse;
}

.tickets-table th[b-cz9ytmmj0u],
.tickets-table td[b-cz9ytmmj0u] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.tickets-table th[b-cz9ytmmj0u] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.tickets-table td[b-cz9ytmmj0u] {
    color: var(--text);

    font-size: 10px;
}

.tickets-table tbody tr:last-child td[b-cz9ytmmj0u] {
    border-bottom: 0;
}

.tickets-table tbody tr:hover[b-cz9ytmmj0u] {
    background: #fcfdfd;
}


/* =========================
   Ticket
========================= */

.ticket-cell[b-cz9ytmmj0u] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.ticket-avatar[b-cz9ytmmj0u] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-cz9ytmmj0u] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.ticket-cell strong[b-cz9ytmmj0u] {
    color: var(--text);

    font-size: 10px;
}

.ticket-cell span[b-cz9ytmmj0u] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   User
========================= */

.user-cell[b-cz9ytmmj0u] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.user-cell strong[b-cz9ytmmj0u] {
    color: var(--text);

    font-size: 9px;
}

.user-cell span[b-cz9ytmmj0u] {
    color: var(--muted);

    font-size: 8px;
}

.ltr-value[b-cz9ytmmj0u] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Subject
========================= */

.subject-cell[b-cz9ytmmj0u] {
    max-width: 250px;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.subject-cell strong[b-cz9ytmmj0u] {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-cell span[b-cz9ytmmj0u] {
    overflow: hidden;

    color: var(--muted);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================
   Category
========================= */

.category-badge[b-cz9ytmmj0u] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    background: #f9fafb;
    color: #475467;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================
   Priority
========================= */

.priority-badge[b-cz9ytmmj0u] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.priority-badge.info[b-cz9ytmmj0u] {
    background: #eff8ff;
    color: #175cd3;
}

.priority-badge.warning[b-cz9ytmmj0u] {
    background: #fffaeb;
    color: #b54708;
}

.priority-badge.danger[b-cz9ytmmj0u] {
    background: #fff1f1;
    color: #b42318;
}

.priority-badge.neutral[b-cz9ytmmj0u] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Status
========================= */

.status-badge[b-cz9ytmmj0u] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.warning[b-cz9ytmmj0u] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-cz9ytmmj0u] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.success[b-cz9ytmmj0u] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.neutral[b-cz9ytmmj0u] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Reference
========================= */

.reference-value[b-cz9ytmmj0u] {
    color: var(--green);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.muted-value[b-cz9ytmmj0u] {
    color: var(--muted);
}


/* =========================
   Date
========================= */

.date-cell[b-cz9ytmmj0u] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.date-cell strong[b-cz9ytmmj0u] {
    color: var(--text);

    font-size: 9px;
}

.date-cell span[b-cz9ytmmj0u] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Action
========================= */

.action-link[b-cz9ytmmj0u] {
    min-height: 32px;
    padding: 0 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.action-link:hover[b-cz9ytmmj0u] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Empty
========================= */

.empty-state[b-cz9ytmmj0u] {
    min-height: 350px;
    padding: 40px 20px;

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

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-cz9ytmmj0u] {
    width: 64px;
    height: 64px;

    margin-bottom: 14px;

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

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}

.empty-state h2[b-cz9ytmmj0u] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.empty-state p[b-cz9ytmmj0u] {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .filters-card[b-cz9ytmmj0u] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card input[b-cz9ytmmj0u] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .summary-grid[b-cz9ytmmj0u] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .summary-grid[b-cz9ytmmj0u],
    .filters-card[b-cz9ytmmj0u] {
        grid-template-columns: 1fr;
    }

    .filters-card input[b-cz9ytmmj0u] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Support/Pages/Users/SupportUserDetails.razor.rz.scp.css */
.support-user-details-page[b-10lk25lajf] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-10lk25lajf] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-10lk25lajf] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-10lk25lajf] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-10lk25lajf] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-10lk25lajf] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Hero
========================= */

.user-hero[b-10lk25lajf] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.user-main[b-10lk25lajf] {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.user-avatar[b-10lk25lajf] {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    border-radius: 15px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.user-main > div:last-child[b-10lk25lajf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.name-row[b-10lk25lajf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.name-row strong[b-10lk25lajf] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.user-main > div:last-child > span[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}

.hero-meta[b-10lk25lajf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.hero-meta span[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}

.hero-badges[b-10lk25lajf] {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-10lk25lajf] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-10lk25lajf] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-10lk25lajf] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-10lk25lajf] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Layout
========================= */

.details-layout[b-10lk25lajf] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(285px, .8fr);

    gap: 18px;

    align-items: start;
}

.main-column[b-10lk25lajf],
.side-column[b-10lk25lajf] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Cards
========================= */

.details-card[b-10lk25lajf],
.side-card[b-10lk25lajf] {
    padding: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.card-head[b-10lk25lajf] {
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h2[b-10lk25lajf] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-head p[b-10lk25lajf] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}

.readonly-badge[b-10lk25lajf],
.count-badge[b-10lk25lajf] {
    min-height: 26px;
    padding: 0 8px;

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

    border-radius: 999px;

    background: #f2f4f7;
    color: #667085;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.card-link[b-10lk25lajf] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   User Details
========================= */

.details-grid[b-10lk25lajf] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.detail-item[b-10lk25lajf] {
    min-height: 60px;
    padding: 10px 11px;

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

    gap: 12px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.detail-item > span:first-child[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}

.detail-item strong[b-10lk25lajf] {
    overflow: hidden;

    color: var(--text);

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltr-value[b-10lk25lajf] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Pets
========================= */

.pets-grid[b-10lk25lajf] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.pet-card[b-10lk25lajf] {
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.pet-avatar[b-10lk25lajf] {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 11px;

    background: #f2f4f7;
    color: #475467;

    font-size: 9px;
    font-weight: 900;
}

.pet-avatar.dog[b-10lk25lajf] {
    background: #ecfdf3;
    color: #027a48;
}

.pet-avatar.cat[b-10lk25lajf] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-10lk25lajf] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-10lk25lajf] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-info[b-10lk25lajf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.pet-info strong[b-10lk25lajf] {
    color: var(--text);

    font-size: 10px;
}

.pet-info span[b-10lk25lajf] {
    overflow: hidden;

    color: var(--muted);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-info small[b-10lk25lajf] {
    color: var(--muted);

    font-size: 7px;
}


/* =========================
   History
========================= */

.history-list[b-10lk25lajf] {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.history-row[b-10lk25lajf] {
    min-height: 72px;
    padding: 11px 12px;

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

    gap: 15px;

    border: 1px solid #f0f2f4;
    border-radius: 10px;

    background: #fbfcfd;
}

.history-main[b-10lk25lajf] {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}

.history-icon[b-10lk25lajf] {
    width: 37px;
    height: 37px;

    flex: 0 0 37px;

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

    border-radius: 9px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 8px;
    font-weight: 900;
}

.history-main > div:last-child[b-10lk25lajf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.history-main strong[b-10lk25lajf] {
    overflow: hidden;

    color: var(--text);

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-main span[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}

.history-status[b-10lk25lajf] {
    flex: 0 0 auto;

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

    gap: 6px;
}

.history-status > a[b-10lk25lajf] {
    min-height: 29px;
    padding: 0 8px;

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

    border: 1px solid var(--soft);
    border-radius: 7px;

    color: var(--text);

    font-size: 7px;
    font-weight: 800;

    text-decoration: none;
}

.history-status > span:not(.status-badge)[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}

.readonly-label[b-10lk25lajf] {
    padding: 4px 6px;

    border-radius: 6px;

    background: #f2f4f7;
    color: #667085 !important;

    font-size: 7px !important;
}

.reference-code[b-10lk25lajf] {
    font-family: monospace;
}


/* =========================
   Inline Empty
========================= */

.inline-empty[b-10lk25lajf] {
    min-height: 90px;
    padding: 20px;

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

    border: 1px dashed #d0d5dd;
    border-radius: 10px;

    background: #fbfcfd;
    color: var(--muted);

    font-size: 9px;

    text-align: center;
}


/* =========================
   Side
========================= */

.side-card h3[b-10lk25lajf] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.support-overview[b-10lk25lajf] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;
}

.support-overview > div[b-10lk25lajf] {
    min-height: 67px;
    padding: 8px;

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

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.support-overview span[b-10lk25lajf] {
    color: var(--muted);

    font-size: 7px;

    text-align: center;
}

.support-overview strong[b-10lk25lajf] {
    color: var(--text);

    font-size: 14px;
}

.full-side-action[b-10lk25lajf] {
    width: 100%;
    min-height: 37px;

    margin-top: 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}

.primary-side-action[b-10lk25lajf] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.side-details[b-10lk25lajf] {
    display: flex;
    flex-direction: column;
}

.side-details > div[b-10lk25lajf] {
    min-height: 45px;

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

    gap: 10px;

    border-bottom: 1px solid #f0f2f4;
}

.side-details > div:last-child[b-10lk25lajf] {
    border-bottom: 0;
}

.side-details span[b-10lk25lajf] {
    color: var(--muted);

    font-size: 8px;
}

.side-details strong[b-10lk25lajf] {
    max-width: 150px;

    overflow: hidden;

    color: var(--text);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-actions[b-10lk25lajf] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-10lk25lajf] {
    width: 100%;
    min-height: 37px;
    padding: 0 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}

.warning-card[b-10lk25lajf] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-10lk25lajf] {
    color: #b54708;
}

.warning-card p[b-10lk25lajf] {
    margin: 0;

    color: #667085;

    font-size: 8px;
    line-height: 1.9;
}


/* =========================
   Text States
========================= */

.success-text[b-10lk25lajf] {
    color: #027a48 !important;
}

.warning-text[b-10lk25lajf] {
    color: #b54708 !important;
}

.danger-text[b-10lk25lajf] {
    color: #b42318 !important;
}

.neutral-text[b-10lk25lajf] {
    color: #667085 !important;
}


/* =========================
   Status Badges
========================= */

.status-badge[b-10lk25lajf] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-10lk25lajf] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-10lk25lajf] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-10lk25lajf] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-10lk25lajf] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-10lk25lajf] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .details-layout[b-10lk25lajf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {

    .summary-grid[b-10lk25lajf] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {

    .page-head[b-10lk25lajf],
    .user-hero[b-10lk25lajf],
    .card-head[b-10lk25lajf] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-10lk25lajf] {
        width: 100%;
    }

    .details-grid[b-10lk25lajf],
    .pets-grid[b-10lk25lajf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-10lk25lajf] {
        grid-template-columns: 1fr;
    }

    .history-row[b-10lk25lajf] {
        align-items: stretch;
        flex-direction: column;
    }

    .history-status[b-10lk25lajf] {
        justify-content: flex-start;
    }

    .support-overview[b-10lk25lajf] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Support/Pages/Users/SupportUsers.razor.rz.scp.css */
.support-users-page[b-bv1s3kffxa] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-bv1s3kffxa] {
    margin-bottom: 22px;
}

.page-head > div:first-child > span[b-bv1s3kffxa] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-bv1s3kffxa] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-bv1s3kffxa] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}


/* =========================
   Summary
========================= */

.summary-grid[b-bv1s3kffxa] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-bv1s3kffxa] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-bv1s3kffxa] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Filters
========================= */

.filters-card[b-bv1s3kffxa] {
    margin-bottom: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(290px, 1.5fr)
        minmax(180px, .7fr)
        minmax(160px, .6fr);

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-bv1s3kffxa],
.filters-card select[b-bv1s3kffxa] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.filters-card input:focus[b-bv1s3kffxa],
.filters-card select:focus[b-bv1s3kffxa] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Table
========================= */

.users-card[b-bv1s3kffxa] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.table-wrap[b-bv1s3kffxa] {
    width: 100%;

    overflow-x: auto;
}

.users-table[b-bv1s3kffxa] {
    width: 100%;
    min-width: 1250px;

    border-collapse: collapse;
}

.users-table th[b-bv1s3kffxa],
.users-table td[b-bv1s3kffxa] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.users-table th[b-bv1s3kffxa] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.users-table td[b-bv1s3kffxa] {
    color: var(--text);

    font-size: 10px;
}

.users-table tbody tr:last-child td[b-bv1s3kffxa] {
    border-bottom: 0;
}

.users-table tbody tr:hover[b-bv1s3kffxa] {
    background: #fcfdfd;
}


/* =========================
   User
========================= */

.user-cell[b-bv1s3kffxa] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.user-avatar[b-bv1s3kffxa] {
    width: 41px;
    height: 41px;

    flex: 0 0 41px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.user-cell > div:last-child[b-bv1s3kffxa] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.user-cell strong[b-bv1s3kffxa] {
    color: var(--text);

    font-size: 10px;
}

.user-cell span[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Contact
========================= */

.contact-cell[b-bv1s3kffxa] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.contact-cell strong[b-bv1s3kffxa] {
    color: var(--text);

    font-size: 9px;
}

.contact-cell span[b-bv1s3kffxa] {
    max-width: 170px;

    overflow: hidden;

    color: var(--muted);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltr-value[b-bv1s3kffxa] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Ticket Count
========================= */

.ticket-count-cell[b-bv1s3kffxa] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.ticket-count[b-bv1s3kffxa] {
    font-size: 14px;
    font-weight: 900;
}

.ticket-count.warning[b-bv1s3kffxa] {
    color: #b54708;
}

.ticket-count.danger[b-bv1s3kffxa] {
    color: #b42318;
}

.ticket-count.neutral[b-bv1s3kffxa] {
    color: #667085;
}

.ticket-count-cell span[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 7px;
}


/* =========================
   References
========================= */

.reference-cell[b-bv1s3kffxa] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reference-cell strong[b-bv1s3kffxa],
.reference-cell a[b-bv1s3kffxa] {
    color: var(--text);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.reference-cell a[b-bv1s3kffxa] {
    color: var(--green);
}

.reference-cell a:hover[b-bv1s3kffxa] {
    text-decoration: underline;
}

.reference-cell span[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 8px;
}

.muted-value[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Date
========================= */

.date-cell[b-bv1s3kffxa] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.date-cell strong[b-bv1s3kffxa] {
    color: var(--text);

    font-size: 9px;
}

.date-cell span[b-bv1s3kffxa] {
    color: var(--muted);

    font-size: 7px;
}


/* =========================
   Status
========================= */

.status-badge[b-bv1s3kffxa] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-bv1s3kffxa] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.neutral[b-bv1s3kffxa] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.action-link[b-bv1s3kffxa] {
    min-height: 32px;
    padding: 0 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.action-link:hover[b-bv1s3kffxa] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Empty
========================= */

.empty-state[b-bv1s3kffxa] {
    min-height: 350px;
    padding: 40px 20px;

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

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-bv1s3kffxa] {
    width: 64px;
    height: 64px;

    margin-bottom: 14px;

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

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}

.empty-state h2[b-bv1s3kffxa] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.empty-state p[b-bv1s3kffxa] {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .filters-card[b-bv1s3kffxa] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card input[b-bv1s3kffxa] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .summary-grid[b-bv1s3kffxa] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .summary-grid[b-bv1s3kffxa],
    .filters-card[b-bv1s3kffxa] {
        grid-template-columns: 1fr;
    }

    .filters-card input[b-bv1s3kffxa] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Addresses/CreateCustomerAddress.razor.rz.scp.css */
.create-address-page[b-yxd87ztjz3] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-yxd87ztjz3] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-yxd87ztjz3] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-yxd87ztjz3] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-yxd87ztjz3] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-yxd87ztjz3] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 16px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-yxd87ztjz3] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Layout
========================= */

.form-layout[b-yxd87ztjz3] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .8fr);

    gap: 18px;

    align-items: start;
}

.form-card[b-yxd87ztjz3],
.side-card[b-yxd87ztjz3] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card[b-yxd87ztjz3] {
    overflow: hidden;
}

.form-side[b-yxd87ztjz3] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Sections
========================= */

.form-section[b-yxd87ztjz3] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-yxd87ztjz3] {
    margin-bottom: 18px;
}

.section-head h2[b-yxd87ztjz3] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.section-head p[b-yxd87ztjz3] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================
   Form
========================= */

.form-grid[b-yxd87ztjz3] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-yxd87ztjz3] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-yxd87ztjz3] {
    grid-column: 1 / -1;
}

.field-group label[b-yxd87ztjz3] {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}

.field-group label > span[b-yxd87ztjz3] {
    color: #b42318;
}

.field-group input[b-yxd87ztjz3],
.field-group select[b-yxd87ztjz3],
.field-group textarea[b-yxd87ztjz3] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group input[b-yxd87ztjz3],
.field-group select[b-yxd87ztjz3] {
    min-height: 43px;

    padding: 0 12px;
}

.field-group textarea[b-yxd87ztjz3] {
    padding: 11px 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-yxd87ztjz3],
.field-group select:focus[b-yxd87ztjz3],
.field-group textarea:focus[b-yxd87ztjz3] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Options
========================= */

.option-list[b-yxd87ztjz3] {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 9px;
}

.option-row[b-yxd87ztjz3] {
    min-height: 70px;
    padding: 12px 14px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;

    cursor: pointer;
}

.option-row > div[b-yxd87ztjz3] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.option-row strong[b-yxd87ztjz3] {
    color: var(--text);

    font-size: 15px;
}

.option-row span[b-yxd87ztjz3] {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}

.option-row input[b-yxd87ztjz3] {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    accent-color: var(--green);
}


/* =========================
   Messages
========================= */

.form-message[b-yxd87ztjz3] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 11px;

    font-size: 15px;
    line-height: 1.8;
}

.error-message[b-yxd87ztjz3] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-yxd87ztjz3] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-yxd87ztjz3] {
    color: #027a48;

    font-size: 15px;
}

.success-message span[b-yxd87ztjz3] {
    color: #475467;

    font-size: 14px;
}


/* =========================
   Actions
========================= */

.form-actions[b-yxd87ztjz3] {
    padding: 18px 22px;

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

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-yxd87ztjz3],
.secondary-button[b-yxd87ztjz3] {
    min-height: 41px;
    padding: 0 16px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-yxd87ztjz3] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:hover[b-yxd87ztjz3] {
    filter: brightness(.96);
}

.primary-button:disabled[b-yxd87ztjz3] {
    opacity: .5;

    cursor: not-allowed;
}

.secondary-button[b-yxd87ztjz3] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.secondary-button:hover[b-yxd87ztjz3] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Side Cards
========================= */

.side-card[b-yxd87ztjz3] {
    padding: 19px;
}

.side-card h3[b-yxd87ztjz3] {
    margin: 0 0 10px;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.side-card > p[b-yxd87ztjz3] {
    margin: 0;

    color: var(--muted);

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

.warning-card[b-yxd87ztjz3] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-yxd87ztjz3] {
    color: #b54708;
}


/* =========================
   Tips
========================= */

.tips-list[b-yxd87ztjz3] {
    display: flex;
    flex-direction: column;

    gap: 13px;
}

.tips-list > div[b-yxd87ztjz3] {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}

.tips-list span[b-yxd87ztjz3] {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

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

    border-radius: 7px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.tips-list p[b-yxd87ztjz3] {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.8;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .form-layout[b-yxd87ztjz3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .page-head[b-yxd87ztjz3] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-yxd87ztjz3] {
        width: 100%;
    }

    .form-grid[b-yxd87ztjz3] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-yxd87ztjz3] {
        grid-column: auto;
    }
}

@media (max-width: 500px) {

    .form-section[b-yxd87ztjz3] {
        padding: 18px;
    }

    .option-row[b-yxd87ztjz3] {
        align-items: flex-start;
    }

    .form-actions[b-yxd87ztjz3] {
        padding: 16px 18px;

        align-items: stretch;
        flex-direction: column-reverse;
    }

    .primary-button[b-yxd87ztjz3],
    .secondary-button[b-yxd87ztjz3] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Addresses/CustomerAddresses.razor.rz.scp.css */
.customer-addresses-page[b-lv2oajx9yf] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-lv2oajx9yf] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-lv2oajx9yf] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-lv2oajx9yf] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-lv2oajx9yf] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.create-button[b-lv2oajx9yf] {
    min-height: 43px;
    padding: 0 15px;

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

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.create-button:hover[b-lv2oajx9yf] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Summary
========================= */

.summary-grid[b-lv2oajx9yf] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-lv2oajx9yf] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-lv2oajx9yf] {
    color: var(--muted);

    font-size: 15px;
}

.summary-card strong[b-lv2oajx9yf] {
    overflow: hidden;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-card small[b-lv2oajx9yf] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Filters
========================= */

.filters-card[b-lv2oajx9yf] {
    margin-bottom: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        180px;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-lv2oajx9yf],
.filters-card select[b-lv2oajx9yf] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.filters-card input:focus[b-lv2oajx9yf],
.filters-card select:focus[b-lv2oajx9yf] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


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

.addresses-grid[b-lv2oajx9yf] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.address-card[b-lv2oajx9yf] {
    padding: 18px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.address-card.default[b-lv2oajx9yf] {
    border-color: rgba(58, 125, 68, .25);

    box-shadow:
        inset 0 3px 0 rgba(58, 125, 68, .8);
}

.address-card.inactive[b-lv2oajx9yf] {
    opacity: .68;

    background: #fcfcfd;
}

.address-card:hover[b-lv2oajx9yf] {
    border-color: rgba(58, 125, 68, .25);
}


/* =========================
   Address Header
========================= */

.address-card-head[b-lv2oajx9yf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
}

.address-title-area[b-lv2oajx9yf] {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}

.address-avatar[b-lv2oajx9yf] {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 12px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.address-title-area > div:last-child[b-lv2oajx9yf] {
    min-width: 0;
}

.title-row[b-lv2oajx9yf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.title-row h2[b-lv2oajx9yf] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.address-title-area > div:last-child > span[b-lv2oajx9yf] {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Receiver
========================= */

.receiver-box[b-lv2oajx9yf] {
    margin-top: 15px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.receiver-box > div[b-lv2oajx9yf] {
    min-height: 61px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.receiver-box span[b-lv2oajx9yf] {
    color: var(--muted);

    font-size: 16px;
}

.receiver-box strong[b-lv2oajx9yf] {
    color: var(--text);

    font-size: 17px;
}


/* =========================
   Address
========================= */

.address-content[b-lv2oajx9yf] {
    margin-top: 9px;
    padding: 11px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.address-content > span[b-lv2oajx9yf] {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 16px;
}

.address-content p[b-lv2oajx9yf] {
    margin: 0;

    color: var(--text);

    font-size: 17px;
    line-height: 1.9;
}


/* =========================
   Meta
========================= */

.address-meta[b-lv2oajx9yf] {
    margin-top: 9px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;
}

.address-meta > div[b-lv2oajx9yf] {
    min-height: 56px;
    padding: 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fff;
}

.address-meta span[b-lv2oajx9yf] {
    color: var(--muted);

    font-size: 16px;
}

.address-meta strong[b-lv2oajx9yf] {
    overflow: hidden;

    color: var(--text);

    font-size: 17px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ltr-value[b-lv2oajx9yf] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Delivery Note
========================= */

.delivery-note[b-lv2oajx9yf] {
    margin-top: 9px;
    padding: 10px 11px;

    border: 1px solid #fedf89;
    border-radius: 9px;

    background: #fffcf5;
}

.delivery-note span[b-lv2oajx9yf] {
    display: block;

    margin-bottom: 3px;

    color: #b54708;

    font-size: 16px;
    font-weight: 800;
}

.delivery-note p[b-lv2oajx9yf] {
    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================
   Actions
========================= */

.address-actions[b-lv2oajx9yf] {
    margin-top: 14px;
    padding-top: 13px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    border-top: 1px solid #f0f2f4;
}

.action-button[b-lv2oajx9yf] {
    min-height: 34px;
    padding: 0 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.action-button:hover[b-lv2oajx9yf] {
    border-color: var(--green);

    color: var(--green);
}

.action-button:disabled[b-lv2oajx9yf] {
    opacity: .4;

    cursor: not-allowed;
}

.primary-outline[b-lv2oajx9yf] {
    border-color: var(--green);

    color: var(--green);
}

.danger-outline[b-lv2oajx9yf] {
    border-color: #fda29b;

    color: #b42318;
}


/* =========================
   Status
========================= */

.status-badge[b-lv2oajx9yf] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-lv2oajx9yf] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.neutral[b-lv2oajx9yf] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Empty
========================= */

.empty-state[b-lv2oajx9yf] {
    min-height: 360px;
    padding: 40px 20px;

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

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-lv2oajx9yf] {
    width: 64px;
    height: 64px;

    margin-bottom: 14px;

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

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

.empty-state h2[b-lv2oajx9yf] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.empty-state p[b-lv2oajx9yf] {
    max-width: 480px;

    margin: 7px 0 16px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.9;
}

.empty-action[b-lv2oajx9yf] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .summary-grid[b-lv2oajx9yf] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .addresses-grid[b-lv2oajx9yf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .page-head[b-lv2oajx9yf] {
        align-items: stretch;
        flex-direction: column;
    }

    .create-button[b-lv2oajx9yf] {
        width: 100%;
    }

    .summary-grid[b-lv2oajx9yf],
    .filters-card[b-lv2oajx9yf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {

    .receiver-box[b-lv2oajx9yf],
    .address-meta[b-lv2oajx9yf] {
        grid-template-columns: 1fr;
    }

    .address-card-head[b-lv2oajx9yf] {
        flex-direction: column;
    }

    .address-actions[b-lv2oajx9yf] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-lv2oajx9yf] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Addresses/EditCustomerAddress.razor.rz.scp.css */
.edit-address-page[b-dhd5qorlm3] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-dhd5qorlm3] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-dhd5qorlm3] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-dhd5qorlm3] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-dhd5qorlm3] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
}

.back-button[b-dhd5qorlm3] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 16px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-dhd5qorlm3] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Summary
========================= */

.address-summary[b-dhd5qorlm3] {
    margin-bottom: 18px;
    padding: 17px 19px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.address-summary-main[b-dhd5qorlm3] {
    display: flex;
    align-items: center;

    gap: 11px;
}

.address-avatar[b-dhd5qorlm3] {
    width: 49px;
    height: 49px;

    flex: 0 0 49px;

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

    border-radius: 13px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.address-summary-main > div:last-child[b-dhd5qorlm3] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.address-summary-main strong[b-dhd5qorlm3] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.address-summary-main span[b-dhd5qorlm3] {
    color: var(--muted);

    font-size: 13px;
}

.summary-badges[b-dhd5qorlm3] {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Layout
========================= */

.form-layout[b-dhd5qorlm3] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .8fr);

    gap: 18px;

    align-items: start;
}

.form-card[b-dhd5qorlm3],
.side-card[b-dhd5qorlm3] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card[b-dhd5qorlm3] {
    overflow: hidden;
}

.form-side[b-dhd5qorlm3] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Sections
========================= */

.form-section[b-dhd5qorlm3] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-dhd5qorlm3] {
    margin-bottom: 18px;
}

.section-head h2[b-dhd5qorlm3] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.section-head p[b-dhd5qorlm3] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================
   Form
========================= */

.form-grid[b-dhd5qorlm3] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-dhd5qorlm3] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-dhd5qorlm3] {
    grid-column: 1 / -1;
}

.field-group label[b-dhd5qorlm3] {
    color: var(--text);

    font-size: 15px;
    font-weight: 800;
}

.field-group label > span[b-dhd5qorlm3] {
    color: #b42318;
}

.field-group input[b-dhd5qorlm3],
.field-group select[b-dhd5qorlm3],
.field-group textarea[b-dhd5qorlm3] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;

    outline: none;
}

.field-group input[b-dhd5qorlm3],
.field-group select[b-dhd5qorlm3] {
    min-height: 43px;

    padding: 0 12px;
}

.field-group textarea[b-dhd5qorlm3] {
    padding: 11px 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-dhd5qorlm3],
.field-group select:focus[b-dhd5qorlm3],
.field-group textarea:focus[b-dhd5qorlm3] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Options
========================= */

.option-list[b-dhd5qorlm3] {
    margin-top: 18px;

    display: flex;
    flex-direction: column;

    gap: 9px;
}

.option-row[b-dhd5qorlm3] {
    min-height: 70px;
    padding: 12px 14px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;

    cursor: pointer;
}

.option-row > div[b-dhd5qorlm3] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.option-row strong[b-dhd5qorlm3] {
    color: var(--text);

    font-size: 15px;
}

.option-row span[b-dhd5qorlm3] {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.7;
}

.option-row input[b-dhd5qorlm3] {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    accent-color: var(--green);
}

.disabled-option[b-dhd5qorlm3] {
    opacity: .65;

    cursor: not-allowed;
}


/* =========================
   Messages
========================= */

.form-message[b-dhd5qorlm3] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 11px;

    font-size: 15px;
}

.error-message[b-dhd5qorlm3] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-dhd5qorlm3] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-dhd5qorlm3] {
    color: #027a48;

    font-size: 15px;
}

.success-message span[b-dhd5qorlm3] {
    color: #475467;

    font-size: 13px;
}


/* =========================
   Actions
========================= */

.form-actions[b-dhd5qorlm3] {
    padding: 18px 22px;

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

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-dhd5qorlm3],
.secondary-button[b-dhd5qorlm3] {
    min-height: 41px;
    padding: 0 16px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-dhd5qorlm3] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:disabled[b-dhd5qorlm3] {
    opacity: .5;

    cursor: not-allowed;
}

.secondary-button[b-dhd5qorlm3] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}


/* =========================
   Side
========================= */

.side-card[b-dhd5qorlm3] {
    padding: 19px;
}

.side-card h3[b-dhd5qorlm3] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.side-card > p[b-dhd5qorlm3] {
    margin: 0;

    color: var(--muted);

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

.side-details[b-dhd5qorlm3] {
    display: flex;
    flex-direction: column;
}

.side-details > div[b-dhd5qorlm3] {
    min-height: 46px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f2f4;
}

.side-details > div:last-child[b-dhd5qorlm3] {
    border-bottom: 0;
}

.side-details span[b-dhd5qorlm3] {
    color: var(--muted);

    font-size: 13px;
}

.side-details strong[b-dhd5qorlm3] {
    color: var(--text);

    font-size: 14px;
}

.warning-card[b-dhd5qorlm3] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-dhd5qorlm3] {
    color: #b54708;
}


/* =========================
   Status
========================= */

.status-badge[b-dhd5qorlm3] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-dhd5qorlm3] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.neutral[b-dhd5qorlm3] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .form-layout[b-dhd5qorlm3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .page-head[b-dhd5qorlm3],
    .address-summary[b-dhd5qorlm3] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-dhd5qorlm3] {
        width: 100%;
    }

    .form-grid[b-dhd5qorlm3] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-dhd5qorlm3] {
        grid-column: auto;
    }
}

@media (max-width: 500px) {

    .form-section[b-dhd5qorlm3] {
        padding: 18px;
    }

    .option-row[b-dhd5qorlm3] {
        align-items: flex-start;
    }

    .form-actions[b-dhd5qorlm3] {
        padding: 16px 18px;

        align-items: stretch;
        flex-direction: column-reverse;
    }

    .primary-button[b-dhd5qorlm3],
    .secondary-button[b-dhd5qorlm3] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Cart/CustomerCart.razor.rz.scp.css */
.customer-cart-page[b-mtevdey2pc] {
    width: 100%;
    color: var(--text, #475467);
    font-size: 17px;
}

.customer-cart-page *[b-mtevdey2pc] {
    box-sizing: border-box;
}

.page-head[b-mtevdey2pc],
.card-head[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.page-head[b-mtevdey2pc] {
    margin-bottom: 24px;
}

.page-head > div > span[b-mtevdey2pc] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-mtevdey2pc] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-mtevdey2pc],
.card-head p[b-mtevdey2pc] {
    margin: 6px 0 0;
    color: var(--muted, #667085);
    font-size: 18px;
    line-height: 1.9;
}

.head-actions[b-mtevdey2pc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.cart-layout[b-mtevdey2pc] {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(310px, 1fr);
    align-items: start;
    gap: 20px;
}

.cart-main[b-mtevdey2pc],
.cart-side[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.cart-card[b-mtevdey2pc],
.summary-card[b-mtevdey2pc],
.info-card[b-mtevdey2pc],
.state-card[b-mtevdey2pc] {
    min-width: 0;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;
    background: #fff;
}

.cart-card[b-mtevdey2pc] {
    overflow: hidden;
}

.card-head[b-mtevdey2pc] {
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid #eef0f3;
}

.card-head h2[b-mtevdey2pc],
.summary-card h2[b-mtevdey2pc],
.info-card h2[b-mtevdey2pc] {
    margin: 0;
    font-size: 21px;
    font-weight: 900;
}

.cart-item[b-mtevdey2pc] {
    padding: 24px 22px;
    border-bottom: 1px solid #eef0f3;
}

.cart-item:last-child[b-mtevdey2pc] {
    border-bottom: 0;
}

.item-heading[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.item-heading > div[b-mtevdey2pc] {
    min-width: 0;
}

.item-type[b-mtevdey2pc] {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    background: #eef6f0;
    color: #3a7d44;
    font-size: 15px;
    font-weight: 800;
}

.item-heading h3[b-mtevdey2pc] {
    margin: 12px 0 18px;
    font-size: 19px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.visit-details[b-mtevdey2pc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.visit-details > div[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 15px;
    border: 1px solid #e9edf0;
    border-radius: 12px;
    background: #fbfcfd;
}

.visit-details span[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.visit-details strong[b-mtevdey2pc] {
    font-size: 17px;
    line-height: 1.8;
}

.reservation-note[b-mtevdey2pc],
.item-warning[b-mtevdey2pc],
.quote-note[b-mtevdey2pc] {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 11px;
    font-size: 16px;
    line-height: 1.9;
}

.reservation-note[b-mtevdey2pc] {
    background: #f0f6fc;
    color: #285e8e;
}

.item-warning[b-mtevdey2pc] {
    border: 1px solid #fedf89;
    background: #fffcf5;
    color: #875408;
}

.quote-note[b-mtevdey2pc] {
    border: 1px solid #e4e7ec;
    background: #fbfcfd;
}

.quote-note strong[b-mtevdey2pc] {
    font-size: 17px;
}

.quote-note p[b-mtevdey2pc] {
    margin: 7px 0 0;
    color: var(--muted, #667085);
}

.item-footer[b-mtevdey2pc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef0f3;
}

.item-quantity[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 16px;
}

.item-amount[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.item-amount > span[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.item-amount > strong[b-mtevdey2pc] {
    color: var(--green, #3a7d44);
    font-size: 21px;
}

.delivery-body[b-mtevdey2pc],
.pharmacy-delivery[b-mtevdey2pc] {
    padding: 24px 22px;
}

.pharmacy-delivery + .pharmacy-delivery[b-mtevdey2pc] {
    border-top: 1px solid #eef0f3;
}

.pharmacy-heading[b-mtevdey2pc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.pharmacy-icon[b-mtevdey2pc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 13px;
    background: #eef6f0;
    color: #3a7d44;
    font-size: 28px;
    font-weight: 800;
}

.pharmacy-heading > div[b-mtevdey2pc] {
    min-width: 0;
}

.pharmacy-heading h3[b-mtevdey2pc] {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.8;
}

.pharmacy-heading > div > span[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 16px;
}

.delivery-field[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    margin-top: 20px;
}

.delivery-field label[b-mtevdey2pc] {
    font-size: 17px;
    font-weight: 800;
}

.delivery-field select[b-mtevdey2pc] {
    width: 100%;
    min-width: 0;
    min-height: 49px;
    padding: 10px 12px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 17px;
    line-height: 1.8;
}

.delivery-field small[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.9;
}

.courier-notice[b-mtevdey2pc],
.pickup-preview[b-mtevdey2pc],
.address-preview[b-mtevdey2pc] {
    margin-top: 18px;
    padding: 17px;
    border-radius: 12px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.courier-notice[b-mtevdey2pc] {
    border: 1px solid #fedf89;
    background: #fffcf5;
    color: #875408;
}

.courier-notice strong[b-mtevdey2pc],
.pickup-preview strong[b-mtevdey2pc],
.address-preview strong[b-mtevdey2pc] {
    font-size: 17px;
}

.courier-notice p[b-mtevdey2pc],
.pickup-preview p[b-mtevdey2pc] {
    margin: 7px 0 0;
    font-size: 17px;
    line-height: 1.9;
}

.address-preview[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #e4e7ec;
    background: #fbfcfd;
}

.address-preview span[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 16px;
}

.pickup-preview[b-mtevdey2pc] {
    border: 1px solid #cde4d1;
    background: #f3faf4;
}

.pickup-preview > span[b-mtevdey2pc] {
    display: block;
    margin-top: 12px;
    color: #47724e;
    font-size: 16px;
}

.inline-link[b-mtevdey2pc] {
    display: inline-flex;
    margin-top: 14px;
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
    text-underline-offset: 5px;
}

.summary-card[b-mtevdey2pc],
.info-card[b-mtevdey2pc] {
    padding: 22px;
}

.summary-list[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 25px;
}

.summary-list > div[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    font-size: 16px;
    line-height: 1.8;
}

.summary-list > div > span[b-mtevdey2pc] {
    color: var(--muted, #667085);
}

.summary-list strong[b-mtevdey2pc] {
    text-align: left;
    font-size: 16px;
}

.discount-value[b-mtevdey2pc] {
    color: #027a48;
}

.final-total[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #e4e7ec;
}

.final-total > span[b-mtevdey2pc] {
    font-size: 18px;
    font-weight: 800;
}

.final-total > strong[b-mtevdey2pc] {
    color: var(--green, #3a7d44);
    font-size: 27px;
    font-weight: 900;
}

.summary-note[b-mtevdey2pc] {
    margin: 16px 0 0;
    padding: 12px;
    border-radius: 10px;
    background: #fffcf5;
    color: #875408;
    font-size: 15px;
    line-height: 1.9;
}

.terms-box[b-mtevdey2pc] {
    margin-top: 24px;
    padding: 14px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fbfcfd;
}

.terms-box summary[b-mtevdey2pc] {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.9;
    cursor: pointer;
}

.terms-content p[b-mtevdey2pc],
.info-card p[b-mtevdey2pc] {
    color: var(--muted, #667085);
    font-size: 17px;
    line-height: 2;
}

.terms-check[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.9;
    cursor: pointer;
}

.terms-check input[b-mtevdey2pc] {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 5px;
    accent-color: var(--green, #3a7d44);
}

.courier-check[b-mtevdey2pc] {
    padding: 15px;
    border: 1px solid #e4e7ec;
    border-radius: 11px;
    background: #fbfcfd;
}

.primary-button[b-mtevdey2pc],
.secondary-button[b-mtevdey2pc],
.remove-button[b-mtevdey2pc],
.checkout-button[b-mtevdey2pc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.primary-button[b-mtevdey2pc],
.checkout-button[b-mtevdey2pc] {
    background: var(--green, #3a7d44);
    color: #fff;
}

.secondary-button[b-mtevdey2pc] {
    border-color: var(--soft, #e4e7ec);
    background: #fff;
    color: var(--text, #475467);
}

.secondary-button:hover[b-mtevdey2pc] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.remove-button[b-mtevdey2pc] {
    min-height: 38px;
    padding: 7px 13px;
    flex-shrink: 0;
    border-color: #fee4e2;
    background: #fff5f4;
    color: #b42318;
}

.checkout-button[b-mtevdey2pc] {
    width: 100%;
    min-height: 52px;
    margin-top: 22px;
    font-size: 18px;
}

button:disabled[b-mtevdey2pc],
select:disabled[b-mtevdey2pc] {
    opacity: .55;
    cursor: not-allowed;
}

button:focus-visible[b-mtevdey2pc],
a:focus-visible[b-mtevdey2pc],
input:focus-visible[b-mtevdey2pc],
select:focus-visible[b-mtevdey2pc],
summary:focus-visible[b-mtevdey2pc] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.checkout-status[b-mtevdey2pc] {
    margin: 12px 0 0;
    color: var(--muted, #667085);
    font-size: 15px;
    text-align: center;
    line-height: 1.9;
}

.message[b-mtevdey2pc] {
    padding: 15px 18px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.9;
}

.error-message[b-mtevdey2pc] {
    border: 1px solid #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.error-text[b-mtevdey2pc] {
    color: #b42318;
}

.state-card[b-mtevdey2pc] {
    padding: 36px 24px;
    text-align: center;
    font-size: 18px;
    line-height: 2;
}

.empty-state[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 340px;
}

.empty-state h2[b-mtevdey2pc] {
    margin: 0;
    font-size: 24px;
}

.empty-state p[b-mtevdey2pc] {
    margin: 0;
    color: var(--muted, #667085);
    font-size: 18px;
}

.empty-icon[b-mtevdey2pc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: #eef6f0;
    color: #3a7d44;
    font-size: 36px;
}

@media (max-width: 1100px) {
    .cart-layout[b-mtevdey2pc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .page-head[b-mtevdey2pc],
    .card-head[b-mtevdey2pc] {
        flex-direction: column;
        align-items: stretch;
    }

    .head-actions > *[b-mtevdey2pc] {
        flex: 1;
    }

    .visit-details[b-mtevdey2pc] {
        grid-template-columns: 1fr;
    }

    .cart-item[b-mtevdey2pc],
    .card-head[b-mtevdey2pc],
    .summary-card[b-mtevdey2pc],
    .info-card[b-mtevdey2pc],
    .delivery-body[b-mtevdey2pc],
    .pharmacy-delivery[b-mtevdey2pc] {
        padding: 18px;
    }

    .item-heading[b-mtevdey2pc] {
        gap: 10px;
    }

    .item-footer[b-mtevdey2pc] {
        align-items: flex-start;
        flex-direction: column;
    }

    .item-amount[b-mtevdey2pc] {
        align-items: flex-start;
    }

    .summary-list > div[b-mtevdey2pc] {
        flex-wrap: wrap;
    }
}

.catalog-line-info[b-mtevdey2pc],
.food-weight-summary[b-mtevdey2pc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fbfcfd;
    font-size: 16px;
    line-height: 1.9;
}

.catalog-line-info > span[b-mtevdey2pc],
.food-weight-summary > span[b-mtevdey2pc] {
    color: var(--muted, #667085);
}

.catalog-line-info strong[b-mtevdey2pc],
.food-weight-summary strong[b-mtevdey2pc] {
    color: var(--text, #475467);
    font-size: 17px;
}

.food-weight-summary[b-mtevdey2pc] {
    margin: 22px 22px 0;
}

.heavy-food-banner[b-mtevdey2pc],
.coordination-notice[b-mtevdey2pc] {
    padding: 18px;
    border: 1px solid #fedf89;
    border-radius: 13px;
    background: #fffcf5;
    color: #875408;
    line-height: 2;
}

.heavy-food-banner[b-mtevdey2pc] {
    margin: 18px 22px 0;
}

.coordination-notice[b-mtevdey2pc] {
    margin-top: 20px;
}

.heavy-food-banner strong[b-mtevdey2pc],
.coordination-notice strong[b-mtevdey2pc] {
    display: block;
    font-size: 18px;
}

.heavy-food-banner p[b-mtevdey2pc],
.coordination-notice p[b-mtevdey2pc] {
    margin: 8px 0 0;
    font-size: 17px;
}

.combine-choice[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #cde4d1;
    border-radius: 13px;
    background: #f3faf4;
    cursor: pointer;
}

.combine-choice input[b-mtevdey2pc] {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    margin: 5px 0 0;
    accent-color: var(--green, #3a7d44);
}

.combine-choice > span[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.combine-choice strong[b-mtevdey2pc] {
    color: #286b35;
    font-size: 18px;
    line-height: 1.8;
}

.combine-choice small[b-mtevdey2pc] {
    color: #52685a;
    font-size: 16px;
    line-height: 2;
}

.delivery-group[b-mtevdey2pc] {
    min-width: 0;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fff;
}

.delivery-group-head[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.delivery-group-head > div[b-mtevdey2pc] {
    min-width: 0;
}

.delivery-group-head h4[b-mtevdey2pc] {
    margin: 10px 0 0;
    color: var(--text, #475467);
    font-size: 20px;
    line-height: 1.9;
}

.delivery-group-head > strong[b-mtevdey2pc] {
    color: var(--green, #3a7d44);
    font-size: 19px;
    line-height: 1.9;
}

.delivery-group-tag[b-mtevdey2pc] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #eef6f0;
    color: #3a7d44;
    font-size: 15px;
    font-weight: 800;
}

.delivery-group-items[b-mtevdey2pc] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.delivery-group-items li[b-mtevdey2pc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f3;
    font-size: 17px;
    line-height: 1.9;
}

.delivery-group-items li > span[b-mtevdey2pc] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.delivery-group-items li > strong[b-mtevdey2pc] {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--muted, #667085);
}

.group-weight[b-mtevdey2pc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0 0;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 1.9;
}

.group-weight strong[b-mtevdey2pc] {
    color: var(--text, #475467);
}

.group-loading[b-mtevdey2pc] {
    margin: 18px 22px 0;
    padding: 14px 16px;
    border-radius: 11px;
    background: #eff6ff;
    color: #285e8e;
    font-size: 17px;
    line-height: 1.9;
}

@media (max-width: 650px) {
    .food-weight-summary[b-mtevdey2pc],
    .heavy-food-banner[b-mtevdey2pc],
    .group-loading[b-mtevdey2pc] {
        margin-right: 18px;
        margin-left: 18px;
    }

    .delivery-group[b-mtevdey2pc] {
        padding: 16px;
    }

    .delivery-group-head[b-mtevdey2pc] {
        flex-direction: column;
        gap: 10px;
    }

    .combine-choice[b-mtevdey2pc] {
        padding: 15px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Cart/DemoGatewayForm.razor.rz.scp.css */
.demo-gateway[b-nseigghya2] {
    padding: 36px 18px 50px;
    background:
        radial-gradient(
            ellipse at top right,
            rgba(58, 125, 68, .1),
            transparent 60%
        ),
        #f4f7fa;
    color: var(--text);
}

.demo-shell[b-nseigghya2] {
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid var(--soft);
    border-radius: 24px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(24, 46, 36, .06);
}

.demo-header[b-nseigghya2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--soft);
}

.demo-brand[b-nseigghya2] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.demo-brand img[b-nseigghya2] {
    width: 74px;
    height: 64px;
    object-fit: contain;
}

.demo-brand > div[b-nseigghya2] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.demo-brand strong[b-nseigghya2] {
    font-size: 21px;
    font-weight: 900;
}

.demo-brand span[b-nseigghya2] {
    color: var(--muted);
    font-size: 13px;
}

.demo-test-badge[b-nseigghya2] {
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff3d6;
    color: #875700;
    font-size: 13px;
    font-weight: 800;
}

.demo-warning[b-nseigghya2] {
    margin: 24px 28px 0;
    padding: 16px 20px;
    border: 1px solid #f5d795;
    border-radius: 14px;
    background: #fffbeb;
    color: #805600;
    font-size: 14px;
    line-height: 2;
}

.demo-warning strong[b-nseigghya2] {
    display: block;
    font-size: 16px;
}

.demo-layout[b-nseigghya2] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 26px;
    padding: 28px;
}

.demo-order[b-nseigghya2] {
    align-self: start;
    padding: 24px;
    border: 1px solid #dce9df;
    border-radius: 18px;
    background: #f5faf6;
}

.demo-section-label[b-nseigghya2] {
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
}

.demo-order h2[b-nseigghya2],
.demo-form-head h2[b-nseigghya2] {
    margin: 12px 0;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.8;
}

.demo-order > p[b-nseigghya2] {
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
    overflow-wrap: anywhere;
}

.demo-order-row[b-nseigghya2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 0;
    border-bottom: 1px solid #dce9df;
    font-size: 13px;
}

.demo-order-row > span[b-nseigghya2] {
    color: var(--muted);
}

.demo-amount[b-nseigghya2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.demo-amount span[b-nseigghya2] {
    color: var(--muted);
    font-size: 13px;
}

.demo-amount strong[b-nseigghya2] {
    color: var(--green);
    font-size: 25px;
    overflow-wrap: anywhere;
}

.demo-help[b-nseigghya2] {
    margin-top: 24px;
    color: var(--muted);
    font-size: 12px;
    line-height: 2;
}

.demo-form-card[b-nseigghya2] {
    min-width: 0;
}

.demo-form-head[b-nseigghya2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

.demo-field[b-nseigghya2] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
    min-width: 0;
}

.demo-field label[b-nseigghya2] {
    font-size: 15px;
    font-weight: 800;
}

.demo-field input[b-nseigghya2] {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    text-align: left;
    box-sizing: border-box;
}

.demo-field input:focus[b-nseigghya2] {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .1);
}

.demo-field small[b-nseigghya2] {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
}

.demo-fields-row[b-nseigghya2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.demo-captcha-row[b-nseigghya2] {
    display: grid;
    grid-template-columns: 130px 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.demo-captcha[b-nseigghya2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border: 1px solid #cbdccf;
    border-radius: 10px;
    background:
        repeating-linear-gradient(
            -25deg,
            transparent,
            transparent 8px,
            rgba(58, 125, 68, .09) 8px,
            rgba(58, 125, 68, .09) 10px
        ),
        #f0f6f1;
    color: #234e2b;
    font: italic 800 25px Georgia, serif;
    letter-spacing: 4px;
    direction: ltr;
}

.demo-refresh[b-nseigghya2] {
    width: 40px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--green);
    font-size: 28px;
    cursor: pointer;
}

.demo-otp-row[b-nseigghya2] {
    display: flex;
    gap: 12px;
}

.demo-otp-row input[b-nseigghya2] {
    flex: 1;
}

.demo-button[b-nseigghya2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
    text-decoration: none;
    cursor: pointer;
}

.demo-button.primary[b-nseigghya2] {
    background: var(--green);
    color: #fff;
}

.demo-button.light[b-nseigghya2] {
    background: #f5f7fa;
    border-color: var(--soft);
    color: var(--text);
}

.demo-button:disabled[b-nseigghya2] {
    opacity: .55;
    cursor: default;
}

.demo-otp-message[b-nseigghya2] {
    padding: 12px 14px;
    border-radius: 10px;
    background: #eef8f0;
    color: #285a31;
    font-size: 13px;
    line-height: 2;
}

.demo-otp-message strong[b-nseigghya2] {
    display: inline-block;
    margin: 0 6px;
    font-size: 18px;
    letter-spacing: 2px;
}

.demo-actions[b-nseigghya2] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.demo-actions .primary[b-nseigghya2] {
    flex: 1;
}

.demo-error[b-nseigghya2] {
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff1f1;
    color: #b42318;
    font-size: 14px;
    line-height: 1.9;
}

.demo-bottom-note[b-nseigghya2],
.demo-footer[b-nseigghya2] {
    color: var(--muted);
    font-size: 12px;
    line-height: 2;
}

.demo-bottom-note[b-nseigghya2] {
    margin: 18px 0 0;
}

.demo-footer[b-nseigghya2] {
    padding: 18px 24px;
    border-top: 1px solid var(--soft);
    text-align: center;
}

@media (max-width: 850px) {
    .demo-layout[b-nseigghya2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {
    .demo-gateway[b-nseigghya2] {
        padding: 20px 12px;
    }

    .demo-header[b-nseigghya2],
    .demo-layout[b-nseigghya2] {
        padding: 20px;
    }

    .demo-warning[b-nseigghya2] {
        margin: 18px 20px 0;
    }

    .demo-brand strong[b-nseigghya2] {
        font-size: 18px;
    }

    .demo-captcha-row[b-nseigghya2] {
        grid-template-columns: minmax(0, 1fr) 40px;
    }

    .demo-captcha-row input[b-nseigghya2] {
        grid-column: 1 / -1;
    }

    .demo-otp-row[b-nseigghya2] {
        flex-direction: column;
    }

    .demo-fields-row[b-nseigghya2] {
        gap: 8px;
    }

    .demo-fields-row label[b-nseigghya2] {
        font-size: 12px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/ExternalPrescriptions/CreateCustomerExternalPrescription.razor.rz.scp.css */
.create-external-prescription-page[b-r9llemduhf] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-r9llemduhf] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-r9llemduhf] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-r9llemduhf] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-r9llemduhf] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-r9llemduhf] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-r9llemduhf] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Layout
========================= */

.form-layout[b-r9llemduhf] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(290px, .8fr);

    gap: 18px;

    align-items: start;
}

.form-card[b-r9llemduhf],
.side-card[b-r9llemduhf] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card[b-r9llemduhf] {
    overflow: hidden;
}

.form-side[b-r9llemduhf] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Section
========================= */

.form-section[b-r9llemduhf] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-r9llemduhf] {
    margin-bottom: 18px;
}

.section-head h2[b-r9llemduhf] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-head p[b-r9llemduhf] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.8;
}


/* =========================
   Pets
========================= */

.pets-grid[b-r9llemduhf] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.pet-card[b-r9llemduhf] {
    position: relative;

    min-height: 85px;
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    text-align: right;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;

    font-family: inherit;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.pet-card:hover[b-r9llemduhf],
.pet-card.selected[b-r9llemduhf] {
    border-color: var(--green);
}

.pet-card.selected[b-r9llemduhf] {
    background: rgba(58, 125, 68, .03);
}

.pet-avatar[b-r9llemduhf] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border-radius: 11px;

    background: #f2f4f7;
    color: #475467;

    font-size: 10px;
    font-weight: 900;
}

.pet-avatar.dog[b-r9llemduhf] {
    background: #ecfdf3;
    color: #027a48;
}

.pet-avatar.cat[b-r9llemduhf] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-r9llemduhf] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-r9llemduhf] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-info[b-r9llemduhf] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pet-info strong[b-r9llemduhf] {
    color: var(--text);

    font-size: 10px;
}

.pet-info span[b-r9llemduhf] {
    overflow: hidden;

    color: var(--muted);

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-mark[b-r9llemduhf] {
    width: 21px;
    height: 21px;

    flex: 0 0 21px;

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

    border-radius: 50%;

    background: var(--green);
    color: #fff;

    font-size: 8px;
    font-weight: 900;
}

.selected-pet-note[b-r9llemduhf] {
    margin-top: 10px;
    padding: 9px 11px;

    border: 1px solid #abefc6;
    border-radius: 9px;

    background: #ecfdf3;
    color: #475467;

    font-size: 8px;
}

.selected-pet-note strong[b-r9llemduhf] {
    color: #027a48;
}


/* =========================
   Form
========================= */

.form-grid[b-r9llemduhf] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-r9llemduhf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-r9llemduhf] {
    grid-column: 1 / -1;
}

.field-group label[b-r9llemduhf] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label span[b-r9llemduhf] {
    color: #b42318;
}

.field-group input[b-r9llemduhf],
.field-group textarea[b-r9llemduhf] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.field-group input[b-r9llemduhf] {
    min-height: 42px;

    padding: 0 11px;
}

.field-group textarea[b-r9llemduhf] {
    padding: 11px 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-r9llemduhf],
.field-group textarea:focus[b-r9llemduhf] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Upload
========================= */

.upload-box[b-r9llemduhf] {
    min-height: 105px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 1px dashed #d0d5dd;
    border-radius: 13px;

    background: #fbfcfd;
}

.upload-box.selected[b-r9llemduhf] {
    border-style: solid;
    border-color: #abefc6;

    background: #f9fdf9;
}

.upload-icon[b-r9llemduhf] {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.upload-content[b-r9llemduhf] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.upload-content strong[b-r9llemduhf] {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-content span[b-r9llemduhf] {
    color: var(--muted);

    font-size: 8px;
}

.select-file-button[b-r9llemduhf] {
    min-height: 36px;
    padding: 0 11px;

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.select-file-button:hover[b-r9llemduhf] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   File Preview
========================= */

.file-preview[b-r9llemduhf] {
    margin-top: 10px;
    padding: 13px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fff;
}

.file-preview-head[b-r9llemduhf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.file-preview-head > div[b-r9llemduhf] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.file-preview-head span[b-r9llemduhf] {
    color: var(--muted);

    font-size: 7px;
}

.file-preview-head strong[b-r9llemduhf] {
    overflow: hidden;

    color: var(--text);

    font-size: 9px;

    direction: ltr;

    text-align: right;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-file-button[b-r9llemduhf] {
    min-height: 31px;
    padding: 0 9px;

    flex: 0 0 auto;

    border: 1px solid #fda29b;
    border-radius: 8px;

    background: #fff;
    color: #b42318;

    font-family: inherit;
    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.file-meta-grid[b-r9llemduhf] {
    margin-top: 11px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 7px;
}

.file-meta-grid > div[b-r9llemduhf] {
    min-height: 53px;
    padding: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 8px;

    background: #fbfcfd;
}

.file-meta-grid span[b-r9llemduhf] {
    color: var(--muted);

    font-size: 7px;
}

.file-meta-grid strong[b-r9llemduhf] {
    color: var(--text);

    font-size: 8px;
}


/* =========================
   Upload Rules
========================= */

.upload-rules[b-r9llemduhf] {
    margin-top: 12px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.upload-rules > div[b-r9llemduhf] {
    display: flex;
    align-items: flex-start;

    gap: 7px;
}

.upload-rules span[b-r9llemduhf] {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

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

    border-radius: 6px;

    background: #ecfdf3;
    color: #027a48;

    font-size: 7px;
    font-weight: 900;
}

.upload-rules p[b-r9llemduhf] {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 8px;
    line-height: 1.7;
}


/* =========================
   Confirm
========================= */

.confirm-list[b-r9llemduhf] {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.confirm-row[b-r9llemduhf] {
    min-height: 70px;
    padding: 12px 13px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fbfcfd;

    cursor: pointer;
}

.confirm-row input[b-r9llemduhf] {
    width: 18px;
    height: 18px;

    margin-top: 2px;

    flex: 0 0 18px;

    accent-color: var(--green);
}

.confirm-row > div[b-r9llemduhf] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.confirm-row strong[b-r9llemduhf] {
    color: var(--text);

    font-size: 9px;
}

.confirm-row span[b-r9llemduhf] {
    color: var(--muted);

    font-size: 8px;
    line-height: 1.7;
}


/* =========================
   Messages
========================= */

.form-message[b-r9llemduhf] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 10px;

    font-size: 10px;
}

.error-message[b-r9llemduhf] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-r9llemduhf] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-r9llemduhf] {
    color: #027a48;

    font-size: 10px;
}

.success-message span[b-r9llemduhf] {
    color: #475467;

    font-size: 8px;
}


/* =========================
   Actions
========================= */

.form-actions[b-r9llemduhf] {
    padding: 18px 22px;

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

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-r9llemduhf],
.secondary-button[b-r9llemduhf] {
    min-height: 41px;
    padding: 0 15px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-r9llemduhf] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:disabled[b-r9llemduhf] {
    opacity: .5;

    cursor: not-allowed;
}

.secondary-button[b-r9llemduhf] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}


/* =========================
   Side
========================= */

.side-card[b-r9llemduhf] {
    padding: 19px;
}

.side-card h3[b-r9llemduhf] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.side-card > p[b-r9llemduhf] {
    margin: 0;

    color: var(--muted);

    font-size: 8px;
    line-height: 1.9;
}

.side-link[b-r9llemduhf] {
    width: 100%;
    min-height: 36px;

    margin-top: 11px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;

    background: #fff;
}

.warning-card[b-r9llemduhf] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-r9llemduhf] {
    color: #b54708;
}


/* =========================
   Flow
========================= */

.flow-list[b-r9llemduhf] {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.flow-item[b-r9llemduhf] {
    position: relative;

    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 9px;
}

.flow-item:not(:last-child)[b-r9llemduhf]::after {
    content: "";

    position: absolute;

    top: 31px;
    right: 13px;

    width: 1px;
    height: 24px;

    background: #e4e7ec;
}

.flow-item > span[b-r9llemduhf] {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

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

    border-radius: 50%;

    background: #f2f4f7;
    color: #667085;

    font-size: 8px;
    font-weight: 900;
}

.flow-item.active > span[b-r9llemduhf] {
    background: var(--green);
    color: #fff;
}

.flow-item > div[b-r9llemduhf] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.flow-item strong[b-r9llemduhf] {
    color: var(--text);

    font-size: 9px;
}

.flow-item small[b-r9llemduhf] {
    color: var(--muted);

    font-size: 7px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .form-layout[b-r9llemduhf] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .pets-grid[b-r9llemduhf] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .page-head[b-r9llemduhf] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-r9llemduhf] {
        width: 100%;
    }

    .form-grid[b-r9llemduhf] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-r9llemduhf] {
        grid-column: auto;
    }
}

@media (max-width: 550px) {

    .pets-grid[b-r9llemduhf],
    .file-meta-grid[b-r9llemduhf] {
        grid-template-columns: 1fr;
    }

    .upload-box[b-r9llemduhf],
    .file-preview-head[b-r9llemduhf] {
        align-items: stretch;
        flex-direction: column;
    }

    .select-file-button[b-r9llemduhf],
    .remove-file-button[b-r9llemduhf] {
        width: 100%;
    }

    .form-actions[b-r9llemduhf] {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .primary-button[b-r9llemduhf],
    .secondary-button[b-r9llemduhf] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/ExternalPrescriptions/CustomerExternalPrescriptionDetails.razor.rz.scp.css */
.external-prescription-details-page[b-8bfxyiwdzc] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-8bfxyiwdzc] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-8bfxyiwdzc] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-8bfxyiwdzc] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-8bfxyiwdzc] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-8bfxyiwdzc] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Hero
========================= */

.prescription-hero[b-8bfxyiwdzc] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.prescription-main[b-8bfxyiwdzc] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.prescription-avatar[b-8bfxyiwdzc] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.prescription-main > div:last-child[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.prescription-main strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.prescription-main span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 9px;
}

.hero-badges[b-8bfxyiwdzc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-8bfxyiwdzc] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-8bfxyiwdzc] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-8bfxyiwdzc] {
    overflow: hidden;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-card small[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Details
========================= */

.details-grid[b-8bfxyiwdzc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-8bfxyiwdzc] {
    padding: 21px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card.full[b-8bfxyiwdzc] {
    grid-column: 1 / -1;
}

.details-card h3[b-8bfxyiwdzc] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.details-list[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-8bfxyiwdzc] {
    min-height: 52px;

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

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-8bfxyiwdzc] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 10px;
}

.ltr-value[b-8bfxyiwdzc] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Pet
========================= */

.pet-card[b-8bfxyiwdzc] {
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.pet-avatar[b-8bfxyiwdzc] {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 11px;

    background: #f2f4f7;
    color: #475467;

    font-size: 9px;
    font-weight: 900;
}

.pet-avatar.dog[b-8bfxyiwdzc] {
    background: #ecfdf3;
    color: #027a48;
}

.pet-avatar.cat[b-8bfxyiwdzc] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-8bfxyiwdzc] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-8bfxyiwdzc] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-card > div:last-child[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pet-card strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 10px;
}

.pet-card span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 8px;
}

.pet-details[b-8bfxyiwdzc] {
    margin-top: 9px;
}


/* =========================
   File
========================= */

.file-card[b-8bfxyiwdzc] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px dashed #d0d5dd;
    border-radius: 11px;

    background: #fbfcfd;
}

.file-icon[b-8bfxyiwdzc] {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 10px;

    background: #fff;
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.file-info[b-8bfxyiwdzc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.file-info strong[b-8bfxyiwdzc] {
    overflow: hidden;

    color: var(--text);

    font-size: 9px;

    direction: ltr;
    text-align: right;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-info span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Card Action
========================= */

.full-card-action[b-8bfxyiwdzc] {
    width: 100%;
    min-height: 36px;

    margin-top: 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.button-action[b-8bfxyiwdzc] {
    cursor: pointer;
}


/* =========================
   Card Head
========================= */

.card-head[b-8bfxyiwdzc] {
    margin-bottom: 16px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h3[b-8bfxyiwdzc] {
    margin-bottom: 4px;
}

.card-head p[b-8bfxyiwdzc] {
    margin: 0;

    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Review
========================= */

.review-message[b-8bfxyiwdzc] {
    min-height: 90px;
    padding: 14px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    border-radius: 11px;
}

.message-icon[b-8bfxyiwdzc] {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

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

    border-radius: 9px;

    background: #fff;

    font-size: 11px;
    font-weight: 900;
}

.review-message > div:last-child[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.review-message strong[b-8bfxyiwdzc] {
    font-size: 10px;
}

.review-message span[b-8bfxyiwdzc] {
    color: #667085;

    font-size: 8px;
    line-height: 1.8;
}

.success-message[b-8bfxyiwdzc] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message .message-icon[b-8bfxyiwdzc],
.success-message strong[b-8bfxyiwdzc] {
    color: #027a48;
}

.warning-message[b-8bfxyiwdzc] {
    border: 1px solid #fedf89;

    background: #fffcf5;
}

.warning-message .message-icon[b-8bfxyiwdzc],
.warning-message strong[b-8bfxyiwdzc] {
    color: #b54708;
}

.danger-message[b-8bfxyiwdzc] {
    border: 1px solid #fecdca;

    background: #fff1f1;
}

.danger-message .message-icon[b-8bfxyiwdzc],
.danger-message strong[b-8bfxyiwdzc] {
    color: #b42318;
}

.review-note[b-8bfxyiwdzc],
.pharmacy-note[b-8bfxyiwdzc] {
    margin-top: 10px;
    padding: 11px 12px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fbfcfd;
}

.review-note span[b-8bfxyiwdzc],
.pharmacy-note span[b-8bfxyiwdzc] {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 800;
}

.review-note p[b-8bfxyiwdzc],
.pharmacy-note p[b-8bfxyiwdzc] {
    margin: 0;

    color: var(--text);

    font-size: 9px;
    line-height: 1.9;
}


/* =========================
   Pharmacy
========================= */

.pharmacy-box[b-8bfxyiwdzc] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.pharmacy-avatar[b-8bfxyiwdzc] {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 8px;
    font-weight: 900;
}

.pharmacy-info[b-8bfxyiwdzc] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pharmacy-info span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 8px;
}

.pharmacy-info strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 10px;
}

.pharmacy-meta[b-8bfxyiwdzc] {
    margin-top: 10px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.pharmacy-meta > div[b-8bfxyiwdzc] {
    min-height: 58px;
    padding: 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fff;
}

.pharmacy-meta span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 7px;
}

.pharmacy-meta strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Items
========================= */

.count-badge[b-8bfxyiwdzc] {
    min-height: 26px;
    padding: 0 8px;

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

    border-radius: 999px;

    background: #f2f4f7;
    color: #667085;

    font-size: 8px;
    font-weight: 800;
}

.items-list[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.prescription-item[b-8bfxyiwdzc] {
    padding: 14px;

    display: grid;
    grid-template-columns:
        46px
        minmax(0, 1fr);

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.medicine-icon[b-8bfxyiwdzc] {
    width: 44px;
    height: 44px;

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

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.item-content[b-8bfxyiwdzc] {
    min-width: 0;
}

.item-head[b-8bfxyiwdzc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.item-head > div[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.item-head strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 10px;
}

.item-head > div > span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 8px;
}

.item-grid[b-8bfxyiwdzc] {
    margin-top: 10px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;
}

.item-grid > div[b-8bfxyiwdzc] {
    min-height: 55px;
    padding: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 8px;

    background: #fff;
}

.item-grid span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 7px;
}

.item-grid strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 8px;
}

.item-note[b-8bfxyiwdzc] {
    margin-top: 9px;
    padding: 9px 10px;

    border: 1px solid #fedf89;
    border-radius: 8px;

    background: #fffcf5;
    color: #667085;

    font-size: 8px;
    line-height: 1.8;
}


/* =========================
   User Note
========================= */

.user-note[b-8bfxyiwdzc] {
    padding: 13px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fbfcfd;

    color: var(--text);

    font-size: 9px;
    line-height: 1.9;
}


/* =========================
   Timeline
========================= */

.timeline[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.timeline-item[b-8bfxyiwdzc] {
    position: relative;

    min-height: 56px;
    padding-right: 27px;
}

.timeline-item:not(:last-child)[b-8bfxyiwdzc]::after {
    content: "";

    position: absolute;

    top: 14px;
    right: 5px;

    width: 1px;
    height: calc(100% + 11px);

    background: #e4e7ec;
}

.timeline-dot[b-8bfxyiwdzc] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;
}

.timeline-item.completed .timeline-dot[b-8bfxyiwdzc] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-8bfxyiwdzc] {
    background: var(--orange);
}

.timeline-item.failed .timeline-dot[b-8bfxyiwdzc] {
    background: #b42318;
}

.timeline-item > div:last-child[b-8bfxyiwdzc] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.timeline-item strong[b-8bfxyiwdzc] {
    color: var(--text);

    font-size: 10px;
}

.timeline-item span[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}

.timeline-item small[b-8bfxyiwdzc] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Actions
========================= */

.action-list[b-8bfxyiwdzc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-8bfxyiwdzc] {
    min-height: 39px;
    padding: 0 13px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.primary-action[b-8bfxyiwdzc] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.warning-action[b-8bfxyiwdzc] {
    border-color: #fdb022;

    color: #b54708;
}

.action-button:disabled[b-8bfxyiwdzc] {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================
   Status
========================= */

.status-badge[b-8bfxyiwdzc] {
    min-height: 26px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-8bfxyiwdzc] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-8bfxyiwdzc] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-8bfxyiwdzc] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-8bfxyiwdzc] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-8bfxyiwdzc] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .summary-grid[b-8bfxyiwdzc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .item-grid[b-8bfxyiwdzc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {

    .page-head[b-8bfxyiwdzc],
    .prescription-hero[b-8bfxyiwdzc],
    .card-head[b-8bfxyiwdzc] {
        align-items: stretch;
        flex-direction: column;
    }

    .details-grid[b-8bfxyiwdzc] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-8bfxyiwdzc] {
        grid-column: auto;
    }

    .back-button[b-8bfxyiwdzc] {
        width: 100%;
    }
}

@media (max-width: 650px) {

    .summary-grid[b-8bfxyiwdzc],
    .item-grid[b-8bfxyiwdzc],
    .pharmacy-meta[b-8bfxyiwdzc] {
        grid-template-columns: 1fr;
    }

    .prescription-item[b-8bfxyiwdzc] {
        grid-template-columns: 1fr;
    }

    .pharmacy-box[b-8bfxyiwdzc],
    .item-head[b-8bfxyiwdzc] {
        align-items: flex-start;
        flex-direction: column;
    }

    .action-list[b-8bfxyiwdzc] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-8bfxyiwdzc] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/ExternalPrescriptions/CustomerExternalPrescriptions.razor.rz.scp.css */
.external-prescriptions-page[b-9kvceqw3u1] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-9kvceqw3u1] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-9kvceqw3u1] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-9kvceqw3u1] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-9kvceqw3u1] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.create-button[b-9kvceqw3u1] {
    min-height: 43px;
    padding: 0 15px;

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

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}


/* =========================
   Summary
========================= */

.summary-grid[b-9kvceqw3u1] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-9kvceqw3u1] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-9kvceqw3u1] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-9kvceqw3u1] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-9kvceqw3u1] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Filters
========================= */

.filters-card[b-9kvceqw3u1] {
    margin-bottom: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(170px, .7fr)
        minmax(190px, .8fr);

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-9kvceqw3u1],
.filters-card select[b-9kvceqw3u1] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.filters-card input:focus[b-9kvceqw3u1],
.filters-card select:focus[b-9kvceqw3u1] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Table
========================= */

.prescriptions-card[b-9kvceqw3u1] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.table-wrap[b-9kvceqw3u1] {
    width: 100%;

    overflow-x: auto;
}

.prescriptions-table[b-9kvceqw3u1] {
    width: 100%;
    min-width: 1150px;

    border-collapse: collapse;
}

.prescriptions-table th[b-9kvceqw3u1],
.prescriptions-table td[b-9kvceqw3u1] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.prescriptions-table th[b-9kvceqw3u1] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.prescriptions-table td[b-9kvceqw3u1] {
    color: var(--text);

    font-size: 10px;
}

.prescriptions-table tbody tr:last-child td[b-9kvceqw3u1] {
    border-bottom: 0;
}

.prescriptions-table tbody tr:hover[b-9kvceqw3u1] {
    background: #fcfdfd;
}


/* =========================
   Prescription
========================= */

.prescription-cell[b-9kvceqw3u1] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.prescription-avatar[b-9kvceqw3u1] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.prescription-cell > div:last-child[b-9kvceqw3u1] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.prescription-cell strong[b-9kvceqw3u1] {
    color: var(--text);

    font-size: 10px;
}

.prescription-cell span[b-9kvceqw3u1] {
    direction: ltr;

    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Pet
========================= */

.pet-link[b-9kvceqw3u1] {
    color: var(--green);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.pet-link:hover[b-9kvceqw3u1] {
    text-decoration: underline;
}


/* =========================
   File
========================= */

.file-cell[b-9kvceqw3u1],
.pharmacy-cell[b-9kvceqw3u1],
.result-cell[b-9kvceqw3u1],
.date-cell[b-9kvceqw3u1] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.file-cell[b-9kvceqw3u1] {
    max-width: 170px;
}

.file-cell strong[b-9kvceqw3u1] {
    overflow: hidden;

    color: var(--text);

    font-size: 9px;

    direction: ltr;

    text-align: right;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-cell span[b-9kvceqw3u1],
.pharmacy-cell span[b-9kvceqw3u1],
.result-cell span[b-9kvceqw3u1],
.date-cell span[b-9kvceqw3u1] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Pharmacy
========================= */

.pharmacy-cell strong[b-9kvceqw3u1] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Review Result
========================= */

.result-cell[b-9kvceqw3u1] {
    max-width: 200px;
}

.result-cell strong[b-9kvceqw3u1] {
    color: var(--text);

    font-size: 9px;
}

.result-cell span[b-9kvceqw3u1] {
    overflow: hidden;

    max-width: 190px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================
   Date
========================= */

.date-cell strong[b-9kvceqw3u1] {
    color: var(--text);

    font-size: 9px;
}

.muted-value[b-9kvceqw3u1] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Status
========================= */

.status-badge[b-9kvceqw3u1] {
    min-height: 26px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-9kvceqw3u1] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-9kvceqw3u1] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-9kvceqw3u1] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-9kvceqw3u1] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-9kvceqw3u1] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-9kvceqw3u1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;

    white-space: nowrap;
}

.action-link[b-9kvceqw3u1] {
    min-height: 31px;
    padding: 0 8px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}

.action-link:hover[b-9kvceqw3u1] {
    border-color: var(--green);

    color: var(--green);
}

.primary-action[b-9kvceqw3u1] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-9kvceqw3u1] {
    color: #fff;
}

.warning-action[b-9kvceqw3u1] {
    border-color: #fdb022;

    color: #b54708;
}


/* =========================
   Empty
========================= */

.empty-state[b-9kvceqw3u1] {
    min-height: 360px;
    padding: 40px 20px;

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

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-9kvceqw3u1] {
    width: 64px;
    height: 64px;

    margin-bottom: 14px;

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

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.empty-state h2[b-9kvceqw3u1] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.empty-state p[b-9kvceqw3u1] {
    max-width: 500px;

    margin: 7px 0 16px;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.9;
}

.empty-action[b-9kvceqw3u1] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .summary-grid[b-9kvceqw3u1] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card[b-9kvceqw3u1] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card input[b-9kvceqw3u1] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {

    .page-head[b-9kvceqw3u1] {
        align-items: stretch;
        flex-direction: column;
    }

    .create-button[b-9kvceqw3u1] {
        width: 100%;
    }

    .summary-grid[b-9kvceqw3u1],
    .filters-card[b-9kvceqw3u1] {
        grid-template-columns: 1fr;
    }

    .filters-card input[b-9kvceqw3u1] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Orders/CustomerOrderDetails.razor.rz.scp.css */
.customer-order-details-page[b-84dxtnn2oj] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Orders/CustomerOrders.razor.rz.scp.css */
.panel-orders-page[b-pv4m4a5o7s] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.panel-orders-page[b-pv4m4a5o7s]  .data-table {
    min-width: 1150px;
}

.panel-orders-page[b-pv4m4a5o7s]  .data-table th,
.panel-orders-page[b-pv4m4a5o7s]  .data-table td {
    font-size: 16px;
    white-space: nowrap;
}

.order-cell[b-pv4m4a5o7s] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1.8;
}

.order-cell strong[b-pv4m4a5o7s] {
    color: var(--text, #475467);
    font-size: 17px;
    font-weight: 800;
}

.order-cell span[b-pv4m4a5o7s],
.muted-value[b-pv4m4a5o7s] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.order-money[b-pv4m4a5o7s] {
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

.delivery-line + .delivery-line[b-pv4m4a5o7s] {
    margin-top: 10px;
}

.order-badge[b-pv4m4a5o7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 33px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.order-badge.success[b-pv4m4a5o7s] {
    background: #ecfdf3;
    color: #027a48;
}

.order-badge.warning[b-pv4m4a5o7s] {
    background: #fffaeb;
    color: #b54708;
}

.order-badge.info[b-pv4m4a5o7s] {
    background: #eff8ff;
    color: #175cd3;
}

.order-badge.danger[b-pv4m4a5o7s] {
    background: #fff1f1;
    color: #b42318;
}

.order-badge.neutral[b-pv4m4a5o7s] {
    background: #f2f4f7;
    color: #667085;
}

.order-link[b-pv4m4a5o7s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.order-link:hover[b-pv4m4a5o7s] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}

.order-link:focus-visible[b-pv4m4a5o7s] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Payments/CustomerPayments.razor.rz.scp.css */
.customer-visits-list[b-50w1793x3p],
.customer-payments-list[b-50w1793x3p] {
    width: 100%;
    min-width: 0;
}


/* =========================
   Table
========================= */

[b-50w1793x3p] .data-table {
    width: 100%;
    table-layout: auto;
}

[b-50w1793x3p] .data-table th,
[b-50w1793x3p] .data-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


/* =========================
   Create Button
========================= */

.create-visit-button[b-50w1793x3p] {
    min-height: 58px;
    padding: 0 18px;

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

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
    white-space: nowrap;

    transition: .2s;
}

.create-visit-button span[b-50w1793x3p] {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.create-visit-button:hover[b-50w1793x3p] {
    color: #fff;
    filter: brightness(.96);
}


/* =========================
   Cells
========================= */

.history-cell[b-50w1793x3p] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 4px;

    white-space: nowrap;
}

.history-cell strong[b-50w1793x3p] {
    color: var(--text);

    font-size: 18px;

    white-space: nowrap;
}

.history-cell span[b-50w1793x3p] {
    color: var(--muted);

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

    white-space: nowrap;
}

.test-value[b-50w1793x3p] {
    color: #b54708 !important;
}

.amount-value[b-50w1793x3p] {
    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}

.description-value[b-50w1793x3p] {
    font-size: 16px;
    line-height: 1.9;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.reference-value[b-50w1793x3p] {
    display: inline-block;

    direction: ltr;

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

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


/* =========================
   Status
========================= */

.history-badge[b-50w1793x3p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.history-badge.success[b-50w1793x3p] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-50w1793x3p] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-50w1793x3p] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-50w1793x3p] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-50w1793x3p] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-50w1793x3p] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-50w1793x3p] {
    min-height: 32px;
    padding: 0 9px;

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

    flex-shrink: 0;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.action-link:hover[b-50w1793x3p] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {
    .create-visit-button[b-50w1793x3p] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Pets/CreateCustomerPet.razor.rz.scp.css */
.create-pet-page[b-63lynjdqvl] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-63lynjdqvl] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-63lynjdqvl] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-63lynjdqvl] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-63lynjdqvl] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-63lynjdqvl] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-63lynjdqvl] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Main Layout
========================= */

.form-layout[b-63lynjdqvl] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .8fr);

    gap: 18px;

    align-items: start;
}

.form-card[b-63lynjdqvl],
.side-card[b-63lynjdqvl] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card[b-63lynjdqvl] {
    overflow: hidden;
}

.form-side[b-63lynjdqvl] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Sections
========================= */

.form-section[b-63lynjdqvl] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-63lynjdqvl] {
    margin-bottom: 18px;
}

.section-head h2[b-63lynjdqvl] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-head p[b-63lynjdqvl] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.8;
}


/* =========================
   Form Grid
========================= */

.form-grid[b-63lynjdqvl] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-63lynjdqvl] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-63lynjdqvl] {
    grid-column: 1 / -1;
}

.field-group label[b-63lynjdqvl] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label > span[b-63lynjdqvl] {
    color: #b42318;
}

.field-group input[b-63lynjdqvl],
.field-group select[b-63lynjdqvl],
.field-group textarea[b-63lynjdqvl] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;

    outline: none;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.field-group input[b-63lynjdqvl],
.field-group select[b-63lynjdqvl] {
    min-height: 43px;

    padding: 0 12px;
}

.field-group textarea[b-63lynjdqvl] {
    padding: 11px 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-63lynjdqvl],
.field-group select:focus[b-63lynjdqvl],
.field-group textarea:focus[b-63lynjdqvl] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}

.field-group small[b-63lynjdqvl] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}


/* =========================
   Input Unit
========================= */

.input-unit[b-63lynjdqvl] {
    position: relative;
}

.input-unit input[b-63lynjdqvl] {
    padding-left: 75px;
}

.input-unit > span[b-63lynjdqvl] {
    position: absolute;

    top: 50%;
    left: 12px;

    transform: translateY(-50%);

    padding-right: 10px;

    border-right: 1px solid var(--soft);

    color: var(--muted);

    font-size: 9px;

    pointer-events: none;
}


/* =========================
   Messages
========================= */

.form-message[b-63lynjdqvl] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 11px;

    font-size: 10px;
    line-height: 1.8;
}

.error-message[b-63lynjdqvl] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-63lynjdqvl] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-63lynjdqvl] {
    color: #027a48;

    font-size: 11px;
}

.success-message span[b-63lynjdqvl] {
    color: #475467;

    font-size: 9px;
}


/* =========================
   Actions
========================= */

.form-actions[b-63lynjdqvl] {
    padding: 18px 22px;

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

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-63lynjdqvl],
.secondary-button[b-63lynjdqvl] {
    min-height: 41px;
    padding: 0 16px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-63lynjdqvl] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:hover[b-63lynjdqvl] {
    color: #fff;

    filter: brightness(.96);
}

.primary-button:disabled[b-63lynjdqvl] {
    opacity: .55;

    cursor: not-allowed;
}

.secondary-button[b-63lynjdqvl] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.secondary-button:hover[b-63lynjdqvl] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Side Cards
========================= */

.side-card[b-63lynjdqvl] {
    padding: 19px;
}

.side-card h3[b-63lynjdqvl] {
    margin: 0 0 10px;

    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.side-card > p[b-63lynjdqvl] {
    margin: 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.9;
}


/* =========================
   Features
========================= */

.feature-list[b-63lynjdqvl] {
    margin-top: 17px;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.feature-list > div[b-63lynjdqvl] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.feature-list > div > span[b-63lynjdqvl] {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

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

    border-radius: 8px;

    background: rgba(58, 125, 68, .08);
    color: var(--green);

    font-size: 8px;
    font-weight: 900;
}

.feature-list > div > div[b-63lynjdqvl] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.feature-list strong[b-63lynjdqvl] {
    color: var(--text);

    font-size: 10px;
}

.feature-list small[b-63lynjdqvl] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Warning
========================= */

.warning-card[b-63lynjdqvl] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-63lynjdqvl] {
    color: #b54708;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .form-layout[b-63lynjdqvl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .page-head[b-63lynjdqvl] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-63lynjdqvl] {
        width: 100%;
    }

    .form-grid[b-63lynjdqvl] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-63lynjdqvl] {
        grid-column: auto;
    }
}

@media (max-width: 500px) {

    .form-section[b-63lynjdqvl] {
        padding: 18px;
    }

    .form-actions[b-63lynjdqvl] {
        padding: 16px 18px;

        align-items: stretch;
        flex-direction: column-reverse;
    }

    .primary-button[b-63lynjdqvl],
    .secondary-button[b-63lynjdqvl] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Pets/CustomerPetDetails.razor.rz.scp.css */
.pet-details-page[b-qrx1jx930i] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-qrx1jx930i] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-qrx1jx930i] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-qrx1jx930i] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-qrx1jx930i] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.head-actions[b-qrx1jx930i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.primary-button[b-qrx1jx930i],
.secondary-button[b-qrx1jx930i] {
    min-height: 41px;
    padding: 0 14px;

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

    border-radius: 9px;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-qrx1jx930i] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.secondary-button[b-qrx1jx930i] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}


/* =========================
   Hero
========================= */

.pet-hero[b-qrx1jx930i] {
    margin-bottom: 18px;
    padding: 19px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.pet-main[b-qrx1jx930i] {
    display: flex;
    align-items: center;

    gap: 13px;
}

.pet-avatar[b-qrx1jx930i] {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

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

    border-radius: 17px;

    background: #f2f4f7;
    color: #475467;

    font-size: 16px;
    font-weight: 900;
}

.pet-avatar.dog[b-qrx1jx930i] {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

.pet-avatar.cat[b-qrx1jx930i] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-qrx1jx930i] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-qrx1jx930i] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-identity[b-qrx1jx930i] {
    min-width: 0;
}

.pet-name-row[b-qrx1jx930i] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.pet-name-row h2[b-qrx1jx930i] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.pet-identity > span[b-qrx1jx930i] {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
}

.pet-meta[b-qrx1jx930i] {
    margin-top: 8px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.pet-meta span[b-qrx1jx930i] {
    color: var(--muted);

    font-size: 9px;
}

.back-button[b-qrx1jx930i] {
    min-height: 39px;
    padding: 0 12px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Summary
========================= */

.summary-grid[b-qrx1jx930i] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-qrx1jx930i] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-qrx1jx930i] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-qrx1jx930i] {
    color: var(--text);

    font-size: 20px;
    font-weight: 900;
}

.summary-card small[b-qrx1jx930i] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Details
========================= */

.details-grid[b-qrx1jx930i] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-qrx1jx930i] {
    padding: 21px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card.full[b-qrx1jx930i] {
    grid-column: 1 / -1;
}

.details-card h3[b-qrx1jx930i] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.details-list[b-qrx1jx930i] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-qrx1jx930i] {
    min-height: 52px;

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

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-qrx1jx930i] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-qrx1jx930i] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-qrx1jx930i] {
    color: var(--text);

    font-size: 11px;
}

.ltr-value[b-qrx1jx930i] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Health
========================= */

.health-grid[b-qrx1jx930i] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.health-box[b-qrx1jx930i] {
    min-height: 110px;
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.health-box.warning[b-qrx1jx930i] {
    border-color: #fedf89;

    background: #fffcf5;
}

.health-box > span[b-qrx1jx930i] {
    display: block;

    margin-bottom: 6px;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;
}

.health-box.warning > span[b-qrx1jx930i] {
    color: #b54708;
}

.health-box p[b-qrx1jx930i] {
    margin: 0;

    color: var(--text);

    font-size: 10px;
    line-height: 1.9;
}


/* =========================
   Card Head
========================= */

.card-head[b-qrx1jx930i] {
    margin-bottom: 16px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h3[b-qrx1jx930i] {
    margin-bottom: 4px;
}

.card-head p[b-qrx1jx930i] {
    margin: 0;

    color: var(--muted);

    font-size: 9px;
}

.card-action[b-qrx1jx930i] {
    min-height: 32px;
    padding: 0 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Table
========================= */

.table-wrap[b-qrx1jx930i] {
    width: 100%;
    overflow-x: auto;
}

.records-table[b-qrx1jx930i] {
    width: 100%;
    min-width: 750px;

    border-collapse: collapse;
}

.records-table th[b-qrx1jx930i],
.records-table td[b-qrx1jx930i] {
    padding: 13px;

    text-align: right;

    border-bottom: 1px solid #f0f2f4;
}

.records-table th[b-qrx1jx930i] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;
}

.records-table td[b-qrx1jx930i] {
    color: var(--text);

    font-size: 10px;
}

.records-table tbody tr:last-child td[b-qrx1jx930i] {
    border-bottom: 0;
}

.doctor-cell[b-qrx1jx930i] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.doctor-cell strong[b-qrx1jx930i] {
    font-size: 10px;
}

.doctor-cell span[b-qrx1jx930i] {
    color: var(--muted);

    font-size: 8px;
}

.table-action[b-qrx1jx930i] {
    min-height: 30px;
    padding: 0 8px;

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

    border: 1px solid var(--soft);
    border-radius: 7px;

    color: var(--text);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Prescriptions
========================= */

.prescriptions-grid[b-qrx1jx930i] {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.prescription-card[b-qrx1jx930i] {
    min-height: 68px;
    padding: 11px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.prescription-icon[b-qrx1jx930i] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.prescription-info[b-qrx1jx930i] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.prescription-info > div:first-child[b-qrx1jx930i] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.prescription-info strong[b-qrx1jx930i] {
    color: var(--text);

    font-size: 10px;
}

.prescription-info span[b-qrx1jx930i] {
    color: var(--muted);

    font-size: 8px;
}

.prescription-meta[b-qrx1jx930i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.prescription-action[b-qrx1jx930i] {
    min-height: 31px;
    padding: 0 9px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Actions
========================= */

.action-list[b-qrx1jx930i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-qrx1jx930i] {
    min-height: 39px;
    padding: 0 13px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-action[b-qrx1jx930i] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Status
========================= */

.status-badge[b-qrx1jx930i] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-qrx1jx930i] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-qrx1jx930i] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-qrx1jx930i] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-qrx1jx930i] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 900px) {

    .summary-grid[b-qrx1jx930i],
    .health-grid[b-qrx1jx930i] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-qrx1jx930i],
    .pet-hero[b-qrx1jx930i] {
        align-items: stretch;
        flex-direction: column;
    }

    .details-grid[b-qrx1jx930i] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-qrx1jx930i] {
        grid-column: auto;
    }

    .head-actions[b-qrx1jx930i],
    .back-button[b-qrx1jx930i] {
        width: 100%;
    }

    .head-actions a[b-qrx1jx930i] {
        flex: 1;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-qrx1jx930i],
    .health-grid[b-qrx1jx930i] {
        grid-template-columns: 1fr;
    }

    .pet-main[b-qrx1jx930i] {
        align-items: flex-start;
    }

    .card-head[b-qrx1jx930i] {
        flex-direction: column;
    }

    .action-list[b-qrx1jx930i] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-qrx1jx930i] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Pets/CustomerPets.razor.rz.scp.css */
.customer-pets-page[b-0msu7uqqzl] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-0msu7uqqzl] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-0msu7uqqzl] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-0msu7uqqzl] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-0msu7uqqzl] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.create-button[b-0msu7uqqzl] {
    min-height: 44px;
    padding: 0 16px;

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

    gap: 7px;

    border-radius: 11px;

    background: var(--green);
    color: #fff;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}

.create-button span[b-0msu7uqqzl] {
    font-size: 18px;
    line-height: 1;
}

.create-button:hover[b-0msu7uqqzl] {
    color: #fff;

    filter: brightness(.96);
}


/* =========================
   Summary
========================= */

.summary-grid[b-0msu7uqqzl] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-0msu7uqqzl] {
    min-height: 112px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-0msu7uqqzl] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.summary-card strong[b-0msu7uqqzl] {
    color: var(--text);

    font-size: 22px;
    font-weight: 900;
}

.summary-card small[b-0msu7uqqzl] {
    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Filters
========================= */

.filters-card[b-0msu7uqqzl] {
    margin-bottom: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(250px, 1fr)
        180px
        160px;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-0msu7uqqzl],
.filters-card select[b-0msu7uqqzl] {
    width: 100%;
    min-height: 42px;

    padding: 0 12px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;

    outline: none;
}

.filters-card input:focus[b-0msu7uqqzl],
.filters-card select:focus[b-0msu7uqqzl] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Pets Grid
========================= */

.pets-grid[b-0msu7uqqzl] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.pet-card[b-0msu7uqqzl] {
    padding: 19px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.pet-card:hover[b-0msu7uqqzl] {
    border-color: rgba(58, 125, 68, .22);

    box-shadow:
        0 10px 30px rgba(16, 24, 40, .045);

    transform: translateY(-1px);
}


/* =========================
   Pet Header
========================= */

.pet-card-head[b-0msu7uqqzl] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.pet-avatar[b-0msu7uqqzl] {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

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

    border-radius: 15px;

    background: #f2f4f7;
    color: #475467;

    font-size: 14px;
    font-weight: 900;
}

.pet-avatar.dog[b-0msu7uqqzl] {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

.pet-avatar.cat[b-0msu7uqqzl] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-0msu7uqqzl] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-0msu7uqqzl] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-identity[b-0msu7uqqzl] {
    min-width: 0;
    flex: 1;
}

.pet-name-row[b-0msu7uqqzl] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.pet-name-row h2[b-0msu7uqqzl] {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.pet-identity > span[b-0msu7uqqzl] {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Basic Information
========================= */

.pet-basic-info[b-0msu7uqqzl] {
    margin-top: 17px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.pet-basic-info > div[b-0msu7uqqzl] {
    min-height: 65px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;

    border: 1px solid #f0f2f4;
    border-radius: 10px;

    background: #fbfcfd;
}

.pet-basic-info span[b-0msu7uqqzl] {
    color: var(--muted);

    font-size: 9px;
}

.pet-basic-info strong[b-0msu7uqqzl] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Medical Summary
========================= */

.pet-medical-summary[b-0msu7uqqzl] {
    margin-top: 9px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.pet-medical-summary > div[b-0msu7uqqzl] {
    min-height: 67px;
    padding: 10px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;

    border: 1px solid #f0f2f4;
    border-radius: 10px;
}

.pet-medical-summary span[b-0msu7uqqzl] {
    color: var(--muted);

    font-size: 9px;
}

.pet-medical-summary strong[b-0msu7uqqzl] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Note
========================= */

.pet-note[b-0msu7uqqzl] {
    margin-top: 10px;
    padding: 11px 12px;

    border: 1px solid #fedf89;
    border-radius: 10px;

    background: #fffcf5;
}

.pet-note > span[b-0msu7uqqzl] {
    display: block;

    margin-bottom: 4px;

    color: #b54708;

    font-size: 9px;
    font-weight: 800;
}

.pet-note p[b-0msu7uqqzl] {
    margin: 0;

    color: #667085;

    font-size: 10px;
    line-height: 1.8;
}


/* =========================
   Actions
========================= */

.pet-actions[b-0msu7uqqzl] {
    margin-top: 16px;
    padding-top: 14px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    border-top: 1px solid #f0f2f4;
}

.primary-action[b-0msu7uqqzl],
.secondary-action[b-0msu7uqqzl] {
    min-height: 35px;
    padding: 0 11px;

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

    border-radius: 8px;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.primary-action[b-0msu7uqqzl] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.primary-action:hover[b-0msu7uqqzl] {
    color: #fff;

    filter: brightness(.96);
}

.secondary-action[b-0msu7uqqzl] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.secondary-action:hover[b-0msu7uqqzl] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Status
========================= */

.status-badge[b-0msu7uqqzl] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-0msu7uqqzl] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.neutral[b-0msu7uqqzl] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Empty
========================= */

.empty-state[b-0msu7uqqzl] {
    min-height: 340px;
    padding: 40px 20px;

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

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-0msu7uqqzl] {
    width: 64px;
    height: 64px;

    margin-bottom: 15px;

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

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}

.empty-state h2[b-0msu7uqqzl] {
    margin: 0;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.empty-state p[b-0msu7uqqzl] {
    max-width: 500px;

    margin: 7px 0 17px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.9;
}

.empty-action[b-0msu7uqqzl] {
    min-height: 39px;
    padding: 0 14px;

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

    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.empty-action:hover[b-0msu7uqqzl] {
    color: #fff;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .summary-grid[b-0msu7uqqzl] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card[b-0msu7uqqzl] {
        grid-template-columns:
            minmax(0, 1fr)
            repeat(2, 160px);
    }
}

@media (max-width: 850px) {

    .pets-grid[b-0msu7uqqzl] {
        grid-template-columns: 1fr;
    }

    .filters-card[b-0msu7uqqzl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {

    .page-head[b-0msu7uqqzl] {
        align-items: stretch;
        flex-direction: column;
    }

    .create-button[b-0msu7uqqzl] {
        width: 100%;
    }

    .summary-grid[b-0msu7uqqzl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    .pet-basic-info[b-0msu7uqqzl],
    .pet-medical-summary[b-0msu7uqqzl] {
        grid-template-columns: 1fr;
    }

    .pet-actions[b-0msu7uqqzl] {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-action[b-0msu7uqqzl],
    .secondary-action[b-0msu7uqqzl] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Pets/EditCustomerPet.razor.rz.scp.css */
.edit-pet-page[b-2vo7yu6x2o] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-2vo7yu6x2o] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-2vo7yu6x2o] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-2vo7yu6x2o] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-2vo7yu6x2o] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-2vo7yu6x2o] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}

.back-button:hover[b-2vo7yu6x2o] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Pet Summary
========================= */

.pet-summary-card[b-2vo7yu6x2o] {
    margin-bottom: 18px;
    padding: 17px 19px;

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

    gap: 16px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.pet-main[b-2vo7yu6x2o] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.pet-avatar[b-2vo7yu6x2o] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: #f2f4f7;
    color: #475467;

    font-size: 13px;
    font-weight: 900;
}

.pet-avatar.dog[b-2vo7yu6x2o] {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

.pet-avatar.cat[b-2vo7yu6x2o] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-2vo7yu6x2o] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-2vo7yu6x2o] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-main > div:last-child[b-2vo7yu6x2o] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pet-main strong[b-2vo7yu6x2o] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.pet-main span[b-2vo7yu6x2o] {
    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Layout
========================= */

.form-layout[b-2vo7yu6x2o] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .8fr);

    gap: 18px;

    align-items: start;
}

.form-card[b-2vo7yu6x2o],
.side-card[b-2vo7yu6x2o] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.form-card[b-2vo7yu6x2o] {
    overflow: hidden;
}

.form-side[b-2vo7yu6x2o] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Sections
========================= */

.form-section[b-2vo7yu6x2o] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-2vo7yu6x2o] {
    margin-bottom: 18px;
}

.section-head h2[b-2vo7yu6x2o] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-head p[b-2vo7yu6x2o] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.8;
}

.danger-section[b-2vo7yu6x2o] {
    background: #fffdfc;
}


/* =========================
   Form
========================= */

.form-grid[b-2vo7yu6x2o] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.field-group[b-2vo7yu6x2o] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-2vo7yu6x2o] {
    grid-column: 1 / -1;
}

.field-group label[b-2vo7yu6x2o] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label > span[b-2vo7yu6x2o] {
    color: #b42318;
}

.field-group input[b-2vo7yu6x2o],
.field-group select[b-2vo7yu6x2o],
.field-group textarea[b-2vo7yu6x2o] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;

    outline: none;
}

.field-group input[b-2vo7yu6x2o],
.field-group select[b-2vo7yu6x2o] {
    min-height: 43px;

    padding: 0 12px;
}

.field-group textarea[b-2vo7yu6x2o] {
    padding: 11px 12px;

    line-height: 1.9;

    resize: vertical;
}

.field-group input:focus[b-2vo7yu6x2o],
.field-group select:focus[b-2vo7yu6x2o],
.field-group textarea:focus[b-2vo7yu6x2o] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Unit
========================= */

.input-unit[b-2vo7yu6x2o] {
    position: relative;
}

.input-unit input[b-2vo7yu6x2o] {
    padding-left: 75px;
}

.input-unit > span[b-2vo7yu6x2o] {
    position: absolute;

    top: 50%;
    left: 12px;

    transform: translateY(-50%);

    padding-right: 10px;

    border-right: 1px solid var(--soft);

    color: var(--muted);

    font-size: 9px;

    pointer-events: none;
}


/* =========================
   Toggle
========================= */

.toggle-row[b-2vo7yu6x2o] {
    min-height: 70px;
    padding: 13px 15px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;

    cursor: pointer;
}

.toggle-row > div[b-2vo7yu6x2o] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.toggle-row strong[b-2vo7yu6x2o] {
    color: var(--text);

    font-size: 11px;
}

.toggle-row span[b-2vo7yu6x2o] {
    color: var(--muted);

    font-size: 9px;
}

.toggle-row input[b-2vo7yu6x2o] {
    width: 18px;
    height: 18px;

    accent-color: var(--green);
}


/* =========================
   Messages
========================= */

.form-message[b-2vo7yu6x2o] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 11px;

    font-size: 10px;
}

.error-message[b-2vo7yu6x2o] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-2vo7yu6x2o] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-2vo7yu6x2o] {
    color: #027a48;

    font-size: 11px;
}

.success-message span[b-2vo7yu6x2o] {
    color: #475467;

    font-size: 9px;
}


/* =========================
   Actions
========================= */

.form-actions[b-2vo7yu6x2o] {
    padding: 18px 22px;

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

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-2vo7yu6x2o],
.secondary-button[b-2vo7yu6x2o] {
    min-height: 41px;
    padding: 0 16px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-2vo7yu6x2o] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:disabled[b-2vo7yu6x2o] {
    opacity: .55;

    cursor: not-allowed;
}

.secondary-button[b-2vo7yu6x2o] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.secondary-button:hover[b-2vo7yu6x2o] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Side
========================= */

.side-card[b-2vo7yu6x2o] {
    padding: 19px;
}

.side-card h3[b-2vo7yu6x2o] {
    margin: 0 0 13px;

    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.side-card p[b-2vo7yu6x2o] {
    margin: 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.9;
}

.side-details[b-2vo7yu6x2o] {
    display: flex;
    flex-direction: column;
}

.side-details > div[b-2vo7yu6x2o] {
    min-height: 48px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f2f4;
}

.side-details > div:last-child[b-2vo7yu6x2o] {
    border-bottom: 0;
}

.side-details span[b-2vo7yu6x2o] {
    color: var(--muted);

    font-size: 9px;
}

.side-details strong[b-2vo7yu6x2o] {
    color: var(--text);

    font-size: 10px;
}


/* =========================
   Side Actions
========================= */

.side-actions[b-2vo7yu6x2o] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-2vo7yu6x2o] {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.side-action:hover[b-2vo7yu6x2o] {
    border-color: var(--green);
    color: var(--green);
}

.primary-side-action[b-2vo7yu6x2o] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Warning
========================= */

.warning-card[b-2vo7yu6x2o] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-2vo7yu6x2o] {
    color: #b54708;
}


/* =========================
   Status
========================= */

.status-badge[b-2vo7yu6x2o] {
    min-height: 26px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}

.status-badge.success[b-2vo7yu6x2o] {
    background: #ecfdf3;
    color: #027a48;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .form-layout[b-2vo7yu6x2o] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .page-head[b-2vo7yu6x2o],
    .pet-summary-card[b-2vo7yu6x2o] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-2vo7yu6x2o] {
        width: 100%;
    }

    .form-grid[b-2vo7yu6x2o] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-2vo7yu6x2o] {
        grid-column: auto;
    }
}

@media (max-width: 500px) {

    .form-section[b-2vo7yu6x2o] {
        padding: 18px;
    }

    .form-actions[b-2vo7yu6x2o] {
        padding: 16px 18px;

        align-items: stretch;
        flex-direction: column-reverse;
    }

    .primary-button[b-2vo7yu6x2o],
    .secondary-button[b-2vo7yu6x2o] {
        width: 100%;
    }

    .toggle-row[b-2vo7yu6x2o] {
        align-items: flex-start;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Prescriptions/CreateCustomerPrescriptionRequest.razor.rz.scp.css */
.create-prescription-request[b-2v8bnicak5] {
    width: 100%;
    min-width: 0;
    color: var(--text, #344054);
    font-size: 17px;
}

.request-head[b-2v8bnicak5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.request-head > div > span[b-2v8bnicak5] {
    color: var(--orange, #b54708);
    font-size: 18px;
    font-weight: 800;
}

.request-head h1[b-2v8bnicak5] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

.request-head p[b-2v8bnicak5] {
    max-width: 760px;
    margin: 8px 0 0;
    color: var(--muted, #667085);
    font-size: 17px;
    line-height: 2;
}

.request-layout[b-2v8bnicak5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 22px;
}

.request-form-card[b-2v8bnicak5],
.request-progress[b-2v8bnicak5] {
    min-width: 0;
    padding: 26px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 18px;
    background: #fff;
}

.request-form-card h2[b-2v8bnicak5],
.request-progress h2[b-2v8bnicak5] {
    margin: 0 0 24px;
    font-size: 21px;
    font-weight: 900;
}

.field[b-2v8bnicak5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.field label[b-2v8bnicak5] {
    font-size: 17px;
    font-weight: 800;
}

.field input[b-2v8bnicak5],
.field select[b-2v8bnicak5],
.field textarea[b-2v8bnicak5] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: var(--text, #344054);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.9;
}

.field textarea[b-2v8bnicak5] {
    resize: vertical;
}

.field input:focus[b-2v8bnicak5],
.field select:focus[b-2v8bnicak5],
.field textarea:focus[b-2v8bnicak5] {
    outline: 3px solid #d8ebdd;
    outline-offset: 2px;
    border-color: var(--green, #3a7d44);
}

.field small[b-2v8bnicak5] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.9;
}

.request-button[b-2v8bnicak5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 17px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: var(--text, #344054);
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.request-button.primary[b-2v8bnicak5] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.request-button:disabled[b-2v8bnicak5] {
    opacity: .55;
    cursor: not-allowed;
}

.request-note[b-2v8bnicak5],
.request-error[b-2v8bnicak5] {
    padding: 15px 17px;
    margin-bottom: 22px;
    border: 1px solid #d8e9dd;
    border-radius: 12px;
    background: #f4faf6;
    color: #35633e;
    font-size: 16px;
    line-height: 2;
}

.request-error[b-2v8bnicak5] {
    border-color: #fecdca;
    background: #fff5f4;
    color: #b42318;
}

.request-progress ol[b-2v8bnicak5] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.request-progress li[b-2v8bnicak5] {
    position: relative;
    min-height: 88px;
    padding-right: 50px;
    counter-increment: step;
}

.request-progress li[b-2v8bnicak5]::before {
    content: counter(step);
    position: absolute;
    right: 0;
    top: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f2f4f7;
    color: #667085;
    font-size: 16px;
    font-weight: 800;
}

.request-progress li:not(:last-child)[b-2v8bnicak5]::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 40px;
    bottom: 8px;
    width: 2px;
    background: #e4e7ec;
}

.request-progress li.current[b-2v8bnicak5]::before {
    background: var(--green, #3a7d44);
    color: #fff;
}

.request-progress li strong[b-2v8bnicak5] {
    display: block;
    font-size: 16px;
    line-height: 1.9;
}

.request-progress li span[b-2v8bnicak5] {
    display: block;
    margin-top: 4px;
    color: var(--muted, #667085);
    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 1000px) {
    .request-layout[b-2v8bnicak5] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 650px) {
    .request-head[b-2v8bnicak5] {
        flex-direction: column;
        align-items: stretch;
    }

    .request-form-card[b-2v8bnicak5],
    .request-progress[b-2v8bnicak5] {
        padding: 19px;
    }

    .request-button.primary[b-2v8bnicak5] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Prescriptions/CustomerPrescriptionDetails.razor.rz.scp.css */
.prescription-details-page[b-of19b9kj47] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-of19b9kj47] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-of19b9kj47] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-of19b9kj47] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-of19b9kj47] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-of19b9kj47] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Hero
========================= */

.prescription-hero[b-of19b9kj47] {
    margin-bottom: 18px;
    padding: 18px;

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

    gap: 18px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.prescription-main[b-of19b9kj47] {
    display: flex;
    align-items: center;

    gap: 12px;
}

.prescription-avatar[b-of19b9kj47] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 11px;
    font-weight: 900;
}

.prescription-main > div:last-child[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.prescription-main strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.prescription-main span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 10px;
}

.hero-badges[b-of19b9kj47] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-of19b9kj47] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-of19b9kj47] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.summary-card small[b-of19b9kj47] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Details Grid
========================= */

.details-grid[b-of19b9kj47] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-of19b9kj47] {
    padding: 21px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card.full[b-of19b9kj47] {
    grid-column: 1 / -1;
}

.details-card h3[b-of19b9kj47] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}


/* =========================
   Details
========================= */

.details-list[b-of19b9kj47] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-of19b9kj47] {
    min-height: 52px;

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

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-of19b9kj47] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-of19b9kj47] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Pet / Doctor
========================= */

.pet-card[b-of19b9kj47],
.doctor-card[b-of19b9kj47] {
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.pet-avatar[b-of19b9kj47],
.doctor-avatar[b-of19b9kj47] {
    width: 43px;
    height: 43px;

    flex: 0 0 43px;

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

    border-radius: 11px;

    font-size: 9px;
    font-weight: 900;
}

.doctor-avatar[b-of19b9kj47] {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

.pet-avatar[b-of19b9kj47] {
    background: #f2f4f7;
    color: #475467;
}

.pet-avatar.dog[b-of19b9kj47] {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

.pet-avatar.cat[b-of19b9kj47] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-of19b9kj47] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-of19b9kj47] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-card > div:last-child[b-of19b9kj47],
.doctor-card > div:last-child[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pet-card strong[b-of19b9kj47],
.doctor-card strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 11px;
}

.pet-card span[b-of19b9kj47],
.doctor-card span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 8px;
}

.pet-details[b-of19b9kj47],
.doctor-details[b-of19b9kj47] {
    margin-top: 9px;
}


/* =========================
   External
========================= */

.external-prescription-box[b-of19b9kj47] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px dashed var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.external-icon[b-of19b9kj47] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 10px;

    background: #fff;
    color: #175cd3;

    font-size: 10px;
    font-weight: 900;
}

.external-prescription-box > div:last-child[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.external-prescription-box strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 10px;
}

.external-prescription-box span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Full Action
========================= */

.full-card-action[b-of19b9kj47] {
    width: 100%;
    min-height: 36px;

    margin-top: 10px;

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

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}

.button-action[b-of19b9kj47] {
    cursor: pointer;
}


/* =========================
   Card Head
========================= */

.card-head[b-of19b9kj47] {
    margin-bottom: 16px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h3[b-of19b9kj47] {
    margin-bottom: 4px;
}

.card-head p[b-of19b9kj47] {
    margin: 0;

    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Prescription Items
========================= */

.items-list[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.prescription-item[b-of19b9kj47] {
    padding: 15px;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fbfcfd;
}

.item-main[b-of19b9kj47] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.medicine-icon[b-of19b9kj47] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.medicine-info[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.medicine-info strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 11px;
}

.medicine-info span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 8px;
}

.item-details[b-of19b9kj47] {
    margin-top: 13px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;
}

.item-details > div[b-of19b9kj47] {
    min-height: 62px;
    padding: 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fff;
}

.item-details span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 8px;
}

.item-details strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 9px;
}

.usage-box[b-of19b9kj47],
.item-note[b-of19b9kj47] {
    margin-top: 10px;
    padding: 11px 12px;

    border-radius: 10px;
}

.usage-box[b-of19b9kj47] {
    border: 1px solid var(--soft);

    background: #fff;
}

.item-note[b-of19b9kj47] {
    border: 1px solid #fedf89;

    background: #fffcf5;
}

.usage-box span[b-of19b9kj47],
.item-note span[b-of19b9kj47] {
    display: block;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 8px;
    font-weight: 800;
}

.item-note span[b-of19b9kj47] {
    color: #b54708;
}

.usage-box p[b-of19b9kj47],
.item-note p[b-of19b9kj47] {
    margin: 0;

    color: var(--text);

    font-size: 9px;
    line-height: 1.8;
}


/* =========================
   Doctor Note
========================= */

.doctor-note[b-of19b9kj47] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.doctor-note p[b-of19b9kj47] {
    margin: 0;

    color: var(--text);

    font-size: 10px;
    line-height: 1.9;
}


/* =========================
   Timeline
========================= */

.timeline[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

.timeline-item[b-of19b9kj47] {
    position: relative;

    min-height: 55px;
    padding-right: 27px;
}

.timeline-item:not(:last-child)[b-of19b9kj47]::after {
    content: "";

    position: absolute;

    top: 14px;
    right: 5px;

    width: 1px;
    height: calc(100% + 11px);

    background: #e4e7ec;
}

.timeline-dot[b-of19b9kj47] {
    position: absolute;

    top: 5px;
    right: 0;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #d0d5dd;
}

.timeline-item.completed .timeline-dot[b-of19b9kj47] {
    background: var(--green);
}

.timeline-item.active .timeline-dot[b-of19b9kj47] {
    background: var(--orange);
}

.timeline-item.failed .timeline-dot[b-of19b9kj47] {
    background: #b42318;
}

.timeline-item > div:last-child[b-of19b9kj47] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.timeline-item strong[b-of19b9kj47] {
    color: var(--text);

    font-size: 10px;
}

.timeline-item span[b-of19b9kj47] {
    color: var(--muted);

    font-size: 9px;
    line-height: 1.7;
}

.timeline-item small[b-of19b9kj47] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Actions
========================= */

.action-list[b-of19b9kj47] {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-of19b9kj47] {
    min-height: 39px;
    padding: 0 13px;

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

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-action[b-of19b9kj47] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.warning-action[b-of19b9kj47] {
    border-color: #fdb022;

    color: #b54708;
}


/* =========================
   Status
========================= */

.status-badge[b-of19b9kj47] {
    min-height: 26px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-of19b9kj47] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-of19b9kj47] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-of19b9kj47] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.info[b-of19b9kj47] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-of19b9kj47] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .summary-grid[b-of19b9kj47] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .item-details[b-of19b9kj47] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-of19b9kj47],
    .prescription-hero[b-of19b9kj47],
    .card-head[b-of19b9kj47] {
        align-items: stretch;
        flex-direction: column;
    }

    .details-grid[b-of19b9kj47] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-of19b9kj47] {
        grid-column: auto;
    }

    .back-button[b-of19b9kj47] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-of19b9kj47],
    .item-details[b-of19b9kj47] {
        grid-template-columns: 1fr;
    }

    .action-list[b-of19b9kj47] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-of19b9kj47] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Prescriptions/CustomerPrescriptions.razor.rz.scp.css */
.prescription-requests-page[b-p15oey79b9] {
    width: 100%;
    min-width: 0;
}

.create-request-button[b-p15oey79b9] {
    min-height: 54px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--green, #3a7d44);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.create-request-button:hover[b-p15oey79b9] {
    color: #fff;
    filter: brightness(.96);
}

.prescription-requests-page[b-p15oey79b9]  .data-table {
    min-width: 1080px;
}

.prescription-requests-page[b-p15oey79b9]  .data-table th,
.prescription-requests-page[b-p15oey79b9]  .data-table td {
    white-space: nowrap;
}

.request-cell[b-p15oey79b9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.request-cell strong[b-p15oey79b9] {
    font-size: 18px;
}

.request-cell span[b-p15oey79b9] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.status-badge[b-p15oey79b9] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge.success[b-p15oey79b9] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.info[b-p15oey79b9] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.warning[b-p15oey79b9] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-p15oey79b9] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-p15oey79b9] {
    background: #f2f4f7;
    color: #667085;
}

.action-link[b-p15oey79b9] {
    min-height: 38px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 9px;
    background: #fff;
    color: var(--text, #344054);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.action-link:hover[b-p15oey79b9] {
    border-color: var(--green, #3a7d44);
    color: var(--green, #3a7d44);
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Profile/CustomerProfile.razor.rz.scp.css */
.customer-profile-page[b-fmw34p4dcd] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-fmw34p4dcd] {
    margin-bottom: 22px;
}

.page-head > div:first-child > span[b-fmw34p4dcd] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.page-head h1[b-fmw34p4dcd] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-fmw34p4dcd] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.9;
    text-align: justify;
}


/* =========================
   Hero
========================= */

.profile-hero[b-fmw34p4dcd] {
    margin-bottom: 18px;
    padding: 20px;

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

    gap: 24px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.profile-main[b-fmw34p4dcd] {
    display: flex;
    align-items: center;

    gap: 13px;
}

.profile-avatar[b-fmw34p4dcd] {
    width: 66px;
    height: 66px;

    flex: 0 0 66px;

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

    border-radius: 18px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 19px;
    font-weight: 900;
}

.profile-identity[b-fmw34p4dcd] {
    min-width: 0;
}

.name-row[b-fmw34p4dcd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}

.name-row h2[b-fmw34p4dcd] {
    margin: 0;

    color: var(--text);

    font-size: 19px;
    font-weight: 900;
}

.profile-identity > span[b-fmw34p4dcd] {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 14px;
}

.profile-meta[b-fmw34p4dcd] {
    margin-top: 8px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}

.profile-meta span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 15px;
}


/* =========================
   Completion
========================= */

.completion-box[b-fmw34p4dcd] {
    width: min(360px, 100%);

    padding: 14px;

    border: 1px solid #e4e7ec;
    border-radius: 12px;

    background: #fbfcfd;
}

.completion-head[b-fmw34p4dcd] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.completion-head span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 14px;
    font-weight: 800;
}

.completion-head strong[b-fmw34p4dcd] {
    color: var(--green);

    font-size: 16px;
}

.progress-bar[b-fmw34p4dcd] {
    height: 7px;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #e4e7ec;
}

.progress-value[b-fmw34p4dcd] {
    height: 100%;

    border-radius: inherit;

    background: var(--green);
}

.completion-box small[b-fmw34p4dcd] {
    display: block;

    margin-top: 8px;

    color: var(--muted);

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


/* =========================
   Summary
========================= */

.summary-grid[b-fmw34p4dcd] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-fmw34p4dcd] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 15px;
}

.summary-card strong[b-fmw34p4dcd] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 14px;
}


/* =========================
   Main Layout
========================= */

.profile-layout[b-fmw34p4dcd] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .8fr);

    gap: 18px;

    align-items: start;
}

.profile-main-column[b-fmw34p4dcd],
.profile-side[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Cards
========================= */

.profile-card[b-fmw34p4dcd],
.side-card[b-fmw34p4dcd] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.profile-card[b-fmw34p4dcd] {
    padding: 21px;
}

.side-card[b-fmw34p4dcd] {
    padding: 18px;
}

.card-head[b-fmw34p4dcd] {
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h2[b-fmw34p4dcd] {
    margin: 0;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
}

.card-head p[b-fmw34p4dcd] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 18px;
}

.edit-button[b-fmw34p4dcd] {
    min-height: 34px;
    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.edit-button:hover[b-fmw34p4dcd] {
    border-color: var(--green);

    color: var(--green);
}


/* =========================
   Details
========================= */

.details-list[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-fmw34p4dcd] {
    min-height: 51px;

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

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-fmw34p4dcd] {
    border-bottom: 0;
}

.detail-item span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 15px;
}

.detail-item strong[b-fmw34p4dcd] {
    color: var(--text);

    font-size: 15px;
}

.ltr-value[b-fmw34p4dcd] {
    direction: ltr;

    unicode-bidi: plaintext;
}


/* =========================
   Edit Form
========================= */

.edit-form[b-fmw34p4dcd] {
    width: 100%;
}

.form-grid[b-fmw34p4dcd] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group label[b-fmw34p4dcd] {
    color: var(--text);

    font-size: 14px;
    font-weight: 800;
}

.field-group label span[b-fmw34p4dcd] {
    color: #b42318;
}

.field-group input[b-fmw34p4dcd],
.field-group select[b-fmw34p4dcd] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.field-group input:focus[b-fmw34p4dcd],
.field-group select:focus[b-fmw34p4dcd] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}

.form-message[b-fmw34p4dcd] {
    margin-top: 14px;
    padding: 11px 12px;

    border-radius: 9px;

    font-size: 14px;
}

.error-message[b-fmw34p4dcd] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-fmw34p4dcd] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
    color: #027a48;
}

.edit-actions[b-fmw34p4dcd] {
    margin-top: 15px;

    display: flex;
    justify-content: flex-end;

    gap: 8px;
}


/* =========================
   Buttons
========================= */

.primary-button[b-fmw34p4dcd],
.secondary-button[b-fmw34p4dcd] {
    min-height: 39px;
    padding: 0 13px;

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

    border-radius: 9px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}

.primary-button[b-fmw34p4dcd] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;
}

.secondary-button[b-fmw34p4dcd] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

.primary-button:disabled[b-fmw34p4dcd],
.secondary-button:disabled[b-fmw34p4dcd] {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================
   Contact
========================= */

.contact-grid[b-fmw34p4dcd] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.contact-box[b-fmw34p4dcd] {
    min-height: 110px;
    padding: 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 5px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.contact-box > span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 13px;
}

.contact-box > strong[b-fmw34p4dcd] {
    overflow: hidden;

    color: var(--text);

    font-size: 16px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-value[b-fmw34p4dcd] {
    font-size: 14px !important;
}

.contact-status[b-fmw34p4dcd] {
    margin-top: 3px;
}

.contact-note[b-fmw34p4dcd] {
    margin-top: 10px;
    padding: 11px 12px;

    border: 1px solid #fedf89;
    border-radius: 10px;

    background: #fffcf5;
}

.contact-note strong[b-fmw34p4dcd] {
    display: block;

    margin-bottom: 3px;

    color: #b54708;

    font-size: 19px;
}

.contact-note p[b-fmw34p4dcd] {
    margin: 0;

    color: #667085;

    font-size: 18px;
    line-height: 1.8;
}


/* =========================
   Settings
========================= */

.settings-list[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;

    gap: 9px;
}

.setting-row[b-fmw34p4dcd] {
    min-height: 70px;
    padding: 12px 14px;

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

    gap: 20px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;

    cursor: pointer;
}

.setting-row > div[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.setting-row strong[b-fmw34p4dcd] {
    color: var(--text);

    font-size: 19px;
}

.setting-row span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 18px;
    line-height: 1.7;
}

.setting-row input[b-fmw34p4dcd] {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    accent-color: var(--green);
}

.settings-actions[b-fmw34p4dcd] {
    margin-top: 14px;

    display: flex;
    justify-content: flex-end;
}


/* =========================
   Side
========================= */

.side-card h3[b-fmw34p4dcd] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
}

.side-card > p[b-fmw34p4dcd] {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.quick-actions[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.quick-actions a[b-fmw34p4dcd] {
    min-height: 37px;
    padding: 0 10px;

    display: flex;
    align-items: center;

    border: 1px solid var(--soft);
    border-radius: 8px;

    color: var(--text);

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;
}

.quick-actions a:hover[b-fmw34p4dcd] {
    border-color: var(--green);

    color: var(--green);
}

.security-list[b-fmw34p4dcd] {
    display: flex;
    flex-direction: column;
}

.security-list > div[b-fmw34p4dcd] {
    min-height: 46px;

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

    gap: 12px;

    border-bottom: 1px solid #f0f2f4;
}

.security-list > div:last-child[b-fmw34p4dcd] {
    border-bottom: 0;
}

.security-list span[b-fmw34p4dcd] {
    color: var(--muted);

    font-size: 13px;
}

.security-list strong[b-fmw34p4dcd] {
    color: var(--text);

    font-size: 13px;
}

.success-text[b-fmw34p4dcd] {
    color: #027a48 !important;
}

.warning-text[b-fmw34p4dcd] {
    color: #b54708 !important;
}

.warning-card[b-fmw34p4dcd] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-fmw34p4dcd] {
    color: #b54708;
}


/* =========================
   Status
========================= */

.status-badge[b-fmw34p4dcd] {
    min-height: 25px;
    padding: 0 8px;

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

    border-radius: 999px;

    font-size: 13px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-fmw34p4dcd] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-fmw34p4dcd] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.neutral[b-fmw34p4dcd] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .profile-hero[b-fmw34p4dcd] {
        align-items: stretch;
        flex-direction: column;
    }

    .completion-box[b-fmw34p4dcd] {
        width: 100%;
    }

    .profile-layout[b-fmw34p4dcd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .summary-grid[b-fmw34p4dcd] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .form-grid[b-fmw34p4dcd],
    .contact-grid[b-fmw34p4dcd],
    .summary-grid[b-fmw34p4dcd] {
        grid-template-columns: 1fr;
    }

    .card-head[b-fmw34p4dcd] {
        align-items: stretch;
        flex-direction: column;
    }

    .edit-button[b-fmw34p4dcd] {
        width: 100%;
    }

    .edit-actions[b-fmw34p4dcd],
    .settings-actions[b-fmw34p4dcd] {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-button[b-fmw34p4dcd],
    .secondary-button[b-fmw34p4dcd] {
        width: 100%;
    }
}

@media (max-width: 500px) {

    .profile-main[b-fmw34p4dcd] {
        align-items: flex-start;
    }

    .setting-row[b-fmw34p4dcd] {
        align-items: flex-start;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Shop/CustomerProductDetails.razor.rz.scp.css */
.product-details-page[b-pynv2incu1] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-pynv2incu1] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-pynv2incu1] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-pynv2incu1] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-pynv2incu1] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.back-button[b-pynv2incu1] {
    min-height: 42px;
    padding: 0 15px;

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

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Hero
========================= */

.product-hero[b-pynv2incu1] {
    margin-bottom: 18px;
    padding: 24px;

    display: grid;
    grid-template-columns:
        minmax(260px, .8fr)
        minmax(0, 1.6fr);

    gap: 28px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.product-visual[b-pynv2incu1] {
    min-height: 340px;

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

    border: 1px solid #f0f2f4;
    border-radius: 16px;

    background: #fbfcfd;
}

.product-icon[b-pynv2incu1] {
    width: 130px;
    height: 130px;

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

    border-radius: 30px;

    background: #f2f4f7;
    color: #475467;

    font-size: 27px;
    font-weight: 900;
}

.product-icon.drug[b-pynv2incu1] {
    background: #ecfdf3;
    color: #027a48;
}

.product-icon.food[b-pynv2incu1] {
    background: #fff6ed;
    color: #c4320a;
}

.product-icon.supplement[b-pynv2incu1] {
    background: #f9f5ff;
    color: #6941c6;
}

.product-icon.hygiene[b-pynv2incu1] {
    background: #eff8ff;
    color: #175cd3;
}

.product-icon.accessory[b-pynv2incu1] {
    background: #fff4f6;
    color: #c01048;
}


/* =========================
   Product Main
========================= */

.product-main[b-pynv2incu1] {
    display: flex;
    flex-direction: column;

    justify-content: center;
}

.product-badges[b-pynv2incu1] {
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}

.product-main > h1[b-pynv2incu1] {
    margin: 0;

    color: var(--text);

    font-size: 23px;
    font-weight: 900;
    line-height: 1.7;
}

.brand-row[b-pynv2incu1] {
    margin-top: 7px;

    display: flex;
    align-items: center;

    gap: 6px;
}

.brand-row span[b-pynv2incu1] {
    color: var(--muted);

    font-size: 9px;
}

.brand-row strong[b-pynv2incu1] {
    color: var(--text);

    font-size: 10px;
}

.product-short-description[b-pynv2incu1] {
    margin: 14px 0 0;

    color: var(--muted);

    font-size: 11px;
    line-height: 2;
}

.price-box[b-pynv2incu1] {
    margin-top: 18px;

    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;

    gap: 10px;
}

.price-box strong[b-pynv2incu1] {
    color: var(--green);

    font-size: 24px;
    font-weight: 900;
}

.old-price[b-pynv2incu1] {
    color: var(--muted);

    font-size: 11px;

    text-decoration: line-through;
}


/* =========================
   Availability
========================= */

.availability-note[b-pynv2incu1] {
    margin-top: 12px;
    padding: 11px 13px;

    border-radius: 10px;

    font-size: 9px;
}

.warning-note[b-pynv2incu1] {
    border: 1px solid #fedf89;

    background: #fffcf5;
    color: #b54708;
}

.danger-note[b-pynv2incu1] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}


/* =========================
   Prescription
========================= */

.prescription-box[b-pynv2incu1] {
    margin-top: 13px;
    padding: 13px;

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

    gap: 14px;

    border: 1px solid #fedf89;
    border-radius: 11px;

    background: #fffcf5;
}

.prescription-box > div[b-pynv2incu1] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.prescription-box strong[b-pynv2incu1] {
    color: #b54708;

    font-size: 10px;
}

.prescription-box span[b-pynv2incu1] {
    color: #667085;

    font-size: 8px;
}

.prescription-action[b-pynv2incu1] {
    min-height: 33px;
    padding: 0 10px;

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

    flex: 0 0 auto;

    border: 1px solid #fdb022;
    border-radius: 8px;

    background: #fff;
    color: #b54708;

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Purchase
========================= */

.purchase-row[b-pynv2incu1] {
    margin-top: 18px;

    display: grid;
    grid-template-columns:
        130px
        minmax(0, 1fr);

    gap: 9px;
}

.quantity-control[b-pynv2incu1] {
    min-height: 43px;

    display: grid;
    grid-template-columns:
        38px 1fr 38px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    overflow: hidden;
}

.quantity-control button[b-pynv2incu1] {
    border: 0;

    background: #fbfcfd;
    color: var(--text);

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    cursor: pointer;
}

.quantity-control button:disabled[b-pynv2incu1] {
    opacity: .35;

    cursor: not-allowed;
}

.quantity-control strong[b-pynv2incu1] {
    display: flex;
    align-items: center;
    justify-content: center;

    border-right: 1px solid var(--soft);
    border-left: 1px solid var(--soft);

    color: var(--text);

    font-size: 11px;
}

.add-cart-button[b-pynv2incu1] {
    min-height: 43px;

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 900;

    cursor: pointer;
}

.add-cart-button:disabled[b-pynv2incu1] {
    opacity: .5;

    cursor: not-allowed;
}

.go-cart-button[b-pynv2incu1] {
    width: 100%;
    min-height: 38px;

    margin-top: 8px;

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

    border: 1px solid var(--green);
    border-radius: 9px;

    background: #fff;
    color: var(--green);

    font-size: 9px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Summary
========================= */

.summary-grid[b-pynv2incu1] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-pynv2incu1] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-pynv2incu1] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-pynv2incu1] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.summary-card small[b-pynv2incu1] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Details
========================= */

.details-grid[b-pynv2incu1] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.details-card[b-pynv2incu1] {
    padding: 21px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card.full[b-pynv2incu1] {
    grid-column: 1 / -1;
}

.details-card h3[b-pynv2incu1] {
    margin: 0 0 17px;

    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.details-list[b-pynv2incu1] {
    display: flex;
    flex-direction: column;
}

.detail-item[b-pynv2incu1] {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.detail-item:last-child[b-pynv2incu1] {
    border-bottom: 0;
}

.detail-item > span:first-child[b-pynv2incu1] {
    color: var(--muted);

    font-size: 10px;
}

.detail-item strong[b-pynv2incu1] {
    color: var(--text);

    font-size: 11px;
}


/* =========================
   Content
========================= */

.content-box[b-pynv2incu1] {
    padding: 14px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.content-box p[b-pynv2incu1] {
    margin: 0;

    color: var(--text);

    font-size: 10px;
    line-height: 2;
}


/* =========================
   Warning
========================= */

.warning-card[b-pynv2incu1] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-pynv2incu1] {
    color: #b54708;
}

.warning-content[b-pynv2incu1] {
    padding: 13px;

    border: 1px solid #fedf89;
    border-radius: 10px;

    background: #fff;

    color: #667085;

    font-size: 10px;
    line-height: 1.9;
}


/* =========================
   Features
========================= */

.features-grid[b-pynv2incu1] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}

.feature-item[b-pynv2incu1] {
    min-height: 55px;
    padding: 10px 12px;

    display: flex;
    align-items: center;

    gap: 9px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fbfcfd;
}

.feature-mark[b-pynv2incu1] {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #ecfdf3;
    color: #027a48;

    font-size: 9px;
    font-weight: 900;
}

.feature-item span[b-pynv2incu1] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Actions
========================= */

.action-list[b-pynv2incu1] {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.action-button[b-pynv2incu1] {
    min-height: 39px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-action[b-pynv2incu1] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Status
========================= */

.status-badge[b-pynv2incu1] {
    min-height: 26px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-pynv2incu1] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-pynv2incu1] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-pynv2incu1] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.info[b-pynv2incu1] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-pynv2incu1] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .product-hero[b-pynv2incu1] {
        grid-template-columns: 1fr;
    }

    .product-visual[b-pynv2incu1] {
        min-height: 240px;
    }

    .summary-grid[b-pynv2incu1] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {

    .page-head[b-pynv2incu1],
    .prescription-box[b-pynv2incu1] {
        align-items: stretch;
        flex-direction: column;
    }

    .details-grid[b-pynv2incu1] {
        grid-template-columns: 1fr;
    }

    .details-card.full[b-pynv2incu1] {
        grid-column: auto;
    }

    .back-button[b-pynv2incu1],
    .prescription-action[b-pynv2incu1] {
        width: 100%;
    }
}

@media (max-width: 600px) {

    .summary-grid[b-pynv2incu1],
    .features-grid[b-pynv2incu1],
    .purchase-row[b-pynv2incu1] {
        grid-template-columns: 1fr;
    }

    .action-list[b-pynv2incu1] {
        align-items: stretch;
        flex-direction: column;
    }

    .action-button[b-pynv2incu1] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Shop/CustomerProducts.razor.rz.scp.css */
.customer-products-page[b-re8y561b1e] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-re8y561b1e] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-re8y561b1e] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-re8y561b1e] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-re8y561b1e] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.cart-button[b-re8y561b1e] {
    min-height: 43px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.cart-button span[b-re8y561b1e] {
    min-width: 22px;
    height: 22px;
    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #fff;
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}


/* =========================
   Summary
========================= */

.summary-grid[b-re8y561b1e] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-re8y561b1e] {
    min-height: 110px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-re8y561b1e] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-re8y561b1e] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-re8y561b1e] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Filters
========================= */

.filters-card[b-re8y561b1e] {
    margin-bottom: 12px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(260px, 1.6fr)
        repeat(3, minmax(150px, .8fr));

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-re8y561b1e],
.filters-card select[b-re8y561b1e] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.filters-card input:focus[b-re8y561b1e],
.filters-card select:focus[b-re8y561b1e] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Category Tabs
========================= */

.category-tabs[b-re8y561b1e] {
    margin-bottom: 18px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;
}

.category-tab[b-re8y561b1e] {
    min-height: 35px;
    padding: 0 12px;

    border: 1px solid var(--soft);
    border-radius: 999px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.category-tab:hover[b-re8y561b1e] {
    border-color: var(--green);

    color: var(--green);
}

.category-tab.active[b-re8y561b1e] {
    border-color: var(--green);

    background: rgba(58, 125, 68, .08);
    color: var(--green);
}


/* =========================
   Products
========================= */

.products-grid[b-re8y561b1e] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.product-card[b-re8y561b1e] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}

.product-card:hover[b-re8y561b1e] {
    border-color: rgba(58, 125, 68, .22);

    box-shadow:
        0 10px 30px rgba(16, 24, 40, .045);

    transform: translateY(-1px);
}


/* =========================
   Product Image
========================= */

.product-image[b-re8y561b1e] {
    position: relative;

    min-height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fbfcfd;

    border-bottom: 1px solid #f0f2f4;
}

.product-icon[b-re8y561b1e] {
    width: 74px;
    height: 74px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background: #f2f4f7;
    color: #475467;

    font-size: 17px;
    font-weight: 900;
}

.product-icon.drug[b-re8y561b1e] {
    background: #ecfdf3;
    color: #027a48;
}

.product-icon.food[b-re8y561b1e] {
    background: #fff6ed;
    color: #c4320a;
}

.product-icon.supplement[b-re8y561b1e] {
    background: #f9f5ff;
    color: #6941c6;
}

.product-icon.hygiene[b-re8y561b1e] {
    background: #eff8ff;
    color: #175cd3;
}

.product-icon.accessory[b-re8y561b1e] {
    background: #fff4f6;
    color: #c01048;
}

.image-badges[b-re8y561b1e] {
    position: absolute;

    top: 10px;
    right: 10px;
    left: 10px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 6px;
}

.prescription-required[b-re8y561b1e] {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #fff1f1;
    color: #b42318;

    font-size: 8px;
    font-weight: 800;
}


/* =========================
   Body
========================= */

.product-body[b-re8y561b1e] {
    padding: 16px;
}

.product-category[b-re8y561b1e] {
    margin-bottom: 5px;

    color: var(--green);

    font-size: 8px;
    font-weight: 800;
}

.product-body h2[b-re8y561b1e] {
    min-height: 44px;

    margin: 0;

    color: var(--text);

    font-size: 13px;
    font-weight: 900;
    line-height: 1.8;
}

.product-brand[b-re8y561b1e] {
    margin-top: 7px;

    display: flex;
    align-items: center;

    gap: 5px;
}

.product-brand span[b-re8y561b1e] {
    color: var(--muted);

    font-size: 8px;
}

.product-brand strong[b-re8y561b1e] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Product Meta
========================= */

.product-meta[b-re8y561b1e] {
    margin-top: 12px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

.product-meta > div[b-re8y561b1e] {
    min-height: 56px;
    padding: 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.product-meta span[b-re8y561b1e] {
    color: var(--muted);

    font-size: 7px;
}

.product-meta strong[b-re8y561b1e] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Price
========================= */

.product-price[b-re8y561b1e] {
    min-height: 50px;

    margin-top: 12px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 8px;
}

.product-price strong[b-re8y561b1e] {
    color: var(--green);

    font-size: 14px;
    font-weight: 900;

    white-space: nowrap;
}

.old-price[b-re8y561b1e] {
    color: var(--muted);

    font-size: 9px;

    text-decoration: line-through;
}


/* =========================
   Notes
========================= */

.stock-warning[b-re8y561b1e],
.prescription-note[b-re8y561b1e] {
    margin-top: 9px;
    padding: 9px 10px;

    border-radius: 9px;

    font-size: 8px;
    line-height: 1.7;
}

.stock-warning[b-re8y561b1e] {
    border: 1px solid #fedf89;

    background: #fffcf5;
    color: #b54708;
}

.prescription-note[b-re8y561b1e] {
    border: 1px solid #fecdca;

    background: #fff8f7;
    color: #b42318;
}


/* =========================
   Actions
========================= */

.product-actions[b-re8y561b1e] {
    margin-top: 14px;
    padding-top: 13px;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    border-top: 1px solid #f0f2f4;
}

.details-button[b-re8y561b1e],
.add-cart-button[b-re8y561b1e] {
    min-height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}

.details-button[b-re8y561b1e] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);

    text-decoration: none;
}

.details-button:hover[b-re8y561b1e] {
    border-color: var(--green);

    color: var(--green);
}

.add-cart-button[b-re8y561b1e] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.add-cart-button:disabled[b-re8y561b1e] {
    opacity: .45;

    cursor: not-allowed;
}


/* =========================
   Status
========================= */

.status-badge[b-re8y561b1e] {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-re8y561b1e] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-re8y561b1e] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.danger[b-re8y561b1e] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-re8y561b1e] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Empty
========================= */

.empty-state[b-re8y561b1e] {
    min-height: 330px;
    padding: 40px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-re8y561b1e] {
    width: 62px;
    height: 62px;

    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}

.empty-state h2[b-re8y561b1e] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.empty-state p[b-re8y561b1e] {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 10px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1100px) {

    .products-grid[b-re8y561b1e] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1000px) {

    .filters-card[b-re8y561b1e] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card input[b-re8y561b1e] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {

    .summary-grid[b-re8y561b1e] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .page-head[b-re8y561b1e] {
        align-items: stretch;
        flex-direction: column;
    }

    .cart-button[b-re8y561b1e] {
        width: 100%;
    }

    .summary-grid[b-re8y561b1e],
    .filters-card[b-re8y561b1e],
    .products-grid[b-re8y561b1e] {
        grid-template-columns: 1fr;
    }

    .filters-card input[b-re8y561b1e] {
        grid-column: auto;
    }
}

@media (max-width: 430px) {

    .product-actions[b-re8y561b1e],
    .product-meta[b-re8y561b1e] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Tickets/CreateCustomerTicket.razor.rz.scp.css */
.create-ticket-page[b-c8dzb1rumw] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-c8dzb1rumw] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-c8dzb1rumw] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-c8dzb1rumw] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-c8dzb1rumw] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-c8dzb1rumw] {
    min-height: 42px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-c8dzb1rumw] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(290px, .8fr);

    gap: 18px;

    align-items: start;
}

.ticket-form-card[b-c8dzb1rumw] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.ticket-side[b-c8dzb1rumw] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Sections
========================= */

.form-section[b-c8dzb1rumw] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-c8dzb1rumw] {
    margin-bottom: 18px;
}

.section-head h2[b-c8dzb1rumw] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-head p[b-c8dzb1rumw] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.8;
}


/* =========================
   Form
========================= */

.form-grid[b-c8dzb1rumw] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-c8dzb1rumw] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-c8dzb1rumw] {
    grid-column: 1 / -1;
}

.field-group label[b-c8dzb1rumw],
.reference-selector label[b-c8dzb1rumw] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label span[b-c8dzb1rumw] {
    color: #b42318;
}

.field-group input[b-c8dzb1rumw],
.field-group select[b-c8dzb1rumw],
.field-group textarea[b-c8dzb1rumw],
.reference-selector select[b-c8dzb1rumw] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.field-group input[b-c8dzb1rumw],
.field-group select[b-c8dzb1rumw],
.reference-selector select[b-c8dzb1rumw] {
    min-height: 42px;

    padding: 0 11px;
}

.field-group textarea[b-c8dzb1rumw] {
    padding: 11px 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-c8dzb1rumw],
.field-group select:focus[b-c8dzb1rumw],
.field-group textarea:focus[b-c8dzb1rumw],
.reference-selector select:focus[b-c8dzb1rumw] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}

.field-meta[b-c8dzb1rumw] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.field-meta span[b-c8dzb1rumw] {
    color: var(--muted);

    font-size: 8px;
}

.counter[b-c8dzb1rumw] {
    direction: ltr;

    white-space: nowrap;
}


/* =========================
   Reference
========================= */

.reference-type-grid[b-c8dzb1rumw] {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 7px;
}

.reference-type-button[b-c8dzb1rumw] {
    min-height: 42px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.reference-type-button:hover[b-c8dzb1rumw],
.reference-type-button.active[b-c8dzb1rumw] {
    border-color: var(--green);

    color: var(--green);
}

.reference-type-button.active[b-c8dzb1rumw] {
    background: rgba(58, 125, 68, .05);
}

.reference-selector[b-c8dzb1rumw] {
    margin-top: 14px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}


/* =========================
   Attachment
========================= */

.attachment-box[b-c8dzb1rumw] {
    min-height: 72px;
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px dashed #d0d5dd;
    border-radius: 11px;

    background: #fbfcfd;
}

.attachment-icon[b-c8dzb1rumw] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #fff;
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.attachment-info[b-c8dzb1rumw] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.attachment-info strong[b-c8dzb1rumw] {
    color: var(--text);

    font-size: 10px;
}

.attachment-info span[b-c8dzb1rumw] {
    color: var(--muted);

    font-size: 8px;
}

.attachment-button[b-c8dzb1rumw] {
    min-height: 34px;
    padding: 0 10px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.attachment-note[b-c8dzb1rumw] {
    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Messages
========================= */

.form-message[b-c8dzb1rumw] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 10px;

    font-size: 10px;
}

.error-message[b-c8dzb1rumw] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-c8dzb1rumw] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-c8dzb1rumw] {
    color: #027a48;

    font-size: 10px;
}

.success-message span[b-c8dzb1rumw] {
    color: #475467;

    font-size: 8px;
}


/* =========================
   Actions
========================= */

.form-actions[b-c8dzb1rumw] {
    padding: 18px 22px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-c8dzb1rumw],
.secondary-button[b-c8dzb1rumw] {
    min-height: 41px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-c8dzb1rumw] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:disabled[b-c8dzb1rumw] {
    opacity: .5;

    cursor: not-allowed;
}

.secondary-button[b-c8dzb1rumw] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}


/* =========================
   Side Cards
========================= */

.side-card[b-c8dzb1rumw] {
    padding: 19px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.side-card h3[b-c8dzb1rumw] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.side-card > p[b-c8dzb1rumw] {
    margin: 0;

    color: var(--muted);

    font-size: 8px;
    line-height: 1.9;
}

.warning-card[b-c8dzb1rumw] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-c8dzb1rumw] {
    color: #b54708;
}


/* =========================
   Tips
========================= */

.tips-list[b-c8dzb1rumw] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.tips-list > div[b-c8dzb1rumw] {
    display: flex;
    align-items: flex-start;

    gap: 9px;
}

.tips-list > div > span[b-c8dzb1rumw] {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 8px;
    font-weight: 900;
}

.tips-list p[b-c8dzb1rumw] {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 8px;
    line-height: 1.8;
}


/* =========================
   Priority Guide
========================= */

.priority-guide[b-c8dzb1rumw] {
    display: flex;
    flex-direction: column;

    gap: 11px;
}

.priority-guide > div[b-c8dzb1rumw] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.priority-dot[b-c8dzb1rumw] {
    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;
}

.priority-dot.low[b-c8dzb1rumw] {
    background: #98a2b3;
}

.priority-dot.normal[b-c8dzb1rumw] {
    background: #2e90fa;
}

.priority-dot.high[b-c8dzb1rumw] {
    background: #f79009;
}

.priority-dot.urgent[b-c8dzb1rumw] {
    background: #f04438;
}

.priority-guide > div > div[b-c8dzb1rumw] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.priority-guide strong[b-c8dzb1rumw] {
    color: var(--text);

    font-size: 9px;
}

.priority-guide span[b-c8dzb1rumw] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .ticket-layout[b-c8dzb1rumw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {

    .reference-type-grid[b-c8dzb1rumw] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .page-head[b-c8dzb1rumw] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-c8dzb1rumw] {
        width: 100%;
    }

    .form-grid[b-c8dzb1rumw] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-c8dzb1rumw] {
        grid-column: auto;
    }
}

@media (max-width: 500px) {

    .reference-type-grid[b-c8dzb1rumw] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .attachment-box[b-c8dzb1rumw],
    .form-actions[b-c8dzb1rumw] {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-button[b-c8dzb1rumw],
    .secondary-button[b-c8dzb1rumw],
    .attachment-button[b-c8dzb1rumw] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Tickets/CustomerTicketDetails.razor.rz.scp.css */
.ticket-details-page[b-k9ld7oaucc] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-k9ld7oaucc] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-k9ld7oaucc] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-k9ld7oaucc] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-k9ld7oaucc] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-k9ld7oaucc] {
    min-height: 42px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Hero
========================= */

.ticket-hero[b-k9ld7oaucc] {
    margin-bottom: 18px;
    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.ticket-main[b-k9ld7oaucc] {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}

.ticket-avatar[b-k9ld7oaucc] {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 13px;
    font-weight: 900;
}

.ticket-main > div:last-child[b-k9ld7oaucc] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.ticket-main strong[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 14px;
    font-weight: 900;
}

.ticket-main span[b-k9ld7oaucc] {
    overflow: hidden;

    color: var(--muted);

    font-size: 9px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-badges[b-k9ld7oaucc] {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}


/* =========================
   Summary
========================= */

.summary-grid[b-k9ld7oaucc] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-k9ld7oaucc] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-k9ld7oaucc] {
    overflow: hidden;

    color: var(--text);

    font-size: 16px;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-card small[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Layout
========================= */

.ticket-layout[b-k9ld7oaucc] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, .8fr);

    gap: 18px;

    align-items: start;
}

.ticket-main-column[b-k9ld7oaucc],
.ticket-side[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* =========================
   Generic Cards
========================= */

.details-card[b-k9ld7oaucc],
.conversation-card[b-k9ld7oaucc],
.reply-card[b-k9ld7oaucc],
.side-card[b-k9ld7oaucc],
.closed-ticket-card[b-k9ld7oaucc] {
    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.details-card[b-k9ld7oaucc],
.reply-card[b-k9ld7oaucc],
.side-card[b-k9ld7oaucc] {
    padding: 20px;
}

.card-head[b-k9ld7oaucc] {
    margin-bottom: 17px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}

.card-head h2[b-k9ld7oaucc],
.conversation-head h2[b-k9ld7oaucc] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.card-head p[b-k9ld7oaucc],
.conversation-head p[b-k9ld7oaucc] {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 9px;
}


/* =========================
   Ticket Details
========================= */

.details-grid[b-k9ld7oaucc] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.detail-item[b-k9ld7oaucc] {
    min-height: 61px;
    padding: 10px 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border: 1px solid #f0f2f4;
    border-radius: 9px;

    background: #fbfcfd;
}

.detail-item > span:first-child[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}

.detail-item strong[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Reference
========================= */

.reference-card[b-k9ld7oaucc] {
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
}

.reference-avatar[b-k9ld7oaucc] {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.reference-info[b-k9ld7oaucc] {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reference-info span[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}

.reference-info strong[b-k9ld7oaucc] {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-action[b-k9ld7oaucc] {
    min-height: 34px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Conversation
========================= */

.conversation-card[b-k9ld7oaucc] {
    overflow: hidden;
}

.conversation-head[b-k9ld7oaucc] {
    padding: 19px 20px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    border-bottom: 1px solid #f0f2f4;
}

.messages-list[b-k9ld7oaucc] {
    padding: 20px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    background: #fbfcfd;
}

.message-row[b-k9ld7oaucc] {
    display: flex;
    align-items: flex-start;

    gap: 10px;
}

.customer-message[b-k9ld7oaucc] {
    flex-direction: row;
}

.support-message[b-k9ld7oaucc] {
    flex-direction: row;
}

.message-avatar[b-k9ld7oaucc] {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #fff;
    color: var(--green);

    border: 1px solid var(--soft);

    font-size: 9px;
    font-weight: 900;
}

.support-message .message-avatar[b-k9ld7oaucc] {
    background: rgba(58, 125, 68, .09);
}

.message-content[b-k9ld7oaucc] {
    width: min(720px, calc(100% - 48px));
    padding: 13px 14px;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fff;
}

.customer-message .message-content[b-k9ld7oaucc] {
    border-color: #d1e9ff;

    background: #f9fcff;
}

.support-message .message-content[b-k9ld7oaucc] {
    border-color: #d1fadf;

    background: #f9fdf9;
}

.message-head[b-k9ld7oaucc] {
    margin-bottom: 9px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}

.message-head > div[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.message-head strong[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 9px;
}

.message-head span[b-k9ld7oaucc],
.message-head small[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 7px;
}

.message-body p[b-k9ld7oaucc] {
    margin: 0;

    color: var(--text);

    font-size: 10px;
    line-height: 2;
}


/* =========================
   Message Attachments
========================= */

.message-attachments[b-k9ld7oaucc] {
    margin-top: 11px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.attachment-item[b-k9ld7oaucc] {
    min-height: 46px;
    padding: 7px 9px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;

    font-family: inherit;

    cursor: pointer;
}

.attachment-icon[b-k9ld7oaucc] {
    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: #f2f4f7;
    color: #475467;

    font-size: 8px;
    font-weight: 900;
}

.attachment-info[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 1px;
}

.attachment-info strong[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 8px;
}

.attachment-info small[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 7px;
}


/* =========================
   Reply
========================= */

.field-group[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group label[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label span[b-k9ld7oaucc] {
    color: #b42318;
}

.field-group textarea[b-k9ld7oaucc] {
    width: 100%;
    padding: 11px 12px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    line-height: 1.9;

    resize: vertical;
    outline: none;
}

.field-group textarea:focus[b-k9ld7oaucc] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}

.field-meta[b-k9ld7oaucc] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.field-meta span[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}

.counter[b-k9ld7oaucc] {
    direction: ltr;

    white-space: nowrap;
}

.reply-attachment[b-k9ld7oaucc] {
    margin-top: 12px;
    padding: 11px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border: 1px dashed #d0d5dd;
    border-radius: 10px;

    background: #fbfcfd;
}

.reply-attachment > div[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.reply-attachment strong[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 9px;
}

.reply-attachment span[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}

.attachment-button[b-k9ld7oaucc] {
    min-height: 33px;
    padding: 0 10px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 8px;
    font-weight: 800;

    cursor: pointer;
}

.reply-actions[b-k9ld7oaucc] {
    margin-top: 14px;

    display: flex;
    justify-content: flex-end;
}

.primary-button[b-k9ld7oaucc] {
    min-height: 40px;
    padding: 0 15px;

    border: 1px solid var(--green);
    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}

.primary-button:disabled[b-k9ld7oaucc] {
    opacity: .5;

    cursor: not-allowed;
}


/* =========================
   Messages
========================= */

.form-message[b-k9ld7oaucc] {
    margin-top: 12px;
    padding: 11px 12px;

    border-radius: 9px;

    font-size: 9px;
}

.error-message[b-k9ld7oaucc] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-k9ld7oaucc] {
    border: 1px solid #abefc6;

    background: #ecfdf3;
    color: #027a48;
}


/* =========================
   Closed
========================= */

.closed-ticket-card[b-k9ld7oaucc] {
    padding: 19px;

    display: flex;
    align-items: center;

    gap: 11px;

    border-color: #d1fadf;

    background: #f9fdf9;
}

.closed-icon[b-k9ld7oaucc] {
    width: 41px;
    height: 41px;

    flex: 0 0 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #ecfdf3;
    color: #027a48;

    font-size: 12px;
    font-weight: 900;
}

.closed-ticket-card > div:last-child[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.closed-ticket-card strong[b-k9ld7oaucc] {
    color: #027a48;

    font-size: 10px;
}

.closed-ticket-card span[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Side
========================= */

.side-card h3[b-k9ld7oaucc] {
    margin: 0 0 12px;

    color: var(--text);

    font-size: 12px;
    font-weight: 900;
}

.status-overview > p[b-k9ld7oaucc] {
    margin: 10px 0 0;

    color: var(--muted);

    font-size: 8px;
    line-height: 1.9;
}

.side-details[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;
}

.side-details > div[b-k9ld7oaucc] {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-bottom: 1px solid #f0f2f4;
}

.side-details > div:last-child[b-k9ld7oaucc] {
    border-bottom: 0;
}

.side-details span[b-k9ld7oaucc] {
    color: var(--muted);

    font-size: 8px;
}

.side-details strong[b-k9ld7oaucc] {
    color: var(--text);

    font-size: 8px;
}

.side-actions[b-k9ld7oaucc] {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.side-action[b-k9ld7oaucc] {
    width: 100%;
    min-height: 37px;
    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;
}

.side-action:disabled[b-k9ld7oaucc] {
    opacity: .5;

    cursor: not-allowed;
}

.danger-action[b-k9ld7oaucc] {
    border-color: #fda29b;

    color: #b42318;
}

.warning-card[b-k9ld7oaucc] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-k9ld7oaucc] {
    color: #b54708;
}

.warning-card p[b-k9ld7oaucc] {
    margin: 0;

    color: #667085;

    font-size: 8px;
    line-height: 1.9;
}


/* =========================
   Badges
========================= */

.status-badge[b-k9ld7oaucc],
.priority-badge[b-k9ld7oaucc] {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-k9ld7oaucc],
.priority-badge.success[b-k9ld7oaucc] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-k9ld7oaucc],
.priority-badge.warning[b-k9ld7oaucc] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-k9ld7oaucc],
.priority-badge.info[b-k9ld7oaucc] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.danger[b-k9ld7oaucc],
.priority-badge.danger[b-k9ld7oaucc] {
    background: #fff1f1;
    color: #b42318;
}

.status-badge.neutral[b-k9ld7oaucc],
.priority-badge.neutral[b-k9ld7oaucc] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1000px) {

    .ticket-layout[b-k9ld7oaucc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {

    .summary-grid[b-k9ld7oaucc] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .page-head[b-k9ld7oaucc],
    .ticket-hero[b-k9ld7oaucc],
    .conversation-head[b-k9ld7oaucc] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-k9ld7oaucc] {
        width: 100%;
    }

    .details-grid[b-k9ld7oaucc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 550px) {

    .summary-grid[b-k9ld7oaucc] {
        grid-template-columns: 1fr;
    }

    .reference-card[b-k9ld7oaucc],
    .reply-attachment[b-k9ld7oaucc] {
        align-items: stretch;
        flex-direction: column;
    }

    .reference-action[b-k9ld7oaucc],
    .attachment-button[b-k9ld7oaucc],
    .primary-button[b-k9ld7oaucc] {
        width: 100%;
    }

    .message-row[b-k9ld7oaucc] {
        gap: 7px;
    }

    .message-avatar[b-k9ld7oaucc] {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

    .message-content[b-k9ld7oaucc] {
        width: calc(100% - 39px);
    }

    .message-head[b-k9ld7oaucc] {
        flex-direction: column;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Tickets/CustomerTickets.razor.rz.scp.css */
.customer-tickets-page[b-nd6esliuzg] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-nd6esliuzg] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-nd6esliuzg] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-nd6esliuzg] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-nd6esliuzg] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.create-button[b-nd6esliuzg] {
    min-height: 43px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--green);
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;
}


/* =========================
   Summary
========================= */

.summary-grid[b-nd6esliuzg] {
    margin-bottom: 18px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.summary-card[b-nd6esliuzg] {
    min-height: 108px;
    padding: 17px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.summary-card span[b-nd6esliuzg] {
    color: var(--muted);

    font-size: 10px;
}

.summary-card strong[b-nd6esliuzg] {
    color: var(--text);

    font-size: 21px;
    font-weight: 900;
}

.summary-card small[b-nd6esliuzg] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Filters
========================= */

.filters-card[b-nd6esliuzg] {
    margin-bottom: 18px;
    padding: 14px;

    display: grid;
    grid-template-columns:
        minmax(270px, 1.5fr)
        180px
        180px;

    gap: 10px;

    border: 1px solid var(--soft);
    border-radius: 15px;

    background: #fff;
}

.filters-card input[b-nd6esliuzg],
.filters-card select[b-nd6esliuzg] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.filters-card input:focus[b-nd6esliuzg],
.filters-card select:focus[b-nd6esliuzg] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}


/* =========================
   Table
========================= */

.tickets-card[b-nd6esliuzg] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.table-wrap[b-nd6esliuzg] {
    width: 100%;

    overflow-x: auto;
}

.tickets-table[b-nd6esliuzg] {
    width: 100%;
    min-width: 1000px;

    border-collapse: collapse;
}

.tickets-table th[b-nd6esliuzg],
.tickets-table td[b-nd6esliuzg] {
    padding: 14px;

    text-align: right;
    vertical-align: middle;

    border-bottom: 1px solid #f0f2f4;
}

.tickets-table th[b-nd6esliuzg] {
    background: #fbfcfd;

    color: var(--muted);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.tickets-table td[b-nd6esliuzg] {
    color: var(--text);

    font-size: 10px;
}

.tickets-table tbody tr:last-child td[b-nd6esliuzg] {
    border-bottom: 0;
}

.tickets-table tbody tr:hover[b-nd6esliuzg] {
    background: #fcfdfd;
}


/* =========================
   Ticket Cell
========================= */

.ticket-cell[b-nd6esliuzg] {
    display: flex;
    align-items: center;

    gap: 10px;
}

.ticket-avatar[b-nd6esliuzg] {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.ticket-cell > div:last-child[b-nd6esliuzg] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.ticket-cell strong[b-nd6esliuzg] {
    color: var(--text);

    font-size: 10px;
}

.ticket-cell span[b-nd6esliuzg] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Subject
========================= */

.subject-cell[b-nd6esliuzg] {
    max-width: 260px;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.subject-cell strong[b-nd6esliuzg] {
    overflow: hidden;

    color: var(--text);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-cell span[b-nd6esliuzg] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Category
========================= */

.category-badge[b-nd6esliuzg] {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #f9fafb;
    color: #475467;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}


/* =========================
   Priority
========================= */

.priority-badge[b-nd6esliuzg] {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.priority-badge.info[b-nd6esliuzg] {
    background: #eff8ff;
    color: #175cd3;
}

.priority-badge.warning[b-nd6esliuzg] {
    background: #fffaeb;
    color: #b54708;
}

.priority-badge.danger[b-nd6esliuzg] {
    background: #fff1f1;
    color: #b42318;
}

.priority-badge.neutral[b-nd6esliuzg] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Status
========================= */

.status-badge[b-nd6esliuzg] {
    min-height: 25px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 8px;
    font-weight: 800;

    white-space: nowrap;
}

.status-badge.success[b-nd6esliuzg] {
    background: #ecfdf3;
    color: #027a48;
}

.status-badge.warning[b-nd6esliuzg] {
    background: #fffaeb;
    color: #b54708;
}

.status-badge.info[b-nd6esliuzg] {
    background: #eff8ff;
    color: #175cd3;
}

.status-badge.neutral[b-nd6esliuzg] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Date
========================= */

.date-cell[b-nd6esliuzg] {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.date-cell strong[b-nd6esliuzg] {
    color: var(--text);

    font-size: 9px;
}

.date-cell span[b-nd6esliuzg] {
    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Actions
========================= */

.row-actions[b-nd6esliuzg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;
}

.action-link[b-nd6esliuzg] {
    min-height: 31px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-size: 8px;
    font-weight: 800;

    text-decoration: none;
}

.primary-action[b-nd6esliuzg] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}


/* =========================
   Empty
========================= */

.empty-state[b-nd6esliuzg] {
    min-height: 350px;
    padding: 40px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.empty-icon[b-nd6esliuzg] {
    width: 64px;
    height: 64px;

    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}

.empty-state h2[b-nd6esliuzg] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.empty-state p[b-nd6esliuzg] {
    max-width: 480px;

    margin: 7px 0 16px;

    color: var(--muted);

    font-size: 10px;
    line-height: 1.9;
}

.empty-action[b-nd6esliuzg] {
    min-height: 39px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Responsive
========================= */

@media (max-width: 950px) {

    .summary-grid[b-nd6esliuzg] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card[b-nd6esliuzg] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .filters-card input[b-nd6esliuzg] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {

    .page-head[b-nd6esliuzg] {
        align-items: stretch;
        flex-direction: column;
    }

    .create-button[b-nd6esliuzg] {
        width: 100%;
    }

    .summary-grid[b-nd6esliuzg],
    .filters-card[b-nd6esliuzg] {
        grid-template-columns: 1fr;
    }

    .filters-card input[b-nd6esliuzg] {
        grid-column: auto;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/UserDashboard.razor.rz.scp.css */
.customer-dashboard[b-etid15m0bw] {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.customer-dashboard *[b-etid15m0bw] {
    box-sizing: border-box;
}

.dashboard-intro[b-etid15m0bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid #dce9df;
    border-radius: 22px;
    background: linear-gradient(120deg, #f1f8f2, #fff);
}

.dashboard-intro > div[b-etid15m0bw] {
    min-width: 0;
}

.dashboard-eyebrow[b-etid15m0bw],
.section-eyebrow[b-etid15m0bw] {
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
}

.dashboard-intro h1[b-etid15m0bw] {
    margin: 9px 0;
    color: #344054;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.6;
}

.dashboard-intro p[b-etid15m0bw] {
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 2;
}

.dashboard-button[b-etid15m0bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 46px;
    padding: 11px 17px;
    border: 1px solid #dfe5e1;
    border-radius: 11px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
    text-decoration: none;
}

.dashboard-intro > .dashboard-button[b-etid15m0bw] {
    flex-shrink: 0;
}

.dashboard-button.primary[b-etid15m0bw] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.section-heading[b-etid15m0bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.section-heading h2[b-etid15m0bw] {
    margin: 0;
    color: #344054;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.8;
}

.section-heading > span[b-etid15m0bw] {
    color: #667085;
    font-size: 16px;
}

.section-heading .section-eyebrow[b-etid15m0bw] {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
}

.quick-access-grid[b-etid15m0bw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.quick-access-card[b-etid15m0bw] {
    --card-color: #3a7d44;
    --card-soft: #eef7f0;

    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 23px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.quick-access-card.blue[b-etid15m0bw] {
    --card-color: #2459a6;
    --card-soft: #eef4ff;
}

.quick-access-card.orange[b-etid15m0bw] {
    --card-color: #b54708;
    --card-soft: #fff5e9;
}

.quick-access-card.purple[b-etid15m0bw] {
    --card-color: #6941c6;
    --card-soft: #f4f0ff;
}

.quick-card-top[b-etid15m0bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 5px;
}

.quick-card-icon[b-etid15m0bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--card-soft);
    color: var(--card-color);
    font-size: 25px;
    font-weight: 900;
    direction: ltr;
}

.quick-card-arrow[b-etid15m0bw] {
    color: #98a2b3;
    font-size: 25px;
}

.quick-access-card > strong[b-etid15m0bw] {
    color: #344054;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.8;
}

.quick-access-card p[b-etid15m0bw] {
    flex: 1;
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.quick-card-action[b-etid15m0bw] {
    margin-top: 5px;
    color: var(--card-color);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-sections[b-etid15m0bw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.dashboard-section[b-etid15m0bw] {
    min-width: 0;
    padding: 24px;
    border: 1px solid #e4e7ec;
    border-radius: 19px;
    background: #fff;
}

.dashboard-link-list[b-etid15m0bw] {
    display: flex;
    flex-direction: column;
}

.dashboard-link-list > a[b-etid15m0bw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #eef0f3;
    color: inherit;
    text-decoration: none;
}

.dashboard-link-list > a:last-child[b-etid15m0bw] {
    padding-bottom: 0;
    border-bottom: 0;
}

.dashboard-link-list > a > span:first-child[b-etid15m0bw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dashboard-link-list strong[b-etid15m0bw] {
    color: #344054;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.8;
}

.dashboard-link-list small[b-etid15m0bw] {
    color: #667085;
    font-size: 16px;
    line-height: 1.9;
}

.link-arrow[b-etid15m0bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: #f7f9fa;
    color: #667085;
    font-size: 27px;
}

.support-section[b-etid15m0bw] {
    background: linear-gradient(135deg, #fff, #f8fbff);
}

.support-description[b-etid15m0bw] {
    margin: 0;
    color: #667085;
    font-size: 17px;
    line-height: 2;
}

.support-actions[b-etid15m0bw] {
    margin-top: 22px;
}

.dashboard-tip[b-etid15m0bw] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid #dce5f3;
    border-radius: 17px;
    background: #f3f7fd;
}

.tip-icon[b-etid15m0bw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 12px;
    background: #e5edfb;
    color: #2459a6;
    font-size: 24px;
    font-weight: 900;
}

.dashboard-tip > div[b-etid15m0bw] {
    flex: 1;
    min-width: 0;
}

.dashboard-tip strong[b-etid15m0bw] {
    color: #344054;
    font-size: 18px;
}

.dashboard-tip p[b-etid15m0bw] {
    margin: 6px 0 0;
    color: #667085;
    font-size: 16px;
    line-height: 2;
}

.dashboard-tip > a[b-etid15m0bw] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: #2459a6;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.9;
}

.customer-dashboard a:focus-visible[b-etid15m0bw] {
    outline: 3px solid #b7d6bc;
    outline-offset: 4px;
}

@media (hover: hover) {
    .quick-access-card:hover[b-etid15m0bw] {
        transform: translateY(-3px);
        border-color: var(--card-color);
        box-shadow: 0 10px 25px rgba(16, 24, 40, .06);
    }

    .dashboard-link-list > a:hover strong[b-etid15m0bw] {
        color: var(--green, #3a7d44);
    }

    .dashboard-button:hover[b-etid15m0bw] {
        filter: brightness(.97);
    }
}

@media (max-width: 1200px) {
    .quick-access-grid[b-etid15m0bw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .dashboard-sections[b-etid15m0bw] {
        grid-template-columns: 1fr;
    }

    .dashboard-intro[b-etid15m0bw] {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-tip[b-etid15m0bw] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashboard-tip > a[b-etid15m0bw] {
        margin-right: 60px;
    }
}

@media (max-width: 520px) {
    .customer-dashboard[b-etid15m0bw] {
        gap: 23px;
    }

    .dashboard-intro[b-etid15m0bw],
    .dashboard-section[b-etid15m0bw],
    .quick-access-card[b-etid15m0bw] {
        padding: 19px;
    }

    .dashboard-intro h1[b-etid15m0bw] {
        font-size: 27px;
    }

    .dashboard-intro p[b-etid15m0bw] {
        font-size: 17px;
    }

    .quick-access-grid[b-etid15m0bw] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .dashboard-tip[b-etid15m0bw] {
        padding: 18px;
        gap: 12px;
    }

    .dashboard-tip > a[b-etid15m0bw] {
        margin-right: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-access-card[b-etid15m0bw] {
        transition: none;
    }

    .quick-access-card:hover[b-etid15m0bw] {
        transform: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Visits/CreateCustomerVisit.razor.rz.scp.css */
.create-visit-page[b-bekdy3yk87] {
    width: 100%;
}


/* =========================
   Header
========================= */

.page-head[b-bekdy3yk87] {
    margin-bottom: 22px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}

.page-head > div:first-child > span[b-bekdy3yk87] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 13px;
    font-weight: 800;
}

.page-head h1[b-bekdy3yk87] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.page-head p[b-bekdy3yk87] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}

.back-button[b-bekdy3yk87] {
    min-height: 42px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;
}


/* =========================
   Layout
========================= */

.visit-layout[b-bekdy3yk87] {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(290px, .8fr);

    gap: 18px;

    align-items: start;
}

.visit-form-card[b-bekdy3yk87] {
    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;
}

.visit-side[b-bekdy3yk87] {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* =========================
   Sections
========================= */

.form-section[b-bekdy3yk87] {
    padding: 22px;

    border-bottom: 1px solid #f0f2f4;
}

.section-head[b-bekdy3yk87] {
    margin-bottom: 18px;

    display: flex;
    align-items: flex-start;

    gap: 11px;
}

.section-number[b-bekdy3yk87] {
    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.section-head h2[b-bekdy3yk87] {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.section-head p[b-bekdy3yk87] {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 9px;
    line-height: 1.8;
}


/* =========================
   Pets
========================= */

.pets-grid[b-bekdy3yk87] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.pet-select-card[b-bekdy3yk87] {
    position: relative;

    min-height: 100px;
    padding: 13px;

    display: flex;
    align-items: center;

    gap: 10px;

    text-align: right;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fff;

    font-family: inherit;

    cursor: pointer;
}

.pet-select-card:hover[b-bekdy3yk87],
.pet-select-card.selected[b-bekdy3yk87] {
    border-color: var(--green);
}

.pet-select-card.selected[b-bekdy3yk87] {
    background: rgba(58, 125, 68, .025);
}

.pet-avatar[b-bekdy3yk87] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #f2f4f7;
    color: #475467;

    font-size: 11px;
    font-weight: 900;
}

.pet-avatar.dog[b-bekdy3yk87] {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

.pet-avatar.cat[b-bekdy3yk87] {
    background: #fff6ed;
    color: #c4320a;
}

.pet-avatar.bird[b-bekdy3yk87] {
    background: #eff8ff;
    color: #175cd3;
}

.pet-avatar.rabbit[b-bekdy3yk87] {
    background: #f9f5ff;
    color: #6941c6;
}

.pet-info[b-bekdy3yk87] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pet-info strong[b-bekdy3yk87] {
    color: var(--text);

    font-size: 11px;
}

.pet-info span[b-bekdy3yk87],
.pet-info small[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 8px;
}

.selected-mark[b-bekdy3yk87] {
    position: absolute;

    top: 8px;
    left: 8px;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--green);
    color: #fff;

    font-size: 9px;
    font-weight: 900;
}


/* =========================
   Doctor Filter
========================= */

.doctor-filter[b-bekdy3yk87] {
    margin-bottom: 12px;

    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        180px;

    gap: 9px;
}

.doctor-filter input[b-bekdy3yk87],
.doctor-filter select[b-bekdy3yk87] {
    width: 100%;
    min-height: 40px;

    padding: 0 11px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;

    outline: none;
}

.doctor-filter input:focus[b-bekdy3yk87],
.doctor-filter select:focus[b-bekdy3yk87] {
    border-color: var(--green);
}


/* =========================
   Doctors
========================= */

.doctors-grid[b-bekdy3yk87] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.doctor-select-card[b-bekdy3yk87] {
    position: relative;

    padding: 14px;

    text-align: right;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fff;

    font-family: inherit;

    cursor: pointer;
}

.doctor-select-card:hover[b-bekdy3yk87],
.doctor-select-card.selected[b-bekdy3yk87] {
    border-color: var(--green);
}

.doctor-select-card.selected[b-bekdy3yk87] {
    background: rgba(58, 125, 68, .025);
}

.doctor-card-head[b-bekdy3yk87] {
    display: flex;
    align-items: center;

    gap: 9px;
}

.doctor-avatar[b-bekdy3yk87] {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 9px;
    font-weight: 900;
}

.doctor-info[b-bekdy3yk87] {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.doctor-info strong[b-bekdy3yk87] {
    color: var(--text);

    font-size: 11px;
}

.doctor-info span[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 8px;
}

.doctor-meta[b-bekdy3yk87] {
    margin-top: 12px;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6px;
}

.doctor-meta > div[b-bekdy3yk87] {
    min-height: 55px;
    padding: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    border-radius: 8px;

    background: #fbfcfd;
}

.doctor-meta span[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 7px;
}

.doctor-meta strong[b-bekdy3yk87] {
    color: var(--text);

    font-size: 9px;
}


/* =========================
   Days / Times
========================= */

.inline-empty[b-bekdy3yk87] {
    padding: 20px;

    border: 1px dashed var(--soft);
    border-radius: 11px;

    background: #fbfcfd;
    color: var(--muted);

    text-align: center;

    font-size: 10px;
}

.days-grid[b-bekdy3yk87] {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}

.day-button[b-bekdy3yk87] {
    min-height: 63px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;

    cursor: pointer;
}

.day-button strong[b-bekdy3yk87] {
    font-size: 10px;
}

.day-button span[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 8px;
}

.day-button.selected[b-bekdy3yk87] {
    border-color: var(--green);

    background: rgba(58, 125, 68, .04);
}

.times-grid[b-bekdy3yk87] {
    margin-top: 12px;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 7px;
}

.time-button[b-bekdy3yk87] {
    min-height: 39px;

    border: 1px solid var(--soft);
    border-radius: 9px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.time-button:hover[b-bekdy3yk87] {
    border-color: var(--green);
}

.time-button.selected[b-bekdy3yk87] {
    border-color: var(--green);

    background: var(--green);
    color: #fff;
}

.time-button.unavailable[b-bekdy3yk87] {
    opacity: .4;

    text-decoration: line-through;

    cursor: not-allowed;
}


/* =========================
   Form
========================= */

.form-grid[b-bekdy3yk87] {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.field-group[b-bekdy3yk87] {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.field-group.full[b-bekdy3yk87] {
    grid-column: 1 / -1;
}

.field-group label[b-bekdy3yk87] {
    color: var(--text);

    font-size: 10px;
    font-weight: 800;
}

.field-group label span[b-bekdy3yk87] {
    color: #b42318;
}

.field-group input[b-bekdy3yk87],
.field-group select[b-bekdy3yk87],
.field-group textarea[b-bekdy3yk87] {
    width: 100%;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 11px;

    outline: none;
}

.field-group input[b-bekdy3yk87],
.field-group select[b-bekdy3yk87] {
    min-height: 42px;

    padding: 0 11px;
}

.field-group textarea[b-bekdy3yk87] {
    padding: 11px 12px;

    resize: vertical;

    line-height: 1.9;
}

.field-group input:focus[b-bekdy3yk87],
.field-group select:focus[b-bekdy3yk87],
.field-group textarea:focus[b-bekdy3yk87] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .06);
}

.field-meta[b-bekdy3yk87] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.field-meta span[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 8px;
}

.counter[b-bekdy3yk87] {
    direction: ltr;

    white-space: nowrap;
}


/* =========================
   Attachment
========================= */

.attachment-box[b-bekdy3yk87] {
    min-height: 70px;
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px dashed #d0d5dd;
    border-radius: 11px;

    background: #fbfcfd;
}

.attachment-icon[b-bekdy3yk87] {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #fff;
    color: var(--green);

    font-size: 10px;
    font-weight: 900;
}

.attachment-info[b-bekdy3yk87] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.attachment-info strong[b-bekdy3yk87] {
    color: var(--text);

    font-size: 10px;
}

.attachment-info span[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 8px;
}

.attachment-button[b-bekdy3yk87] {
    min-height: 34px;
    padding: 0 10px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
}

.attachment-note[b-bekdy3yk87] {
    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 8px;
}


/* =========================
   Messages / Actions
========================= */

.form-message[b-bekdy3yk87] {
    margin: 18px 22px 0;
    padding: 13px 14px;

    border-radius: 10px;

    font-size: 10px;
}

.error-message[b-bekdy3yk87] {
    border: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;
}

.success-message[b-bekdy3yk87] {
    display: flex;
    flex-direction: column;

    gap: 3px;

    border: 1px solid #abefc6;

    background: #ecfdf3;
}

.success-message strong[b-bekdy3yk87] {
    color: #027a48;

    font-size: 10px;
}

.success-message span[b-bekdy3yk87] {
    color: #475467;

    font-size: 8px;
}

.form-actions[b-bekdy3yk87] {
    padding: 18px 22px;

    display: flex;
    justify-content: flex-end;

    gap: 8px;

    background: #fbfcfd;
}

.primary-button[b-bekdy3yk87],
.secondary-button[b-bekdy3yk87] {
    min-height: 41px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.primary-button[b-bekdy3yk87] {
    border: 1px solid var(--green);

    background: var(--green);
    color: #fff;

    cursor: pointer;
}

.primary-button:disabled[b-bekdy3yk87] {
    opacity: .55;

    cursor: not-allowed;
}

.secondary-button[b-bekdy3yk87] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}


/* =========================
   Sidebar
========================= */

.side-card[b-bekdy3yk87] {
    padding: 19px;

    border: 1px solid var(--soft);
    border-radius: 17px;

    background: #fff;
}

.side-card h3[b-bekdy3yk87] {
    margin: 0 0 14px;

    color: var(--text);

    font-size: 13px;
    font-weight: 900;
}

.summary-list[b-bekdy3yk87] {
    display: flex;
    flex-direction: column;
}

.summary-list > div[b-bekdy3yk87],
.price-row[b-bekdy3yk87] {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.summary-list > div[b-bekdy3yk87] {
    border-bottom: 1px solid #f0f2f4;
}

.summary-list > div:last-child[b-bekdy3yk87] {
    border-bottom: 0;
}

.summary-list span[b-bekdy3yk87],
.price-row span[b-bekdy3yk87] {
    color: var(--muted);

    font-size: 9px;
}

.summary-list strong[b-bekdy3yk87],
.price-row strong[b-bekdy3yk87] {
    color: var(--text);

    font-size: 10px;
}

.price-divider[b-bekdy3yk87] {
    height: 1px;

    background: #e4e7ec;
}

.price-row.final span[b-bekdy3yk87],
.price-row.final strong[b-bekdy3yk87] {
    color: var(--green);

    font-weight: 900;
}

.warning-card[b-bekdy3yk87] {
    border-color: #fedf89;

    background: #fffcf5;
}

.warning-card h3[b-bekdy3yk87] {
    color: #b54708;
}

.warning-card p[b-bekdy3yk87] {
    margin: 0;

    color: #667085;

    font-size: 9px;
    line-height: 1.9;
}

.tips-list[b-bekdy3yk87] {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.tips-list > div[b-bekdy3yk87] {
    display: flex;

    gap: 9px;
}

.tips-list > div > span[b-bekdy3yk87] {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(58, 125, 68, .09);
    color: var(--green);

    font-size: 8px;
    font-weight: 900;
}

.tips-list p[b-bekdy3yk87] {
    margin: 2px 0 0;

    color: var(--muted);

    font-size: 8px;
    line-height: 1.7;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1050px) {

    .visit-layout[b-bekdy3yk87] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {

    .pets-grid[b-bekdy3yk87],
    .doctors-grid[b-bekdy3yk87] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    .page-head[b-bekdy3yk87] {
        align-items: stretch;
        flex-direction: column;
    }

    .back-button[b-bekdy3yk87] {
        width: 100%;
    }

    .doctor-filter[b-bekdy3yk87],
    .form-grid[b-bekdy3yk87] {
        grid-template-columns: 1fr;
    }

    .field-group.full[b-bekdy3yk87] {
        grid-column: auto;
    }

    .times-grid[b-bekdy3yk87] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {

    .pets-grid[b-bekdy3yk87],
    .doctors-grid[b-bekdy3yk87],
    .days-grid[b-bekdy3yk87],
    .times-grid[b-bekdy3yk87] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-bekdy3yk87],
    .attachment-box[b-bekdy3yk87] {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-button[b-bekdy3yk87],
    .secondary-button[b-bekdy3yk87],
    .attachment-button[b-bekdy3yk87] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Visits/CustomerOnlineVisit.razor.rz.scp.css */
.customer-online-visit-page[b-fi94r5lwyf] {
    width: 100%;
    min-width: 0;
}
/* _content/PopProject.BlazorSSR/Components/Features/Users/Pages/Visits/CustomerVisits.razor.rz.scp.css */
.customer-visits-list[b-92d5se4l1e],
.customer-payments-list[b-92d5se4l1e] {
    width: 100%;
    min-width: 0;
}


/* =========================
   Table
========================= */

[b-92d5se4l1e] .data-table {
    width: 100%;
    table-layout: auto;
}

[b-92d5se4l1e] .data-table th,
[b-92d5se4l1e] .data-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


/* =========================
   Create Button
========================= */

.create-visit-button[b-92d5se4l1e] {
    min-height: 58px;
    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 14px;

    background: var(--green);
    color: #fff;

    font-size: 18px;
    font-weight: 800;

    text-decoration: none;
    white-space: nowrap;

    transition: .2s;
}

.create-visit-button span[b-92d5se4l1e] {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.create-visit-button:hover[b-92d5se4l1e] {
    color: #fff;
    filter: brightness(.96);
}


/* =========================
   Cells
========================= */

.history-cell[b-92d5se4l1e] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 4px;

    white-space: nowrap;
}

.history-cell strong[b-92d5se4l1e] {
    color: var(--text);

    font-size: 18px;

    white-space: nowrap;
}

.history-cell span[b-92d5se4l1e] {
    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;

    white-space: nowrap;
}

.test-value[b-92d5se4l1e] {
    color: #b54708 !important;
}

.amount-value[b-92d5se4l1e] {
    font-size: 17px;
    font-weight: 800;

    white-space: nowrap;
}

.description-value[b-92d5se4l1e] {
    font-size: 16px;
    line-height: 1.9;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.reference-value[b-92d5se4l1e] {
    display: inline-block;

    direction: ltr;

    font-size: 15px;
    line-height: 1.8;

    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}


/* =========================
   Status
========================= */

.history-badge[b-92d5se4l1e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 800;

    white-space: nowrap;
}

.history-badge.success[b-92d5se4l1e] {
    background: #ecfdf3;
    color: #027a48;
}

.history-badge.warning[b-92d5se4l1e] {
    background: #fffaeb;
    color: #b54708;
}

.history-badge.danger[b-92d5se4l1e] {
    background: #fff1f1;
    color: #b42318;
}

.history-badge.info[b-92d5se4l1e] {
    background: #eff8ff;
    color: #175cd3;
}

.history-badge.neutral[b-92d5se4l1e] {
    background: #f2f4f7;
    color: #667085;
}


/* =========================
   Actions
========================= */

.row-actions[b-92d5se4l1e] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;

    gap: 6px;

    white-space: nowrap;
}

.action-link[b-92d5se4l1e] {
    min-height: 32px;
    padding: 0 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}

.action-link:hover[b-92d5se4l1e] {
    border-color: var(--green);
    color: var(--green);
}


/* =========================
   Responsive
========================= */

@media (max-width: 700px) {
    .create-visit-button[b-92d5se4l1e] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Layout/Panels/Shared/DashboardOverview.razor.rz.scp.css */
.dashboard-overview[b-dqxawwsih9] {
    width: 100%;
}

.dashboard-welcome[b-dqxawwsih9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 26px;
}

.dashboard-welcome span[b-dqxawwsih9] {
    display: block;
    margin-bottom: 7px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
}

.dashboard-welcome h1[b-dqxawwsih9] {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    font-weight: 900;
}

.dashboard-welcome p[b-dqxawwsih9] {
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}

.dashboard-header-action[b-dqxawwsih9] {
    flex-shrink: 0;
}

.dashboard-stats[b-dqxawwsih9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.dashboard-stats[b-dqxawwsih9]  .stat-card {
    min-height: 118px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-stats[b-dqxawwsih9]  .stat-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-stats[b-dqxawwsih9]  .stat-value {
    color: var(--text);
    font-size: 26px;
    font-weight: 900;
}

.dashboard-stats[b-dqxawwsih9]  .stat-note {
    color: var(--muted);
    font-size: 11px;
}

.dashboard-body[b-dqxawwsih9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-body[b-dqxawwsih9]  .dashboard-card {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.dashboard-body[b-dqxawwsih9]  .dashboard-card.full {
    grid-column: 1 / -1;
}

.dashboard-body[b-dqxawwsih9]  .dashboard-card h2 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.dashboard-body[b-dqxawwsih9]  .dashboard-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.dashboard-body[b-dqxawwsih9]  .quick-links {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dashboard-body[b-dqxawwsih9]  .quick-links a {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s;
}

.dashboard-body[b-dqxawwsih9]  .quick-links a:hover {
    border-color: var(--green);
    color: var(--green);
    background: rgba(58, 125, 68, .04);
}

@media (max-width: 1100px) {
    .dashboard-stats[b-dqxawwsih9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .dashboard-welcome[b-dqxawwsih9] {
        flex-direction: column;
    }

    .dashboard-stats[b-dqxawwsih9] {
        grid-template-columns: 1fr;
    }

    .dashboard-body[b-dqxawwsih9] {
        grid-template-columns: 1fr;
    }

    .dashboard-body[b-dqxawwsih9]  .dashboard-card.full {
        grid-column: auto;
    }

    .dashboard-welcome h1[b-dqxawwsih9] {
        font-size: 24px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Layout/Panels/Shared/PanelHeader.razor.rz.scp.css */
.panel-header-wrap[b-ejqdfkmza9] {
    min-height: 88px;
    padding: 14px 28px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.panel-header-title[b-ejqdfkmza9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.panel-header-title span[b-ejqdfkmza9] {
    color: var(--green);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.panel-header-title strong[b-ejqdfkmza9] {
    color: var(--text);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.panel-header-user[b-ejqdfkmza9] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.user-meta[b-ejqdfkmza9] {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 5px;
    max-width: 240px;
}

.user-meta strong[b-ejqdfkmza9] {
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.user-meta span[b-ejqdfkmza9] {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.7;
}

.panel-header-user form[b-ejqdfkmza9] {
    display: flex;
    margin: 0;
}

.home-link[b-ejqdfkmza9],
.logout-button[b-ejqdfkmza9] {
    min-height: 46px;
    padding: 10px 18px;
    box-sizing: border-box;
    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: background-color .18s, border-color .18s;
}

.home-link[b-ejqdfkmza9] {
    border: 1px solid var(--soft);
    background: #fff;
    color: var(--text);
}

.home-link:hover[b-ejqdfkmza9] {
    border-color: var(--green);
    background: #f2f8f3;
    color: var(--green);
}

.logout-button[b-ejqdfkmza9] {
    border: 1px solid transparent;
    background: #fff1f1;
    color: #b42318;
}

.logout-button:hover[b-ejqdfkmza9] {
    background: #ffe4e4;
    border-color: #fecdca;
}

.home-link:focus-visible[b-ejqdfkmza9],
.logout-button:focus-visible[b-ejqdfkmza9] {
    outline: 3px solid rgba(58, 125, 68, .25);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .panel-header-wrap[b-ejqdfkmza9] {
        padding: 12px 20px;
        gap: 16px;
    }

    .panel-header-user[b-ejqdfkmza9] {
        gap: 12px;
    }

    .user-meta[b-ejqdfkmza9] {
        max-width: 160px;
    }
}

@media (max-width: 700px) {
    .panel-header-wrap[b-ejqdfkmza9] {
        min-height: 78px;
        padding: 12px 16px;
        gap: 12px;
    }

    .panel-header-title strong[b-ejqdfkmza9] {
        font-size: 21px;
    }

    .panel-header-title span[b-ejqdfkmza9] {
        font-size: 13px;
    }

    .user-meta[b-ejqdfkmza9],
    .home-link[b-ejqdfkmza9] {
        display: none;
    }

    .logout-button[b-ejqdfkmza9] {
        min-height: 44px;
        padding: 9px 16px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-link[b-ejqdfkmza9],
    .logout-button[b-ejqdfkmza9] {
        transition: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Layout/Panels/Shared/PanelShell.razor.rz.scp.css */
.panel-shell[b-dmgpfz7jjs] {
    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        280px minmax(0, 1fr);

    overflow-x: hidden;

    background: #f8fafc;

    direction: rtl;
}


.panel-sidebar[b-dmgpfz7jjs] {
    min-height: 100vh;

    background: #fff;

    border-left:
        1px solid var(--soft);
}


.panel-main[b-dmgpfz7jjs] {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.panel-header[b-dmgpfz7jjs] {
    position: relative;

    min-width: 0;
    min-height: 72px;

    display: flex;
    align-items: center;

    background: #fff;

    border-bottom:
        1px solid var(--soft);
}


.panel-header[b-dmgpfz7jjs]  .panel-header-wrap {
    min-width: 0;

    flex: 1;
}


.panel-content[b-dmgpfz7jjs] {
    width: 100%;
    min-width: 0;

    flex: 1;

    padding: 28px;
}


.sidebar-toggle[b-dmgpfz7jjs] {
    width: 42px;
    height: 42px;
    padding: 0;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    flex: 0 0 42px;

    gap: 5px;

    border: 0;
    border-radius: 11px;

    background: var(--green);
    color: #fff;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(58, 125, 68, .18);

    transition:
        background-color .2s ease,
        box-shadow .2s ease;
}


.sidebar-toggle span[b-dmgpfz7jjs] {
    width: 19px;
    height: 2px;

    display: block;

    border-radius: 999px;

    background: currentColor;

    transform-origin: center;

    transition:
        transform .25s ease,
        opacity .2s ease;
}


.sidebar-toggle.active span:nth-child(1)[b-dmgpfz7jjs] {
    transform:
        translateY(7px)
        rotate(45deg);
}


.sidebar-toggle.active span:nth-child(2)[b-dmgpfz7jjs] {
    opacity: 0;
}


.sidebar-toggle.active span:nth-child(3)[b-dmgpfz7jjs] {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


.sidebar-toggle:focus-visible[b-dmgpfz7jjs] {
    outline:
        3px solid rgba(58, 125, 68, .2);

    outline-offset: 3px;
}


.panel-overlay[b-dmgpfz7jjs] {
    display: none;
}


@media (max-width: 900px) {

    .panel-shell[b-dmgpfz7jjs] {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .panel-sidebar[b-dmgpfz7jjs] {
        position: fixed;
        z-index: 1200;

        top: 0;
        right: 0;
        bottom: 0;

        width: min(82vw, 300px);
        min-height: 100dvh;

        display: block;

        border-left:
            1px solid var(--soft);

        box-shadow:
            -18px 0 45px
            rgba(15, 23, 42, .16);

        visibility: hidden;

        pointer-events: none;

        transform:
            translateX(105%);

        transition:
            transform .28s ease,
            visibility .28s ease;
    }


    .panel-sidebar.mobile-open[b-dmgpfz7jjs] {
        visibility: visible;

        pointer-events: auto;

        transform:
            translateX(0);
    }


    .panel-main[b-dmgpfz7jjs] {
        width: 100%;
        min-width: 0;
    }


    .panel-header[b-dmgpfz7jjs] {
        position: sticky;
        z-index: 1000;

        top: 0;

        width: 100%;

        padding-right: 12px;
    }


    .sidebar-toggle[b-dmgpfz7jjs] {
        display: flex;
    }


    .panel-overlay[b-dmgpfz7jjs] {
        position: fixed;
        z-index: 1100;

        inset: 0;

        display: block;

        padding: 0;

        border: 0;

        background:
            rgba(15, 23, 42, .38);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        cursor: pointer;

        backdrop-filter:
            blur(2px);

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }


    .panel-overlay.visible[b-dmgpfz7jjs] {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    .panel-content[b-dmgpfz7jjs] {
        width: 100%;
        min-width: 0;

        padding: 18px;

        overflow-x: hidden;
    }
}


@media (max-width: 520px) {

    .panel-header[b-dmgpfz7jjs] {
        min-height: 68px;

        padding-right: 10px;
    }


    .sidebar-toggle[b-dmgpfz7jjs] {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        border-radius: 10px;
    }


    .panel-content[b-dmgpfz7jjs] {
        padding: 14px;
    }


    .panel-sidebar[b-dmgpfz7jjs] {
        width: min(86vw, 290px);
    }
}


@media (hover: none) {

    .sidebar-toggle:hover[b-dmgpfz7jjs] {
        box-shadow:
            0 7px 18px
            rgba(58, 125, 68, .18);
    }
}


@media (prefers-reduced-motion: reduce) {

    .panel-sidebar[b-dmgpfz7jjs],
    .panel-overlay[b-dmgpfz7jjs],
    .sidebar-toggle[b-dmgpfz7jjs],
    .sidebar-toggle span[b-dmgpfz7jjs] {
        transition-duration:
            .01ms !important;
    }
}

/* اسکرول افقی نباید مانع sticky شدن سایدبار شود. */
.panel-shell[b-dmgpfz7jjs] {
    overflow-x: clip;
}

.panel-content[b-dmgpfz7jjs] {
    box-sizing: border-box;
}

/* سایدبار ثابت در محدوده صفحه؛ اسکرول مستقل منو */
@media (min-width: 901px) {
    .panel-sidebar[b-dmgpfz7jjs] {
        position: sticky;
        top: 0;
        align-self: start;

        height: 100vh;
        height: 100dvh;
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior-y: contain;
        scrollbar-width: thin;
    }
}

/* حفظ رفتار کشویی موبایل با اسکرول مستقل */
@media (max-width: 900px) {
    .panel-sidebar[b-dmgpfz7jjs] {
        height: 100vh;
        height: 100dvh;
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;

        overscroll-behavior-y: contain;
        scrollbar-width: thin;
    }
}
/* _content/PopProject.BlazorSSR/Components/Layout/Panels/Shared/PanelSidebar.razor.rz.scp.css */
.sidebar-wrap[b-d0mo7hab9l] {
    position: sticky;
    top: 0;

    height: 100vh;
    height: 100dvh;
    padding: 20px 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.sidebar-brand[b-d0mo7hab9l] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex-shrink: 0;

    display: flex;
    align-items: center;

    min-height: 148px;
    padding: 22px 20px;
    box-sizing: border-box;

    border: 1px solid rgba(58, 125, 68, .13);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(49, 105, 155, .08),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            #f8fbf9,
            #edf5ef
        );

    text-decoration: none;

    transition: border-color .2s;
}

.sidebar-brand:hover[b-d0mo7hab9l] {
    border-color: rgba(58, 125, 68, .3);
}

.sidebar-brand:focus-visible[b-d0mo7hab9l] {
    outline: 3px solid rgba(58, 125, 68, .3);
    outline-offset: 3px;
}

.sidebar-brand-watermark[b-d0mo7hab9l] {
    position: absolute;
    z-index: -1;

    left: -22px;
    top: 50%;

    width: 200px;
    height: 160px;
    object-fit: contain;

    opacity: .09;
    transform: translateY(-50%) rotate(-10deg);

    pointer-events: none;
    user-select: none;
}

.sidebar-brand-content[b-d0mo7hab9l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;

    min-width: 0;
    width: 100%;
}

.sidebar-brand-eyebrow[b-d0mo7hab9l] {
    color: var(--green);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.sidebar-brand-content strong[b-d0mo7hab9l] {
    color: var(--text);
    font-size: 23px;
    font-weight: 900;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.sidebar-brand-subtitle[b-d0mo7hab9l] {
    color: #586b60;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.9;
}

.sidebar-nav[b-d0mo7hab9l] {
    margin-top: 22px;

    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    overflow-y: auto;
    overflow-x: hidden;

    padding-left: 4px;
}

.sidebar-nav[b-d0mo7hab9l]  a {
    flex-shrink: 0;

    min-height: 46px;
    padding: 0 14px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--text);
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition: background-color .18s, color .18s;
}

.sidebar-nav[b-d0mo7hab9l]  a:hover {
    background: #f6f8fa;
    color: var(--green);
}

.sidebar-nav[b-d0mo7hab9l]  a.active {
    background: rgba(58, 125, 68, .09);
    color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-brand[b-d0mo7hab9l],
    .sidebar-nav[b-d0mo7hab9l]  a {
        transition: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Layout/Public/PublicFooter.razor.rz.scp.css */
.footer[b-eupm27vekt] {
    position: relative;

    padding: 86px 0 0;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #111c2c 0%,
            #14283a 47%,
            #123126 100%);

    color: #fff;
}


.footer[b-eupm27vekt]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(49, 103, 168, .13),
            transparent 31%),
        radial-gradient(
            circle at 88% 22%,
            rgba(58, 125, 68, .14),
            transparent 32%),
        radial-gradient(
            circle at 52% 100%,
            rgba(23, 62, 73, .18),
            transparent 40%);
}


.footer[b-eupm27vekt]::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .014) 1px,
            transparent 1px),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .014) 1px,
            transparent 1px);

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .38),
            transparent 80%);

    opacity: .45;
}


.footer .container[b-eupm27vekt] {
    position: relative;
    z-index: 3;
}


.footer-glow[b-eupm27vekt] {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(4px);
}


.glow-one[b-eupm27vekt] {
    width: 420px;
    height: 420px;

    top: -270px;
    right: -150px;

    background:
        rgba(58, 125, 68, .12);
}


.glow-two[b-eupm27vekt] {
    width: 390px;
    height: 390px;

    bottom: -270px;
    left: -150px;

    background:
        rgba(36, 89, 166, .1);
}


.footer-grid[b-eupm27vekt] {
    display: grid;

    grid-template-columns:
        minmax(280px, 1.5fr)
        minmax(150px, .72fr)
        minmax(150px, .72fr)
        minmax(250px, 1.15fr);

    align-items: start;

    gap: 64px;

    direction: rtl;
}


.footer-brand[b-eupm27vekt] {
    min-width: 0;
}


.footer-logo-link[b-eupm27vekt] {
    width: fit-content;

    display: block;

    text-decoration: none;
}


.footer-logo[b-eupm27vekt] {
    width: 230px;
    max-width: 100%;
    height: 98px;

    display: block;

    object-fit: contain;
    object-position: right center;
}


.footer-brand > p[b-eupm27vekt] {
    max-width: 400px;

    margin: 22px 0 0;

    color:
        rgba(236, 242, 247, .72);

    font-size: 15px;
    font-weight: 500;
    line-height: 2.15;
}


.footer-column[b-eupm27vekt] {
    min-width: 0;

    padding-top: 13px;
}


.footer h3[b-eupm27vekt] {
    position: relative;

    margin: 0 0 31px;
    padding-bottom: 14px;

    color: #fff;

    font-size: 19px;
    font-weight: 900;
    line-height: 1.7;
}


.footer h3[b-eupm27vekt]::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 39px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #4c93ba,
            #59a369);
}


.footer-links[b-eupm27vekt] {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.footer-links a[b-eupm27vekt] {
    position: relative;

    width: fit-content;
    padding-right: 16px;

    color:
        rgba(236, 242, 247, .69);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.8;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.footer-links a[b-eupm27vekt]::before {
    content: "";

    position: absolute;

    top: .78em;
    right: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(91, 165, 108, .55);

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.footer-links a:hover[b-eupm27vekt] {
    color: #fff;

    transform: translateX(-5px);
}


.footer-links a:hover[b-eupm27vekt]::before {
    transform: scale(1.25);

    background: #64af75;

    box-shadow:
        0 0 10px rgba(100, 175, 117, .45);
}


.footer-social[b-eupm27vekt] {
    margin-top: 29px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;
}


.footer-social a[b-eupm27vekt] {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, .055);

    color:
        rgba(255, 255, 255, .78);

    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}


.footer-social svg[b-eupm27vekt] {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.footer-social .filled-dot[b-eupm27vekt] {
    fill: currentColor;
    stroke: none;
}


.footer-social .play-icon[b-eupm27vekt] {
    fill: currentColor;
    stroke: none;
}


.footer-social a:hover[b-eupm27vekt] {
    transform: translateY(-4px);

    border-color:
        rgba(91, 165, 108, .4);

    background:
        linear-gradient(
            145deg,
            rgba(58, 125, 68, .9),
            rgba(36, 89, 166, .78));

    color: #fff;

    box-shadow:
        0 12px 26px rgba(7, 20, 33, .24);
}


.footer-social a:focus-visible[b-eupm27vekt],
.footer-links a:focus-visible[b-eupm27vekt],
.contact-item:focus-visible[b-eupm27vekt],
.trust-badge:focus-visible[b-eupm27vekt] {
    outline:
        3px solid rgba(92, 166, 109, .28);

    outline-offset: 3px;
}


.footer-contact[b-eupm27vekt] {
    margin: 0;

    display: flex;
    flex-direction: column;

    gap: 17px;

    font-style: normal;
}


.contact-item[b-eupm27vekt] {
    min-width: 0;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    color:
        rgba(236, 242, 247, .7);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.9;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


a.contact-item:hover[b-eupm27vekt] {
    transform: translateX(-4px);

    color: #fff;
}


.contact-icon[b-eupm27vekt] {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 31px;

    border:
        1px solid rgba(255, 255, 255, .075);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, .045);

    color: #71b47e;
}


.contact-icon svg[b-eupm27vekt] {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.footer-trust[b-eupm27vekt] {
    margin-top: 58px;
    padding: 28px 0;

    border-top:
        1px solid rgba(255, 255, 255, .075);
}


.trust-content[b-eupm27vekt] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    direction: rtl;
}


.trust-content strong[b-eupm27vekt] {
    display: block;

    color:
        rgba(255, 255, 255, .9);

    font-size: 15px;
    font-weight: 900;
    line-height: 1.8;
}


.trust-content p[b-eupm27vekt] {
    margin: 3px 0 0;

    color:
        rgba(236, 242, 247, .48);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}


.trust-badges[b-eupm27vekt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}


.trust-badge[b-eupm27vekt] {
    width: 78px;
    height: 78px;
    padding: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, .1);

    border-radius: 14px;

    background:
        rgb(255, 255, 255);

    box-shadow:
        0 9px 23px rgba(5, 15, 25, .13);

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.trust-badge:hover[b-eupm27vekt] {
    transform: translateY(-4px);

    border-color:
        rgba(93, 168, 110, .45);

    box-shadow:
        0 14px 30px rgba(5, 15, 25, .2);
}


.trust-badge img[b-eupm27vekt] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.footer-bottom[b-eupm27vekt] {
    padding: 24px 0 26px;

    border-top:
        1px solid rgba(255, 255, 255, .075);

    text-align: center;
}


.footer-bottom p[b-eupm27vekt] {
    margin: 0;

    color:
        rgba(236, 242, 247, .5);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
}


@media (max-width: 1100px) {

    .footer-grid[b-eupm27vekt] {
        grid-template-columns:
            minmax(260px, 1.3fr)
            repeat(2, minmax(135px, .7fr))
            minmax(220px, 1fr);

        gap: 39px;
    }
}


@media (max-width: 900px) {

    .footer[b-eupm27vekt] {
        padding-top: 72px;
    }


    .footer-grid[b-eupm27vekt] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 48px 42px;
    }


    .footer-brand > p[b-eupm27vekt] {
        max-width: 500px;
    }
}


@media (max-width: 620px) {

    .footer[b-eupm27vekt] {
        padding-top: 61px;
    }


    .footer-grid[b-eupm27vekt] {
        grid-template-columns: 1fr;

        gap: 39px;
    }


    .footer-brand[b-eupm27vekt],
    .footer-column[b-eupm27vekt] {
        padding-top: 0;
    }


    .footer-logo[b-eupm27vekt] {
        width: 170px;
        height: 78px;
    }


    .footer-brand > p[b-eupm27vekt] {
        margin-top: 16px;

        font-size: 14px;
        line-height: 2.05;
    }


    .footer h3[b-eupm27vekt] {
        margin-bottom: 25px;

        font-size: 18px;
    }


    .footer-social[b-eupm27vekt] {
        margin-top: 23px;
    }


    .footer-social a[b-eupm27vekt] {
        width: 42px;
        height: 42px;
    }


    .footer-trust[b-eupm27vekt] {
        margin-top: 44px;
        padding: 25px 0;
    }


    .trust-content[b-eupm27vekt] {
        align-items: flex-start;
        flex-direction: column;

        gap: 18px;
    }


    .trust-badges[b-eupm27vekt] {
        width: 100%;
    }


    .trust-badge[b-eupm27vekt] {
        width: 72px;
        height: 72px;
    }


    .footer-bottom[b-eupm27vekt] {
        padding:
            21px 0 23px;
    }
}


@media (max-width: 380px) {

    .footer-social[b-eupm27vekt] {
        gap: 9px;
    }


    .footer-social a[b-eupm27vekt] {
        width: 40px;
        height: 40px;

        border-radius: 12px;
    }


    .trust-badge[b-eupm27vekt] {
        width: 68px;
        height: 68px;
    }
}


@media (hover: none) {

    .footer-social a:hover[b-eupm27vekt],
    .trust-badge:hover[b-eupm27vekt],
    .footer-links a:hover[b-eupm27vekt],
    a.contact-item:hover[b-eupm27vekt] {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {

    .footer-social a[b-eupm27vekt],
    .trust-badge[b-eupm27vekt],
    .footer-links a[b-eupm27vekt],
    .footer-links a[b-eupm27vekt]::before,
    .contact-item[b-eupm27vekt] {
        transition-duration: .01ms !important;
    }
}
.footer-social[b-eupm27vekt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer-social a[b-eupm27vekt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.footer-share-trigger[b-eupm27vekt] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    color: #fff;
    cursor: pointer;
}

.footer-share-trigger:hover[b-eupm27vekt] {
    background: rgba(255,255,255,.14);
}

.footer-share-modal[hidden][b-eupm27vekt] {
    display: none !important;
}

.footer-share-modal[b-eupm27vekt] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.footer-share-backdrop[b-eupm27vekt] {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.68);
}

.footer-share-panel[b-eupm27vekt] {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    color: #475467;
    box-shadow: 0 25px 80px rgba(0,0,0,.2);
    text-align: center;
}

.footer-share-panel h3[b-eupm27vekt] {
    margin: 0 0 10px;
    font-size: 23px;
}

.footer-share-panel p[b-eupm27vekt] {
    color: #667085;
    font-size: 14px;
    line-height: 1.8;
}

.footer-share-close[b-eupm27vekt] {
    position: absolute;
    top: 10px;
    left: 15px;
    border: 0;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
    color: #667085;
}

.footer-share-options[b-eupm27vekt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 22px;
}

.footer-share-options button[b-eupm27vekt] {
    padding: 13px 8px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #f8fafc;
    color: #344054;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.footer-share-options button:hover[b-eupm27vekt] {
    border-color: #3a7d44;
    background: #f0f7f2;
}

.footer-share-options button:last-child[b-eupm27vekt] {
    grid-column: 1 / -1;
}

.footer-share-status:empty[b-eupm27vekt] {
    display: none;
}

@media (max-width: 480px) {
    .footer-share-panel[b-eupm27vekt] {
        padding: 24px 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Layout/Public/PublicHeader.razor.rz.scp.css */
.site-header[b-n1oqbmja32] {
    position: sticky;
    z-index: 1000;

    top: 0;

    height: 78px;

    border-bottom:
        1px solid var(--soft);

    background: #fff;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, .03);
}


.nav-wrap[b-n1oqbmja32] {
    position: relative;
    z-index: 3;

    height: 78px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    direction: rtl;
}



.logo[b-n1oqbmja32] {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    text-decoration: none;
}


.logo img[b-n1oqbmja32] {
    width: 145px;
    height: auto;

    display: block;
}


.main-nav[b-n1oqbmja32] {
    display: flex;
    align-items: center;

    gap: 42px;
}


.main-nav[b-n1oqbmja32]  > a {
    position: relative;

    padding: 8px 0;

    color: var(--text);

    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.7;

    text-decoration: none;

    transition:
        color .2s ease,
        padding .2s ease;
}


.main-nav[b-n1oqbmja32]  > a::after {
    content: "";

    position: absolute;

    right: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    border-radius: 999px;

    background: var(--orange);

    transform: translateX(50%);

    transition:
        width .25s ease,
        height .25s ease;
}


.main-nav[b-n1oqbmja32]  > a:hover,
.main-nav[b-n1oqbmja32]  > a.active {
    color: var(--orange);
}


.main-nav[b-n1oqbmja32]  > a:hover::after,
.main-nav[b-n1oqbmja32]  > a.active::after {
    width: 21px;
}


.header-actions[b-n1oqbmja32] {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 12px;
}


.header-actions .btn[b-n1oqbmja32] {
    font-size: 15px;
    font-weight: 800;
}


.user-name[b-n1oqbmja32] {
    max-width: 140px;

    overflow: hidden;

    color: var(--text);

    font-size: 13.5px;
    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.panel-button[b-n1oqbmja32] {
    border:
        1px solid var(--green);

    background: var(--green);
    color: #fff !important;
}


.panel-button:hover[b-n1oqbmja32] {
    filter: brightness(.95);
}


.mobile-account[b-n1oqbmja32] {
    display: none;
}


.menu-toggle[b-n1oqbmja32] {
    width: 44px;
    height: 44px;
    padding: 0;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    flex: 0 0 44px;

    gap: 5px;

    border: 0;
    border-radius: 12px;

    background: var(--green);
    color: #fff;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(58, 125, 68, .15);

    transition:
        transform .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}


.menu-toggle span[b-n1oqbmja32] {
    width: 20px;
    height: 2px;

    display: block;

    border-radius: 999px;

    background: currentColor;

    transform-origin: center;

    transition:
        transform .3s ease,
        opacity .2s ease;
}


.menu-toggle:hover[b-n1oqbmja32] {
    transform: translateY(-2px);

    box-shadow:
        0 11px 24px rgba(58, 125, 68, .21);
}


.menu-toggle.open span:nth-child(1)[b-n1oqbmja32] {
    transform:
        translateY(7px)
        rotate(45deg);
}


.menu-toggle.open span:nth-child(2)[b-n1oqbmja32] {
    opacity: 0;

    transform: scaleX(0);
}


.menu-toggle.open span:nth-child(3)[b-n1oqbmja32] {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


.menu-toggle:focus-visible[b-n1oqbmja32],
.main-nav[b-n1oqbmja32]  a:focus-visible,
.header-actions a:focus-visible[b-n1oqbmja32],
.header-actions button:focus-visible[b-n1oqbmja32] {
    outline:
        3px solid rgba(58, 125, 68, .18);

    outline-offset: 3px;
}


.menu-overlay[b-n1oqbmja32] {
    position: fixed;
    z-index: 1;

    inset: 78px 0 0;

    display: none;

    border: 0;

    background:
        rgba(17, 28, 44, .24);

    opacity: 0;

    pointer-events: none;

    backdrop-filter: blur(2px);

    transition:
        opacity .3s ease;
}


.menu-overlay.visible[b-n1oqbmja32] {
    opacity: 1;

    pointer-events: auto;
}


@media (max-width: 1180px) {

    .nav-wrap[b-n1oqbmja32] {
        gap: 18px;
    }


    .main-nav[b-n1oqbmja32] {
        gap: 25px;
    }


    .main-nav[b-n1oqbmja32]  > a {
        font-size: 15px;
    }


    .header-actions[b-n1oqbmja32] {
        gap: 8px;
    }


    .header-actions .btn[b-n1oqbmja32] {
        padding-right: 15px;
        padding-left: 15px;
    }
}


@media (max-width: 980px) {

    .site-header[b-n1oqbmja32] {
        height: 78px;
    }


    .menu-toggle[b-n1oqbmja32] {
        display: flex;
    }


    .menu-overlay[b-n1oqbmja32] {
        display: block;
    }


    .main-nav[b-n1oqbmja32] {
        position: absolute;

        top: calc(100% + 12px);
        right: 0;
        left: 0;

        max-height: 0;
        padding: 0 22px;

        display: flex;
        align-items: stretch;
        flex-direction: column;

        gap: 0;

        overflow: hidden;

        border:
            1px solid transparent;

        border-radius:
            18px 30px 18px 30px;

        background:
            rgba(255, 255, 255, .98);

        box-shadow:
            0 22px 55px rgba(31, 41, 55, .13);

        opacity: 0;

        pointer-events: none;

        transform:
            translateY(-10px)
            scale(.985);

        transform-origin:
            top center;

        transition:
            max-height .42s
                cubic-bezier(.2, .72, .2, 1),
            padding .35s ease,
            border-color .35s ease,
            opacity .25s ease,
            transform .35s ease;

        backdrop-filter: blur(14px);
    }


    .main-nav.open[b-n1oqbmja32] {
        max-height: 630px;
        padding:
            17px 22px 21px;

        border-color:
            rgba(58, 125, 68, .12);

        opacity: 1;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);
    }


    .main-nav[b-n1oqbmja32]  > a {
        width: 100%;
        min-height: 51px;
        padding: 0 13px;

        display: flex;
        align-items: center;

        border-bottom:
            1px solid rgba(31, 41, 55, .06);

        font-size: 15px;
        font-weight: 800;
    }


    .main-nav[b-n1oqbmja32]  > a::after {
        top: 50%;
        right: 0;
        bottom: auto;

        width: 3px;
        height: 0;

        transform:
            translateY(-50%);

        transition:
            height .25s ease;
    }


    .main-nav[b-n1oqbmja32]  > a:hover::after,
    .main-nav[b-n1oqbmja32]  > a.active::after {
        width: 3px;
        height: 21px;
    }


    .main-nav[b-n1oqbmja32]  > a:hover {
        padding-right: 18px;
    }


    .user-name[b-n1oqbmja32] {
        display: none;
    }


    .panel-button[b-n1oqbmja32] {
        display: none;
    }


    .mobile-account[b-n1oqbmja32] {
        padding-top: 16px;

        display: flex;
        align-items: center;
        flex-wrap: wrap;

        gap: 10px;
    }


    .mobile-account .panel-button[b-n1oqbmja32] {
        display: inline-flex;
    }


    .mobile-user-name[b-n1oqbmja32] {
        width: 100%;

        margin-bottom: 3px;
        padding: 0 4px;

        overflow: hidden;

        color: #667085;

        font-size: 13px;
        font-weight: 700;

        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .mobile-account .btn[b-n1oqbmja32] {
        min-height: 45px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        flex: 1 1 160px;

        font-size: 14px;
        font-weight: 800;
    }
}


@media (max-width: 720px) {

    .nav-wrap[b-n1oqbmja32] {
        gap: 13px;
    }


    .logo img[b-n1oqbmja32] {
        width: 105px;
    }


    .header-actions .btn[b-n1oqbmja32] {
        min-height: 43px;
        padding-right: 14px;
        padding-left: 14px;

        font-size: 14px;
    }
}


@media (max-width: 520px) {

    .site-header[b-n1oqbmja32],
    .nav-wrap[b-n1oqbmja32] {
        height: 70px;
    }


    .nav-wrap[b-n1oqbmja32] {
        gap: 10px;
    }


    .logo img[b-n1oqbmja32] {
        width: 94px;
    }


    .menu-toggle[b-n1oqbmja32] {
        width: 42px;
        height: 42px;

        flex-basis: 42px;

        border-radius: 11px;
    }


    .menu-overlay[b-n1oqbmja32] {
        inset:
            70px 0 0;
    }


    .main-nav[b-n1oqbmja32] {
        top:
            calc(100% + 9px);

        border-radius:
            17px 25px 17px 25px;
    }


    .header-actions[b-n1oqbmja32] {
        margin-right: auto;
    }


    .header-actions .btn[b-n1oqbmja32] {
        min-height: 41px;
        padding: 0 12px;

        font-size: 13px;
    }


    .header-actions .user-name[b-n1oqbmja32],
    .header-actions .panel-button[b-n1oqbmja32] {
        display: none;
    }
}


@media (max-width: 390px) {

    .logo img[b-n1oqbmja32] {
        width: 86px;
    }


    .header-actions[b-n1oqbmja32] {
        display: none;
    }


    .menu-toggle[b-n1oqbmja32] {
        margin-right: auto;
    }


    .mobile-login-button[b-n1oqbmja32] {
        width: 100%;
    }
}


@media (hover: none) {

    .menu-toggle:hover[b-n1oqbmja32] {
        transform: none;

        box-shadow:
            0 8px 20px rgba(58, 125, 68, .15);
    }


    .main-nav[b-n1oqbmja32]  > a:hover {
        padding-right: 13px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .main-nav[b-n1oqbmja32],
    .main-nav[b-n1oqbmja32]  > a,
    .main-nav[b-n1oqbmja32]  > a::after,
    .menu-toggle[b-n1oqbmja32],
    .menu-toggle span[b-n1oqbmja32],
    .menu-overlay[b-n1oqbmja32] {
        transition-duration: .01ms !important;
    }
}
/* _content/PopProject.BlazorSSR/Components/Pages/ArticleDetails.razor.rz.scp.css */
.article-details-page[b-3avtga5e5t] {
    background: #fff;
}


.article-hero[b-3avtga5e5t] {
    position: relative;

    padding: 64px 0 72px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(241, 248, 242, .97),
            rgba(243, 247, 253, .96));
}


.article-hero[b-3avtga5e5t]::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle at 12% 18%,
            rgba(58, 125, 68, .07) 0 4px,
            transparent 5px),
        radial-gradient(
            circle at 88% 78%,
            rgba(36, 89, 166, .07) 0 5px,
            transparent 6px);

    background-size:
        90px 90px,
        120px 120px;
}


.article-shape[b-3avtga5e5t] {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.shape-one[b-3avtga5e5t] {
    width: 320px;
    height: 320px;

    top: -190px;
    right: -110px;

    background:
        rgba(58, 125, 68, .08);
}


.shape-two[b-3avtga5e5t] {
    width: 260px;
    height: 260px;

    bottom: -160px;
    left: -80px;

    background:
        rgba(36, 89, 166, .08);
}


.article-hero-wrap[b-3avtga5e5t] {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .95fr);

    align-items: center;

    gap: 54px;
}


.article-hero-content[b-3avtga5e5t] {
    min-width: 0;
}


.article-eyebrow[b-3avtga5e5t] {
    min-height: 38px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(58, 125, 68, .16);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .88);

    color: var(--green);

    font-size: 15px;
    font-weight: 900;
}


.article-hero-content h1[b-3avtga5e5t] {
    margin: 20px 0 15px;

    color: var(--text);

    font-size:
        clamp(34px, 4vw, 50px);

    font-weight: 900;
    line-height: 1.55;

    overflow-wrap: anywhere;
}


.article-introduction[b-3avtga5e5t] {
    max-width: 720px;

    margin: 0;

    color: #596579;

    font-size: 18px;
    font-weight: 500;
    line-height: 2.05;
}


.article-meta[b-3avtga5e5t] {
    margin-top: 25px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;
}


.article-meta span[b-3avtga5e5t],
.article-meta a[b-3avtga5e5t] {
    min-height: 36px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;

    border:
        1px solid rgba(36, 89, 166, .1);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .76);

    color: #526174;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;
}


.article-meta a[b-3avtga5e5t] {
    color: #2459a6;
}


.article-meta a:hover[b-3avtga5e5t] {
    border-color:
        rgba(58, 125, 68, .3);

    color: var(--green);
}


.article-cover[b-3avtga5e5t] {
    height: 390px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border:
        9px solid rgba(255, 255, 255, .84);

    border-radius:
        32px 70px 32px 70px;

    background: #fff;

    box-shadow:
        0 25px 58px rgba(31, 41, 55, .13);
}


.article-cover img[b-3avtga5e5t] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.cover-placeholder[b-3avtga5e5t] {
    color: #2459a6;

    font-size: 85px;
}


.article-reading-section[b-3avtga5e5t] {
    padding: 80px 0 88px;

    background: #fff;
}


.article-layout[b-3avtga5e5t] {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        290px;

    align-items: start;

    gap: 30px;
}


.article-content-card[b-3avtga5e5t] {
    min-width: 0;
    padding: 42px 46px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius:
        28px 54px 28px 54px;

    background: #fff;

    box-shadow:
        0 18px 46px rgba(31, 41, 55, .065);
}


.article-content[b-3avtga5e5t] {
    color: #475467;

    font-size: 18px;
    font-weight: 500;
    line-height: 2.25;

    overflow-wrap: anywhere;
}


.article-content[b-3avtga5e5t]  h1,
.article-content[b-3avtga5e5t]  h2,
.article-content[b-3avtga5e5t]  h3,
.article-content[b-3avtga5e5t]  h4 {
    color: var(--text);

    font-weight: 900;

    overflow-wrap: break-word;
}


.article-content[b-3avtga5e5t]  h1 {
    margin: 0 0 24px;

    font-size:
        clamp(30px, 3vw, 39px);

    line-height: 1.55;
}


.article-content[b-3avtga5e5t]  h2 {
    position: relative;

    margin: 38px 0 15px;
    padding-right: 18px;

    font-size:
        clamp(26px, 2.5vw, 32px);

    line-height: 1.65;
}


.article-content[b-3avtga5e5t]  h2::before {
    content: "";

    position: absolute;

    top: .35em;
    right: 0;

    width: 5px;
    height: 1.1em;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--green),
            #2459a6);
}


.article-content[b-3avtga5e5t]  h2:first-child {
    margin-top: 0;
}


.article-content[b-3avtga5e5t]  h3 {
    margin: 30px 0 13px;

    color: var(--green);

    font-size: 23px;
    line-height: 1.7;
}


.article-content[b-3avtga5e5t]  h4 {
    margin: 25px 0 10px;

    font-size: 20px;
    line-height: 1.75;
}


.article-content[b-3avtga5e5t]  p {
    margin: 0 0 21px;
}


.article-content[b-3avtga5e5t]  p:last-child {
    margin-bottom: 0;
}


.article-content[b-3avtga5e5t]  ul,
.article-content[b-3avtga5e5t]  ol {
    margin: 16px 0 25px;
    padding-right: 29px;
}


.article-content[b-3avtga5e5t]  li {
    margin-bottom: 9px;
}


.article-content[b-3avtga5e5t]  li::marker {
    color: var(--green);

    font-weight: 900;
}


.article-content[b-3avtga5e5t]  strong {
    color: var(--text);

    font-weight: 900;
}


.article-content[b-3avtga5e5t]  a {
    color: #2459a6;

    font-weight: 800;

    text-decoration: underline;
    text-underline-offset: 5px;
}


.article-content[b-3avtga5e5t]  blockquote {
    margin: 27px 0;
    padding: 20px 23px;

    border:
        1px solid rgba(58, 125, 68, .13);

    border-right:
        5px solid var(--green);

    border-radius:
        17px 4px 4px 17px;

    background:
        linear-gradient(
            135deg,
            rgba(245, 250, 246, .98),
            rgba(245, 248, 253, .94));

    color: #4e5e70;
}


.article-content[b-3avtga5e5t]  img {
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 30px auto;

    display: block;

    border-radius:
        22px 42px 22px 42px;

    box-shadow:
        0 16px 38px rgba(31, 41, 55, .12);
}


.article-content[b-3avtga5e5t]  figure {
    max-width: 100%;

    margin: 30px 0;
}


.article-content[b-3avtga5e5t]  figure img {
    margin: 0 auto;
}


.article-content[b-3avtga5e5t]  figcaption {
    margin-top: 10px;

    color: #667085;

    font-size: 14px;
    text-align: center;
}


.article-content[b-3avtga5e5t]  iframe,
.article-content[b-3avtga5e5t]  video {
    max-width: 100%;

    border-radius: 18px;
}


.article-content[b-3avtga5e5t]  table {
    width: 100%;

    margin: 26px 0;

    overflow: hidden;

    border-collapse: separate;
    border-spacing: 0;

    border: 1px solid var(--soft);
    border-radius: 16px;
}


.article-content[b-3avtga5e5t]  th,
.article-content[b-3avtga5e5t]  td {
    padding: 13px 15px;

    border-left: 1px solid var(--soft);
    border-bottom: 1px solid var(--soft);

    text-align: right;
}


.article-content[b-3avtga5e5t]  th:last-child,
.article-content[b-3avtga5e5t]  td:last-child {
    border-left: 0;
}


.article-content[b-3avtga5e5t]  tr:last-child td {
    border-bottom: 0;
}


.article-content[b-3avtga5e5t]  th {
    background:
        rgba(58, 125, 68, .07);

    color: var(--text);

    font-weight: 900;
}


.article-sidebar[b-3avtga5e5t] {
    position: sticky;
    top: 24px;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


.sidebar-card[b-3avtga5e5t] {
    padding: 22px;

    border:
        1px solid rgba(58, 125, 68, .12);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(247, 251, 248, .96));

    box-shadow:
        0 12px 30px rgba(31, 41, 55, .05);
}


.sidebar-card h2[b-3avtga5e5t] {
    margin: 0 0 16px;

    color: var(--text);

    font-size: 18px;
    font-weight: 900;
    line-height: 1.7;
}


.sidebar-list[b-3avtga5e5t] {
    display: flex;
    flex-direction: column;
}


.sidebar-item[b-3avtga5e5t] {
    padding: 11px 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid rgba(58, 125, 68, .09);
}


.sidebar-item:first-child[b-3avtga5e5t] {
    padding-top: 0;
}


.sidebar-item:last-child[b-3avtga5e5t] {
    padding-bottom: 0;

    border-bottom: 0;
}


.sidebar-item span[b-3avtga5e5t] {
    color: #667085;

    font-size: 13px;
    font-weight: 600;
}


.sidebar-item strong[b-3avtga5e5t] {
    color: var(--text);

    font-size: 13px;
    font-weight: 900;

    text-align: left;
}


.category-list[b-3avtga5e5t] {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.category-item[b-3avtga5e5t] {
    min-height: 48px;
    padding: 7px 9px;

    display: flex;
    align-items: center;

    gap: 9px;

    border:
        1px solid rgba(58, 125, 68, .1);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .82);

    color: var(--text);

    text-decoration: none;
}


.category-item:hover[b-3avtga5e5t] {
    border-color:
        rgba(58, 125, 68, .3);

    color: var(--green);
}


.category-icon[b-3avtga5e5t] {
    width: 34px;
    height: 34px;
    padding: 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 34px;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(58, 125, 68, .08);
}


.category-icon img[b-3avtga5e5t] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.category-icon > span[b-3avtga5e5t] {
    font-size: 17px;
}


.category-item strong[b-3avtga5e5t] {
    font-size: 14px;
    font-weight: 900;
}


.reference-card a[b-3avtga5e5t] {
    min-height: 42px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #2459a6;
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;
}


.reference-card a:hover[b-3avtga5e5t] {
    filter: brightness(.96);
}


.reference-card p[b-3avtga5e5t] {
    margin: 0;

    color: #596579;

    font-size: 14px;
    line-height: 1.9;

    overflow-wrap: anywhere;
}


.related-articles[b-3avtga5e5t] {
    padding: 76px 0 82px;

    background:
        linear-gradient(
            135deg,
            rgba(246, 251, 247, .98),
            rgba(245, 248, 253, .96));
}


.section-head[b-3avtga5e5t] {
    max-width: 760px;

    margin: 0 auto 36px;

    text-align: center;
}


.section-head > span[b-3avtga5e5t] {
    display: block;

    margin-bottom: 7px;

    color: var(--green);

    font-size: 16px;
    font-weight: 900;
}


.section-head h2[b-3avtga5e5t] {
    margin: 0;

    color: var(--text);

    font-size:
        clamp(30px, 3.5vw, 40px);

    font-weight: 900;
    line-height: 1.45;
}


.section-head p[b-3avtga5e5t] {
    margin: 10px auto 0;

    color: #667085;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


.related-grid[b-3avtga5e5t] {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 20px;
}


.related-card[b-3avtga5e5t] {
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 23px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.related-card:hover[b-3avtga5e5t] {
    transform: translateY(-6px);

    border-color:
        rgba(58, 125, 68, .32);

    box-shadow:
        0 18px 38px rgba(31, 41, 55, .09);
}


.related-image[b-3avtga5e5t] {
    height: 195px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 195px;

    overflow: hidden;

    background: #f3f7f3;

    text-decoration: none;
}


.related-image img[b-3avtga5e5t] {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .3s ease;
}


.related-card:hover .related-image img[b-3avtga5e5t] {
    transform: scale(1.045);
}


.related-image > span[b-3avtga5e5t] {
    color: #2459a6;

    font-size: 50px;
}


.related-body[b-3avtga5e5t] {
    min-height: 245px;
    padding: 18px 20px 20px;

    display: flex;
    flex: 1;
    flex-direction: column;
}


.related-meta[b-3avtga5e5t] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    color: #667085;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
}


.related-body h3[b-3avtga5e5t] {
    margin: 10px 0 7px;

    color: var(--text);

    font-size: 20px;
    font-weight: 900;
    line-height: 1.7;
}


.related-body h3 a[b-3avtga5e5t] {
    color: inherit;

    text-decoration: none;
}


.related-body p[b-3avtga5e5t] {
    margin: 0;

    overflow: hidden;

    color: #667085;

    font-size: 14px;
    font-weight: 500;
    line-height: 2;

    display: -webkit-box;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


.related-link[b-3avtga5e5t] {
    margin-top: auto;
    padding-top: 14px;

    display: inline-flex;
    align-items: center;
    align-self: flex-start;

    gap: 7px;

    color: var(--green);

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;
}


.related-link:hover[b-3avtga5e5t] {
    gap: 10px;

    color: #2459a6;
}


.article-state-section[b-3avtga5e5t] {
    min-height:
        calc(100svh - 40px);

    padding: 80px 0;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            rgba(241, 248, 242, .97),
            rgba(243, 247, 253, .96));
}


.article-state-card[b-3avtga5e5t] {
    min-height: 270px;
    padding: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 14px;

    border:
        1px solid rgba(58, 125, 68, .13);

    border-radius: 26px;

    background: #fff;

    text-align: center;

    box-shadow:
        0 20px 50px rgba(31, 41, 55, .08);
}


.article-state-card h1[b-3avtga5e5t] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}


.article-state-card p[b-3avtga5e5t] {
    max-width: 560px;

    margin: 0;

    color: #667085;

    font-size: 15px;
    line-height: 2;
}


.loading-spinner[b-3avtga5e5t] {
    width: 42px;
    height: 42px;

    border:
        4px solid rgba(58, 125, 68, .14);

    border-top-color: var(--green);
    border-radius: 50%;

    animation:
        article-spin-b-3avtga5e5t .8s linear infinite;
}


@keyframes article-spin-b-3avtga5e5t {
    to {
        transform: rotate(360deg);
    }
}


.state-icon[b-3avtga5e5t] {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        rgba(36, 89, 166, .09);

    color: #2459a6;

    font-size: 26px;
    font-weight: 900;
}


.article-state-card.error
.state-icon[b-3avtga5e5t] {
    background:
        rgba(58, 125, 68, .09);

    color: var(--green);
}


.state-button[b-3avtga5e5t] {
    min-height: 46px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: var(--green);
    color: #fff;

    font-size: 14px;
    font-weight: 900;

    text-decoration: none;
}


@media (max-width: 1050px) {

    .article-hero-wrap[b-3avtga5e5t] {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .8fr);

        gap: 36px;
    }


    .article-layout[b-3avtga5e5t] {
        grid-template-columns:
            minmax(0, 1fr)
            260px;

        gap: 22px;
    }


    .article-content-card[b-3avtga5e5t] {
        padding: 36px;
    }
}


@media (max-width: 850px) {

    .article-hero-wrap[b-3avtga5e5t],
    .article-layout[b-3avtga5e5t] {
        grid-template-columns: 1fr;
    }


    .article-hero-content[b-3avtga5e5t] {
        text-align: center;
    }


    .article-introduction[b-3avtga5e5t] {
        margin-right: auto;
        margin-left: auto;
    }


    .article-meta[b-3avtga5e5t] {
        justify-content: center;
    }


    .article-cover[b-3avtga5e5t] {
        max-width: 680px;
        height: 380px;

        margin: 0 auto;
    }


    .article-sidebar[b-3avtga5e5t] {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .related-grid[b-3avtga5e5t] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .article-hero[b-3avtga5e5t] {
        padding: 42px 0 58px;
    }


    .article-hero-wrap[b-3avtga5e5t] {
        gap: 32px;
    }


    .article-eyebrow[b-3avtga5e5t] {
        min-height: 35px;

        font-size: 14px;
    }


    .article-hero-content h1[b-3avtga5e5t] {
        margin: 17px 0 13px;

        font-size:
            clamp(28px, 8vw, 35px);

        line-height: 1.6;
    }


    .article-introduction[b-3avtga5e5t] {
        font-size: 15px;
        line-height: 2;
    }


    .article-meta[b-3avtga5e5t] {
        margin-top: 20px;

        gap: 8px;
    }


    .article-meta span[b-3avtga5e5t],
    .article-meta a[b-3avtga5e5t] {
        min-height: 34px;
        padding: 0 11px;

        font-size: 12px;
    }


    .article-cover[b-3avtga5e5t] {
        height: 270px;

        border-width: 6px;
        border-radius:
            24px 44px 24px 44px;
    }


    .article-reading-section[b-3avtga5e5t] {
        padding: 62px 0 68px;
    }


    .article-content-card[b-3avtga5e5t] {
        padding: 28px 20px;

        border-radius:
            22px 38px 22px 38px;
    }


    .article-content[b-3avtga5e5t] {
        font-size: 15px;
        line-height: 2.1;
    }


    .article-content[b-3avtga5e5t]  h1 {
        font-size: 26px;
    }


    .article-content[b-3avtga5e5t]  h2 {
        margin-top: 30px;

        font-size: 23px;
    }


    .article-content[b-3avtga5e5t]  h3 {
        font-size: 20px;
    }


    .article-content[b-3avtga5e5t]  h4 {
        font-size: 18px;
    }


    .article-content[b-3avtga5e5t]  img {
        margin: 24px auto;

        border-radius:
            17px 30px 17px 30px;
    }


    .article-content[b-3avtga5e5t]  table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }


    .article-sidebar[b-3avtga5e5t] {
        grid-template-columns: 1fr;
    }


    .sidebar-card[b-3avtga5e5t] {
        padding: 19px;

        border-radius: 18px;
    }


    .related-articles[b-3avtga5e5t] {
        padding: 64px 0 68px;
    }


    .section-head[b-3avtga5e5t] {
        margin-bottom: 30px;
    }


    .section-head h2[b-3avtga5e5t] {
        font-size: 28px;
    }


    .section-head p[b-3avtga5e5t] {
        font-size: 15px;
    }


    .related-grid[b-3avtga5e5t] {
        grid-template-columns: 1fr;
    }


    .related-image[b-3avtga5e5t] {
        height: 215px;

        flex-basis: 215px;
    }


    .related-body[b-3avtga5e5t] {
        min-height: 0;
    }


    .article-state-section[b-3avtga5e5t] {
        padding: 60px 0;
    }


    .article-state-card[b-3avtga5e5t] {
        min-height: 240px;
        padding: 26px 20px;
    }


    .article-state-card h1[b-3avtga5e5t] {
        font-size: 24px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .loading-spinner[b-3avtga5e5t] {
        animation: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Pages/Blog.razor.rz.scp.css */
.blog-page[b-1urewv9001] {
    min-height: 60vh;
    background: #f8fafc;
    padding-bottom: 64px;
}

.blog-hero[b-1urewv9001] {
    padding: 52px 0 46px;
    background:
        radial-gradient(
            ellipse at 85% 15%,
            rgba(58, 125, 68, .1),
            transparent 55%
        ),
        #f3f8f4;
    border-bottom: 1px solid var(--soft);
}

.blog-eyebrow[b-1urewv9001] {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
}

.blog-hero h1[b-1urewv9001] {
    margin: 18px 0 12px;
    color: var(--text);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
}

.blog-hero p[b-1urewv9001] {
    max-width: 700px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 2.1;
}

.blog-content[b-1urewv9001] {
    padding-top: 28px;
}

.blog-filter[b-1urewv9001] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .025);
}

.filter-field[b-1urewv9001] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(100%, 380px);
}

.filter-field label[b-1urewv9001] {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.filter-field select[b-1urewv9001] {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--soft);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.filter-field select:focus-visible[b-1urewv9001] {
    outline: 3px solid rgba(58, 125, 68, .18);
    border-color: var(--green);
}

.filter-actions[b-1urewv9001] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-button[b-1urewv9001] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.blog-button.primary[b-1urewv9001] {
    background: var(--green);
    color: #fff;
}

.blog-button.outline[b-1urewv9001] {
    background: #fff;
    color: var(--green);
    border-color: var(--soft);
}

.blog-button:disabled[b-1urewv9001] {
    opacity: .55;
    cursor: default;
}

.blog-button:focus-visible[b-1urewv9001],
.page-number:focus-visible[b-1urewv9001],
.page-direction:focus-visible[b-1urewv9001],
.article-link:focus-visible[b-1urewv9001] {
    outline: 3px solid rgba(58, 125, 68, .3);
    outline-offset: 3px;
}

.blog-warning[b-1urewv9001] {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff7e6;
    color: #875700;
    font-size: 13px;
    line-height: 2;
}

.text-button[b-1urewv9001] {
    margin-inline-start: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

.results-head[b-1urewv9001] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 30px 0 20px;
}

.results-head > div[b-1urewv9001] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.results-head h2[b-1urewv9001] {
    margin: 0;
    color: var(--text);
    font-size: 21px;
    font-weight: 900;
}

.results-head > div > span[b-1urewv9001] {
    padding: 5px 10px;
    border-radius: 999px;
    background: #eaf3ec;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}

.results-note[b-1urewv9001] {
    color: var(--muted);
    font-size: 12px;
}

.blog-grid[b-1urewv9001] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-card[b-1urewv9001] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--soft);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .035);
    transition: transform .2s, box-shadow .2s;
}

.blog-card:hover[b-1urewv9001] {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .07);
}

.article-image[b-1urewv9001] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #edf3ee;
    text-decoration: none;
}

.article-image img[b-1urewv9001] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s;
}

.blog-card:hover .article-image img[b-1urewv9001] {
    transform: scale(1.035);
}

.image-placeholder[b-1urewv9001] {
    font-size: 48px;
}

.article-body[b-1urewv9001] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.article-meta[b-1urewv9001] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
}

.article-body h3[b-1urewv9001] {
    margin: 16px 0 12px;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.9;
}

.article-body h3 a[b-1urewv9001] {
    color: var(--text);
    text-decoration: none;
}

.article-body h3 a:hover[b-1urewv9001] {
    color: var(--green);
}

.article-summary[b-1urewv9001] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 2;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.article-link[b-1urewv9001] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--soft);
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.article-link > span[b-1urewv9001] {
    font-size: 21px;
}

.blog-state[b-1urewv9001] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 54px 24px;
    border: 1px solid var(--soft);
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

.blog-state h2[b-1urewv9001] {
    margin: 0;
    color: var(--text);
    font-size: 20px;
}

.blog-state p[b-1urewv9001] {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}

.blog-state.error[b-1urewv9001] {
    border-color: #fecdca;
}

.empty-icon[b-1urewv9001] {
    font-size: 42px;
}

.loading-spinner[b-1urewv9001] {
    width: 32px;
    height: 32px;
    border: 3px solid #e4eee6;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: blog-spin-b-1urewv9001 .8s linear infinite;
}

.blog-pagination[b-1urewv9001] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.page-numbers[b-1urewv9001] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.page-number[b-1urewv9001],
.page-direction[b-1urewv9001] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--soft);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-sizing: border-box;
}

.page-number[b-1urewv9001] {
    min-width: 42px;
}

.page-number.active[b-1urewv9001] {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}

.page-direction.disabled[b-1urewv9001] {
    opacity: .45;
}

.page-description[b-1urewv9001] {
    width: 100%;
    margin-top: 4px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

@keyframes blog-spin-b-1urewv9001 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1000px) {
    .blog-grid[b-1urewv9001] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .blog-page[b-1urewv9001] {
        padding-bottom: 40px;
    }

    .blog-hero[b-1urewv9001] {
        padding: 32px 0;
    }

    .blog-hero p[b-1urewv9001] {
        font-size: 13px;
    }

    .blog-filter[b-1urewv9001] {
        align-items: stretch;
        flex-direction: column;
        padding: 18px;
    }

    .filter-field[b-1urewv9001] {
        width: 100%;
    }

    .filter-actions > *[b-1urewv9001] {
        flex: 1;
    }

    .results-head[b-1urewv9001] {
        align-items: flex-start;
        flex-direction: column;
    }

    .results-head h2[b-1urewv9001] {
        font-size: 19px;
    }

    .blog-grid[b-1urewv9001] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .article-body[b-1urewv9001] {
        padding: 18px;
    }

    .blog-pagination[b-1urewv9001] {
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card[b-1urewv9001],
    .article-image img[b-1urewv9001] {
        transition: none;
    }

    .loading-spinner[b-1urewv9001] {
        animation: none;
    }
}

.news-badge[b-1urewv9001] {
    padding: 5px 10px;
    border-radius: 999px;
    background: #eaf3ec;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.filter-actions .blog-button[b-1urewv9001] {
    white-space: nowrap;
}
/* _content/PopProject.BlazorSSR/Components/Pages/Login.razor.rz.scp.css */
.auth-page[b-1p4289gy2y] {
    padding: 28px 0 36px;
    background: #f8fafc;
    color: var(--text, #475467);
}

.auth-page[b-1p4289gy2y],
.auth-page *[b-1p4289gy2y] {
    box-sizing: border-box;
}

.auth-page .container[b-1p4289gy2y] {
    width: 100%;
}

.auth-card[b-1p4289gy2y] {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(16, 24, 40, .04);
}

.auth-head[b-1p4289gy2y] {
    margin-bottom: 24px;
    text-align: center;
}

.auth-head > span[b-1p4289gy2y] {
    display: block;
    margin-bottom: 8px;
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
}

.auth-head h1[b-1p4289gy2y] {
    margin: 0;
    color: var(--text, #475467);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.6;
}

.auth-head p[b-1p4289gy2y] {
    margin: 9px 0 0;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 1.9;
}

.auth-form[b-1p4289gy2y] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-group[b-1p4289gy2y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.form-group label[b-1p4289gy2y] {
    color: var(--text, #475467);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.form-group > input[b-1p4289gy2y] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 17px;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.form-group > input[type="tel"][b-1p4289gy2y] {
    direction: ltr;
    text-align: left;
}

.form-group > input[b-1p4289gy2y]::placeholder {
    color: var(--muted, #667085);
    font-size: 15px;
}

.form-group > input:focus[b-1p4289gy2y] {
    border-color: var(--green, #3a7d44);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .08);
}

.password-label[b-1p4289gy2y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px 12px;
}

.password-label a[b-1p4289gy2y] {
    color: var(--green, #3a7d44);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.8;
}

.login-button[b-1p4289gy2y] {
    width: 100%;
    min-height: 49px;
    margin-top: 2px;
    padding: 10px 16px;
    border: 0;
    border-radius: 11px;
    background: var(--green, #3a7d44);
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.login-button:hover:not(:disabled)[b-1p4289gy2y] {
    filter: brightness(.96);
}

.login-button:disabled[b-1p4289gy2y] {
    opacity: .6;
    cursor: not-allowed;
}

.auth-register[b-1p4289gy2y] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid var(--soft, #e4e7ec);
    font-size: 16px;
    line-height: 1.9;
}

.auth-register span[b-1p4289gy2y] {
    color: var(--muted, #667085);
}

.auth-register a[b-1p4289gy2y] {
    color: var(--green, #3a7d44);
    font-weight: 800;
    text-decoration: none;
}

.auth-register a:hover[b-1p4289gy2y],
.password-label a:hover[b-1p4289gy2y] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-error[b-1p4289gy2y] {
    padding: 12px 14px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 15px;
    line-height: 1.9;
}

button:focus-visible[b-1p4289gy2y],
a:focus-visible[b-1p4289gy2y] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .auth-page[b-1p4289gy2y] {
        padding: 20px 0 28px;
    }

    .auth-card[b-1p4289gy2y] {
        padding: 23px 20px;
        border-radius: 17px;
    }

    .auth-head h1[b-1p4289gy2y] {
        font-size: 25px;
    }
}

.auth-info[b-1p4289gy2y] {
    padding: 13px 15px;
    border: 1px solid #d5e7d9;
    border-radius: 12px;
    background: #f0f7f2;
    color: #285f33;
    font-size: 15px;
    line-height: 1.9;
}

.otp-mobile[b-1p4289gy2y] {
    display: inline-block;
    color: var(--text, #475467);
    font-weight: 800;
    white-space: nowrap;
}

.otp-timer[b-1p4289gy2y] {
    color: var(--muted, #667085);
    font-size: 15px;
    text-align: center;
    line-height: 1.9;
}

.otp-timer bdi[b-1p4289gy2y] {
    font-variant-numeric: tabular-nums;
}

.otp-actions[b-1p4289gy2y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.otp-resend[b-1p4289gy2y],
.auth-back-button[b-1p4289gy2y] {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--green, #3a7d44);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.8;
    cursor: pointer;
}

.auth-back-button[b-1p4289gy2y] {
    color: var(--muted, #667085);
    font-weight: 600;
}

.otp-resend:hover:not(:disabled)[b-1p4289gy2y],
.auth-back-button:hover:not(:disabled)[b-1p4289gy2y] {
    background: #f0f7f2;
}

.login-button:disabled[b-1p4289gy2y],
.otp-resend:disabled[b-1p4289gy2y],
.auth-back-button:disabled[b-1p4289gy2y] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}
/* _content/PopProject.BlazorSSR/Components/Pages/OnlineVisitBooking.razor.rz.scp.css */
.booking-page[b-qlgt49ukjy] {
    padding: 40px 16px 64px;
    background: #f8fafb;
    color: #475467;
}

.booking-container[b-qlgt49ukjy] {
    max-width: 1180px;
    margin: 0 auto;
}

.back-link[b-qlgt49ukjy] {
    display: inline-block;
    margin-bottom: 24px;
    color: #3a7d44;
    text-decoration: none;
    font-weight: 800;
}

.page-head[b-qlgt49ukjy] {
    margin-bottom: 24px;
}

.page-head > span[b-qlgt49ukjy] {
    color: #3a7d44;
    font-weight: 800;
}

.page-head h1[b-qlgt49ukjy] {
    margin: 8px 0;
    font-size: 28px;
    font-weight: 900;
}

.page-head p[b-qlgt49ukjy],
.card-head p[b-qlgt49ukjy],
.doctor-summary p[b-qlgt49ukjy] {
    margin: 6px 0 0;
    color: #667085;
    line-height: 1.9;
}

.doctor-summary[b-qlgt49ukjy],
.booking-card[b-qlgt49ukjy] {
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background: #fff;
}

.doctor-summary[b-qlgt49ukjy],
.card-head[b-qlgt49ukjy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.doctor-summary h2[b-qlgt49ukjy] {
    margin: 7px 0;
    font-size: 23px;
}

.eyebrow[b-qlgt49ukjy],
.price-box > span[b-qlgt49ukjy] {
    color: #667085;
    font-size: 14px;
}

.price-box[b-qlgt49ukjy] {
    padding: 18px 24px;
    border-radius: 14px;
    background: #f0f7f1;
}

.price-box strong[b-qlgt49ukjy] {
    display: block;
    margin-top: 8px;
    color: #3a7d44;
    font-size: 21px;
}

.card-head[b-qlgt49ukjy] {
    margin-bottom: 20px;
}

.card-head h2[b-qlgt49ukjy] {
    margin: 0;
    font-size: 20px;
}

.week-actions[b-qlgt49ukjy] {
    display: flex;
    gap: 8px;
}

.booking-page button[b-qlgt49ukjy] {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    color: #475467;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.booking-page button:disabled[b-qlgt49ukjy] {
    opacity: .55;
    cursor: default;
}

.booking-page button:focus-visible[b-qlgt49ukjy] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

.days-grid[b-qlgt49ukjy] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.booking-page .day[b-qlgt49ukjy] {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.day strong[b-qlgt49ukjy] {
    font-size: 14px;
}

.day small[b-qlgt49ukjy] {
    font-size: 12px;
}

.booking-page .day.active[b-qlgt49ukjy] {
    border-color: #3a7d44;
    background: #f0f7f1;
    color: #3a7d44;
}

.booking-note[b-qlgt49ukjy] {
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid #fedf89;
    border-radius: 14px;
    background: #fffcf5;
    color: #875408;
    line-height: 2;
}

.slots-grid[b-qlgt49ukjy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.slot-card[b-qlgt49ukjy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fcfdfc;
}

.slot-label[b-qlgt49ukjy],
.slot-card > small[b-qlgt49ukjy] {
    color: #667085;
    font-size: 14px;
}

.slot-time[b-qlgt49ukjy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 23px;
}

.slot-time > span[b-qlgt49ukjy] {
    color: #98a2b3;
    font-size: 14px;
}

.booking-page .add-button[b-qlgt49ukjy] {
    width: 100%;
    border-color: #3a7d44;
    background: #3a7d44;
    color: #fff;
    font-size: 14px;
}

.state[b-qlgt49ukjy] {
    padding: 36px 16px;
    border-radius: 12px;
    background: #f9fafb;
    color: #667085;
    text-align: center;
    line-height: 2;
}

.message[b-qlgt49ukjy] {
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid;
    border-radius: 12px;
    line-height: 1.9;
}

.error[b-qlgt49ukjy] {
    border-color: #fecdca;
    background: #fff1f1;
    color: #b42318;
}

.success[b-qlgt49ukjy] {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #027a48;
}

@media (max-width: 900px) {
    .slots-grid[b-qlgt49ukjy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .days-grid[b-qlgt49ukjy] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .booking-page[b-qlgt49ukjy] {
        padding: 24px 12px 40px;
    }

    .doctor-summary[b-qlgt49ukjy],
    .card-head[b-qlgt49ukjy] {
        flex-direction: column;
        align-items: stretch;
    }

    .doctor-summary[b-qlgt49ukjy],
    .booking-card[b-qlgt49ukjy] {
        padding: 18px;
    }

    .page-head h1[b-qlgt49ukjy] {
        font-size: 23px;
    }

    .days-grid[b-qlgt49ukjy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .slots-grid[b-qlgt49ukjy] {
        grid-template-columns: 1fr;
    }
}

.booking-doctor-hero[b-qlgt49ukjy] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 48px;
    padding: 42px;
    margin-bottom: 24px;
    border: 1px solid #e4ece8;
    border-radius: 26px;
    background:
        radial-gradient(circle at 12px 12px,
            rgba(58, 125, 68, .08) 4px, transparent 5px)
            0 0 / 90px 90px,
        linear-gradient(120deg, #f0f8f2, #f3f7fd);
}

.booking-doctor-hero[b-qlgt49ukjy]::before,
.booking-doctor-hero[b-qlgt49ukjy]::after {
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.booking-doctor-hero[b-qlgt49ukjy]::before {
    top: -150px;
    right: -90px;
    background: rgba(58, 125, 68, .07);
}

.booking-doctor-hero[b-qlgt49ukjy]::after {
    bottom: -180px;
    left: -80px;
    background: rgba(43, 92, 161, .07);
}

.booking-doctor-content[b-qlgt49ukjy] {
    min-width: 0;
}

.booking-doctor-badge[b-qlgt49ukjy] {
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    border: 1px solid #d6e6da;
    border-radius: 999px;
    background: #fff;
    color: #3a7d44;
    font-size: 15px;
    font-weight: 800;
}

.booking-doctor-content h2[b-qlgt49ukjy] {
    margin: 22px 0 12px;
    color: #475467;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.7;
}

.booking-doctor-specialty[b-qlgt49ukjy] {
    margin: 0;
    color: #285eaa;
    font-size: 22px;
    font-weight: 800;
}

.booking-doctor-experience[b-qlgt49ukjy] {
    display: inline-block;
    margin-top: 14px;
    color: #3a7d44;
    font-size: 15px;
    font-weight: 700;
}

.booking-doctor-description[b-qlgt49ukjy] {
    max-width: 520px;
    margin: 20px 0 26px;
    color: #667085;
    font-size: 17px;
    line-height: 2;
}

.booking-doctor-price[b-qlgt49ukjy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid #e0e8ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .04);
}

.booking-doctor-price > div > span[b-qlgt49ukjy] {
    color: #667085;
    font-size: 14px;
}

.booking-doctor-price strong[b-qlgt49ukjy] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 8px;
    color: #3a7d44;
    font-size: 27px;
    font-weight: 900;
}

.booking-doctor-price strong small[b-qlgt49ukjy] {
    font-size: 15px;
}

.booking-service-label[b-qlgt49ukjy] {
    padding: 9px 13px;
    border-radius: 999px;
    background: #eef6f0;
    color: #3a7d44;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.booking-doctor-visual[b-qlgt49ukjy] {
    width: 100%;
    max-width: 360px;
    justify-self: center;
}

.booking-doctor-photo[b-qlgt49ukjy] {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 9px solid #fff;
    border-radius: 36px 95px 36px 95px;
    background: #eaf0f3;
    box-shadow: 0 22px 50px rgba(33, 63, 54, .13);
}

.booking-doctor-photo img[b-qlgt49ukjy] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.booking-doctor-placeholder[b-qlgt49ukjy] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #81968a;
}

.booking-doctor-placeholder svg[b-qlgt49ukjy] {
    width: 48%;
    height: 48%;
}

@media (max-width: 800px) {
    .booking-doctor-hero[b-qlgt49ukjy] {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px;
    }

    .booking-doctor-visual[b-qlgt49ukjy] {
        grid-row: 1;
        max-width: 260px;
    }

    .booking-doctor-content[b-qlgt49ukjy] {
        text-align: center;
    }

    .booking-doctor-description[b-qlgt49ukjy] {
        margin-right: auto;
        margin-left: auto;
    }

    .booking-doctor-price[b-qlgt49ukjy] {
        text-align: right;
    }
}

@media (max-width: 480px) {
    .booking-doctor-hero[b-qlgt49ukjy] {
        padding: 22px 16px;
    }

    .booking-doctor-price[b-qlgt49ukjy] {
        flex-direction: column;
        align-items: stretch;
    }

    .booking-service-label[b-qlgt49ukjy] {
        align-self: flex-start;
    }
}
/* _content/PopProject.BlazorSSR/Components/Pages/Partnership.razor.rz.scp.css */
.partnership-page[b-jon42x6equ],
.partnership-page *[b-jon42x6equ],
.partnership-page *[b-jon42x6equ]::before,
.partnership-page *[b-jon42x6equ]::after {
    box-sizing: border-box;
}

.partnership-page[b-jon42x6equ] {
    padding: 76px 0 90px;
    background:
        radial-gradient(circle at 90% 10%, rgba(58, 125, 68, .06), transparent 35%),
        linear-gradient(145deg, #fff, #f5f9fc);
    color: #465164;
}

.partnership-heading[b-jon42x6equ] {
    max-width: 850px;
    margin: 0 auto 44px;
    text-align: center;
}

.heading-label[b-jon42x6equ] {
    display: inline-flex;
    padding: 8px 20px;
    border: 1px solid rgba(58, 125, 68, .15);
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font-size: 17px;
    font-weight: 900;
}

.partnership-heading h1[b-jon42x6equ] {
    margin: 20px 0 14px;
    font-size: clamp(30px, 4vw, 45px);
    font-weight: 900;
    line-height: 1.7;
}

.partnership-heading p[b-jon42x6equ] {
    margin: 0;
    color: #667085;
    font-size: 19px;
    line-height: 2.1;
}

.partnership-layout[b-jon42x6equ] {
    display: grid;
    grid-template-columns: minmax(260px, .75fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 26px;
}

.information-card[b-jon42x6equ] {
    padding: 32px;
    border-radius: 26px;
    background: linear-gradient(145deg, #123d59, #174d42);
    color: #fff;
}

.information-label[b-jon42x6equ] {
    color: #a9dac1;
    font-size: 16px;
    font-weight: 800;
}

.information-card h2[b-jon42x6equ] {
    margin: 12px 0 30px;
    font-size: 26px;
    line-height: 1.8;
}

.process-item[b-jon42x6equ] {
    display: flex;
    gap: 14px;
    margin-bottom: 25px;
}

.process-item > span[b-jon42x6equ] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    font-size: 19px;
    font-weight: 900;
}

.process-item strong[b-jon42x6equ] {
    font-size: 18px;
}

.process-item p[b-jon42x6equ],
.information-note[b-jon42x6equ] {
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    line-height: 2;
}

.process-item p[b-jon42x6equ] {
    margin: 6px 0 0;
}

.information-note[b-jon42x6equ] {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.request-card[b-jon42x6equ] {
    min-width: 0;
    padding: 34px;
    border: 1px solid #e1e8ee;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(31, 41, 55, .05);
}

.form-heading[b-jon42x6equ] {
    margin-bottom: 28px;
}

.form-heading > span[b-jon42x6equ] {
    color: var(--green);
    font-size: 16px;
    font-weight: 800;
}

.form-heading h2[b-jon42x6equ] {
    margin: 10px 0;
    font-size: 27px;
    font-weight: 900;
}

.form-heading p[b-jon42x6equ] {
    margin: 0;
    color: #667085;
    font-size: 16px;
}

.form-fields[b-jon42x6equ] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.fields-grid[b-jon42x6equ] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.full[b-jon42x6equ] {
    grid-column: 1 / -1;
}

.field-group[b-jon42x6equ] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.field-group label[b-jon42x6equ],
.otp-box > label[b-jon42x6equ] {
    color: #344054;
    font-size: 17px;
    font-weight: 800;
}

.field-group input[b-jon42x6equ],
.field-group select[b-jon42x6equ],
.field-group textarea[b-jon42x6equ],
.otp-box > input[b-jon42x6equ] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dbe5ec;
    border-radius: 12px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.9;
    outline: none;
}

.field-group input[b-jon42x6equ],
.field-group select[b-jon42x6equ] {
    min-height: 50px;
}

.field-group textarea[b-jon42x6equ] {
    resize: vertical;
}

.field-group input:focus[b-jon42x6equ],
.field-group select:focus[b-jon42x6equ],
.field-group textarea:focus[b-jon42x6equ],
.otp-box > input:focus[b-jon42x6equ] {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .09);
}

.terms-box[b-jon42x6equ] {
    padding: 18px;
    border: 1px solid #e0eae4;
    border-radius: 14px;
    background: #f7faf8;
}

.terms-box p[b-jon42x6equ] {
    margin: 0 0 14px;
    color: #667085;
    font-size: 15px;
    line-height: 2;
}

.terms-box label[b-jon42x6equ] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #344054;
    font-size: 16px;
    line-height: 2;
    cursor: pointer;
}

.terms-box input[b-jon42x6equ] {
    width: 18px;
    height: 18px;
    margin-top: 7px;
    flex: 0 0 18px;
    accent-color: var(--green);
}

.form-message[b-jon42x6equ] {
    margin-top: 20px;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.9;
}

.form-message.error[b-jon42x6equ] {
    background: #fff1f1;
    color: #b42318;
}

.form-message.success[b-jon42x6equ] {
    background: #ecfdf3;
    color: #027a48;
}

.otp-box[b-jon42x6equ] {
    margin-top: 24px;
    padding: 22px;
    border: 1px solid #dbe9df;
    border-radius: 16px;
    background: #f8fbf9;
}

.otp-box > input[b-jon42x6equ] {
    display: block;
    max-width: 280px;
    margin-top: 12px;
    text-align: center;
    font-size: 25px;
    letter-spacing: 8px;
}

.otp-actions[b-jon42x6equ] {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.primary-button[b-jon42x6equ],
.secondary-button[b-jon42x6equ] {
    min-height: 46px;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.primary-button[b-jon42x6equ] {
    border: 0;
    background: var(--green);
    color: #fff;
}

.secondary-button[b-jon42x6equ] {
    border: 1px solid #dbe5ec;
    background: #fff;
    color: #344054;
}

.submit-button[b-jon42x6equ] {
    width: 100%;
    margin-top: 24px;
}

button:disabled[b-jon42x6equ] {
    opacity: .6;
    cursor: not-allowed;
}

.success-state[b-jon42x6equ] {
    padding: 35px 0;
    text-align: center;
}

.success-icon[b-jon42x6equ] {
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ecfdf3;
    color: #027a48;
    font-size: 36px;
}

.success-state h2[b-jon42x6equ] {
    font-size: 28px;
}

.success-state p[b-jon42x6equ] {
    color: #667085;
    font-size: 18px;
    line-height: 2;
}

.success-state strong[b-jon42x6equ] {
    display: block;
    margin: 20px 0;
    font-size: 18px;
}

@media (max-width: 950px) {
    .partnership-layout[b-jon42x6equ] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .partnership-page[b-jon42x6equ] {
        padding: 55px 0 65px;
    }

    .partnership-heading p[b-jon42x6equ] {
        font-size: 17px;
    }

    .request-card[b-jon42x6equ],
    .information-card[b-jon42x6equ] {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .fields-grid[b-jon42x6equ] {
        grid-template-columns: 1fr;
    }

    .full[b-jon42x6equ] {
        grid-column: auto;
    }
}

.otp-box[b-jon42x6equ] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 20px;
    border: 1px solid rgba(15, 107, 79, .24);
    border-radius: 22px;
    background: linear-gradient(135deg, #fff, #f5fbf8);
    text-align: center;
}

.otp-box > label[b-jon42x6equ] {
    margin: 0;
    color: #072d4d;
    font-size: 17px;
    font-weight: 800;
}

.otp-box > input[b-jon42x6equ] {
    box-sizing: border-box;
    width: min(320px, 100%);
    max-width: 320px;
    height: 62px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #dbe5ec;
    border-radius: 16px;
    background: #fff;
    color: #183044;
    direction: ltr;
    text-align: center;
    font-size: 24px;
    letter-spacing: 10px;
    text-indent: 10px;
    font-variant-numeric: tabular-nums;
}

.otp-box > input:focus[b-jon42x6equ] {
    border-color: #0f6b4f;
    box-shadow: 0 0 0 4px rgba(15, 107, 79, .08);
}

.otp-actions[b-jon42x6equ] {
    justify-content: center;
    margin-top: 0;
}

.form-message[b-jon42x6equ] {
    text-align: center;
}
/* _content/PopProject.BlazorSSR/Components/Pages/PetCategoryDetails.razor.rz.scp.css */
.animal-state-section[b-qfxl5y2xoj] {
    min-height: 65vh;
    padding: 80px 0;

    display: flex;
    align-items: center;
}


.animal-state-card[b-qfxl5y2xoj] {
    max-width: 620px;
    min-height: 260px;

    margin: 0 auto;
    padding: 42px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    gap: 14px;

    border: 1px solid var(--soft);
    border-radius: 28px;

    background: #fff;

    text-align: center;
}


.animal-state-card.error[b-qfxl5y2xoj] {
    border-color: #fecdca;

    background: #fffafa;
}


.animal-state-card h1[b-qfxl5y2xoj] {
    margin: 0;

    color: var(--text);

    font-size: 28px;
    font-weight: 900;
}


.animal-state-card p[b-qfxl5y2xoj] {
    margin: 0 0 12px;

    color: var(--muted);

    line-height: 2;
}


.state-icon[b-qfxl5y2xoj] {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;

    background:
        rgba(58, 125, 68, .1);

    color: var(--green);

    font-size: 30px;
    font-weight: 900;
}


.state-button[b-qfxl5y2xoj] {
    min-height: 48px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;
    color: var(--text);

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease;
}


.state-button:hover[b-qfxl5y2xoj] {
    transform: translateY(-2px);

    border-color: var(--green);

    color: var(--green);
}


.loading-spinner[b-qfxl5y2xoj] {
    width: 42px;
    height: 42px;

    border:
        4px solid rgba(58, 125, 68, .16);

    border-top-color: var(--green);
    border-radius: 50%;

    animation:
        spin-b-qfxl5y2xoj .8s linear infinite;
}


@keyframes spin-b-qfxl5y2xoj {

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 620px) {

    .animal-state-section[b-qfxl5y2xoj] {
        padding: 45px 0;
    }


    .animal-state-card[b-qfxl5y2xoj] {
        padding: 28px 20px;

        border-radius: 20px;
    }


    .animal-state-card h1[b-qfxl5y2xoj] {
        font-size: 24px;
    }


    .state-button[b-qfxl5y2xoj] {
        width: 100%;
    }
}
/* _content/PopProject.BlazorSSR/Components/Pages/Register.razor.rz.scp.css */
.auth-page[b-osw3fjdmg3] {
    padding: 28px 0 36px;
    background: #f8fafc;
    color: var(--text, #475467);
}

.auth-page[b-osw3fjdmg3],
.auth-page *[b-osw3fjdmg3] {
    box-sizing: border-box;
}

.auth-page .container[b-osw3fjdmg3] {
    width: 100%;
}

.auth-card[b-osw3fjdmg3] {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(16, 24, 40, .04);
}

.auth-card.otp-card[b-osw3fjdmg3] {
    max-width: 470px;
}

.auth-head[b-osw3fjdmg3] {
    margin-bottom: 24px;
    text-align: center;
}

.auth-head > span[b-osw3fjdmg3] {
    display: block;
    margin-bottom: 8px;
    color: var(--green, #3a7d44);
    font-size: 16px;
    font-weight: 800;
}

.auth-head h1[b-osw3fjdmg3] {
    margin: 0;
    color: var(--text, #475467);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.6;
}

.auth-head p[b-osw3fjdmg3] {
    margin: 9px 0 0;
    color: var(--muted, #667085);
    font-size: 16px;
    line-height: 1.9;
}

.auth-form[b-osw3fjdmg3] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-row[b-osw3fjdmg3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-group[b-osw3fjdmg3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.form-group label[b-osw3fjdmg3] {
    color: var(--text, #475467);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.8;
}

.form-group > input[b-osw3fjdmg3] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 17px;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.form-group > input[type="tel"][b-osw3fjdmg3],
.form-group > input[type="email"][b-osw3fjdmg3] {
    direction: ltr;
    text-align: left;
}

.form-group > input[b-osw3fjdmg3]::placeholder {
    color: var(--muted, #667085);
    font-size: 15px;
}

.form-group > input:focus[b-osw3fjdmg3] {
    border-color: var(--green, #3a7d44);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .08);
}

.register-button[b-osw3fjdmg3] {
    width: 100%;
    min-height: 49px;
    margin-top: 2px;
    padding: 10px 16px;
    border: 0;
    border-radius: 11px;
    background: var(--green, #3a7d44);
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.register-button:hover:not(:disabled)[b-osw3fjdmg3] {
    filter: brightness(.96);
}

.register-button:disabled[b-osw3fjdmg3],
.otp-resend:disabled[b-osw3fjdmg3],
.auth-back-button:disabled[b-osw3fjdmg3] {
    opacity: .6;
    cursor: not-allowed;
}

.auth-login[b-osw3fjdmg3] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
    padding-top: 19px;
    border-top: 1px solid var(--soft, #e4e7ec);
    font-size: 16px;
    line-height: 1.9;
}

.auth-login span[b-osw3fjdmg3] {
    color: var(--muted, #667085);
}

.auth-login a[b-osw3fjdmg3] {
    color: var(--green, #3a7d44);
    font-weight: 800;
    text-decoration: none;
}

.auth-login a:hover[b-osw3fjdmg3] {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.auth-error[b-osw3fjdmg3] {
    padding: 12px 14px;
    border: 1px solid #fecdca;
    border-radius: 11px;
    background: #fff2f2;
    color: #b42318;
    font-size: 15px;
    line-height: 1.9;
}

.otp-timer[b-osw3fjdmg3] {
    color: var(--muted, #667085);
    font-size: 16px;
    text-align: center;
    line-height: 1.9;
}

.otp-resend[b-osw3fjdmg3],
.auth-back-button[b-osw3fjdmg3] {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--green, #3a7d44);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.otp-resend:hover:not(:disabled)[b-osw3fjdmg3],
.auth-back-button:hover:not(:disabled)[b-osw3fjdmg3] {
    background: #f1f7f2;
}

button:focus-visible[b-osw3fjdmg3],
a:focus-visible[b-osw3fjdmg3] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .auth-page[b-osw3fjdmg3] {
        padding: 20px 0 28px;
    }

    .auth-card[b-osw3fjdmg3] {
        padding: 23px 20px;
        border-radius: 17px;
    }

    .auth-head h1[b-osw3fjdmg3] {
        font-size: 25px;
    }

    .form-row[b-osw3fjdmg3] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Pages/Survey.razor.rz.scp.css */
.survey-page[b-bew56j9eih] {
    --navy: #0b3d66;
    --navy-deep: #072d4d;
    --blue: #1d5b8f;
    --green: #0f6b4f;
    --green-dark: #0a513c;
    --green-soft: #eaf5f1;
    --blue-soft: #edf5fb;
    --gold: #a7792f;
    --text: #183044;
    --muted: #6a7b89;
    --border: #dbe5ec;
    --surface: #fff;
    --background: #f7fafc;
    --danger: #b42318;
    --shadow: 0 20px 60px rgba(18, 53, 78, .1);
    --shadow-soft: 0 12px 32px rgba(18, 53, 78, .07);
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;

    color: var(--text);
    background: var(--background);
    font-family: inherit;
    line-height: 1.9;
}


button[b-bew56j9eih],
input[b-bew56j9eih],
textarea[b-bew56j9eih] {
    font: inherit;
}

button[b-bew56j9eih],
input[b-bew56j9eih],
textarea[b-bew56j9eih],
select[b-bew56j9eih] {
    font: inherit;
}

button[b-bew56j9eih] {
    border: 0;
}

img[b-bew56j9eih] {
    max-width: 100%;
    display: block;
}

a[b-bew56j9eih] {
    color: inherit;
    text-decoration: none;
}

.landing-page[b-bew56j9eih] {
    overflow: hidden;
}

.section-container[b-bew56j9eih],
.hero-container[b-bew56j9eih] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.hero-section[b-bew56j9eih] {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 85% 20%, rgba(15, 107, 79, 0.11), transparent 28%),
        radial-gradient(circle at 10% 80%, rgba(29, 91, 143, 0.13), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fbfd 60%, #eef5f8 100%);
    isolation: isolate;
}

.hero-section[b-bew56j9eih]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(11, 61, 102, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 61, 102, 0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
    pointer-events: none;
}

.hero-bg-shape[b-bew56j9eih] {
    position: absolute;
    border-radius: 999px;
    filter: blur(2px);
    z-index: -1;
}

.hero-bg-shape-1[b-bew56j9eih] {
    width: 440px;
    height: 440px;
    background: rgba(15, 107, 79, 0.06);
    top: -180px;
    left: -110px;
}

.hero-bg-shape-2[b-bew56j9eih] {
    width: 520px;
    height: 520px;
    background: rgba(29, 91, 143, 0.06);
    right: -220px;
    bottom: -240px;
}

.hero-container[b-bew56j9eih] {
    text-align: center;
    padding: 90px 0 120px;
}

.hero-logo[b-bew56j9eih] {
    width: min(430px, 72vw);
    margin: 0 auto 28px;
}

.hero-logo img[b-bew56j9eih] {
    width: 100%;
    object-fit: contain;
}

.hero-badge[b-bew56j9eih] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 107, 79, 0.08);
    border: 1px solid rgba(15, 107, 79, 0.14);
    color: var(--green-dark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.pulse-dot[b-bew56j9eih] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 rgba(15, 107, 79, 0.3);
    animation: pulse-b-bew56j9eih 2s infinite;
}

.hero-title[b-bew56j9eih] {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 1.35;
    color: var(--navy-deep);
    letter-spacing: -1px;
}

.hero-title span[b-bew56j9eih] {
    display: block;
    margin-top: 6px;
    color: var(--green);
}

.hero-description[b-bew56j9eih] {
    width: min(760px, 100%);
    margin: 24px auto 0;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.hero-actions[b-bew56j9eih] {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.primary-action[b-bew56j9eih],
.secondary-action[b-bew56j9eih] {
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.primary-action[b-bew56j9eih] {
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 107, 79, .2);
}

.secondary-action[b-bew56j9eih] {
    background: rgba(255,255,255,.78);
    border: 1px solid var(--border);
    color: var(--navy);
}

.primary-action:hover[b-bew56j9eih],
.secondary-action:hover[b-bew56j9eih] {
    transform: translateY(-2px);
}

.action-arrow[b-bew56j9eih] {
    font-size: 1.15rem;
}

.hero-services[b-bew56j9eih] {
    width: min(840px, 100%);
    margin: 42px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.mini-service[b-bew56j9eih] {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(219,229,236,.9);
    border-radius: 16px;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-soft);
}

.mini-service-icon[b-bew56j9eih] {
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 800;
}

.mini-service span:last-child[b-bew56j9eih] {
    font-size: .9rem;
    font-weight: 700;
}

.scroll-indicator[b-bew56j9eih] {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: .75rem;
}

.scroll-line[b-bew56j9eih] {
    width: 1px;
    height: 34px;
    background: linear-gradient(to bottom, var(--green), transparent);
    animation: scrollLine-b-bew56j9eih 1.8s ease-in-out infinite;
}


/* =========================================================
   GENERIC HEADINGS
========================================================= */

.section-heading[b-bew56j9eih] {
    margin-bottom: 46px;
}

.section-heading.centered[b-bew56j9eih] {
    text-align: center;
    width: min(720px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

.section-eyebrow[b-bew56j9eih] {
    display: inline-block;
    font-size: .88rem;
    color: var(--green);
    font-weight: 800;
    margin-bottom: 10px;
}

.section-heading h2[b-bew56j9eih],
.survey-intro-card h2[b-bew56j9eih] {
    margin: 0;
    color: var(--navy-deep);
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.5;
}

.section-heading h2 span[b-bew56j9eih] {
    color: var(--green);
}

.section-heading p[b-bew56j9eih] {
    color: var(--muted);
    margin: 12px 0 0;
}


/* =========================================================
   INTRO
========================================================= */

.intro-section[b-bew56j9eih] {
    padding: 110px 0;
    background: #fff;
}

.intro-content[b-bew56j9eih] {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 44px;
    align-items: start;
}

.intro-copy[b-bew56j9eih] {
    padding-left: 24px;
}

.intro-copy p[b-bew56j9eih] {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 1.02rem;
}

.intro-copy .intro-lead[b-bew56j9eih] {
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 700;
}

.intro-visual[b-bew56j9eih] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.visual-card[b-bew56j9eih] {
    min-height: 180px;
    border-radius: var(--radius-md);
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform .25s ease;
}

.visual-card:hover[b-bew56j9eih] {
    transform: translateY(-5px);
}

.visual-card-main[b-bew56j9eih] {
    grid-row: span 2;
    background:
        linear-gradient(180deg, rgba(15,107,79,.04), rgba(15,107,79,.09));
}

.visual-number[b-bew56j9eih] {
    font-size: .82rem;
    color: var(--green);
    font-weight: 800;
    margin-bottom: auto;
}

.visual-card strong[b-bew56j9eih] {
    color: var(--navy-deep);
    font-size: 1.1rem;
}

.visual-card p[b-bew56j9eih] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: .9rem;
}


/* =========================================================
   SERVICES
========================================================= */

.services-section[b-bew56j9eih] {
    padding: 110px 0;
    background:
        linear-gradient(180deg, #f7fafc 0%, #eef5f8 100%);
}

.services-grid[b-bew56j9eih] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.service-card[b-bew56j9eih] {
    position: relative;
    min-height: 270px;
    padding: 26px 22px;
    border-radius: var(--radius-md);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.service-card:hover[b-bew56j9eih] {
    transform: translateY(-7px);
    box-shadow: var(--shadow);
    border-color: rgba(15,107,79,.22);
}

.service-card[b-bew56j9eih]::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(15,107,79,.05);
    left: -45px;
    bottom: -48px;
}

.service-index[b-bew56j9eih] {
    font-size: .75rem;
    color: var(--muted);
    font-weight: 800;
}

.service-symbol[b-bew56j9eih] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green);
    font-weight: 900;
    margin: 28px 0 22px;
    font-size: 1.2rem;
}

.service-card h3[b-bew56j9eih] {
    margin: 0;
    color: var(--navy-deep);
    font-size: 1.05rem;
}

.service-card p[b-bew56j9eih] {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .92rem;
}


/* =========================================================
   MISSION
========================================================= */

.mission-section[b-bew56j9eih] {
    padding: 90px 0;
    background: #fff;
}

.mission-card[b-bew56j9eih] {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--navy-deep), var(--navy));
    color: #fff;
    border-radius: 32px;
    padding: 58px 64px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(7,45,77,.2);
}

.mission-card[b-bew56j9eih]::before,
.mission-card[b-bew56j9eih]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}

.mission-card[b-bew56j9eih]::before {
    width: 260px;
    height: 260px;
    right: -90px;
    top: -120px;
}

.mission-card[b-bew56j9eih]::after {
    width: 180px;
    height: 180px;
    left: -70px;
    bottom: -80px;
}

.mission-mark[b-bew56j9eih] {
    font-size: 4rem;
    line-height: 1;
    color: rgba(255,255,255,.23);
}

.mission-card p[b-bew56j9eih] {
    width: min(760px, 100%);
    margin: 0 auto 16px;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    line-height: 1.9;
}

.mission-card strong[b-bew56j9eih] {
    color: #bfe7d8;
}


/* =========================================================
   SURVEY INTRO
========================================================= */

.survey-intro-section[b-bew56j9eih] {
    padding: 110px 0 38px;
    background: #f7fafc;
}

.survey-intro-card[b-bew56j9eih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    padding: 36px 40px;
    box-shadow: var(--shadow-soft);
}

.survey-intro-card > div:first-child[b-bew56j9eih] {
    width: min(760px, 100%);
}

.survey-intro-card p[b-bew56j9eih] {
    margin: 14px 0 0;
    color: var(--muted);
}

.survey-duration[b-bew56j9eih] {
    width: 120px;
    min-width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--green-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--green-dark);
    border: 1px solid rgba(15,107,79,.12);
}

.survey-duration strong[b-bew56j9eih] {
    font-size: 2rem;
    line-height: 1;
}

.survey-duration span[b-bew56j9eih] {
    font-size: .85rem;
}


/* =========================================================
   FORM
========================================================= */

.survey-form-section[b-bew56j9eih] {
    padding: 32px 0 110px;
    background: #f7fafc;
}

.survey-form[b-bew56j9eih] {
    width: min(980px, 100%);
    margin: 0 auto;
}

.form-step[b-bew56j9eih] {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-soft);
}

.form-step-header[b-bew56j9eih] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.step-number[b-bew56j9eih] {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--blue-soft);
    color: var(--navy);
    font-weight: 900;
    flex: 0 0 auto;
}

.step-label[b-bew56j9eih] {
    display: block;
    color: var(--green);
    font-weight: 800;
    font-size: .82rem;
    margin-bottom: 3px;
}

.form-step-header h3[b-bew56j9eih],
.otp-copy h3[b-bew56j9eih] {
    margin: 0;
    color: var(--navy-deep);
    font-size: 1.35rem;
}

.identity-grid[b-bew56j9eih] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.phone-field[b-bew56j9eih] {
    grid-column: span 2;
}

.floating-field[b-bew56j9eih] {
    position: relative;
}

.floating-field input[b-bew56j9eih] {
    width: 100%;
    height: 58px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    padding: 19px 14px 7px;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.floating-field label[b-bew56j9eih] {
    position: absolute;
    right: 14px;
    top: 16px;
    color: var(--muted);
    font-size: .93rem;
    pointer-events: none;
    background: #fff;
    padding: 0 4px;
    transition:
        top .2s ease,
        font-size .2s ease,
        color .2s ease;
}

.floating-field input:focus[b-bew56j9eih],
.floating-field input:not(:placeholder-shown)[b-bew56j9eih] {
    border-color: rgba(15,107,79,.55);
    box-shadow: 0 0 0 4px rgba(15,107,79,.08);
}

.floating-field input:focus + label[b-bew56j9eih],
.floating-field input:not(:placeholder-shown) + label[b-bew56j9eih] {
    top: -9px;
    font-size: .76rem;
    color: var(--green);
}

.compact-question[b-bew56j9eih] {
    margin-top: 30px;
}

.question-heading[b-bew56j9eih] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.question-heading > span[b-bew56j9eih],
.question-label[b-bew56j9eih] {
    color: var(--navy-deep);
    font-weight: 800;
}

.question-heading small[b-bew56j9eih],
.question-label small[b-bew56j9eih] {
    color: var(--muted);
    font-weight: 400;
}

.activity-options[b-bew56j9eih] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.select-card[b-bew56j9eih] {
    min-height: 105px;
    padding: 14px 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    background: #fff;
    position: relative;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.select-card:hover[b-bew56j9eih] {
    transform: translateY(-2px);
    border-color: rgba(15,107,79,.35);
}

.select-card input[b-bew56j9eih] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.select-card:has(input:checked)[b-bew56j9eih] {
    border-color: var(--green);
    background: var(--green-soft);
    box-shadow: 0 0 0 3px rgba(15,107,79,.08);
}

.select-card-icon[b-bew56j9eih] {
    font-size: 1.25rem;
    color: var(--green);
    font-weight: 900;
}

.select-card-text[b-bew56j9eih] {
    font-size: .83rem;
    text-align: center;
    font-weight: 700;
}

.other-activity-field[b-bew56j9eih] {
    margin-top: 14px;
}

textarea[b-bew56j9eih] {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 15px 16px;
    resize: vertical;
    min-height: 110px;
    outline: none;
    background: #fff;
    color: var(--text);
    margin-top: 10px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

textarea:focus[b-bew56j9eih] {
    border-color: rgba(15,107,79,.55);
    box-shadow: 0 0 0 4px rgba(15,107,79,.08);
}

.chip-options[b-bew56j9eih] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.choice-chip[b-bew56j9eih] {
    cursor: pointer;
}

.choice-chip input[b-bew56j9eih] {
    position: absolute;
    opacity: 0;
}

.choice-chip span[b-bew56j9eih] {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: .9rem;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.choice-chip input:checked + span[b-bew56j9eih] {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.rating-options[b-bew56j9eih] {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}

.rating-item[b-bew56j9eih] {
    cursor: pointer;
}

.rating-item input[b-bew56j9eih] {
    position: absolute;
    opacity: 0;
}

.rating-circle[b-bew56j9eih] {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-weight: 900;
    background: #fff;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.rating-item:hover .rating-circle[b-bew56j9eih] {
    transform: translateY(-2px);
}

.rating-item input:checked + .rating-circle[b-bew56j9eih] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    transform: scale(1.06);
}

.rating-caption[b-bew56j9eih] {
    width: min(330px, 100%);
    margin: 10px auto 0;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: .78rem;
}

.interest-options[b-bew56j9eih] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.interest-options label[b-bew56j9eih] {
    cursor: pointer;
}

.interest-options input[b-bew56j9eih] {
    position: absolute;
    opacity: 0;
}

.interest-options span[b-bew56j9eih] {
    min-height: 48px;
    border-radius: 13px;
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    font-size: .84rem;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.interest-options input:checked + span[b-bew56j9eih] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.optional-question[b-bew56j9eih] {
    margin-bottom: 0;
}


/* =========================================================
   OTP
========================================================= */

.otp-step[b-bew56j9eih] {
    border-color: rgba(15,107,79,.24);
    background:
        linear-gradient(135deg, #ffffff 0%, #f5fbf8 100%);
}

.otp-content[b-bew56j9eih] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
}

.otp-copy[b-bew56j9eih] {
    max-width: 620px;
}

.otp-copy p[b-bew56j9eih] {
    color: var(--muted);
    margin: 10px 0 0;
}

.send-otp-button[b-bew56j9eih] {
    min-width: 190px;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--green), var(--green-dark));
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 12px 25px rgba(15,107,79,.18);
    transition:
        transform .2s ease,
        opacity .2s ease;
}

.send-otp-button:hover:not(:disabled)[b-bew56j9eih] {
    transform: translateY(-2px);
}

.send-otp-button:disabled[b-bew56j9eih] {
    opacity: .55;
    cursor: not-allowed;
}

.otp-message[b-bew56j9eih] {
    margin: 10px 0 0;
    color: var(--green-dark);
    font-size: .85rem;
}

.otp-code-wrapper[b-bew56j9eih] {
    margin-top: 26px;
}

.otp-code-wrapper label[b-bew56j9eih] {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--navy-deep);
}

.otp-input[b-bew56j9eih] {
    width: min(320px, 100%);
    height: 62px;
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 12px;
    padding-left: 12px;
    outline: none;
    background: #fff;
}

.otp-input:focus[b-bew56j9eih] {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(15,107,79,.08);
}


/* =========================================================
   SUBMIT
========================================================= */

.final-submit[b-bew56j9eih] {
    margin-top: 26px;
    background: var(--navy-deep);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.submit-note[b-bew56j9eih] {
    color: rgba(255,255,255,.72);
    font-size: .9rem;
}

.submit-survey-button[b-bew56j9eih] {
    min-width: 180px;
    min-height: 52px;
    border-radius: 999px;
    background: #fff;
    color: var(--navy-deep);
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 900;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.submit-survey-button:hover[b-bew56j9eih] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
}


/* =========================================================
   VALIDATION
========================================================= */

.validation-summary[b-bew56j9eih],
.field-validation[b-bew56j9eih],
.field-validation-error[b-bew56j9eih] {
    color: var(--danger);
    font-size: .8rem;
}

.field-validation[b-bew56j9eih] {
    display: block;
    margin-top: 5px;
}

.input-validation-error[b-bew56j9eih] {
    border-color: var(--danger) !important;
}


/* =========================================================
   FOOTER
========================================================= */

.landing-footer[b-bew56j9eih] {
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 34px 0;
}

.footer-inner[b-bew56j9eih] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.footer-logo[b-bew56j9eih] {
    width: 120px;
}

.footer-inner p[b-bew56j9eih] {
    margin: 0;
    color: var(--muted);
}

.footer-inner > span[b-bew56j9eih] {
    direction: ltr;
    color: var(--green);
    font-weight: 800;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal-item[b-bew56j9eih] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .75s cubic-bezier(.2,.8,.2,1),
        transform .75s cubic-bezier(.2,.8,.2,1);
}

.reveal-item.is-visible[b-bew56j9eih] {
    opacity: 1;
    transform: translateY(0);
}

.hero-logo[b-bew56j9eih],
.hero-badge[b-bew56j9eih],
.hero-title[b-bew56j9eih],
.hero-description[b-bew56j9eih],
.hero-actions[b-bew56j9eih],
.hero-services[b-bew56j9eih] {
    opacity: 1;
    transform: none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .services-grid[b-bew56j9eih] {
        grid-template-columns: repeat(2, 1fr);
    }

    .activity-options[b-bew56j9eih] {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 820px) {

    .hero-section[b-bew56j9eih] {
        min-height: auto;
    }

    .hero-container[b-bew56j9eih] {
        padding-top: 68px;
    }

    .hero-services[b-bew56j9eih] {
        grid-template-columns: repeat(2, 1fr);
    }

    .intro-content[b-bew56j9eih] {
        grid-template-columns: 1fr;
    }

    .intro-copy[b-bew56j9eih] {
        padding-left: 0;
    }

    .survey-intro-card[b-bew56j9eih] {
        align-items: flex-start;
    }

    .survey-duration[b-bew56j9eih] {
        width: 90px;
        min-width: 90px;
        height: 90px;
    }

    .activity-options[b-bew56j9eih] {
        grid-template-columns: repeat(2, 1fr);
    }

    .otp-content[b-bew56j9eih] {
        flex-direction: column;
        align-items: flex-start;
    }

    .send-otp-button[b-bew56j9eih] {
        min-width: 170px;
    }

}

@media (max-width: 640px) {

    .section-container[b-bew56j9eih],
    .hero-container[b-bew56j9eih] {
        width: min(100% - 24px, 1180px);
    }

    .hero-container[b-bew56j9eih] {
        padding: 54px 0 100px;
    }

    .hero-logo[b-bew56j9eih] {
        width: min(300px, 78vw);
    }

    .hero-title[b-bew56j9eih] {
        font-size: 2.15rem;
    }

    .hero-description[b-bew56j9eih] {
        font-size: .96rem;
    }

    .hero-actions[b-bew56j9eih] {
        flex-direction: column;
        width: 100%;
    }

    .primary-action[b-bew56j9eih],
    .secondary-action[b-bew56j9eih] {
        width: 100%;
    }

    .hero-services[b-bew56j9eih] {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .mini-service[b-bew56j9eih] {
        min-height: 80px;
    }

    .intro-section[b-bew56j9eih],
    .services-section[b-bew56j9eih],
    .mission-section[b-bew56j9eih] {
        padding: 76px 0;
    }

    .intro-visual[b-bew56j9eih] {
        grid-template-columns: 1fr;
    }

    .visual-card-main[b-bew56j9eih] {
        grid-row: auto;
    }

    .services-grid[b-bew56j9eih] {
        grid-template-columns: 1fr;
    }

    .mission-card[b-bew56j9eih] {
        padding: 40px 22px;
        border-radius: 24px;
    }

    .survey-intro-section[b-bew56j9eih] {
        padding-top: 76px;
    }

    .survey-intro-card[b-bew56j9eih] {
        padding: 26px 22px;
        flex-direction: column;
    }

    .survey-duration[b-bew56j9eih] {
        width: 78px;
        min-width: 78px;
        height: 78px;
    }

    .form-step[b-bew56j9eih] {
        padding: 24px 18px;
        border-radius: 22px;
    }

    .form-step-header[b-bew56j9eih] {
        align-items: flex-start;
    }

    .step-number[b-bew56j9eih] {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .identity-grid[b-bew56j9eih] {
        grid-template-columns: 1fr;
    }

    .phone-field[b-bew56j9eih] {
        grid-column: auto;
    }

    .question-heading[b-bew56j9eih] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .activity-options[b-bew56j9eih] {
        grid-template-columns: 1fr 1fr;
    }

    .select-card[b-bew56j9eih] {
        min-height: 94px;
    }

    .rating-options[b-bew56j9eih] {
        gap: 8px;
    }

    .rating-circle[b-bew56j9eih] {
        width: 46px;
        height: 46px;
    }

    .interest-options[b-bew56j9eih] {
        grid-template-columns: repeat(2, 1fr);
    }

    .final-submit[b-bew56j9eih] {
        flex-direction: column;
        align-items: stretch;
    }

    .submit-survey-button[b-bew56j9eih] {
        width: 100%;
    }

    .footer-inner[b-bew56j9eih] {
        flex-direction: column;
        text-align: center;
    }

}

@media (max-width: 390px) {

    .activity-options[b-bew56j9eih] {
        grid-template-columns: 1fr;
    }

    .hero-services[b-bew56j9eih] {
        grid-template-columns: 1fr;
    }

    .rating-circle[b-bew56j9eih] {
        width: 42px;
        height: 42px;
    }

}


/* =========================================================
   KEYFRAMES
========================================================= */


@keyframes pulse-b-bew56j9eih {
    0% {
        box-shadow: 0 0 0 0 rgba(15,107,79,.32);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(15,107,79,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(15,107,79,0);
    }
}

@keyframes scrollLine-b-bew56j9eih {
    0%,
    100% {
        opacity: .25;
        transform: scaleY(.65);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

.success-modal-backdrop[b-bew56j9eih] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(7, 45, 77, .55);
    backdrop-filter: blur(8px);

    display: grid;
    place-items: center;

    padding: 20px;

    animation: modalFadeIn-b-bew56j9eih .25s ease forwards;
}

.success-modal[b-bew56j9eih] {
    width: min(440px, 100%);
    background: #fff;
    border-radius: 28px;
    padding: 40px 30px 30px;
    text-align: center;

    box-shadow: 0 30px 80px rgba(7, 45, 77, .25);

    animation: modalScaleIn-b-bew56j9eih .35s cubic-bezier(.2,.8,.2,1);
}

.success-icon[b-bew56j9eih] {
    width: 76px;
    height: 76px;
    border-radius: 50%;

    display: grid;
    place-items: center;

    margin: 0 auto 22px;

    background: var(--green-soft);
    color: var(--green);

    font-size: 2rem;
    font-weight: 900;
}

.success-modal h2[b-bew56j9eih] {
    margin: 0;
    color: var(--navy-deep);
    font-size: 1.6rem;
}

.success-modal p[b-bew56j9eih] {
    margin: 12px 0 26px;
    color: var(--muted);
}

.success-modal-button[b-bew56j9eih] {
    min-width: 160px;
    min-height: 48px;

    border: 0;
    border-radius: 999px;

    background: linear-gradient(
        135deg,
        var(--green),
        var(--green-dark)
    );

    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.success-modal-backdrop.closing[b-bew56j9eih] {
    animation: modalFadeOut-b-bew56j9eih .25s ease forwards;
}

@keyframes modalFadeIn-b-bew56j9eih {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut-b-bew56j9eih {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalScaleIn-b-bew56j9eih {
    from {
        opacity: 0;
        transform: scale(.92) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* =========================================================
   VETBAN INTRO VIDEO SECTION
========================================================= */

.vetban-video-section[b-bew56j9eih] {
    padding: 105px 0 115px;
    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(15, 107, 79, 0.07),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        );
}

.vetban-video-card[b-bew56j9eih] {
    max-width: 1020px;
    margin: 0 auto;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: 0 25px 70px rgba(7, 45, 77, 0.10);
    overflow: hidden;
}

.vetban-video-top[b-bew56j9eih] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 10px 18px;
}

.vetban-video-label[b-bew56j9eih] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--navy-deep);
    font-weight: 800;
    font-size: 0.92rem;
}

.vetban-video-dot[b-bew56j9eih] {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(15, 107, 79, 0.10);
}

.vetban-video-tag[b-bew56j9eih] {
    padding: 6px 14px;
    background: var(--green-soft);
    color: var(--green-dark);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.vetban-video-frame[b-bew56j9eih] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #071b2a;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(7, 45, 77, 0.14);
}

.vetban-intro-video[b-bew56j9eih] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #071b2a;
}

.vetban-video-bottom[b-bew56j9eih] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 24px 12px 8px;
}

.vetban-video-bottom strong[b-bew56j9eih] {
    display: block;
    color: var(--navy-deep);
    font-size: 1.1rem;
    font-weight: 900;
}

.vetban-video-bottom p[b-bew56j9eih] {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.vetban-video-action[b-bew56j9eih] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    flex-shrink: 0;
    padding: 0 22px;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        var(--green),
        var(--green-dark)
    );
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.vetban-video-action:hover[b-bew56j9eih] {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 107, 79, 0.20);
}

/* Mobile */

@media (max-width: 768px) {

    .vetban-video-section[b-bew56j9eih] {
        padding: 65px 0 75px;
    }

    .vetban-video-card[b-bew56j9eih] {
        padding: 10px;
        border-radius: 22px;
    }

    .vetban-video-top[b-bew56j9eih] {
        padding: 10px 8px 14px;
    }

    .vetban-video-frame[b-bew56j9eih] {
        border-radius: 15px;
    }

    .vetban-video-bottom[b-bew56j9eih] {
        flex-direction: column;
        align-items: stretch;
        padding: 20px 10px 10px;
        gap: 18px;
    }

    .vetban-video-bottom strong[b-bew56j9eih] {
        font-size: 1rem;
    }

    .vetban-video-action[b-bew56j9eih] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vetban-video-action[b-bew56j9eih] {
        transition: none;
    }

    .vetban-video-action:hover[b-bew56j9eih] {
        transform: none;
    }
}

.survey-fields[b-bew56j9eih] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.survey-form-section[b-bew56j9eih]  .survey-form {
    width: min(980px, 100%);
    margin: 0 auto;
}

.otp-code-wrapper.active[b-bew56j9eih] {
    display: block;
    opacity: 1;
    visibility: visible;
}

.survey-message[b-bew56j9eih] {
    margin: 20px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.9;
}

.survey-message.error[b-bew56j9eih] {
    background: #fff1f1;
    color: #b42318;
}

.survey-message.success[b-bew56j9eih] {
    background: #eaf5f1;
    color: #0a513c;
}

.edit-information-button[b-bew56j9eih] {
    display: block;
    margin-top: 14px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--navy);
    cursor: pointer;
}

button:disabled[b-bew56j9eih] {
    opacity: .6;
    cursor: not-allowed;
}

.select-card:has(input:focus-visible)[b-bew56j9eih],
.choice-chip:has(input:focus-visible)[b-bew56j9eih],
.rating-item:has(input:focus-visible)[b-bew56j9eih],
.interest-options label:has(input:focus-visible)[b-bew56j9eih] {
    outline: 3px solid rgba(29, 91, 143, .45);
    outline-offset: 3px;
}

.survey-page[b-bew56j9eih],
.survey-page *[b-bew56j9eih],
.survey-page *[b-bew56j9eih]::before,
.survey-page *[b-bew56j9eih]::after {
    box-sizing: border-box;
}

.otp-content[b-bew56j9eih] {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.otp-copy[b-bew56j9eih] {
    max-width: 620px;
}

.otp-code-wrapper.active[b-bew56j9eih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    text-align: center;
}

.otp-code-wrapper label[b-bew56j9eih] {
    margin: 0;
}

.otp-input[b-bew56j9eih] {
    box-sizing: border-box;
    width: min(320px, 100%);
    padding: 0 16px;
    direction: ltr;
    text-align: center;
    letter-spacing: 10px;
    text-indent: 10px;
    font-variant-numeric: tabular-nums;
}

.edit-information-button[b-bew56j9eih] {
    margin-top: 0;
}

.survey-message[b-bew56j9eih] {
    text-align: center;
}
/* _content/PopProject.BlazorSSR/Components/Shared/DeliveryWindowPicker.razor.rz.scp.css */
.delivery-picker[b-ng7ss1aw0p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    width: 100%;
    color: var(--text, #475467);
    font-size: 17px;
}

.delivery-picker *[b-ng7ss1aw0p] {
    box-sizing: border-box;
}

.delivery-calendar[b-ng7ss1aw0p] {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e4e7ec;
    border-radius: 15px;
    background: #fff;
}

.calendar-header > div:first-child[b-ng7ss1aw0p] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.calendar-header > div:first-child > strong[b-ng7ss1aw0p],
.times-heading > strong[b-ng7ss1aw0p] {
    font-size: 18px;
    font-weight: 900;
}

.calendar-header > div:first-child > span[b-ng7ss1aw0p] {
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.8;
}

.month-navigation[b-ng7ss1aw0p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 17px 0 13px;
}

.month-navigation strong[b-ng7ss1aw0p] {
    font-size: 17px;
    font-weight: 800;
}

.month-navigation button[b-ng7ss1aw0p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    background: #f8faf9;
    color: var(--green, #3a7d44);
    font: inherit;
    font-size: 25px;
    cursor: pointer;
}

.calendar-grid[b-ng7ss1aw0p] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.week-title[b-ng7ss1aw0p] {
    padding: 8px 0;
    color: var(--muted, #667085);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.calendar-day[b-ng7ss1aw0p] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 37px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #f8fafc;
    color: #98a2b3;
    font: inherit;
    font-size: 16px;
    cursor: not-allowed;
}

.calendar-day.available[b-ng7ss1aw0p] {
    border-color: #dce9df;
    background: #f0f7f2;
    color: #357140;
    font-weight: 800;
    cursor: pointer;
}

.calendar-day.selected[b-ng7ss1aw0p] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
    box-shadow: 0 4px 10px rgba(58, 125, 68, .16);
}

.calendar-day.available:hover:not(:disabled):not(.selected)[b-ng7ss1aw0p] {
    background: #dfefe3;
}

.delivery-times[b-ng7ss1aw0p] {
    min-width: 0;
}

.times-heading[b-ng7ss1aw0p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.times-heading > span[b-ng7ss1aw0p] {
    color: var(--muted, #667085);
    font-size: 16px;
}

.time-options[b-ng7ss1aw0p] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-option[b-ng7ss1aw0p] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 83px;
    padding: 15px;
    border: 1px solid #e4e7ec;
    border-radius: 13px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.time-option > span:nth-child(2)[b-ng7ss1aw0p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.time-option strong[b-ng7ss1aw0p] {
    font-size: 18px;
    font-weight: 900;
}

.time-option small[b-ng7ss1aw0p] {
    color: var(--muted, #667085);
    font-size: 15px;
}

.selection-dot[b-ng7ss1aw0p] {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border: 2px solid #cbd5cf;
    border-radius: 50%;
    background: #fff;
}

.time-option.selected[b-ng7ss1aw0p] {
    border-color: var(--green, #3a7d44);
    background: #f0f7f2;
}

.time-option.selected .selection-dot[b-ng7ss1aw0p] {
    border: 5px solid var(--green, #3a7d44);
}

.selected-mark[b-ng7ss1aw0p] {
    margin-right: auto;
    color: var(--green, #3a7d44);
    font-size: 22px;
    font-weight: 900;
}

.selection-hint[b-ng7ss1aw0p] {
    margin: 14px 0 0;
    color: var(--muted, #667085);
    font-size: 15px;
    line-height: 1.9;
}

.picker-empty[b-ng7ss1aw0p] {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid #fedf89;
    border-radius: 12px;
    background: #fffcf5;
    color: #875408;
    line-height: 1.9;
}

button:disabled[b-ng7ss1aw0p] {
    cursor: not-allowed;
}

.month-navigation button:disabled[b-ng7ss1aw0p] {
    opacity: .35;
}

.time-option:disabled[b-ng7ss1aw0p],
.calendar-day.available:disabled[b-ng7ss1aw0p] {
    opacity: .55;
}

button:focus-visible[b-ng7ss1aw0p] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 650px) {
    .delivery-picker[b-ng7ss1aw0p] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .delivery-calendar[b-ng7ss1aw0p] {
        max-width: 400px;
    }

    .time-options[b-ng7ss1aw0p] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .time-option[b-ng7ss1aw0p] {
        padding: 12px;
        flex-wrap: wrap;
    }

    .time-option strong[b-ng7ss1aw0p] {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .time-options[b-ng7ss1aw0p] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/DoctorSchedules/ScheduleViewer.razor.rz.scp.css */
.schedule-viewer[b-j61nc1tha3] {
    width: 100%;
    margin-top: 16px;
}

.schedule-viewer-grid[b-j61nc1tha3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.schedule-viewer-day[b-j61nc1tha3] {
    min-width: 0;
    padding: 18px;

    border: 1px solid var(--soft);
    border-radius: 16px;

    background: #fff;
}

.schedule-viewer-day-head[b-j61nc1tha3] {
    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.schedule-viewer-day-head strong[b-j61nc1tha3] {
    color: var(--text);

    font-size: 15px;
    font-weight: 900;
}

.schedule-viewer-badge[b-j61nc1tha3] {
    min-height: 28px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.schedule-viewer-badge.success[b-j61nc1tha3] {
    background: #ecfdf3;
    color: #027a48;
}

.schedule-viewer-badge.neutral[b-j61nc1tha3] {
    background: #f2f4f7;
    color: #667085;
}

.schedule-viewer-periods[b-j61nc1tha3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.schedule-viewer-period[b-j61nc1tha3] {
    min-height: 70px;
    padding: 13px 14px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 8px;

    border: 1px solid var(--soft);
    border-radius: 12px;

    background: #fbfcfd;
}

.schedule-viewer-time[b-j61nc1tha3] {
    direction: ltr;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;
}

.schedule-viewer-time strong[b-j61nc1tha3] {
    color: var(--text);

    font-size: 16px;
    font-weight: 900;
}

.schedule-viewer-time span[b-j61nc1tha3] {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.schedule-viewer-note[b-j61nc1tha3] {
    padding-top: 7px;

    border-top: 1px solid var(--soft);

    color: var(--muted);

    font-size: 12px;
    line-height: 1.8;
}

.schedule-viewer-off[b-j61nc1tha3] {
    min-height: 58px;
    padding: 0 14px;

    display: flex;
    align-items: center;

    border: 1px dashed var(--soft);
    border-radius: 12px;

    background: #fbfcfd;

    color: var(--muted);

    font-size: 12px;
}


/* =========================
   Responsive
========================= */

@media (max-width: 850px) {

    .schedule-viewer-grid[b-j61nc1tha3] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {

    .schedule-viewer-day[b-j61nc1tha3] {
        padding: 14px;
    }

    .schedule-viewer-day-head[b-j61nc1tha3] {
        align-items: flex-start;
    }

    .schedule-viewer-time strong[b-j61nc1tha3] {
        font-size: 14px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/OtpInput.razor.rz.scp.css */
.otp-input-wrapper[b-elhksvsdao] {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

.otp-digit[b-elhksvsdao] {
    width: 52px;
    height: 56px;

    padding: 0;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fff;
    color: var(--text);

    text-align: center;

    font-family: inherit;
    font-size: 21px;
    font-weight: 900;

    outline: none;

    transition:
        border-color .18s,
        box-shadow .18s,
        transform .18s;
}

.otp-digit:hover[b-elhksvsdao] {
    border-color: #cbd5d1;
}

.otp-digit:focus[b-elhksvsdao] {
    border-color: var(--green);

    box-shadow:
        0 0 0 4px rgba(58, 125, 68, .08);

    transform: translateY(-1px);
}

.otp-digit:not(:placeholder-shown)[b-elhksvsdao] {
    border-color: rgba(58, 125, 68, .35);
}

.otp-digit:disabled[b-elhksvsdao] {
    opacity: .6;
    cursor: not-allowed;
}

@media (max-width: 500px) {
    .otp-input-wrapper[b-elhksvsdao] {
        gap: 6px;
    }

    .otp-digit[b-elhksvsdao] {
        width: 42px;
        height: 50px;

        border-radius: 10px;

        font-size: 18px;
    }
}

@media (max-width: 360px) {
    .otp-digit[b-elhksvsdao] {
        width: 38px;
        height: 46px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/PanelLists/DisplayOrderManager.razor.rz.scp.css */
.order-manager-card[b-vcfsmqnxip] {
    margin-bottom: 20px;

    border: 1px solid var(--soft);
    border-radius: 18px;

    background: #fff;

    overflow: hidden;
}

.order-toggle[b-vcfsmqnxip] {
    width: 100%;
    padding: 18px;

    border: 0;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    cursor: pointer;

    font-family: inherit;
}

.order-toggle strong[b-vcfsmqnxip] {
    display: block;

    color: var(--text);
}

.order-toggle span[b-vcfsmqnxip] {
    color: var(--muted);

    font-size: 17px;
}

.order-content[b-vcfsmqnxip] {
    padding: 18px;

    animation: orderOpen-b-vcfsmqnxip .25s ease;
}

.order-row[b-vcfsmqnxip] {
    min-height: 70px;

    padding: 10px 14px;
    margin-bottom: 10px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    display: flex;
    align-items: center;

    gap: 12px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease;
}

.order-row:hover[b-vcfsmqnxip] {
    transform: translateY(-2px);
}

.order-row.moved[b-vcfsmqnxip] {
    transform: translateY(-4px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.order-info[b-vcfsmqnxip] {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.order-info strong[b-vcfsmqnxip] {
    color: var(--text);

    font-size: 18px;
}

.order-info > span[b-vcfsmqnxip] {
    color: var(--muted);

    font-size: 16px;
}

.order-actions[b-vcfsmqnxip] {
    display: flex;

    gap: 6px;
}

.order-actions button[b-vcfsmqnxip] {
    width: 36px;
    height: 36px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    cursor: pointer;
}

.order-actions button:disabled[b-vcfsmqnxip] {
    opacity: .45;

    cursor: not-allowed;
}

.save-order-button[b-vcfsmqnxip] {
    min-height: 42px;

    padding: 0 18px;

    border: 0;
    border-radius: 10px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    font-size: 18px;
    font-weight: 800;

    cursor: pointer;
}

.save-order-button:disabled[b-vcfsmqnxip] {
    opacity: .6;

    cursor: not-allowed;
}

.moved-badge[b-vcfsmqnxip] {
    margin-right: 12px;

    padding: 3px 10px;

    border-radius: 20px;

    background: #e8f7ec;
    color: #2e7d32;

    font-size: 17px;

    animation: fadeIn-b-vcfsmqnxip .25s ease;
}

@keyframes fadeIn-b-vcfsmqnxip {

    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes orderOpen-b-vcfsmqnxip {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/PanelLists/PagedTable.razor.rz.scp.css */
.table-card[b-wqngl1m11v] {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--soft);
    border-radius: 18px;
}

.table-scroll[b-wqngl1m11v] {
    width: 100%;
    overflow-x: auto;
}

.data-table[b-wqngl1m11v] {
    width: 100%;
    border-collapse: collapse;
    min-width: 1050px;
}

.data-table[b-wqngl1m11v]  th,
.data-table[b-wqngl1m11v]  td {
    padding: 15px 16px;
    text-align: right;
    border-bottom: 1px solid #f0f2f4;
    vertical-align: middle;
}

.data-table[b-wqngl1m11v]  th {
    background: #fbfcfd;
    color: var(--muted);
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
}

.data-table[b-wqngl1m11v]  td {
    color: var(--text);
    font-size: 18px;
}

.data-table[b-wqngl1m11v]  tbody tr:last-child td {
    border-bottom: 0;
}

.data-table[b-wqngl1m11v]  tbody tr:hover {
    background: #fcfdfc;
}

.table-footer[b-wqngl1m11v] {
    min-height: 66px;
    padding: 12px 16px;
    border-top: 1px solid var(--soft);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}

.page-size[b-wqngl1m11v],
.pagination[b-wqngl1m11v] {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--muted);
    font-size: 17px;
}

.page-size select[b-wqngl1m11v] {
    height: 36px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
}

.pagination button[b-wqngl1m11v] {
    height: 36px;
    padding: 0 13px;

    border: 1px solid var(--soft);
    border-radius: 8px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;
    font-weight: 700;

    cursor: pointer;
}

.pagination button:disabled[b-wqngl1m11v] {
    opacity: .45;
    cursor: not-allowed;
}

.state-card[b-wqngl1m11v] {
    min-height: 220px;
    padding: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.state-card strong[b-wqngl1m11v] {
    color: var(--text);
}

.state-card p[b-wqngl1m11v] {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.error-state button[b-wqngl1m11v] {
    margin-top: 16px;

    min-height: 38px;
    padding: 0 14px;

    border: 0;
    border-radius: 9px;

    background: var(--green);
    color: #fff;

    font-family: inherit;
    cursor: pointer;
}

.loading-spinner[b-wqngl1m11v] {
    width: 32px;
    height: 32px;

    margin-bottom: 12px;

    border: 3px solid #edf0f2;
    border-top-color: var(--green);
    border-radius: 50%;

    animation: spin-b-wqngl1m11v .8s linear infinite;
}

@keyframes spin-b-wqngl1m11v {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 700px) {

    .table-footer[b-wqngl1m11v] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination[b-wqngl1m11v] {
        justify-content: space-between;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/PanelLists/PanelFilters.razor.rz.scp.css */
.panel-filters[b-756g0j1x59] {
    margin-bottom: 18px;
    padding: 16px;

    display: flex;
    align-items: stretch;

    gap: 10px;

    background: #fff;

    border: 1px solid var(--soft);
    border-radius: 16px;
}

.panel-filters-fields[b-756g0j1x59] {
    flex: 1;

    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(160px, 1fr));

    gap: 10px;
}

.panel-filters-fields[b-756g0j1x59]  input,
.panel-filters-fields[b-756g0j1x59]  select {
    width: 100%;
    min-height: 44px;

    padding: 0 12px;

    border: 1px solid var(--soft);
    border-radius: 10px;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;

    outline: none;
}

.panel-filters-fields[b-756g0j1x59]  input:focus,
.panel-filters-fields[b-756g0j1x59]  select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}

.panel-filters-actions[b-756g0j1x59] {
    display: flex;

    gap: 10px;
}

.filter-button[b-756g0j1x59],
.reset-filter-button[b-756g0j1x59] {
    min-height: 44px;
    padding: 0 16px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 17px;
    font-weight: 800;

    cursor: pointer;
}

.filter-button[b-756g0j1x59] {
    border: 0;

    background: var(--green);
    color: #fff;
}

.reset-filter-button[b-756g0j1x59] {
    border: 1px solid var(--soft);

    background: #fff;
    color: var(--text);
}

@media (max-width: 900px) {

    .panel-filters[b-756g0j1x59] {
        flex-direction: column;
    }

    .panel-filters-actions[b-756g0j1x59] {
        width: 100%;
    }

    .panel-filters-actions button[b-756g0j1x59] {
        flex: 1;
    }
}

@media (max-width: 700px) {

    .panel-filters-fields[b-756g0j1x59] {
        grid-template-columns: 1fr;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/PanelLists/PanelListHeader.razor.rz.scp.css */
.panel-list-header[b-wq8dbz4fbb] {
    margin-bottom: 22px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;
}

.panel-list-eyebrow[b-wq8dbz4fbb] {
    display: block;

    margin-bottom: 6px;

    color: var(--orange);

    font-size: 18px;
    font-weight: 800;
}

.panel-list-header h1[b-wq8dbz4fbb] {
    margin: 0;

    color: var(--text);

    font-size: 27px;
    font-weight: 900;
}

.panel-list-header p[b-wq8dbz4fbb] {
    margin: 8px 0 0;

    color: var(--muted);

    font-size: 18px;
        text-align: justify;

}

.panel-list-header-actions[b-wq8dbz4fbb] {
    display: flex;
    align-items: stretch;

    gap: 10px;
}

.panel-list-count[b-wq8dbz4fbb] {
    min-width: 120px;

    padding: 14px 18px;

    border: 1px solid var(--soft);
    border-radius: 14px;

    background: #fff;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.panel-list-count span[b-wq8dbz4fbb] {
    color: var(--muted);

    font-size: 16px;
}

.panel-list-count strong[b-wq8dbz4fbb] {
    color: var(--text);

    font-size: 22px;
}

.panel-list-action[b-wq8dbz4fbb] {
    display: flex;
}

@media (max-width: 700px) {

    .panel-list-header[b-wq8dbz4fbb] {
        flex-direction: column;
    }

    .panel-list-header-actions[b-wq8dbz4fbb] {
        width: 100%;
    }

    .panel-list-action[b-wq8dbz4fbb] {
        flex: 1;
    }

    .panel-list-count[b-wq8dbz4fbb] {
        flex: 1;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/ParticipationSection.razor.rz.scp.css */
.participation-section[b-9ksnio0j3z] {
    padding: 65px 0;
    background: #fff;
}

.participation-grid[b-9ksnio0j3z] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.participation-card[b-9ksnio0j3z] {
    position: relative;
    min-width: 0;
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    border: 1px solid rgba(31, 41, 55, .09);
    border-radius: 28px 40px 28px 40px;
}

.participation-card[b-9ksnio0j3z]::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    pointer-events: none;
}

.survey-card[b-9ksnio0j3z] {
    background: linear-gradient(135deg, #edf6f0, #f7fbf8);
}

.partnership-card[b-9ksnio0j3z] {
    background: linear-gradient(135deg, #edf4fc, #f7faff);
}

.card-label[b-9ksnio0j3z] {
    position: relative;
    color: var(--green);
    font-size: 16px;
    font-weight: 900;
}

.partnership-card .card-label[b-9ksnio0j3z] {
    color: #2459a6;
}

.participation-card h2[b-9ksnio0j3z] {
    position: relative;
    margin: 16px 0 12px;
    color: #3f4b5e;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.7;
}

.participation-card p[b-9ksnio0j3z] {
    position: relative;
    margin: 0 0 26px;
    color: #4f5e72;
    font-size: 18px;
    line-height: 2.1;
}

.participation-link[b-9ksnio0j3z] {
    position: relative;
    min-height: 48px;
    margin-top: auto;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: 12px;
    background: var(--green);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease;
}

.partnership-card .participation-link[b-9ksnio0j3z] {
    background: #2459a6;
}

.participation-link:hover[b-9ksnio0j3z] {
    color: #fff;
    transform: translateY(-2px);
}

.participation-link:focus-visible[b-9ksnio0j3z] {
    outline: 3px solid #a7792f;
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .participation-grid[b-9ksnio0j3z] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .participation-section[b-9ksnio0j3z] {
        padding: 45px 0;
    }

    .participation-card[b-9ksnio0j3z] {
        padding: 28px 22px;
        border-radius: 22px 30px 22px 30px;
    }

    .participation-card h2[b-9ksnio0j3z] {
        font-size: 24px;
    }

    .participation-card p[b-9ksnio0j3z] {
        font-size: 17px;
    }

    .participation-link[b-9ksnio0j3z] {
        box-sizing: border-box;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .participation-link[b-9ksnio0j3z] {
        transition: none;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/PasswordField.razor.rz.scp.css */
.password-field[b-izu5zco93x] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.password-field input[b-izu5zco93x] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 52px 0 14px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: var(--text, #475467);
    font-family: inherit;
    font-size: 17px;
    direction: ltr;
    text-align: left;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.password-field input[b-izu5zco93x]::placeholder {
    color: var(--muted, #667085);
    font-size: 15px;
}

.password-field input:focus[b-izu5zco93x] {
    border-color: var(--green, #3a7d44);
    box-shadow: 0 0 0 3px rgba(58, 125, 68, .08);
}

.password-toggle[b-izu5zco93x] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.password-toggle:hover[b-izu5zco93x] {
    background: #f2f6f3;
    color: var(--green, #3a7d44);
}

.password-toggle:focus-visible[b-izu5zco93x] {
    outline: 3px solid #b7d6bc;
    outline-offset: 1px;
}

.password-field input:disabled[b-izu5zco93x],
.password-toggle:disabled[b-izu5zco93x] {
    opacity: .6;
    cursor: not-allowed;
}
/* _content/PopProject.BlazorSSR/Components/Shared/PersianDateTimePicker.razor.rz.scp.css */
.persian-picker[b-nu3swzramn] {
    width: 100%;
    min-width: 0;
    color: var(--text, #475467);
    font-size: 17px;
}

.persian-picker *[b-nu3swzramn] {
    box-sizing: border-box;
}

.picker-trigger[b-nu3swzramn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid var(--soft, #e4e7ec);
    border-radius: 11px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.picker-trigger > span:first-child[b-nu3swzramn] {
    min-width: 0;
    line-height: 1.8;
}

.picker-trigger-icon[b-nu3swzramn] {
    flex-shrink: 0;
    color: var(--green, #3a7d44);
    font-size: 25px;
}

.picker-panel[b-nu3swzramn] {
    width: 100%;
    max-width: 430px;
    margin-top: 12px;
    padding: 18px;
    border: 1px solid #dce6df;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .07);
}

.calendar-head[b-nu3swzramn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.calendar-head strong[b-nu3swzramn] {
    font-size: 19px;
    font-weight: 900;
}

.month-button[b-nu3swzramn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #f8faf9;
    color: var(--green, #3a7d44);
    font: inherit;
    font-size: 27px;
    cursor: pointer;
}

.calendar-grid[b-nu3swzramn] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.weekday[b-nu3swzramn] {
    padding: 7px 0 12px;
    color: var(--muted, #667085);
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

.calendar-day[b-nu3swzramn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f8faf9;
    color: var(--text, #475467);
    font: inherit;
    font-size: 17px;
    cursor: pointer;
}

.calendar-day.today[b-nu3swzramn] {
    border-color: #9bbda2;
    font-weight: 900;
}

.calendar-day.selected[b-nu3swzramn] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
    font-weight: 900;
}

.calendar-day:hover:not(:disabled):not(.selected)[b-nu3swzramn] {
    background: #eaf3ec;
}

.calendar-day:disabled[b-nu3swzramn] {
    opacity: .35;
    cursor: not-allowed;
}

.time-section[b-nu3swzramn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eef0f3;
}

.time-section > span[b-nu3swzramn] {
    font-size: 16px;
    font-weight: 800;
}

.time-controls[b-nu3swzramn] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.time-controls select[b-nu3swzramn] {
    width: 72px;
    min-height: 43px;
    padding: 7px;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    background: #fff;
    color: var(--text, #475467);
    font: inherit;
    font-size: 18px;
    text-align: center;
}

.picker-footer[b-nu3swzramn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.today-button[b-nu3swzramn],
.done-button[b-nu3swzramn] {
    min-height: 41px;
    padding: 8px 14px;
    border: 1px solid #e4e7ec;
    border-radius: 9px;
    background: #fff;
    color: var(--green, #3a7d44);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.done-button[b-nu3swzramn] {
    border-color: var(--green, #3a7d44);
    background: var(--green, #3a7d44);
    color: #fff;
}

.picker-trigger:disabled[b-nu3swzramn] {
    opacity: .55;
    cursor: not-allowed;
}

button:focus-visible[b-nu3swzramn],
select:focus-visible[b-nu3swzramn] {
    outline: 3px solid #b7d6bc;
    outline-offset: 3px;
}

@media (max-width: 450px) {
    .picker-panel[b-nu3swzramn] {
        padding: 12px;
    }

    .calendar-grid[b-nu3swzramn] {
        gap: 3px;
    }

    .calendar-day[b-nu3swzramn] {
        min-height: 38px;
        font-size: 16px;
    }
}
/* _content/PopProject.BlazorSSR/Components/Shared/RichTextEditor.razor.rz.scp.css */
.vetban-editor[b-ahrkf2py4b] {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--soft);
    border-radius: 13px;

    background: #fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.vetban-editor:focus-within[b-ahrkf2py4b] {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px rgba(58, 125, 68, .07);
}


/* =========================
   Toolbar
========================= */

.vetban-editor-toolbar[b-ahrkf2py4b] {
    min-height: 42px;

    padding: 5px 8px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 3px;

    direction: rtl;

    border-bottom: 1px solid var(--soft);

    background: #fafbfa;
}

.vetban-editor-toolbar button[b-ahrkf2py4b],
.image-upload-button[b-ahrkf2py4b] {
    width: 32px;
    height: 32px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.vetban-editor-toolbar button:hover[b-ahrkf2py4b],
.image-upload-button:hover[b-ahrkf2py4b] {
    background: #edf4ef;
    color: var(--green);
}

.vetban-editor-toolbar button:active[b-ahrkf2py4b],
.image-upload-button:active[b-ahrkf2py4b] {
    transform: translateY(1px);
}

.image-upload-button[b-ahrkf2py4b] {
    position: relative;
}

.image-upload-button input[b-ahrkf2py4b] {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;
    pointer-events: none;
}

.image-upload-button.disabled[b-ahrkf2py4b] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.toolbar-divider[b-ahrkf2py4b] {
    width: 1px;
    height: 22px;

    margin: 0 4px;

    flex: 0 0 auto;

    background: var(--soft);
}

.toolbar-spacer[b-ahrkf2py4b] {
    flex: 1;
}

.list-icon[b-ahrkf2py4b] {
    font-size: 12px;
    font-weight: 800;
}


/* =========================
   Editor Area
========================= */

.vetban-editor-content[b-ahrkf2py4b] {
    width: 100%;
    min-height: 260px;

    box-sizing: border-box;

    padding: 18px;

    outline: none;

    background: #fff;
    color: var(--text);

    font-family: inherit;
    font-size: 17px;
    line-height: 2.1;

    direction: rtl;
    text-align: right;

    overflow-wrap: anywhere;
}

.vetban-editor-content:empty[b-ahrkf2py4b]::before {
    content: attr(data-placeholder);

    color: var(--muted);

    pointer-events: none;
}

.vetban-editor-content h2[b-ahrkf2py4b] {
    margin: 22px 0 10px;

    color: var(--text);

    font-size: 21px;
    font-weight: 900;
    line-height: 1.7;
}

.vetban-editor-content h3[b-ahrkf2py4b] {
    margin: 18px 0 9px;

    color: var(--text);

    font-size: 17px;
    font-weight: 900;
    line-height: 1.8;
}

.vetban-editor-content p[b-ahrkf2py4b] {
    margin: 0 0 12px;
}

.vetban-editor-content p:last-child[b-ahrkf2py4b] {
    margin-bottom: 0;
}

.vetban-editor-content ul[b-ahrkf2py4b],
.vetban-editor-content ol[b-ahrkf2py4b] {
    margin: 10px 0;

    padding-right: 26px;
    padding-left: 0;
}

.vetban-editor-content li[b-ahrkf2py4b] {
    margin-bottom: 5px;
}

.vetban-editor-content blockquote[b-ahrkf2py4b] {
    margin: 16px 0;
    padding: 12px 16px;

    border-right: 4px solid var(--green);
    border-radius: 8px;

    background: #f6faf7;
    color: var(--text);

    font-style: normal;
}

.vetban-editor-content a[b-ahrkf2py4b] {
    color: var(--green);

    text-decoration: underline;
    text-underline-offset: 3px;
}

.vetban-editor-content strong[b-ahrkf2py4b] {
    font-weight: 900;
}

.vetban-editor-content em[b-ahrkf2py4b] {
    font-style: italic;
}

.vetban-editor-content img[b-ahrkf2py4b],
.vetban-editor-content .article-content-image[b-ahrkf2py4b] {
    width: auto;
    max-width: 100%;
    height: auto;

    margin: 16px auto;

    display: block;

    border-radius: 12px;
}


/* =========================
   Upload Error
========================= */

.editor-upload-error[b-ahrkf2py4b] {
    padding: 10px 14px;

    border-top: 1px solid #fecdca;

    background: #fff1f1;
    color: #b42318;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
}


@media (max-width: 600px) {
    .vetban-editor-toolbar[b-ahrkf2py4b] {
        align-items: flex-start;
    }

    .toolbar-spacer[b-ahrkf2py4b] {
        display: none;
    }

    .vetban-editor-content[b-ahrkf2py4b] {
        min-height: 220px;
        padding: 14px;

        font-size: 15px;
    }
}