/* =============================================
   Tech Press Ads v3.0 – Frontend Styles
   techdaffy.com
   ============================================= */

.tpa-wrapper { width:100%; padding:10px 0; }

/* ── Grid ── */
.tpa-grid { display:grid; gap:20px; box-sizing:border-box; }

/* ── Card Shell ── */
.tpa-card {
    border-radius:18px; padding:3px;
    width:100%; min-width:0; box-sizing:border-box;
    transition:transform .3s ease,box-shadow .3s ease;
}
.tpa-card.tpa-hover:hover { transform:translateY(-7px); box-shadow:0 18px 45px rgba(0,0,0,.18); }

/* ── Card Inner ── */
.tpa-card-inner {
    border-radius:15px; overflow:hidden; background:#fff;
    width:100%; height:100%; box-sizing:border-box;
    display:flex; flex-direction:column;
}
.tpa-card-inner > a { display:block; text-decoration:none; color:inherit; flex:1; }

/* ── Image ── */
.tpa-image-wrap { position:relative; width:100%; overflow:hidden; background:#f4f4f4; }
.tpa-image-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.tpa-card.tpa-hover:hover .tpa-image-wrap img { transform:scale(1.05); }
.tpa-no-image { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#bbb; font-size:13px; }

/* ── Top-right stack ── */
.tpa-top-right {
    position:absolute; top:10px; right:10px;
    display:flex; flex-direction:column; align-items:center; gap:5px; z-index:10;
}

/* ── Ad Label ── */
.tpa-ad-label {
    display:inline-block; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:6px; letter-spacing:.4px;
    white-space:nowrap; line-height:1.4; cursor:default;
    position:relative;
}
/* Tooltip triggered by click (JS adds .tpa-label-open) */
.tpa-label-tooltip {
    display:none;
    position:absolute; top:calc(100% + 6px); right:0;
    min-width:180px; max-width:240px;
    padding:8px 10px; border-radius:8px;
    font-size:11px; font-weight:400; line-height:1.5;
    border:1px solid transparent;
    box-shadow:0 4px 16px rgba(0,0,0,.18);
    z-index:100; white-space:normal; cursor:default;
    word-break:break-word;
}
.tpa-label-tooltip::before {
    content:''; position:absolute; bottom:100%; right:12px;
    border:6px solid transparent;
    border-bottom-color:inherit;
}
.tpa-ad-label.tpa-has-tooltip { cursor:pointer; }
.tpa-ad-label.tpa-label-open .tpa-label-tooltip { display:block; }

/* ── Share Button ── */
.tpa-share-btn {
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:6px; border:none;
    cursor:pointer; padding:0; transition:opacity .2s,transform .15s;
}
.tpa-share-btn:hover { opacity:.85; transform:scale(1.12); }

/* ── Share Modal ── */
.tpa-share-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:99999; display:flex; align-items:center; justify-content:center;
    padding:16px; animation:tpa-fade-in .2s ease;
}
@keyframes tpa-fade-in{from{opacity:0}to{opacity:1}}
.tpa-share-modal {
    background:#fff; border-radius:18px; padding:24px 20px 20px;
    max-width:340px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25);
    position:relative; animation:tpa-slide-up .25s ease;
}
@keyframes tpa-slide-up{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.tpa-share-modal h3{margin:0 0 16px;font-size:16px;font-weight:700;color:#111;text-align:center;}
.tpa-share-modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:#888;}
.tpa-share-modal-close:hover{color:#222;}
.tpa-share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.tpa-share-option{display:flex;flex-direction:column;align-items:center;gap:5px;background:#f5f5f5;border:none;border-radius:12px;padding:10px 6px;cursor:pointer;font-size:11px;font-weight:600;color:#333;text-decoration:none;transition:background .15s,transform .15s;}
.tpa-share-option:hover{background:#e8e8e8;transform:scale(1.05);}
.tpa-share-option .tpa-share-icon{font-size:22px;line-height:1;}
.tpa-share-copy-row{display:flex;gap:8px;align-items:center;}
.tpa-share-copy-input{flex:1;border:1px solid #ddd;border-radius:8px;padding:8px 10px;font-size:12px;color:#555;background:#f9f9f9;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpa-share-copy-btn{background:#1a73e8;color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s;}
.tpa-share-copy-btn:hover{background:#1558c0;}
.tpa-share-copy-btn.copied{background:#27ae60;}

/* ── Discount Badge ── */
.tpa-discount-badge{position:absolute;bottom:10px;left:10px;background:#e60000;color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;}

/* ── Card Body ── */
.tpa-card-body { padding:12px 14px 8px; }
.tpa-title { font-size:14px; font-weight:700; color:#111; line-height:1.45; margin-bottom:8px; }

/* ── Price + Rating row ── */
.tpa-price-rating-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; flex-wrap:wrap; margin-bottom:8px;
}
.tpa-price { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tpa-old-price { font-size:13px; color:#999; text-decoration:line-through; }
.tpa-new-price { font-size:17px; font-weight:800; color:#e60023; }

/* ── Rating ── */
.tpa-rating-pill {
    display:inline-flex; align-items:center; gap:4px;
    background:#fffbf0; border:1px solid #f5a62366;
    border-radius:20px; padding:3px 10px;
    font-size:12px; font-weight:600; white-space:nowrap;
}
.tpa-stars { font-size:14px; letter-spacing:1px; }
.tpa-rating-num { color:#333; font-size:12px; font-weight:700; }

/* ── Description ── */
.tpa-desc-wrap { margin-top:6px; }
.tpa-desc {
    margin:0 0 4px; padding:0;
    font-size:12px; color:#555; line-height:1.55;
    /* clamp set via per-block inline style */
}
.tpa-see-more {
    background:none; border:none; padding:0;
    font-size:12px; color:#1a73e8; font-weight:600;
    cursor:pointer; text-decoration:underline;
    display:inline-block; margin-top:2px;
}
.tpa-see-more:hover { color:#0d4ea6; }

/* ── Description Popup ── */
.tpa-desc-popup-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:99999; display:flex; align-items:center; justify-content:center;
    padding:20px; animation:tpa-fade-in .2s ease;
}
.tpa-desc-popup {
    background:#fff; border-radius:16px; padding:24px;
    max-width:480px; width:100%; max-height:80vh;
    overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25);
    position:relative; animation:tpa-slide-up .25s ease;
}
.tpa-desc-popup h3 { margin:0 0 12px; font-size:16px; font-weight:700; color:#111; padding-right:30px; }
.tpa-desc-popup p  { margin:0; font-size:14px; color:#444; line-height:1.65; }
.tpa-desc-popup-close {
    position:absolute; top:14px; right:16px;
    background:none; border:none; font-size:22px;
    cursor:pointer; color:#888; line-height:1;
}
.tpa-desc-popup-close:hover { color:#222; }

/* ── Action Button ── */
.tpa-btn-wrap { padding:10px 14px 14px; margin-top:auto; }
.tpa-shop-btn {
    display:block; width:100%; text-align:center; text-decoration:none;
    padding:11px 16px; border-radius:10px; font-size:14px; font-weight:700;
    transition:opacity .2s,transform .2s; box-sizing:border-box;
}
.tpa-shop-btn:hover { opacity:.88; transform:scale(1.02); }

/* ── Button Animations ── */
@keyframes tpa-vibrate{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes tpa-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(230,0,35,.4)}50%{transform:scale(1.04);box-shadow:0 0 0 8px rgba(230,0,35,0)}}
@keyframes tpa-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}}
@keyframes tpa-glow{0%,100%{box-shadow:0 0 5px rgba(255,255,255,.3)}50%{box-shadow:0 0 18px rgba(255,255,255,.9),0 0 30px rgba(230,0,35,.4)}}
.tpa-btn-anim.tpa-anim-vibrate{animation:tpa-vibrate 1.4s ease infinite;}
.tpa-btn-anim.tpa-anim-pulse  {animation:tpa-pulse   1.8s ease infinite;}
.tpa-btn-anim.tpa-anim-bounce {animation:tpa-bounce  1.6s ease infinite;}
.tpa-btn-anim.tpa-anim-glow   {animation:tpa-glow    2s   ease infinite;}

/* ── Countdown ── */
.tpa-countdown-bar{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,#1a1a2e,#16213e);color:#fff;border-radius:12px;padding:12px 20px;margin-bottom:18px;flex-wrap:wrap;}
.tpa-cd-label{font-size:14px;font-weight:600;white-space:nowrap;}
.tpa-cd-timer{display:flex;align-items:center;gap:6px;}
.tpa-cd-seg{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.1);border-radius:8px;padding:6px 12px;min-width:52px;}
.tpa-cd-seg span{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.tpa-cd-seg small{font-size:10px;opacity:.7;margin-top:2px;letter-spacing:1px;}
.tpa-cd-colon{font-size:22px;font-weight:800;color:#ff6a00;line-height:1;}

@media(max-width:767px){.tpa-image-wrap{min-height:160px;}.tpa-share-grid{grid-template-columns:repeat(4,1fr);}}

/* ═══════════════════════════════════════════
   CAROUSEL SLIDER
═══════════════════════════════════════════ */

/* Outer container — clips the track */
.tpa-carousel-outer {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Track wraps all cards in a single row when carousel active */
.tpa-carousel-outer.tpa-carousel-active .tpa-carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.tpa-carousel-outer.tpa-carousel-active .tpa-carousel-track:active {
    cursor: grabbing;
}
.tpa-carousel-outer.tpa-carousel-active .tpa-carousel-track .tpa-card {
    flex: 0 0 auto;
    width: var(--tpa-slide-width, 33.333%);
    box-sizing: border-box;
}

/* ── Arrows ── */
.tpa-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, opacity .2s;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tpa-carousel-btn:hover { background: rgba(0,0,0,.8); }
.tpa-carousel-btn.tpa-carousel-prev { left: 8px; }
.tpa-carousel-btn.tpa-carousel-next { right: 8px; }
.tpa-carousel-btn[disabled] { opacity: .3; cursor: default; }

/* ── Dots ── */
.tpa-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.tpa-carousel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .25s;
}
.tpa-carousel-dot.active {
    background: #e60023;
    transform: scale(1.3);
}


/* ═══════════════════════════════════════════
   AFFILIATE DISCLOSURE BOX
═══════════════════════════════════════════ */
.tpa-disclosure {
    background: #ffffff;
    border-left: 4px solid #1a6edb;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px 14px;
    margin-bottom: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}
.tpa-disclosure-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.tpa-disclosure-text {
    margin: 0 0 10px;
    color: #444;
    font-size: 13.5px;
    line-height: 1.65;
}
.tpa-disclosure-link {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a6edb;
    text-decoration: none;
    transition: opacity .2s;
    display: inline-block;
}
.tpa-disclosure-link:hover {
    opacity: .75;
    text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .tpa-disclosure {
        padding: 13px 14px 11px;
        font-size: 13px;
        border-radius: 0 8px 8px 0;
    }
    .tpa-disclosure-title { font-size: 14px; }
    .tpa-disclosure-text  { font-size: 13px; }
    .tpa-disclosure-link  { font-size: 13px; }
}

/* ═══════════════════════════════════════════
   INTERNAL LINK BOX  (READ MORE / Explore More)
═══════════════════════════════════════════ */
.tpa-internal-link-box {
    border-left: 4px solid #1a6edb;
    background: #f4f7fb;
    border-radius: 0 8px 8px 0;
    padding: 13px 18px;
    margin: 22px 0;
    display: block;
    transition: background .2s;
}
.tpa-internal-link-box:hover {
    background: #eaf1fb;
}
.tpa-ilb-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: #1a6edb;
    flex-wrap: wrap;
    line-height: 1.5;
}
.tpa-ilb-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    color: inherit;
}
.tpa-ilb-title {
    font-size: 14px;
    font-weight: 400;
    color: inherit;
}
.tpa-ilb-link:hover .tpa-ilb-title {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {
    .tpa-internal-link-box { padding: 11px 14px; }
    .tpa-ilb-label { font-size: 12px; }
    .tpa-ilb-title { font-size: 13px; }
}

/* ══════════════════════════════════════════════
   PROS & CONS BLOCK
══════════════════════════════════════════════ */
.tpa-pros-cons-wrap {
    border-radius: 12px;
    border: 1px solid #e4e9ed;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    margin: 24px 0;
}
.tpa-pc-cols {
    display: flex;
    flex-wrap: wrap;
}
.tpa-pc-col {
    flex: 1 1 50%;
    padding: 22px 26px 26px;
    min-width: 0;
    box-sizing: border-box;
}
.tpa-pc-pros {
    border-right: 1px solid #e4e9ed;
}
.tpa-pc-heading {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px;
    padding: 0;
    line-height: 1;
}
.tpa-pc-line {
    border: none;
    border-top: 2px solid currentColor;
    margin: 0 0 16px;
    opacity: .85;
}
.tpa-pc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tpa-pc-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    line-height: 1.6;
}
.tpa-pc-item:last-child { margin-bottom: 0; }
.tpa-pc-symbol {
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1.6;
    min-width: 14px;
}
.tpa-pc-text {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.65;
}

/* Mobile: stack columns */
@media (max-width: 640px) {
    .tpa-pc-col { flex: 1 1 100%; }
    .tpa-pc-pros { border-right: none; border-bottom: 1px solid #e4e9ed; }
    .tpa-pc-col { padding: 18px 18px 20px; }
}

/* ══════════════════════════════════════════════
   AFFILIATE PRODUCT BLOCK
══════════════════════════════════════════════ */
.tpa-affiliate-product {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #e4e9ed;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    margin: 24px 0;
}
.tpa-ap-img-wrap {
    width: 240px;
    min-width: 180px;
    max-width: 260px;
    background: #f7f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    flex-shrink: 0;
    border-right: 1px solid #eef0f3;
    box-sizing: border-box;
}
.tpa-ap-img-wrap img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}
.tpa-ap-content {
    flex: 1;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.tpa-ap-title {
    font-weight: 800;
    font-size: 20px;
    margin: 0 0 10px;
    color: #1a1a1a;
    line-height: 1.3;
    font-variant: small-caps;
    font-family: Georgia, 'Times New Roman', serif;
}
.tpa-ap-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin: 0 0 18px;
}
.tpa-ap-footer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: auto;
}
.tpa-ap-price {
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}
.tpa-ap-btn {
    display: inline-block;
    padding: 11px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .2s, transform .15s;
    cursor: pointer;
    border: none;
    line-height: 1.4;
}
.tpa-ap-btn:hover {
    opacity: .88;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Mobile: stack image on top */
@media (max-width: 640px) {
    .tpa-affiliate-product {
        flex-direction: column;
    }
    .tpa-ap-img-wrap {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid #eef0f3;
        padding: 20px;
        max-height: 260px;
    }
    .tpa-ap-img-wrap img { max-height: 200px; }
    .tpa-ap-content { padding: 18px 18px 20px; }
    .tpa-ap-title { font-size: 17px; }
    .tpa-ap-price { font-size: 19px; }
    .tpa-ap-btn { font-size: 14px; padding: 10px 22px; }
}

/* ══════════════════════════════════════════════
   SCROLLABLE TABLE BLOCK
══════════════════════════════════════════════ */
.tpa-scroll-table-wrap {
    margin: 24px 0;
    border-radius: 10px;
    border: 1px solid #e0e4ea;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.tpa-st-hint {
    display: none; /* hidden on desktop */
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    padding: 7px 14px;
    text-align: center;
}
.tpa-st-hint span {
    font-size: 12px;
    color: #795548;
    font-weight: 600;
    letter-spacing: .3px;
}
.tpa-st-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
/* Scrollbar styling */
.tpa-st-inner::-webkit-scrollbar { height: 5px; }
.tpa-st-inner::-webkit-scrollbar-track { background: #f1f1f1; }
.tpa-st-inner::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.tpa-scroll-table-wrap table {
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tpa-scroll-table-wrap th {
    white-space: nowrap;
    padding: 11px 16px;
    text-align: left;
    font-weight: 700;
}
.tpa-scroll-table-wrap td {
    padding: 10px 16px;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle;
}
.tpa-scroll-table-wrap tr:last-child td { border-bottom: none; }
.tpa-scroll-table-wrap tr:hover td { background: rgba(0,0,0,.02); }

/* Mobile: show hint, enable scroll */
@media (max-width: 768px) {
    .tpa-st-hint { display: block; }
    .tpa-st-inner { cursor: grab; }
    .tpa-st-inner:active { cursor: grabbing; }
}

/* Make image link in affiliate product not show underline */
.tpa-ap-img-link { display: block; text-decoration: none !important; }
.tpa-ap-img-link:hover img { opacity: .92; transition: opacity .2s; }