@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

img#gt-profile-photo {
    width: 90px;
    height: 97px;
}

/* Reset only within our component */
.gt-app *, .gt-app *::before, .gt-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.gt-app {
    font-family: 'Inter', sans-serif;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: clamp(8px, 2.5vw, 14px) 0 clamp(10px, 2.5vh, 24px); /* Removed massive bottom padding */
    overflow-y: auto; /* Fallback for vertical scroll */
    overflow-x: hidden; /* Prevent horizontal scrollbar on card swipe */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* Fullscreen responsive gradient background behind the app */
.gt-app::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: linear-gradient(180deg, #fff 0%, #ffe4ef 100%);
    z-index: -1;
    pointer-events: none;
}

/* ── TITLE ── */
.gt-title {
    text-align: center;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: clamp(4px, 1.5vw, 8px);
    padding: 0 12px;
}

/* ── CAROUSEL ── */
.gt-carousel-outer {
    width: 100%;
    overflow: hidden;
    padding: clamp(4px, 1.5vw, 8px) 0;
}

/* The 5-slot flex track */
.gt-carousel-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

/* Each avatar slot — always exactly 1/5 of the track */
.gt-avatar-slot {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.4s ease, filter 0.4s ease;
    transition: transform 0.4s ease, filter 0.4s ease;
    -webkit-filter: blur(1.5px) opacity(0.35);
    filter: blur(1.5px) opacity(0.35);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
}

.gt-avatar-slot.gt-slot-active {
    -webkit-filter: blur(0) opacity(1);
    filter: blur(0) opacity(1);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    z-index: 10;
}

.gt-avatar-ring {
    width: clamp(36px, 10vw, 52px);
    height: clamp(36px, 10vw, 52px);
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 2px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: border-color 0.4s, box-shadow 0.4s;
    transition: border-color 0.4s, box-shadow 0.4s;
}

.gt-avatar-slot.gt-slot-active .gt-avatar-ring {
    border-color: #ff2d78;
    box-shadow: 0 0 0 3px rgba(255,45,120,0.2);
}

.gt-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.gt-slide-name {
    font-size: clamp(12px, 3.5vw, 16px);
    font-weight: 800;
    color: transparent;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
    min-height: 17px;
    white-space: nowrap;
}

.gt-avatar-slot.gt-slot-active .gt-slide-name {
    color: #ff2d78;
    font-size: clamp(14px, 4.5vw, 19px);
}

/* ── PROFILE CARD ── */
.gt-profile-card {
    background: #fff;
    border-radius: clamp(12px, 3vw, 16px);
    margin: 0 clamp(8px, 2.5vw, 12px);
    padding: clamp(10px, 2.5vw, 14px) clamp(8px, 2.5vw, 12px);
    box-shadow: 0 4px 18px rgba(255,45,120,0.08);
    border: 1.5px solid rgba(255,45,120,0.12);
    overflow: hidden;
    position: relative; /* needed for overlay */
    /* card is just as tall as its content — no forced stretch */
}

/* ── ANIMATION WRAPPER ── */
.gt-card-content {
    /* no forced flex-grow, card sizes to content */
}

/* ── PHOTO OVERLAY (click profile photo to expand) ── */
.gt-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 5, 18, 0.93);
    border-radius: clamp(12px, 3vw, 16px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.gt-photo-overlay.gt-overlay-active {
    opacity: 1;
    pointer-events: all;
}

.gt-overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: clamp(10px, 2.5vw, 14px);
    object-fit: cover;
    object-position: center top;
    display: block;
    -webkit-transform: scale(0.94);
    transform: scale(0.94);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(.25,.8,.25,1);
    transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
}
.gt-photo-overlay.gt-overlay-active .gt-overlay-img {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.gt-overlay-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100; /* float above the photo */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    -webkit-transition: background 0.2s, -webkit-transform 0.2s;
    transition: background 0.2s, transform 0.2s;
}
.gt-overlay-close:hover {
    background: rgba(255,45,120,0.6);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* profile photo shows pointer so user knows it's clickable */
.gt-profile-photo { cursor: pointer; }

@-webkit-keyframes gt-slide-in-right {
    from { opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); }
    to   { opacity: 1; -webkit-transform: translateX(0);    transform: translateX(0); }
}
@keyframes gt-slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@-webkit-keyframes gt-slide-in-left {
    from { opacity: 0; -webkit-transform: translateX(-40px); transform: translateX(-40px); }
    to   { opacity: 1; -webkit-transform: translateX(0);     transform: translateX(0); }
}
@keyframes gt-slide-in-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.gt-card-content.anim-next {
    -webkit-animation: gt-slide-in-right 0.32s cubic-bezier(.25,.8,.25,1) both;
    animation: gt-slide-in-right 0.32s cubic-bezier(.25,.8,.25,1) both;
}
.gt-card-content.anim-prev {
    -webkit-animation: gt-slide-in-left 0.32s cubic-bezier(.25,.8,.25,1) both;
    animation: gt-slide-in-left 0.32s cubic-bezier(.25,.8,.25,1) both;
}

/* ── CARD INNER ── */
.gt-card-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: clamp(8px, 2.5vw, 12px);
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.gt-card-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* CIRCULAR profile photo */
.gt-profile-photo {
    width: clamp(72px, 22vw, 108px);
    height: clamp(72px, 22vw, 108px);
    border-radius: 50% !important;
    object-fit: cover;
    object-position: center top;
    border: 3px solid #ffd0e5;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    display: block;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.gt-chat-btn {
    background: #2d2d2d;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: clamp(5px, 1.5vw, 8px) clamp(10px, 3vw, 16px);
    font-size: clamp(10px, 2.5vw, 12px);
    font-weight: 600;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    white-space: nowrap;
}
.gt-chat-btn:hover { background: #ff2d78; }
.gt-chat-btn svg { width: 11px; height: 11px; fill: #fff; }

/* Right: scrollable tags + diamond scrollbar */
.gt-card-right-wrap {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
}

.gt-card-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(4px, 1.2vw, 6px);
    max-height: clamp(110px, 38vw, 152px);
    overflow-y: auto;
    scrollbar-width: none;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
.gt-card-right::-webkit-scrollbar { display: none; }

.gt-tag {
    background: #f5f5f5;
    border-radius: 8px;
    padding: clamp(5px, 1.5vw, 8px) clamp(8px, 2.5vw, 12px);
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 500;
    color: #333;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.gt-tag.highlight {
    background: #ffe0ee;
    color: #cc1158;
    font-weight: 700;
}

/* Diamond scrollbar */
.gt-scrollbar {
    width: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.gt-scrollbar-track {
    width: 4px;
    height: 100%;
    background: #f0d0dd;
    border-radius: 4px;
    position: relative;
    overflow: visible;
    cursor: pointer;
}
.gt-scrollbar-thumb {
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: #ff2d78;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(255,45,120,0.4);
    -webkit-transition: top 0.08s linear;
    transition: top 0.08s linear;
    margin-left: -1px;
    cursor: pointer;
    -ms-touch-action: none;
    touch-action: none;
}

/* ── DIVIDER inside card ── */
.gt-card-divider {
    height: 1px;
    background: rgba(255,45,120,0.1);
    margin: clamp(8px, 2.5vw, 12px) 0;
}

/* ── WHY CHOOSE ME — now inside card ── */
.gt-why-title {
    font-size: clamp(11px, 3.2vw, 14px);
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: clamp(5px, 1.5vw, 8px);
}
.gt-why-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: clamp(4px, 1.2vw, 6px);
}
.gt-why-item {
    background: #f0f0f0;
    border-radius: 50px;
    padding: clamp(7px, 2vw, 10px) clamp(12px, 3.5vw, 16px);
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 500;
    color: #333;
    text-align: center;
    font-family: 'Inter', sans-serif;
}
.gt-why-item.dark {
    background: #2d2d2d;
    color: #fff;
}

/* ── BOTTOM NAV — floating fixed, centered above WP bottom nav ── */
.gt-bottom-nav {
    position: fixed;
    bottom: 90px; /* sits above WordPress bottom nav bar */
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: clamp(14px, 5vw, 24px);
    /* glassmorphism pill */
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 50px;
    padding: 10px 28px;
    box-shadow: 0 8px 32px rgba(255, 45, 120, 0.22), 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid rgba(255, 45, 120, 0.15);
    /* prevent it stretching full width */
    width: auto;
    white-space: nowrap;
}
.gt-nav-arrow {
    width: clamp(40px, 11vw, 50px);
    height: clamp(40px, 11vw, 50px);
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.2s;
    padding: 0;
}
.gt-nav-arrow:active {
    background: rgba(0, 0, 0, 0.1) !important; /* Pops gray circle on click */
}

.gt-nav-prev, .gt-nav-next {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.gt-nav-prev:hover, .gt-nav-next:hover { 
    transform: scale(1.1); 
}
.gt-nav-prev svg, .gt-nav-next svg {
    width: 100%; 
    height: 100%; 
    fill: #5b5b5b; 
}

.gt-nav-heart {
    position: relative;
    width: clamp(66px, 18vw, 84px);
    height: clamp(66px, 18vw, 84px);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
    transition: transform 0.2s;
    padding: 0;
}
.gt-nav-heart:hover { transform: scale(1.05); }
.gt-heart-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    fill: #e862da; 
}


/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 375px) {
    .gt-avatar-ring { width: 34px; height: 34px; }
    .gt-profile-photo { width: 70px; height: 70px; }
    .gt-card-right { max-height: 105px; }
}
@media (max-width: 320px) {
    .gt-avatar-ring { width: 30px; height: 30px; }
    .gt-profile-photo { width: 62px; height: 62px; }
    .gt-card-right { max-height: 95px; }
    .gt-why-item { font-size: 9.5px; padding: 6px 10px; }
}
@media (min-width: 480px) {
    .gt-app { max-width: 480px; margin: 0 auto; }
}
/* ── FLOATING HEARTS animation ── */
@-webkit-keyframes gt-float-heart {
    0%   { opacity: 1; -webkit-transform: translate(0, 0) scale(1) rotate(0deg); transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { opacity: 0; -webkit-transform: translate(var(--dx), var(--dy)) scale(var(--ds)) rotate(var(--dr)); transform: translate(var(--dx), var(--dy)) scale(var(--ds)) rotate(var(--dr)); }
}
@keyframes gt-float-heart {
    0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--ds)) rotate(var(--dr)); }
}
.gt-floating-heart {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 22px;
    line-height: 1;
    -webkit-animation: gt-float-heart var(--dur, 1s) ease-out forwards;
    animation: gt-float-heart var(--dur, 1s) ease-out forwards;
}
/* Heart button pop on click */
.gt-nav-heart.gt-heart-pop {
    -webkit-animation: gt-heart-pop 0.35s cubic-bezier(.25,.8,.25,1) both;
    animation: gt-heart-pop 0.35s cubic-bezier(.25,.8,.25,1) both;
}
@-webkit-keyframes gt-heart-pop {
    0%   { -webkit-transform: scale(1);    transform: scale(1); }
    50%  { -webkit-transform: scale(1.4); transform: scale(1.4); }
    100% { -webkit-transform: scale(1);    transform: scale(1); }
}
@keyframes gt-heart-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ── CARD SWIPE ANIMATIONS (Tinder style, slow) ── */
@-webkit-keyframes gt-swipe-next {
    0%   { -webkit-transform: translateX(120px) rotate(6deg); opacity: 0; }
    100% { -webkit-transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes gt-swipe-next {
    0%   { transform: translateX(120px) rotate(6deg); opacity: 0; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@-webkit-keyframes gt-swipe-prev {
    0%   { -webkit-transform: translateX(-120px) rotate(-6deg); opacity: 0; }
    100% { -webkit-transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes gt-swipe-prev {
    0%   { transform: translateX(-120px) rotate(-6deg); opacity: 0; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.anim-next {
    -webkit-animation: gt-swipe-next 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    animation: gt-swipe-next 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.anim-prev {
    -webkit-animation: gt-swipe-prev 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    animation: gt-swipe-prev 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

/* ════════════════════════════════════════════════════
   CHAT MODAL
════════════════════════════════════════════════════ */
.gt-modal-overlay {
    font-family: 'Inter', sans-serif;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}
.gt-modal-overlay.gt-modal-active {
    opacity: 1;
    pointer-events: all;
}

.gt-modal-card {
    background: #ffe4ef;
    border-radius: 24px;
    width: 100%;
    max-width: 340px;
    padding: 28px 20px 20px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 14px;
    -webkit-transform: scale(0.88);
    transform: scale(0.88);
    -webkit-transition: -webkit-transform 0.28s cubic-bezier(.25,.8,.25,1);
    transition: transform 0.28s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 20px 60px rgba(255, 45, 120, 0.2);
}
.gt-modal-overlay.gt-modal-active .gt-modal-card {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* X close button */
.gt-modal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: 'Inter', sans-serif;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}
.gt-modal-x:hover { background: #ffe0ee; }

.gt-modal-avatar {
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top;
    border: 3px solid #ffd0e5 !important;
    box-shadow: 0 4px 14px rgba(255, 45, 120, 0.2);
    display: block;
}

/* Modal title */
.gt-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
}
.gt-modal-title span { color: #ff2d78; }

/* Contact rows container */
.gt-modal-contacts {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
}

/* Each contact card */
.gt-contact-card {
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* Icon box */
.gt-contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 22px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.gt-contact-icon.whatsapp { background: #e8f8ee; }
.gt-contact-icon.email    { background: #e8f4ff; }

/* Right side of contact card */
.gt-contact-right {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 6px;
}

/* Action button (green / cyan) */
.gt-contact-btn {
    border: none;
    border-radius: 50px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    text-align: center;
    font-family: 'Inter', sans-serif;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    text-decoration: none;
    display: block;
    width: 100%;
}
.gt-contact-btn:hover { opacity: 0.88; }
.gt-contact-btn.whatsapp { background: #25d366; }
.gt-contact-btn.email    { background: #38bdf8; }

/* Masked value + View row */
.gt-contact-value-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 8px;
}
.gt-contact-masked {
    font-size: 11px;
    color: #888;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.gt-contact-view {
    font-size: 11px;
    font-weight: 700;
    color: #ff2d78;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    text-decoration: underline;
    padding: 0;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.gt-contact-view:hover { color: #cc1158; }

/* Close button at bottom */
.gt-chat-modal-close-btn {
    width: 100%;
    padding: 12px;
    border-radius: 50px;
    background: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.gt-chat-modal-close-btn:hover { background: #ffe0ee; color: #ff2d78; }

/* ── LIKE MODAL ── */
.gt-like-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 5, 18, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}
.gt-like-modal-overlay.gt-active {
    opacity: 1;
    pointer-events: all;
}

.gt-like-modal {
    background: #ead5de;
    border-radius: 36px;
    padding: 30px 20px 20px;
    width: 100%;
    max-width: 330px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
    text-align: center;
    font-family: 'Inter', sans-serif;
}
.gt-like-modal-overlay.gt-active .gt-like-modal {
    transform: scale(1);
}

.gt-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(220, 100, 130, 0.3);
    font-size: 18px;
    font-weight: 800;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    transition: transform 0.2s;
}
.gt-modal-close:hover {
    transform: scale(1.05);
}

.gt-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #222;
    margin-top: 10px;
}
.gt-modal-subtitle {
    font-size: 13px;
    color: #555;
    margin-top: 6px;
    margin-bottom: 24px;
}
.gt-modal-subtitle strong {
    font-weight: 600;
    color: #333;
}

.gt-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 10px;
}

.gt-modal-cancel, .gt-modal-yes {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 12px 0;
    flex: 1;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    font-family: 'Inter', sans-serif;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gt-modal-cancel {
    color: #777;
}

.gt-modal-yes {
    color: #ff2d78;
}

.gt-modal-cancel:hover, .gt-modal-yes:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.gt-modal-info {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 16px 14px;
    font-size: 12px;
    color: #444;
    line-height: 1.5;
}
.gt-pink-text {
    color: #d84578;
    font-weight: 600;
}
.gt-daily-likes {
    margin-top: 14px;
    font-size: 11px;
    color: #666;
}
.gt-daily-likes strong {
    font-size: 13px;
    color: #333;
}
</style>


<!------------------------------------------------------------------------------->

<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --pink:#e8317a; --pink-light:#fce4ef; --pink-dark:#c01060;
  --bg:#eef6f3; --card:#fff; --text:#1c1c1e; --muted:#6b7280;
  --border:#ede8f0; --radius:20px;
  --shadow:0 4px 24px rgba(180,60,100,.10);
}
.gt3-wrap *,.gt3-wrap *::before,.gt3-wrap *::after{box-sizing:border-box;margin:0;padding:0;}
.gt3-wrap button{font-family:inherit;cursor:pointer;border:none;}

.gt3-wrap{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  min-height:100vh;
  padding-bottom:100px;
  max-width:580px;
  margin:0 auto;
  position:relative;
}

/* Header */
.gt3-header{
  background:#fff;text-align:center;
  padding:16px 20px 12px;
  position:sticky;top:0;z-index:60;
  box-shadow:0 1px 0 var(--border);
}
.gt3-logo{
  font-family:'Playfair Display',serif;
  font-size:1.55rem;font-weight:700;color:var(--text);
  display:inline-flex;align-items:center;gap:8px;
}

/* Base style for the image icon */
 .logo-icon-image {
    display: block;
    height: 1.1em; /* Scale based on font size */
    width: auto;   /* Keep aspect ratio */
}

/* Text styles (ensure it renders on its own line) */
.gt3-logo .logo-text-gift,
.gt3-logo .logo-text-tulip {
    display: block; /* Force each word onto a new line if desired, but we want horizontal */
}

/* Row-level positioning for the text */
.logo-text-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em; /* Create horizontal space between 'Gift' and 'Tulip' */
}

/* Subhead */
.gt3-subhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 8px;
}
.gt3-subhead-title{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;font-style:italic;font-weight:700;color:var(--text);
}
.gt3-filter-btn{
  background:#fff;
  display:flex;align-items:center;gap:5px;
  color:var(--muted);font-size:.8rem;font-weight:600;
  padding:7px 13px;border-radius:50px;
  border:1.5px solid #e5e7eb;
  transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.gt3-filter-btn:hover{border-color:var(--pink);color:var(--pink);}
.gt3-filter-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;}

/* Search */
.gt3-search-wrap{padding:0 18px 8px;}
.gt3-search{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid #e5e7eb;
  border-radius:50px;padding:9px 16px;
  transition:border-color .2s,box-shadow .2s;
}
.gt3-search:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-light);}
.gt3-search svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:#bbb;stroke-width:2;}
.gt3-search input{
  border:none;outline:none;background:none;
  font-size:.88rem;color:var(--text);width:100%;
  font-family:'DM Sans',sans-serif;
}
.gt3-search input::placeholder{color:#ccc;}

/* Count */
.gt3-count{
  padding:2px 18px 8px;
  font-size:.78rem;color:var(--muted);font-weight:500;
}

/* Cards */
.gt3-cards{padding:0 14px;}

/* Card */
.gt3-card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
  transition:transform .22s,box-shadow .22s;
  animation:gt3Fade .4s ease both;
}
.gt3-card:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(180,60,100,.15);}
@keyframes gt3Fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Card top: photo left, info right */
.gt3-card-top{
  display:grid;
  grid-template-columns:110px 1fr;
}

/* Photo */
.gt3-photo-col{
  position:relative;cursor:pointer;overflow:hidden;
  min-height:200px;
}
.gt3-photo-col img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform .35s ease;
}
.gt3-photo-col:hover img{transform:scale(1.07);}
.gt3-zoom-hint{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.42);color:#fff;
  border-radius:50%;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;opacity:0;transition:opacity .2s;pointer-events:none;
}
.gt3-photo-col:hover .gt3-zoom-hint{opacity:1;}

/* Info */
.gt3-info-col{
  padding:14px 14px 10px;
  display:flex;flex-direction:column;min-width:0;
}
.gt3-card-name{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-style:italic;font-weight:700;
  color:var(--text);margin-bottom:9px;line-height:1.25;
}
.gt3-detail-list{display:flex;flex-direction:column;gap:4px;flex:1;}
.gt3-detail-item{
  display:flex;align-items:flex-start;gap:5px;
  font-size:.8rem;color:#374151;line-height:1.45;
}
.gt3-d-icon{flex-shrink:0;font-size:.76rem;margin-top:1px;}

/* Show more */
.gt3-show-more{
  margin-top:8px;background:none;border:none;
  color:var(--pink);font-size:.78rem;font-weight:600;
  padding:0;text-align:left;display:flex;align-items:center;gap:4px;
}
.gt3-show-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;transition:transform .2s;}
.gt3-show-more.open svg{transform:rotate(180deg);}
.gt3-extra{display:none;margin-top:4px;}
.gt3-extra.open{display:flex;flex-direction:column;gap:4px;}

/* Qualities */
.gt3-qualities{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:4px 14px 10px;
}
.gt3-qual{
  background:var(--pink-light);color:var(--pink);
  border-radius:50px;padding:4px 12px;
  font-size:.73rem;font-weight:600;
  transition:background .18s,color .18s;cursor:default;
}
.gt3-qual:hover{background:var(--pink);color:#fff;}

/* Perks */
.gt3-perks{padding:0 14px 10px;display:flex;flex-direction:column;gap:8px;}
.gt3-perk{
  background:#f5f5f7;border-radius:50px;
  padding:10px 18px;font-size:.83rem;color:#333;
  text-align:center;transition:background .2s;
}
.gt3-perk:hover{background:#ebe8f0;}
.gt3-perk.pink{
  background:linear-gradient(135deg,#f472b6,#e8317a);
  color:#fff;font-weight:700;
  box-shadow:0 4px 16px rgba(232,49,122,.28);
}
.gt3-perk.pink:hover{background:linear-gradient(135deg,#e8317a,#c01060);}

/* Actions */
.gt3-actions{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:8px;padding:0 14px 14px;
}
.gt3-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:50px;border:1.5px solid #e5e7eb;
  background:#fff;font-size:.82rem;font-weight:600;
  color:var(--text);padding:10px 6px;
  transition:all .18s;white-space:nowrap;
}
.gt3-btn:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-light);}
.gt3-btn svg{width:15px;height:15px;flex-shrink:0;}
.gt3-btn.profile svg{fill:var(--pink);}
.gt3-btn.chat svg{fill:none;stroke:#555;stroke-width:2;}
.gt3-btn.chat:hover svg{stroke:var(--pink);}
.gt3-btn.like{
  background:linear-gradient(135deg,#f472b6,#e8317a);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(232,49,122,.28);
}
.gt3-btn.like:hover{background:linear-gradient(135deg,#e8317a,#c01060);transform:scale(1.04);}
.gt3-btn.like.liked{background:linear-gradient(135deg,#aaa,#777);box-shadow:none;}
.gt3-btn.like svg{fill:#fff;}

/* Bottom nav */
.gt3-bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:580px;
  background:#1c1c1e;
  display:grid;grid-template-columns:repeat(5,1fr);
  z-index:100;box-shadow:0 -2px 24px rgba(0,0,0,.28);
}
.gt3-ni{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:11px 4px 9px;color:#666;font-size:.65rem;letter-spacing:.3px;
  background:none;border:none;font-family:'DM Sans',sans-serif;font-weight:500;
  transition:color .15s;gap:3px;
}
.gt3-ni svg{width:20px;height:20px;}
.gt3-ni:hover{color:#fff;}
.gt3-ni.active{color:var(--pink);}

/* Overlays */
.gt3-overlay{
  display:none;position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.55);
  align-items:flex-end;justify-content:center;
  backdrop-filter:blur(3px);
}
.gt3-overlay.open{display:flex;}

/* Chat sheet */
.gt3-sheet{
  background:#fff;border-radius:24px 24px 0 0;
  width:100%;max-width:580px;
  padding:0 0 40px;
  animation:gt3Up .28s cubic-bezier(.2,.8,.4,1);
  max-height:88vh;overflow-y:auto;
}
@keyframes gt3Up{from{transform:translateY(80px);opacity:0}to{transform:none;opacity:1}}
.gt3-handle{width:36px;height:4px;border-radius:50px;background:#ddd;margin:12px auto 0;}
.gt3-sh-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px 14px;border-bottom:1px solid #f0f0f0;
}
.gt3-sh-avatar{
  width:54px;height:54px;border-radius:50%;object-fit:cover;
  border:2px solid var(--pink-light);flex-shrink:0;
}
.gt3-sh-name-el{
  font-family:'Playfair Display',serif;
  font-size:1.08rem;font-style:italic;font-weight:700;
}
.gt3-sh-sub{font-size:.78rem;color:var(--muted);margin-top:2px;}
.gt3-sh-x{
  margin-left:auto;background:#f5f5f5;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:#555;transition:background .15s;
}
.gt3-sh-x:hover{background:#eee;color:#000;}

.gt3-sh-body{padding:16px 20px 0;}
.gt3-ccard{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid #f0f0f0;border-radius:16px;
  padding:14px 16px;margin-bottom:12px;
  transition:border-color .2s,box-shadow .2s;
}
.gt3-ccard:hover{border-color:var(--pink);box-shadow:0 2px 14px rgba(232,49,122,.1);}
.gt3-cicon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.gt3-cicon.wa{background:#25D366;}
.gt3-cicon.em{background:#38bdf8;}
.gt3-cicon svg{width:24px;height:24px;}
.gt3-cright{flex:1;min-width:0;}
.gt3-cbtn{
  display:block;width:100%;
  background:linear-gradient(135deg,#f472b6,#e8317a);
  color:#fff;border:none;border-radius:50px;
  padding:9px 0;font-size:.82rem;font-weight:700;
  margin-bottom:7px;transition:opacity .15s;
  font-family:'DM Sans',sans-serif;
}
.gt3-cbtn:hover{opacity:.88;}
.gt3-cval{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.gt3-cmasked{font-size:.78rem;color:#aaa;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gt3-cview{
  background:none;border:1.5px solid var(--pink);color:var(--pink);
  border-radius:50px;padding:3px 13px;font-size:.73rem;font-weight:700;
  white-space:nowrap;font-family:'DM Sans',sans-serif;transition:all .15s;
}
.gt3-cview:hover{background:var(--pink);color:#fff;}
.gt3-sh-close{
  display:block;width:calc(100% - 40px);margin:16px 20px 0;
  background:#f5f5f7;border:none;border-radius:50px;
  padding:12px;font-size:.88rem;font-weight:600;color:#555;
  font-family:'DM Sans',sans-serif;transition:background .15s;
}
.gt3-sh-close:hover{background:#ebebeb;}

/* Like modal */
.gt3-like-ov{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.55);
  align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
.gt3-like-ov.open{display:flex !important ; z-index:9999999;}
.gt3-like-box{
  background:#fff;border-radius:22px;
  padding:28px 22px 22px;width:90%;max-width:340px;
  text-align:center;animation:gt3Pop .22s cubic-bezier(.2,.8,.4,1);
  position:relative;
}
@keyframes gt3Pop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.gt3-lclose{
  position:absolute;top:12px;right:12px;
  background:#f5f5f5;width:28px;height:28px;border-radius:50%;
  font-size:.8rem;color:#555;display:flex;align-items:center;justify-content:center;
  transition:background .15s;border:none;
}
.gt3-lclose:hover{background:#eee;color:#000;}
.gt3-like-box .lheart{font-size:2.2rem;margin-bottom:10px;}
.gt3-like-box h3{font-family:'Playfair Display',serif;font-size:1.15rem;margin-bottom:6px;}
.gt3-like-box p{font-size:.84rem;color:var(--muted);margin-bottom:18px;}
.gt3-like-box p strong{color:var(--text);}
.gt3-lacts{display:flex;gap:10px;}
.gt3-lno,.gt3-lyes{
  flex:1;border:none;border-radius:50px;
  padding:12px 0;font-size:.88rem;font-weight:700;
  font-family:'DM Sans',sans-serif;transition:all .15s;
}
.gt3-lno{background:#f5f5f7;color:#555;}
.gt3-lno:hover{background:#ebebeb;}
.gt3-lyes{background:linear-gradient(135deg,#f472b6,#e8317a);color:#fff;box-shadow:0 4px 14px rgba(232,49,122,.28);}
.gt3-lyes:hover{opacity:.88;}
.gt3-linfo{margin-top:14px;font-size:.76rem;color:#aaa;line-height:1.55;}
.gt3-linfo .pk{color:var(--pink);font-weight:700;}
.gt3-ldaily{
  margin-top:10px;font-size:.78rem;color:var(--muted);
  background:var(--pink-light);border-radius:50px;
  display:inline-block;padding:5px 16px;
}

/* Lightbox */
.gt3-lb{
  display:none;position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.92);
  align-items:center;justify-content:center;
  backdrop-filter:blur(5px);
}
.gt3-lb.open{display:flex;}
.gt3-lb img{
  max-width:92%;max-height:88vh;border-radius:14px;
  object-fit:contain;animation:gt3Zoom .2s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
@keyframes gt3Zoom{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.gt3-lb-x{
  position:absolute;top:18px;right:18px;
  background:rgba(255,255,255,.15);border:none;color:#fff;
  width:38px;height:38px;border-radius:50%;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:background .15s;
}
.gt3-lb-x:hover{background:rgba(255,255,255,.28);}

/* Floating hearts */
.gt3-fh{
  position:fixed;pointer-events:none;font-size:1.6rem;z-index:9999;
  animation:gt3HF var(--dur,.9s) ease forwards;
}
@keyframes gt3HF{
  0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg);}
  100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-120px)) scale(var(--ds,1)) rotate(var(--dr,0deg));}
}

/* Skeleton */
.gt3-skel{background:#fff;border-radius:var(--radius);margin-bottom:16px;overflow:hidden;}
.gt3-skel-top{display:grid;grid-template-columns:110px 1fr;min-height:200px;}
.gt3-skel-img,.gt3-skel-line{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;}
.gt3-skel-body{padding:14px;display:flex;flex-direction:column;gap:10px;}
.gt3-skel-line{height:11px;border-radius:6px;}
.w80{width:80%}.w60{width:60%}.w70{width:70%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ═══════════════════════════════════════
   PROFILE MODAL — Full detail popup
═══════════════════════════════════════ */
.gt3-profile-ov{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.65);
  align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  padding:16px;
}
.gt3-profile-ov.open{display:flex;animation:gt3OvIn .25s ease;}
@keyframes gt3OvIn{from{opacity:0}to{opacity:1}}

.gt3-profile-modal{
  background:#fff;
  border-radius:28px;
  width:100%;max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  position:relative;
  animation:gt3ModalIn .32s cubic-bezier(.16,1,.3,1);
  scrollbar-width:none;
}
.gt3-profile-modal::-webkit-scrollbar{display:none;}
@keyframes gt3ModalIn{
  from{opacity:0;transform:translateY(40px) scale(.94);}
  to{opacity:1;transform:none;}
}

/* Modal hero photo */
.gt3-pm-hero{
  position:relative;
  width:100%;height:320px;overflow:hidden;
  border-radius:28px 28px 0 0;
  flex-shrink:0;
}
.gt3-pm-hero img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;transition:transform 8s ease;
}
.gt3-pm-hero:hover img{transform:scale(1.04);}

/* Gradient overlay on hero */
.gt3-pm-hero-grad{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

/* Name + age over hero */
.gt3-pm-hero-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:20px 22px 18px;
  color:#fff;
}
.gt3-pm-hero-name{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;font-style:italic;font-weight:700;
  line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.3);
}
.gt3-pm-hero-age{
  font-size:.88rem;font-weight:500;
  opacity:.88;margin-top:3px;
}

/* Close button */
.gt3-pm-close{
  position:absolute;top:14px;right:14px;z-index:10;
  background:rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;width:36px;height:36px;border-radius:50%;
  font-size:.85rem;display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .18s;
}
.gt3-pm-close:hover{background:rgba(255,255,255,.38);transform:scale(1.08);}

/* Navigation arrows (prev/next) */
.gt3-pm-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.3);
  color:#fff;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;transition:background .18s;z-index:10;
  /* arrows hidden by default — shown via JS */
}
.gt3-pm-nav:hover{background:rgba(255,255,255,.32);}
.gt3-pm-prev{left:12px;}
.gt3-pm-next{right:12px;}

/* Modal body */
.gt3-pm-body{padding:20px 22px 28px; margin-bottom: 30px !important;}

/* Section title */
.gt3-pm-sec{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pink);
  margin:18px 0 10px;
}
.gt3-pm-sec:first-child{margin-top:0;}

/* Detail grid (2 columns) */
.gt3-pm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.gt3-pm-item{
  background:#fafafa;border-radius:14px;
  padding:10px 12px;
  display:flex;align-items:center;gap:8px;
  transition:background .15s;
}
.gt3-pm-item:hover{background:var(--pink-light);}
.gt3-pm-item-icon{font-size:1rem;flex-shrink:0;}
.gt3-pm-item-text{
  display:flex;flex-direction:column;min-width:0;
}
.gt3-pm-item-label{
  font-size:.65rem;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gt3-pm-item-val{
  font-size:.82rem;font-weight:600;color:var(--text);
  line-height:1.3;word-break:break-word;
}

/* Full-width detail item */
.gt3-pm-item.full{grid-column:1/-1;}

/* Qualities pills */
.gt3-pm-quals{display:flex;flex-wrap:wrap;gap:7px;}
.gt3-pm-qual{
  background:var(--pink-light);color:var(--pink);
  border-radius:50px;padding:6px 14px;
  font-size:.78rem;font-weight:700;
  letter-spacing:.02em;
}

/* Perks */
.gt3-pm-perks{display:flex;flex-direction:column;gap:8px;}
.gt3-pm-perk{
  background:#f5f5f7;border-radius:50px;
  padding:11px 18px;font-size:.84rem;color:#333;
  text-align:center;display:flex;align-items:center;justify-content:center;gap:7px;
}
.gt3-pm-perk.pink{
  background:linear-gradient(135deg,#f472b6,#e8317a);
  color:#fff;font-weight:700;
  box-shadow:0 4px 16px rgba(232,49,122,.28);
}

/* Modal action buttons */
.gt3-pm-actions{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin-top:22px;
}
.gt3-pm-act{
  border-radius:50px;padding:13px 0;
  font-size:.88rem;font-weight:700;
  font-family:'DM Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .18s;
}
.gt3-pm-act.chat{
  background:#f5f5f7;color:#333;border:none;
}
.gt3-pm-act.chat:hover{background:#ebe8f0;}
.gt3-pm-act.like-btn{
  background:linear-gradient(135deg,#f472b6,#e8317a);
  color:#fff;border:none;
  box-shadow:0 4px 16px rgba(232,49,122,.28);
}
.gt3-pm-act.like-btn:hover{opacity:.88;transform:scale(1.02);}
.gt3-pm-act.like-btn.liked{
  background:linear-gradient(135deg,#aaa,#777);
  box-shadow:none;
}

/* Responsive */
@media(max-width:400px){
  .gt3-card-name{font-size:1rem;}
  .gt3-detail-item{font-size:.75rem;}
  .gt3-btn{font-size:.75rem;padding:9px 4px;}
  .gt3-actions{gap:6px;}
  .gt3-card-top{grid-template-columns:95px 1fr;}
  .gt3-photo-col{min-height:170px;}
  .gt3-pm-hero{height:260px;}
  .gt3-pm-grid{grid-template-columns:1fr;}
}
@media(min-width:580px){
  .gt3-wrap{border-radius:16px;margin:24px auto;overflow:hidden;}
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --pink:#e8317a; --pink-light:#fce4ef; --pink-dark:#c01060;
  --bg:#eef6f3; --card:#fff; --text:#1c1c1e; --muted:#6b7280;
  --border:#ede8f0; --radius:20px;
  --shadow:0 4px 24px rgba(180,60,100,.10);
}
.gt3-wrap*,.gt3-wrap*::before,.gt3-wrap*::after{box-sizing:border-box;margin:0;padding:0;}
.gt3-wrap button{font-family:inherit;cursor:pointer;border:none;}
.gt3-wrap{
  font-family:'DM Sans',sans-serif;background:var(--bg);
  min-height:100vh;padding-bottom:100px;max-width:580px;margin:0 auto;position:relative;
}

/* Header */
.gt3-header{
  background:#fff;text-align:center;padding:16px 20px 12px;
  position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--border);
}
.gt3-logo{
  font-family:'Playfair Display',serif;font-size:1.55rem;font-weight:700;color:var(--text);
  display:inline-flex;align-items:center;gap:8px;
}
/* Base style for the image icon */
 .logo-icon-image {
    display: block;
    height: 1.1em; /* Scale based on font size */
    width: auto;   /* Keep aspect ratio */
}

/* Text styles (ensure it renders on its own line) */
.gt3-logo .logo-text-gift,
.gt3-logo .logo-text-tulip {
    display: block; /* Force each word onto a new line if desired, but we want horizontal */
}
/* Subhead */
.gt3-subhead{
  display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px;
}
.gt3-subhead-title{
  font-family:'Playfair Display',serif;font-size:1.5rem;font-style:italic;font-weight:700;color:var(--text);
}
.gt3-filter-btn{
  background:#fff;display:flex;align-items:center;gap:6px;
  color:var(--muted);font-size:.82rem;font-weight:600;
  padding:8px 14px;border-radius:50px;border:1.5px solid #e5e7eb;
  transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.06);position:relative;
}
.gt3-filter-btn:hover{border-color:var(--pink);color:var(--pink);}
.gt3-filter-btn.has-filters{border-color:var(--pink);color:var(--pink);background:var(--pink-light);}
.gt3-filter-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;}
.gt3-filter-badge{
  position:absolute;top:-6px;right:-6px;
  background:var(--pink);color:#fff;border-radius:50%;
  width:18px;height:18px;font-size:.65rem;font-weight:700;
  display:none;align-items:center;justify-content:center;
}
.gt3-filter-badge.show{display:flex;}

/* Search */
.gt3-search-wrap{padding:0 18px 8px;}
.gt3-search{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid #e5e7eb;
  border-radius:50px;padding:9px 16px;transition:border-color .2s,box-shadow .2s;
}
.gt3-search:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-light);}
.gt3-search svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:#bbb;stroke-width:2;}
.gt3-search input{
  border:none;outline:none;background:none;
  font-size:.88rem;color:var(--text);width:100%;font-family:'DM Sans',sans-serif;
}
.gt3-search input::placeholder{color:#ccc;}

/* Count */
.gt3-count{padding:2px 18px 8px;font-size:.78rem;color:var(--muted);font-weight:500;}

/* ══════════════════════════════════════════════════
   FILTER DRAWER
══════════════════════════════════════════════════ */
.gt3-filter-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,100vw);
  background:#fff;z-index:200;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.4,1);
  box-shadow:-6px 0 40px rgba(0,0,0,.14);
  display:flex;flex-direction:column;overflow:hidden;
      z-index: 99999 !important;
}
.gt3-filter-drawer.open{transform:translateX(0);}

.gt3-fd-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.gt3-fd-title{
  font-family:'Playfair Display',serif;font-size:1.15rem;font-style:italic;font-weight:700;color:var(--text);
}
.gt3-fd-close{
  background:#f5f5f5;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#555;
  transition:background .15s;
}
.gt3-fd-close:hover{background:#eee;color:#000;}

.gt3-fd-body{flex:1;overflow-y:auto;padding:20px;}
.gt3-fd-body::-webkit-scrollbar{width:4px;}
.gt3-fd-body::-webkit-scrollbar-thumb{background:#e0d8ec;border-radius:4px;}

/* Filter Section */
.gt3-fs{margin-bottom:24px;}
.gt3-fs-label{
  font-size:.75rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:6px;
}
.gt3-fs-label span{font-size:.9rem;}

/* Age range slider */
.gt3-range-wrap{position:relative;padding:6px 0 20px;}
.gt3-range-track{
  position:relative;height:6px;background:#f0e4ea;border-radius:6px;margin:0 8px;
}
.gt3-range-fill{
  position:absolute;height:100%;background:linear-gradient(90deg,#f472b6,#e8317a);
  border-radius:6px;top:0;
}
.gt3-range-wrap input[type=range]{
  position:absolute;top:50%;transform:translateY(-50%);
  width:calc(100% + 16px);left:-8px;
  -webkit-appearance:none;appearance:none;
  background:transparent;pointer-events:none;margin:0;
}
.gt3-range-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:2.5px solid var(--pink);
  box-shadow:0 2px 8px rgba(232,49,122,.25);
  cursor:pointer;pointer-events:all;transition:transform .15s;
}
.gt3-range-wrap input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);}
.gt3-range-labels{
  display:flex;justify-content:space-between;
  font-size:.78rem;color:var(--muted);margin-top:8px;
}
.gt3-range-val{
  text-align:center;font-size:.88rem;font-weight:700;color:var(--pink);
  margin-bottom:6px;
}

/* Chip selects */
.gt3-chips{display:flex;flex-wrap:wrap;gap:7px;}
.gt3-chip{
  background:#f5f5f7;border:1.5px solid #e5e7eb;
  color:#555;border-radius:50px;padding:6px 14px;
  font-size:.8rem;font-weight:500;transition:all .18s;cursor:pointer;
}
.gt3-chip:hover{border-color:var(--pink);color:var(--pink);}
.gt3-chip.selected{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700;}

/* Allowance toggle */
.gt3-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.gt3-toggle-label{font-size:.85rem;color:var(--text);font-weight:500;}
.gt3-toggle{
  position:relative;width:44px;height:24px;flex-shrink:0;
}
.gt3-toggle input{opacity:0;width:0;height:0;position:absolute;}
.gt3-toggle-slider{
  position:absolute;inset:0;border-radius:50px;background:#e5e7eb;
  cursor:pointer;transition:background .2s;
}
.gt3-toggle-slider::before{
  content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.gt3-toggle input:checked+.gt3-toggle-slider{background:var(--pink);}
.gt3-toggle input:checked+.gt3-toggle-slider::before{transform:translateX(20px);}

/* Allowance amount slider (shown conditionally) */
.gt3-allowance-amt{
  margin-top:12px;display:none;
  background:var(--pink-light);border-radius:14px;padding:14px;
}
.gt3-allowance-amt.show{display:block;}
.gt3-allowance-val{
  font-size:.88rem;font-weight:700;color:var(--pink);text-align:center;margin-bottom:8px;
}

/* Footer */
.gt3-fd-footer{
  padding:16px 20px;border-top:1px solid var(--border);
  display:flex;gap:10px;flex-shrink:0;background:#fff;
}
.gt3-fd-reset{
  flex:1;background:#f5f5f7;border:none;border-radius:50px;
  padding:12px;font-size:.88rem;font-weight:600;color:#555;
  font-family:'DM Sans',sans-serif;transition:background .15s;
}
.gt3-fd-reset:hover{background:#ebebeb;}
.gt3-fd-apply{
  flex:2;background:linear-gradient(135deg,#f472b6,#e8317a);
  border:none;border-radius:50px;padding:12px;
  font-size:.88rem;font-weight:700;color:#fff;
  font-family:'DM Sans',sans-serif;transition:opacity .15s;
  box-shadow:0 4px 14px rgba(232,49,122,.28);
}
.gt3-fd-apply:hover{opacity:.88;}

/* Backdrop */
.gt3-fd-backdrop{
  display:none;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.4);
  backdrop-filter:blur(2px);
}
.gt3-fd-backdrop.open{display:block;}

/* Active filters row */
.gt3-active-filters{
  display:none;padding:0 18px 10px;
  flex-wrap:wrap;gap:6px;
}
.gt3-active-filters.show{display:flex;}
.gt3-af-chip{
  background:var(--pink-light);color:var(--pink);
  border-radius:50px;padding:4px 10px;font-size:.75rem;font-weight:600;
  display:flex;align-items:center;gap:5px;
}
.gt3-af-chip button{
  background:none;border:none;color:var(--pink);font-size:.75rem;
  padding:0;line-height:1;cursor:pointer;
}

/* Cards */
.gt3-cards{padding:0 14px;}
.gt3-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:16px;overflow:hidden;
  transition:transform .22s,box-shadow .22s;animation:gt3Fade .4s ease both;
}
.gt3-card:hover{transform:translateY(-3px);box-shadow:0 10px 36px rgba(180,60,100,.15);}
@keyframes gt3Fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.gt3-card-top{display:grid;grid-template-columns:110px 1fr;}
.gt3-photo-col{position:relative;cursor:pointer;overflow:hidden;min-height:200px;}
.gt3-photo-col img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .35s;}
.gt3-photo-col:hover img{transform:scale(1.07);}
.gt3-zoom-hint{
  position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.42);color:#fff;
  border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;opacity:0;transition:opacity .2s;pointer-events:none;
}
.gt3-photo-col:hover .gt3-zoom-hint{opacity:1;}
.gt3-info-col{padding:14px 14px 10px;display:flex;flex-direction:column;min-width:0;}
.gt3-card-name{
  font-family:'Playfair Display',serif;font-size:1.1rem;font-style:italic;font-weight:700;
  color:var(--text);margin-bottom:9px;line-height:1.25;
}
.gt3-detail-list{display:flex;flex-direction:column;gap:4px;flex:1;}
.gt3-detail-item{display:flex;align-items:flex-start;gap:5px;font-size:.8rem;color:#374151;line-height:1.45;}
.gt3-d-icon{flex-shrink:0;font-size:.76rem;margin-top:1px;}
.gt3-show-more{
  margin-top:8px;background:none;border:none;color:var(--pink);
  font-size:.78rem;font-weight:600;padding:0;text-align:left;
  display:flex;align-items:center;gap:4px;
}
.gt3-show-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;transition:transform .2s;}
.gt3-show-more.open svg{transform:rotate(180deg);}
.gt3-extra{display:none;margin-top:4px;}
.gt3-extra.open{display:flex;flex-direction:column;gap:4px;}
.gt3-qualities{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 10px;}
.gt3-qual{
  background:var(--pink-light);color:var(--pink);border-radius:50px;
  padding:4px 12px;font-size:.73rem;font-weight:600;transition:background .18s,color .18s;
}
.gt3-qual:hover{background:var(--pink);color:#fff;}
.gt3-perks{padding:0 14px 10px;display:flex;flex-direction:column;gap:8px;}
.gt3-perk{
  background:#f5f5f7;border-radius:50px;padding:10px 18px;
  font-size:.83rem;color:#333;text-align:center;transition:background .2s;
}
.gt3-perk.pink{
  background:linear-gradient(135deg,#f472b6,#e8317a);color:#fff;font-weight:700;
  box-shadow:0 4px 16px rgba(232,49,122,.28);
}
.gt3-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 14px 14px;}
.gt3-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:50px;border:1.5px solid #e5e7eb;background:#fff;
  font-size:.82rem;font-weight:600;color:var(--text);padding:10px 6px;
  transition:all .18s;white-space:nowrap;
}
.gt3-btn:hover{border-color:var(--pink);color:var(--pink);background:var(--pink-light);}
.gt3-btn svg{width:15px;height:15px;flex-shrink:0;}
.gt3-btn.profile svg{fill:var(--pink);}
.gt3-btn.chat svg{fill:none;stroke:#555;stroke-width:2;}
.gt3-btn.chat:hover svg{stroke:var(--pink);}
.gt3-btn.like{
  background:linear-gradient(135deg,#f472b6,#e8317a);border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(232,49,122,.28);
}
.gt3-btn.like:hover{background:linear-gradient(135deg,#e8317a,#c01060);transform:scale(1.04);}
.gt3-btn.like.liked{background:linear-gradient(135deg,#aaa,#777);box-shadow:none;}
.gt3-btn.like svg{fill:#fff;}

/* Tabs */
.gt3-tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin:0 0 4px;padding:0 18px;}
.gt3-tab{
  flex:1;text-align:center;padding:10px 0;font-size:.88rem;font-weight:600;
  background:none;border:none;color:#999;border-bottom:3px solid transparent;
  margin-bottom:-2px;transition:color .18s,border-color .18s;font-family:'DM Sans',sans-serif;
}
.gt3-tab.active{color:var(--pink);border-bottom-color:var(--pink);}

/* Like modals */
.gt3-like-ov{
  display:none;position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.55);align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
.gt3-like-ov.open{display:flex;}
.gt3-like-box{
  background:#fff;border-radius:22px;padding:28px 22px 22px;
  width:90%;max-width:340px;text-align:center;
  animation:gt3Pop .22s cubic-bezier(.2,.8,.4,1);position:relative;
}
@keyframes gt3Pop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.gt3-lclose{
  position:absolute;top:12px;right:12px;background:#f5f5f5;width:28px;height:28px;
  border-radius:50%;font-size:.8rem;color:#555;display:flex;align-items:center;justify-content:center;
}
.gt3-like-box .lheart{font-size:2.2rem;margin-bottom:10px;}
.gt3-like-box h3{font-family:'Playfair Display',serif;font-size:1.15rem;margin-bottom:6px;}
.gt3-like-box p{font-size:.84rem;color:var(--muted);margin-bottom:18px;}
.gt3-like-box p strong{color:var(--text);}
.gt3-lacts{display:flex;gap:10px;}
.gt3-lno,.gt3-lyes{
  flex:1;border:none;border-radius:50px;padding:12px 0;
  font-size:.88rem;font-weight:700;font-family:'DM Sans',sans-serif;transition:all .15s;
}
.gt3-lno{background:#f5f5f7;color:#555;}
.gt3-lyes{background:linear-gradient(135deg,#f472b6,#e8317a);color:#fff;box-shadow:0 4px 14px rgba(232,49,122,.28);}
.gt3-linfo{margin-top:14px;font-size:.76rem;color:#aaa;line-height:1.55;}
.gt3-linfo .pk{color:var(--pink);font-weight:700;}
.gt3-ldaily{margin-top:10px;font-size:.78rem;color:var(--muted);background:var(--pink-light);border-radius:50px;display:inline-block;padding:5px 16px;}

/* Chat sheet */
.gt3-overlay{
  display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);
  align-items:flex-end;justify-content:center;backdrop-filter:blur(3px);
}
.gt3-overlay.open{display:flex;}
.gt3-sheet{
  background:#fff;border-radius:24px 24px 0 0;width:100%;max-width:580px;
  padding:0 0 40px;animation:gt3Up .28s cubic-bezier(.2,.8,.4,1);max-height:88vh;overflow-y:auto;
}
@keyframes gt3Up{from{transform:translateY(80px);opacity:0}to{transform:none;opacity:1}}
.gt3-handle{width:36px;height:4px;border-radius:50px;background:#ddd;margin:12px auto 0;}
.gt3-sh-head{
  display:flex;align-items:center;gap:12px;padding:16px 20px 14px;border-bottom:1px solid #f0f0f0;
}
.gt3-sh-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--pink-light);flex-shrink:0;}
.gt3-sh-name-el{font-family:'Playfair Display',serif;font-size:1.08rem;font-style:italic;font-weight:700;}
.gt3-sh-sub{font-size:.78rem;color:var(--muted);margin-top:2px;}
.gt3-sh-x{
  margin-left:auto;background:#f5f5f5;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#555;transition:background .15s;
}
.gt3-sh-body{padding:16px 20px 0;}
.gt3-ccard{
  display:flex;align-items:center;gap:12px;border:1.5px solid #f0f0f0;border-radius:16px;
  padding:14px 16px;margin-bottom:12px;transition:border-color .2s,box-shadow .2s;
}
.gt3-ccard:hover{border-color:var(--pink);box-shadow:0 2px 14px rgba(232,49,122,.1);}
.gt3-cicon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gt3-cicon.wa{background:#25D366;}
.gt3-cicon.em{background:#38bdf8;}
.gt3-cicon svg{width:24px;height:24px;}
.gt3-cright{flex:1;min-width:0;}
.gt3-cbtn{
  display:block;width:100%;background:linear-gradient(135deg,#f472b6,#e8317a);
  color:#fff;border:none;border-radius:50px;padding:9px 0;font-size:.82rem;font-weight:700;
  margin-bottom:7px;transition:opacity .15s;font-family:'DM Sans',sans-serif;
}
.gt3-cbtn:hover{opacity:.88;}
.gt3-cval{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.gt3-cmasked{font-size:.78rem;color:#aaa;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gt3-cview{
  background:none;border:1.5px solid var(--pink);color:var(--pink);border-radius:50px;
  padding:3px 13px;font-size:.73rem;font-weight:700;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:all .15s;
}
.gt3-cview:hover{background:var(--pink);color:#fff;}
.gt3-sh-close{
  display:block;width:calc(100% - 40px);margin:16px 20px 0;background:#f5f5f7;
  border:none;border-radius:50px;padding:12px;font-size:.88rem;font-weight:600;color:#555;
  font-family:'DM Sans',sans-serif;transition:background .15s;
}

/* Lightbox */
.gt3-lb{
  display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.92);
  align-items:center;justify-content:center;backdrop-filter:blur(5px);
}
.gt3-lb.open{display:flex;}
.gt3-lb img{max-width:92%;max-height:88vh;border-radius:14px;object-fit:contain;animation:gt3Zoom .2s ease;}
@keyframes gt3Zoom{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.gt3-lb-x{
  position:absolute;top:18px;right:18px;background:rgba(255,255,255,.15);border:none;color:#fff;
  width:38px;height:38px;border-radius:50%;font-size:1rem;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:background .15s;
}

/* Floating hearts */
.gt3-fh{
  position:fixed;pointer-events:none;font-size:1.6rem;z-index:9999;
  animation:gt3HF var(--dur,.9s) ease forwards;
}
@keyframes gt3HF{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg);}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,-120px)) scale(var(--ds,1)) rotate(var(--dr,0deg));}}

/* Skeleton */
.gt3-skel{background:#fff;border-radius:var(--radius);margin-bottom:16px;overflow:hidden;}
.gt3-skel-top{display:grid;grid-template-columns:110px 1fr;min-height:200px;}
.gt3-skel-img,.gt3-skel-line{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;}
.gt3-skel-body{padding:14px;display:flex;flex-direction:column;gap:10px;}
.gt3-skel-line{height:11px;border-radius:6px;}
.w80{width:80%}.w60{width:60%}.w70{width:70%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Empty state */
.gt3-empty{text-align:center;padding:60px 20px;color:#999;}
.gt3-empty-icon{font-size:2.8rem;display:block;margin-bottom:12px;}
.gt3-empty h4{font-family:'Playfair Display',serif;font-size:1.1rem;color:#555;margin-bottom:6px;}
.gt3-empty p{font-size:.84rem;line-height:1.6;}

/* Responsive */
@media(max-width:400px){
  .gt3-card-name{font-size:1rem;}
  .gt3-detail-item{font-size:.75rem;}
  .gt3-btn{font-size:.75rem;padding:9px 4px;}
  .gt3-actions{gap:6px;}
  .gt3-card-top{grid-template-columns:95px 1fr;}
  .gt3-photo-col{min-height:170px;}
}
@media(min-width:580px){
  .gt3-wrap{border-radius:16px;margin:24px auto;overflow:hidden;}
}
</style>

 <style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.gt-app *, .gt-app *::before, .gt-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.gt-app {
    font-family: 'Inter', sans-serif;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── TITLE ── */
.gt-title {
    text-align: center;
    font-size: clamp(20px, 6vw, 24px);
    font-weight: 400;
    color: #1a1a2e;
    padding: 16px 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.gt-title img {
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    object-fit: cover;
    transform: translateY(-2px);
}

/* ── CAROUSEL AREA ── */
.gt-carousel-outer {
    width: 100%;
    overflow: hidden;
    padding: clamp(4px, 1.5vw, 8px) 0 16px;
    background: #fff;
    flex-shrink: 0;
}
.gt-carousel-track {
    display: flex;
    align-items: center;
    width: 100%;
}
.gt-avatar-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: blur(1.5px) opacity(0.35);
    transform: scale(0.75);
}
.gt-avatar-slot.gt-slot-active {
    filter: blur(0) opacity(1);
    transform: scale(1.05);
    z-index: 10;
}
.gt-avatar-ring {
    width: clamp(36px, 10vw, 52px);
    height: clamp(36px, 10vw, 52px);
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 2px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s, box-shadow 0.4s;
}
.gt-avatar-slot.gt-slot-active .gt-avatar-ring {
    border-color: #ff2d78;
    box-shadow: 0 0 0 3px rgba(255,45,120,0.2);
}
.gt-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    display: block;
}

/* ── LOWER SECTION ── */
.gt-bottom-area {
    flex: 1;
    background: linear-gradient(180deg, #ef8cee 0%, #dd5ced 100%);
    padding: clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px) 90px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* keep card centered vertically */
}

/* The big white card */
.gt-status-card {
    background: #fff;
    border-radius: 24px;
    /* Removed flex: 1 so it acts like a smaller container fitting its content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 6vw, 40px) clamp(16px, 4vw, 24px);
    width: 100%;
    /* Soft shadow to separate it from the vibrant background */
    box-shadow: 0 10px 40px rgba(0,0,0,0.06); 
}

/* Silhouette Hair Illustration */
.gt-hair-illustration {
    width: 55%;
    min-width: 140px;
    max-width: 280px;
    height: auto;
    margin-bottom: clamp(16px, 4vw, 24px);
}

.gt-status-title {
    color: #cc11a0;
    font-size: clamp(16px, 5vw, 24px);
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
    text-align: center;
}

.gt-status-text {
    color: #666;
    font-size: clamp(12px, 3.8vw, 15px);
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (min-width: 480px) {
    .gt-app { max-width: 480px; margin: 0 auto; }
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.gt-chat-app *, .gt-chat-app *::before, .gt-chat-app *::after,
.gt-modal-overlay *, .gt-modal-overlay *::before, .gt-modal-overlay *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.gt-chat-app {
    font-family: 'Inter', sans-serif;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: 100vh;
    height: 100dvh;
    padding: clamp(12px, 3vw, 20px) 0 clamp(10px, 2.5vh, 24px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.gt-chat-app::before {
    content: '';
    position: fixed;
    top: 0; left: 50%; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: linear-gradient(180deg, #fff 0%, #ffe4ef 100%);
    z-index: -1;
    pointer-events: none;
    transform: translateX(-50%);
}

.gt-chat-logo {
    text-align: center;
    font-size: clamp(14px, 4vw, 18px);
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: clamp(4px, 1.5vw, 8px);
    padding: 0 12px;
}

.gt-chat-heading {
    text-align: center;
    font-size: clamp(26px, 7vw, 36px);
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.5px;
    padding: clamp(10px, 3vw, 18px) 16px clamp(6px, 2vw, 12px);
}

.gt-chat-list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3vw, 14px);
    padding: 0 clamp(10px, 3vw, 16px);
}

.gt-chat-item {
    background: #fff;
    border-radius: clamp(14px, 4vw, 20px);
    border: 1.5px solid rgba(255, 45, 120, 0.1);
    box-shadow: 0 4px 18px rgba(255, 45, 120, 0.07);
    padding: clamp(10px, 3vw, 16px) clamp(12px, 3.5vw, 18px);
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 14px);
    transition: box-shadow 0.2s, transform 0.2s;
}
.gt-chat-item:hover {
    box-shadow: 0 8px 28px rgba(255, 45, 120, 0.14);
    transform: translateY(-1px);
}

.gt-chat-avatar-wrap { position: relative; flex-shrink: 0; }
.gt-chat-avatar {
    width: clamp(52px, 15vw, 68px);
    height: clamp(52px, 15vw, 68px);
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top;
    border: 3px solid #ffd0e5 !important;
    display: block;
}
.gt-online-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.gt-chat-info { flex: 1; min-width: 0; }
.gt-chat-name {
    font-size: clamp(14px, 4vw, 17px);
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gt-chat-sub {
    font-size: clamp(10px, 2.8vw, 12px);
    color: #888;
    margin-top: 2px;
}

.gt-chat-actions {
    display: flex;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    flex-shrink: 0;
}
.gt-btn-profile {
    background: transparent;
    border: 1.5px solid rgba(255, 45, 120, 0.35);
    color: #cc1158;
    border-radius: 50px;
    padding: clamp(6px, 1.8vw, 9px) clamp(10px, 3vw, 16px);
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s;
}
.gt-btn-profile:hover { background: #ffe0ee; border-color: #ff2d78; }

.gt-btn-chat {
    background: #22c55e;
    border: none;
    color: #fff;
    border-radius: 50px;
    padding: clamp(6px, 1.8vw, 9px) clamp(14px, 4vw, 20px);
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.32);
    transition: background 0.2s, transform 0.15s;
}
.gt-btn-chat:hover { background: #16a34a; transform: scale(1.04); }

.gt-chat-empty {
    text-align: center;
    color: #ccc;
    font-size: clamp(13px, 3.5vw, 15px);
    padding: 40px 20px;
    line-height: 1.7;
}
.gt-chat-empty-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; }

/* ── Modal ── */
.gt-modal-overlay {
    font-family: 'Inter', sans-serif;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.gt-modal-overlay.gt-modal-active {
    opacity: 1;
    pointer-events: all;
}
.gt-modal-card {
    background: #ffe4ef;
    border-radius: 24px;
    width: 100%;
    max-width: 340px;
    padding: 28px 20px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: scale(0.88);
    transition: transform 0.28s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 20px 60px rgba(255,45,120,0.2);
}
.gt-modal-overlay.gt-modal-active .gt-modal-card { transform: scale(1); }

.gt-modal-x {
    position: absolute;
    top: 14px; right: 14px;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background 0.2s;
}
.gt-modal-x:hover { background: #ffe0ee; }

.gt-modal-avatar {
    width: 72px; height: 72px;
    aspect-ratio: 1/1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center top;
    border: 3px solid #ffd0e5 !important;
    box-shadow: 0 4px 14px rgba(255,45,120,0.2);
    display: block;
}
.gt-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
}
.gt-modal-title span { color: #ff2d78; }

.gt-modal-contacts {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gt-contact-card {
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.gt-contact-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.gt-contact-icon.whatsapp { background: #e8f8ee; }
.gt-contact-icon.email    { background: #e8f4ff; }

.gt-contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gt-contact-btn {
    border: none;
    border-radius: 50px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
    display: block;
    width: 100%;
    text-align: center;
}
.gt-contact-btn:hover { opacity: 0.88; }
.gt-contact-btn.whatsapp { background: #25d366; }
.gt-contact-btn.email    { background: #38bdf8; }

.gt-contact-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.gt-contact-masked { font-size: 11px; color: #888; font-weight: 500; }
.gt-contact-view {
    font-size: 11px;
    font-weight: 700;
    color: #ff2d78;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    text-decoration: underline;
    padding: 0;
    transition: color 0.2s;
}
.gt-contact-view:hover { color: #cc1158; }

.gt-modal-close-btn {
    width: 100%;
    padding: 12px;
    border-radius: 50px;
    background: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.gt-modal-close-btn:hover { background: #ffe0ee; color: #ff2d78; }