/* ============================================================================
   Virtual Gifts (V-Gifts) pop-up
   Layout / cards only — buttons reuse the site's .button classes, and the
   window chrome reuses .hystmodal / .modal__window / .modal__content.
   ========================================================================== */

.vgift-modal {
    max-width: 1240px;
}

/* Purchase-flow modal: 30px inset on desktop/tablet (base modal is 40/30).
   Mobile keeps its own full-screen padding (see the max-width:767px block). */
#vGiftModal .modal__content {
    padding: 30px;
}

/* Purchase-flow buttons use the 8px "Button var" radius (base .button is 14px). */
#vGiftModal .button {
    border-radius: 8px;
}

.vgift {
    --vgift-accent: var(--accent-c, #F02852);
    --vgift-media-bg: #f6f3fb;
    --vgift-muted: #6b6b78;
    width: 100%;
}

/* -------- header (title + optional back arrow) -------- */
.vgift__header {
    position: relative;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 30px;
    min-height: 32px;
}

.vgift__title {
    margin: 0;
    text-align: left;
    flex: 1 1 auto;
}

/* Back button (Figma "Link"): white fill + #F4F4FA border, not a grey fill. */
.vgift__back {
    background-color: #fff;
    border: 1px solid #F4F4FA;
}

/* -------- panels -------- */
.vgift__panel[hidden] {
    display: none;
}

.vgift__empty,
.vgift__loading {
    padding: 40px 10px;
    text-align: center;
    color: var(--vgift-muted);
}

/* -------- state 1: categories -------- */
.vgift__categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.vgift__category {
    display: flex;
    flex-direction: column;
}

.vgift__category-media {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: var(--vgift-media-bg);
    aspect-ratio: 1 / 1;
    margin: 0 auto 24px;
    width: 100%;
    max-width: 293px;
}
.vgift__category-image,
.vgift__card-image,
.vgift__confirm-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vgift__category-name {
    margin: 0 0 16px;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.33;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
}

.vgift__category-desc {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    flex: 1 1 auto;
}

.vgift__show {
    width: 100%;
    padding-block: 8px;
}

/* -------- badge chip -------- */
.vgift__badge {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 15px;
    border-radius: 8px 8px 8px 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    color: #fff;
    background: #F02852;
}

.vgift__badge svg {
    flex: 0 0 auto;
}

.vgift__badge--premium {
    background: #B61537;
}

.vgift__badge--vip {
    background: #1F124C;
}

/* -------- state 2: gifts grid -------- */
.vgift__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.vgift__card {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    border: 1px solid #E5E5EC;
    padding: 15px;
}

.vgift__card-media {
    border-radius: 14px;
    overflow: hidden;
    background: var(--vgift-media-bg);
    aspect-ratio: 1 / 1;
    margin-bottom: 15px;
}

.vgift__card-name {
    margin: 0 0 5px;
    font-weight: 700;
    font-size: 20px;
}

.vgift__card-price {
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: 500;
    flex: 1 1 auto;
}

.vgift__buy {
    width: 100%;
    padding-block: 8px;
}

/* -------- state 3: confirm -------- */
.vgift__confirm {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.vgift__confirm-media {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--vgift-media-bg);
    aspect-ratio: 1 / 1;
}

.vgift__confirm-body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.vgift__confirm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.vgift__confirm-name {
    margin: 0;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.4;
    text-transform: uppercase;
}

.vgift__confirm-price {
    font-weight: 500;
    font-size: 20px;
    white-space: nowrap;
}

.vgift__confirm-desc {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.5;
}

.vgift__label {
    display: block;
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 16px;
}

.vgift__note-wrap {
    background: #F4F4FA;
    border-radius: 14px;
}

.vgift__note {
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    padding: 15px 20px;
    font-size: 16px;
    line-height: 1.5;
    outline: none;
    color: inherit;
    font-family: inherit;
}

.vgift__note-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #797979;
    margin: 8px 0 auto;
}

.vgift__send {
    width: 100%;
    margin-top: auto;
}

.vgift__confirm-body .vgift__send {
    margin-top: 28px;
}

/* Live chat: "Send V-Gift" sits next to the Notes button in the profile card. */
.live__notes {
    gap: 10px;
}
.live__notes > .live__vgift-btn {
    padding-inline: 25px;
}

/* -------- "Virtual Gifts" CTA in the girl profile about-view (Figma 7353:246183) -------- */
.vgift-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-top: 40px;
    width: 100%;
    min-width: 0;
}

.vgift-cta__title {
    margin: 0;
    font-weight: 700;
    font-size: 30px;
    line-height: 42px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #1D1D1D;
}

.vgift-cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 243px;
    max-width: 100%;
    height: 56px;
    padding: 14px 30px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
}

.vgift-cta__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
}

/* -------- Virtual Gifts — received-gifts slider (Figma 7264:242498 / 7277:245694) -------- */
/* Title + slider arrows share one row above the Send button. */
.vgift-cta__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.vgift-cta__arrows {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 auto;
}

.vgift-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: var(--accent-c, #F02852);
    border: 1px solid var(--accent-c, #F02852);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}
.vgift-arrow:hover,
.vgift-arrow:focus {
    background: #d81f45;
    border-color: #d81f45;
}
.vgift-arrow.is-disabled {
    background: #fff;
    border-color: #E5E5EC;
    color: var(--accent-c, #F02852);
    cursor: default;
    pointer-events: none;
}
.vgift-arrow svg {
    flex: 0 0 auto;
}

/* Card strip — a horizontal scroll-snap slider driven by the header arrows.
   Fixed-width cards (243 desktop / 157 mobile); the row scrolls, arrows page. */
.vgift-received__list {
    --vg-cols: 5;
    --vg-col-gap: 30px;
    --vg-row-gap: 30px;
    display: grid;
    grid-auto-flow: column;
    /* Fluid columns: exactly --vg-cols whole cards fill the visible width. */
    grid-auto-columns: calc((100% - (var(--vg-cols) - 1) * var(--vg-col-gap)) / var(--vg-cols));
    grid-template-rows: auto;
    column-gap: var(--vg-col-gap);
    row-gap: var(--vg-row-gap);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vgift-received__list::-webkit-scrollbar {
    display: none;
}

.vgift-received__item {
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 1600px) {
    .vgift-received__list { --vg-cols: 4; }
}
@media (max-width: 1280px) {
    .vgift-received__list { --vg-cols: 3; }
}

.vgift-received__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.vgift-received__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    background: var(--vgift-media-bg, #f4f4fa);
    /* transparent border reserved so the hover accent adds no layout shift
       and is drawn around the image (never clipped by the slider overflow). */
    border: 1.5px solid transparent;
    transition: border-color .2s;
}
.vgift-received__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vgift-received__name {
    margin: 0;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #1D1D1D;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Clickable + hover accent border only for the profile owner. */
.vgift-received__card--clickable {
    cursor: pointer;
}
.vgift-received__card--clickable:hover .vgift-received__media,
.vgift-received__card--clickable:focus .vgift-received__media {
    border-color: var(--accent-c, #F02852);
}

/* Detail popup: note empty-state */
.vgift-story__wishes-text--empty {
    color: #797979;
}

/* -------- Virtual Gifts Story — card recipient block (Figma 7310:236345) -------- */
/* Card chrome (border/padding/image/title) reuses .gift__* — only the recipient
   block differs: a bordered ID chip stacked above the name, and a 214px button. */
.vgs-card__profile {
    display: flex;
    align-items: center;
    gap: 20px;
}
.vgs-card__avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    overflow: hidden;
    display: block;
}
.vgs-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vgs-card__profile-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.vgs-card__id {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    background: #f4f4fa;
    border: 1px solid #e5e5ec;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #1D1D1D;
    white-space: nowrap;
}
.vgs-card__name {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    overflow: hidden;
    color: #1D1D1D;
    font-weight: 800;
    font-size: 22px;
    line-height: 33px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .3s;
}
.vgs-card__name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vgs-card__name .search__item-verified {
    flex: 0 0 auto;
}
.vgs-card__name:hover,
.vgs-card__name:focus {
    color: var(--accent-c);
}
.gift__item-actions .button.vgs-card__button {
    width: 214px;
    max-width: 100%;
    min-height: 44px;
    /* Match the 44px Figma button: base .button adds 1px border + 26px
       line-height (→ 47px); the design has no border and an 18/25 label. */
    border: 0;
    line-height: 25px;
    border-radius: 8px;
    padding: 9px 10px 10px 30px;
}

.vgs-card__button .button-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.vgs-card__button .button-icon svg {
    width: 14px;
    height: 14px;
}

/* -------- Virtual Gifts Story — detail modal (Figma 7326:241031) -------- */
.vgift-story-modal {
    max-width: 600px;
}

/* Figma modal padding is a flat 30px inset (site default is 40/30). */
.vgift-story-modal .modal__content:not(.modal-content--columns):not(.modal-content--video):not(.modal__content-gift-columns):not(.modal-content--badside) {
    padding: 30px;
}

.vgift-story__title {
    margin: 0;
    text-align: left;
}

.vgift-story {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.vgift-story__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.vgift-story__media {
    position: relative;
    width: 461px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    background: var(--vgift-media-bg, #f4f4fa);
    align-self: center;
}

.vgift-story__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vgift-story__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.vgift-story__name {
    margin: 0;
    font-weight: 700;
    font-size: 30px;
    line-height: 42px;
    text-transform: uppercase;
    color: #1D1D1D;
}

.vgift-story__price {
    margin: 0;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    color: #1D1D1D;
}

.vgift-story__wishes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vgift-story__subtitle {
    margin: 0;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.4;
    color: #000;
}

.vgift-story__subtitle--sm {
    font-size: 22px;
    line-height: 33px;
    text-transform: uppercase;
    color: #1D1D1D;
}

.vgift-story__wishes-text {
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: #1D1D1D;
    word-break: break-word;
}

.vgift-story__recipient {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vgift-story__recipient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.vgift-story__recipient-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vgift-story__recipient-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.vgift-story__recipient-avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}
.vgift-story__recipient-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vgift-story__recipient-name {
    font-weight: 800;
    font-size: 22px;
    line-height: 33px;
    color: #1D1D1D;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vgift-story__recipient-name:hover,
.vgift-story__recipient-name:focus {
    color: var(--accent-c, #F02852);
}

.vgift-story__recipient-id {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--vgift-media-bg, #f4f4fa);
    border: 1px solid #e5e5ec;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    text-transform: uppercase;
    color: #1D1D1D;
    white-space: nowrap;
}

.vgift-story__date {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #797979;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.vgift-story__date-day {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vgift-story__date svg {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    /* title -> body gap tightens to 20 (desktop 30) */
    .vgift-story {
        gap: 20px;
    }
    /* section title keeps 22px here (base .modal__title drops to 18) */
    .vgift-story__title {
        font-size: 22px;
        line-height: 1.5;
    }
    /* media -> info gap tightens to 24 (desktop 40) */
    .vgift-story__body {
        gap: 24px;
    }
    /* Detail sheet on mobile: full width, top-anchored, height = content,
       square corners (Figma 7326:241398 — Form sits at 0,0, 360 wide). */
    [id^="vGiftStoryModal"] .hystmodal__wrap,
    [id^="vGiftStoryModal"] .modal__wrapper {
        justify-content: flex-start;
        min-height: 100%;
    }
    .vgift-story-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    /* Figma mobile inset: 15 sides, 56 top (clears close), 30 bottom */
    .vgift-story-modal .modal__content:not(.modal-content--columns):not(.modal-content--video):not(.modal__content-gift-columns):not(.modal-content--badside) {
        border-radius: 0;
        padding: 56px 15px 30px;
    }
    /* recipient: name + ID stack vertically (desktop is a 20px-gap row) */
    .vgift-story__recipient-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .vgift-story__recipient-name {
        max-width: 115px;
        font-size: 18px;
        line-height: 24px;
        white-space: normal;
        overflow: visible;
    }
}

/* -------- success modal — pixel-matched to Figma 7296:258152 (1240 x 623.61) -------- */
/* Modal card uses a 30px inset (not the site default 40/30). */
#vGiftSuccessModal .modal__content {
    padding: 30px;
}

/* Reserve the empty header row (33.61px) + the 30px gap below it. */
.vgift-success {
    padding-top: 63.61px;
}

/* Content area: 500px tall region, contents vertically centred. */
.vgift-success__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    min-height: 500px;
    text-align: center;
}

.vgift-success__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 123px;
    height: 123px;
    border-radius: 50%;
    background: #72B800;
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    flex: 0 0 auto;
}

.vgift-success__check {
    display: block;
    width: 99px;
    height: auto;
}

.vgift-success__text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 984px;
    max-width: 100%;
    color: #1D1D1D;
}

.vgift-success__title {
    margin: 0;
    font-weight: 800;
    font-size: 42px;
    line-height: 54.6px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #1D1D1D;
}

.vgift-success__text {
    margin: 0;
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #1D1D1D;
}

.vgift-success__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 51px;
    padding: 0 40px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
}

/* -------- responsive -------- */
@media (max-width: 1199px) {
    .vgift__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px) {
    .vgift__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    /* "Virtual Gifts" CTA — mobile frame (Figma 7353:246311): smaller title,
       full-width button, tighter gap. */
    .vgift-cta {
        gap: 20px;
    }
    .vgift-cta__title {
        font-weight: 800;
        font-size: 18px;
        line-height: 24px;
    }
    .vgift-cta__button {
        width: 100%;
    }
    /* received slider — mobile: smaller arrows, 157px cards, 2-up grid */
    .vgift-arrow {
        width: 35px;
        height: 35px;
    }
    /* mobile: 2 fluid columns x 2 rows (15px columns, 20px rows) */
    .vgift-received__list {
        --vg-cols: 2;
        --vg-col-gap: 15px;
        --vg-row-gap: 20px;
        grid-template-rows: repeat(2, auto);
    }
    .vgift-received__name {
        font-size: 18px;
        line-height: 27px;
    }

    /* The main gift picker fills the viewport edge-to-edge, anchored to the top. */
    #vGiftModal .hystmodal__wrap,
    #vGiftModal .modal__wrapper {
        justify-content: flex-start;
        min-height: 100%;
    }
    #vGiftModal .vgift-modal {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        margin: 0;
        display: flex;
    }
    #vGiftModal .modal__content {
        flex: 1 1 auto;
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        /* Figma 7277:250336 — 56 top (clears close), 15 sides, 30 bottom. */
        padding: 56px 15px 30px;
    }
    /* Keep the title clear of the top-right close button. */
    .vgift__header {
        padding-right: 34px;
        margin-bottom: 22px;
    }
    .vgift__categories {
        grid-template-columns: 1fr;
    }
    /* Figma 7277:253744 — category gaps tighten to 16 on mobile
       (image -> title and description -> button). */
    .vgift__category-media {
        margin-bottom: 16px;
    }
    .vgift__category-desc {
        margin-bottom: 16px;
    }
    .vgift__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vgift__confirm {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .vgift__confirm-media {
        max-width: 320px;
        margin: 0 auto;
    }
    .vgift__confirm-body .vgift__send {
        margin-top: 20px;
    }
    .vgift__card-name{
        font-size: 18px;
    }
    .vgift__card{
        padding: 10px;
    }
    .vgift__buy .button-icon{
        display: none;
    }
    .button--icon:not(.button--icon-left).vgift__buy{
        padding-inline: 15px;
        justify-content: center;
    }

    /* Success sheet — top-anchored, square corners, full width, fixed 560px height
       (not full-screen). Content is centred inside. */
    #vGiftSuccessModal .hystmodal__wrap,
    #vGiftSuccessModal .modal__wrapper {
        justify-content: flex-start;
        min-height: 100%;
    }
    #vGiftSuccessModal .vgift-modal {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    #vGiftSuccessModal .modal__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 560px;
        border-radius: 0;
        padding: 22px 15px 30px;
    }
    .vgift-success {
        padding-top: 0;
    }
    .vgift-success__body {
        min-height: auto;
        gap: 30px;
    }
    .vgift-success__badge {
        width: 100px;
        height: 100px;
    }
    .vgift-success__check {
        width: 80px;
    }
    .vgift-success__text-group {
        width: 100%;
    }
    .vgift-success__title {
        font-weight: 700;
        font-size: 30px;
        line-height: 42px;
    }
    .vgift-success__text {
        font-size: 18px;
        line-height: 1.5;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .vgift__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}