/* =====================================================
   10Desires Popup — Styles
   ===================================================== */

.td-popup-root[hidden]{display:none !important}

.td-popup-root{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    animation:tdBackdropIn .3s ease-out both;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@keyframes tdBackdropIn{
    from{background:rgba(0,0,0,0);backdrop-filter:blur(0)}
    to{background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}
}

@media (min-width:768px){
    .td-popup-root{padding:28px}
}

.td-popup-card{
    position:relative;
    width:100%;
    max-width:460px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    background:linear-gradient(180deg,#1a1a20 0%,#121217 100%);
    color:#fff;
    border-radius:24px;
    padding:24px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
    animation:tdPopupIn .45s cubic-bezier(.2,.9,.3,1.2) both;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.15) transparent;
}
.td-popup-card::-webkit-scrollbar{width:6px}
.td-popup-card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

@keyframes tdPopupIn{
    from{opacity:0;transform:translateY(20px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Close button */
.td-popup-close{
    position:absolute;
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s,transform .2s;
}
.td-popup-close:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.td-popup-close svg{width:18px;height:18px}

/* Bookmark icon */
.td-popup-icon{
    width:52px;
    height:52px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-bottom:32px;
}
.td-popup-icon svg{width:22px;height:22px}

/* NOTICE label */
.td-popup-notice{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    font-size:12px;
    letter-spacing:.12em;
    color:#9a9aa3;
    font-weight:600;
}
.td-popup-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff5757;
    box-shadow:0 0 0 4px rgba(255,87,87,.15);
    animation:tdPulse 2s ease-in-out infinite;
}
@keyframes tdPulse{
    0%,100%{box-shadow:0 0 0 4px rgba(255,87,87,.15)}
    50%{box-shadow:0 0 0 8px rgba(255,87,87,.05)}
}

/* Heading */
.td-popup-heading{
    font-size:30px;
    line-height:1.15;
    font-weight:700;
    margin:0 0 20px;
    letter-spacing:-.01em;
    color:#fff;
}
.td-popup-accent{
    font-style:italic;
    font-weight:700;
    background:linear-gradient(90deg,#ff6b3d 0%,#ffb547 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

/* CTA Button */
.td-popup-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px;
    background:linear-gradient(135deg,rgba(255,140,40,.08) 0%,rgba(255,180,60,.04) 100%);
    border:1px solid rgba(255,165,60,.35);
    border-radius:14px;
    text-decoration:none;
    color:inherit;
    margin-bottom:12px;
    transition:transform .2s,border-color .2s,box-shadow .2s;
}
.td-popup-cta:hover{
    transform:translateY(-1px);
    border-color:rgba(255,180,60,.6);
    box-shadow:0 8px 24px -10px rgba(255,150,40,.4);
}
.td-popup-cta-text{display:flex;flex-direction:column;gap:2px}
.td-popup-cta-small{
    font-size:11px;
    letter-spacing:.14em;
    color:#c9a24a;
    font-weight:700;
}
.td-popup-cta-domain{
    font-family:"SF Mono",Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:19px;
    font-weight:700;
    color:#ffc862;
}
.td-popup-cta-arrow{
    width:42px;
    height:42px;
    border-radius:10px;
    background:rgba(255,165,60,.15);
    color:#ffc862;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background .2s,transform .2s;
}
.td-popup-cta:hover .td-popup-cta-arrow{
    background:rgba(255,165,60,.25);
    transform:translateX(3px);
}
.td-popup-cta-arrow svg{width:18px;height:18px}

/* Social share */
.td-popup-share{
    margin-top:14px;
    padding:14px 14px 12px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
}
.td-popup-share-title{
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#8a8a93;
    margin-bottom:10px;
    font-weight:600;
}

/* Visible message box (preview of what will be shared) */
.td-popup-msg-box{
    background:linear-gradient(135deg,rgba(255,140,40,.06) 0%,rgba(255,180,60,.03) 100%);
    border:1px dashed rgba(255,165,60,.3);
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:12px;
}
.td-popup-msg-text{
    font-size:14px;
    line-height:1.5;
    color:#e8e8ee;
    word-wrap:break-word;
}
.td-popup-msg-url{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.06);
    font-family:"SF Mono",Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size:12px;
    color:#ffc862;
    word-break:break-all;
}

.td-popup-share-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.td-share{
    width:36px;
    height:36px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:#d4d4dc;
    cursor:pointer;
    text-decoration:none;
    transition:transform .2s,background .2s,color .2s,border-color .2s;
}
.td-share svg{width:16px;height:16px}
.td-share:hover{transform:translateY(-2px);color:#fff}
.td-share-fb:hover{background:#1877f2;border-color:#1877f2}
.td-share-x:hover{background:#000;border-color:#000}
.td-share-wa:hover{background:#25d366;border-color:#25d366}
.td-share-tg:hover{background:#26a5e4;border-color:#26a5e4}
.td-share-li:hover{background:#0a66c2;border-color:#0a66c2}
.td-share-rd:hover{background:#ff4500;border-color:#ff4500}
.td-share-pn:hover{background:#e60023;border-color:#e60023}
.td-share-em:hover{background:#6b7280;border-color:#6b7280}
.td-share-copy:hover{background:#ffa53c;border-color:#ffa53c;color:#1a1a20}
.td-popup-copied{
    font-size:12px;
    color:#7ad17a;
    margin-top:8px;
    min-height:16px;
    transition:opacity .3s;
}

/* Dismiss */
.td-popup-dismiss{
    width:100%;
    margin-top:12px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    color:#fff;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:background .2s,border-color .2s;
    font-family:inherit;
}
.td-popup-dismiss:hover{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.12);
}
.td-popup-dismiss-text{color:#fff}
.td-popup-dismiss-hint{
    font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;
    font-size:12px;
    color:#6c6c75;
}

/* Mobile tweaks */
@media (max-width:480px){
    .td-popup-root{padding:12px}
    .td-popup-card{padding:20px;border-radius:20px;max-height:calc(100vh - 24px)}
    .td-popup-heading{font-size:24px}
    .td-popup-cta-domain{font-size:17px}
    .td-popup-icon{width:46px;height:46px;margin-bottom:24px}
    .td-popup-msg-text{font-size:13px}
}