/* ============================================================
   FlipFeatures Plugin Styles
   ============================================================ */

/* ── Wishlist Button ── */
.ff-wishlist-btn {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    background: #fff; border: none; border-radius: 50%;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: box-shadow .2s, transform .2s;
}
.ff-wishlist-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.2); transform: scale(1.1); }
.ff-wishlist-btn.ff-active svg { fill: #e53935; stroke: #e53935; }
.ff-wishlist-single { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; cursor: pointer; font-size: 14px; color: var(--fp-text-medium, #555); }
.ff-wishlist-single .ff-wishlist-btn { position: static; box-shadow: none; }
.ff-wishlist-single:hover { color: var(--fp-primary, #2874f0); }

/* ── Compare Button ── */
.ff-compare-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid #e0e0e0; border-radius: 4px;
    padding: 5px 10px; font-size: 12px; color: var(--fp-text-medium, #555); cursor: pointer;
    transition: border-color .2s, color .2s;
}
.ff-compare-btn:hover, .ff-compare-btn.ff-active { border-color: var(--fp-primary, #2874f0); color: var(--fp-primary, #2874f0); }

/* ── Compare Bar ── */
.ff-compare-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.15);
    transform: translateY(100%); transition: transform .3s ease;
}
.ff-compare-bar.ff-visible { transform: translateY(0); }
.ff-compare-bar__inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.ff-compare-items { display: flex; gap: 12px; flex: 1; }
.ff-compare-bar-item { display: flex; align-items: center; gap: 8px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 10px; min-width: 180px; position: relative; background: #fafafa; }
.ff-compare-bar-item img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.ff-compare-bar-item span { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100px; }
.ff-compare-bar-item--empty { background: #f5f5f5; color: #ccc; justify-content: center; }
.ff-compare-remove { position: absolute; top: -6px; right: -6px; background: #fff; border: 1px solid #e0e0e0; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; }
.ff-compare-placeholder { font-size: 12px; }
.ff-compare-bar__actions { display: flex; gap: 8px; align-items: center; }
.ff-compare-clear { background: none; border: none; font-size: 13px; color: var(--fp-text-medium,#555); cursor: pointer; text-decoration: underline; }

/* ── Quick View Button ── */
.ff-quick-view-btn {
    display: none; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; background: rgba(0,0,0,.75); color: #fff; border: none;
    padding: 7px 14px; border-radius: 4px; font-size: 12px; font-weight: 500;
    cursor: pointer; gap: 5px; align-items: center; z-index: 5;
    transition: background .2s;
}
li.product:hover .ff-quick-view-btn { display: inline-flex; }
.ff-quick-view-btn:hover { background: rgba(0,0,0,.9); }

/* ── Quick View Modal ── */
.ff-qv-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; }
.ff-spinner { width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: var(--fp-primary,#2874f0); border-radius: 50%; animation: ff-spin .8s linear infinite; }
@keyframes ff-spin { to { transform: rotate(360deg); } }
.ff-qv-gallery { padding: 24px; border-right: 1px solid #e0e0e0; }
.ff-qv-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ff-qv-thumb { width: 60px; height: 60px; object-fit: contain; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: border-color .2s; }
.ff-qv-thumb.ff-active, .ff-qv-thumb:hover { border-color: var(--fp-primary,#2874f0); }
.ff-qv-info { padding: 24px; }
.ff-qv-title { font-size: 18px; font-weight: 500; margin-bottom: 10px; }
.ff-qv-title a { color: inherit; }
.ff-qv-title a:hover { color: var(--fp-primary,#2874f0); }
.ff-qv-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ff-qv-price { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.ff-qv-price .woocommerce-Price-amount { font-size: 24px; }
.ff-qv-excerpt { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 16px; max-height: 100px; overflow: hidden; }
.ff-qv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ff-qv-actions .button, .ff-qv-actions .single_add_to_cart_button { background: var(--fp-orange,#fb641b) !important; color: #fff !important; padding: 12px 20px !important; }

/* ── Flash Sale Badge ── */
.ff-flash-badge {
    position: absolute; top: 30px; left: 8px; z-index: 5;
    background: #ff3d00; color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .5px;
}

/* ── Pincode Section ── */
.ff-pincode-section { margin-bottom: 16px; padding: 12px 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.ff-pincode-label { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 8px; }
#ff-pincode-result { font-size: 13px; margin-top: 6px; min-height: 20px; }

/* ── EMI Section ── */
.ff-emi-section { margin-bottom: 16px; }
.ff-emi-toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--fp-primary,#2874f0); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 0; }
.ff-emi-chevron { transition: transform .2s; }
.ff-emi-toggle.ff-open .ff-emi-chevron { transform: rotate(180deg); }
.ff-emi-panel { border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.ff-emi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ff-emi-table th { background: #f5f5f5; padding: 8px 12px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #878787; }
.ff-emi-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }
.ff-emi-table tr:last-child td { border-bottom: none; }
.ff-emi-note { font-size: 11px; color: #878787; padding: 6px 12px; margin: 0; background: #fafafa; }

/* ── Offer Tags ── */
.ff-offer-tags { margin-bottom: 16px; background: #fff; }
.ff-offer-tags__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ff-offer-list { padding: 0; margin: 0; }
.ff-offer-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #f0f0f0; font-size: 13px; }
.ff-offer-item:last-child { border-bottom: none; }
.ff-offer-item svg { flex-shrink: 0; color: var(--fp-primary,#2874f0); margin-top: 2px; }
.ff-offer-item--bank svg { color: #388e3c; }
.ff-offer-item--emi svg  { color: #ff6d00; }
.ff-offer-detail { display: block; font-size: 12px; color: #555; }
.ff-card-offer-tag { font-size: 11px; color: #388e3c; font-weight: 600; display: block; margin-top: 3px; }

/* ── Buy Now ── */
.ff-buy-now-btn { width: 100%; margin-top: 8px; }

/* ── Mini Cart ── */
.fp-mini-cart__close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--fp-text-dark,#212121); padding: 4px; }
.ff-mc-remove { background: none; border: none; color: #878787; font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; margin-top: 4px; display: block; }
.ff-empty-cart { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; color: #878787; }
.ff-empty-cart svg { opacity: .5; }

/* ── Brand Carousel ── */
.ff-brand-carousel { display: flex; overflow-x: auto; gap: 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ff-brand-carousel::-webkit-scrollbar { display: none; }
.ff-brand-item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 16px 24px; border-right: 1px solid #e0e0e0; min-width: 140px; transition: background .2s; }
.ff-brand-item:hover { background: #f5f5f5; }
.ff-brand-item img { max-height: 50px; max-width: 120px; object-fit: contain; filter: grayscale(100%); opacity: .7; transition: filter .2s, opacity .2s; }
.ff-brand-item:hover img { filter: none; opacity: 1; }
.ff-brand-name { font-size: 14px; font-weight: 600; color: #555; }

/* ── Countdown (plugin-managed) ── */
.fp-countdown { display: flex; align-items: center; gap: 4px; }

/* ── Admin ── */
.ff-admin-wrap h1 { margin-bottom: 20px; }
.ff-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap: 20px; }
.ff-admin-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 20px; }
.ff-admin-card h2 { font-size: 15px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.ff-toggle-row { padding: 6px 0; }
.ff-toggle-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* ── Wishlist/Compare page grid ── */
.fp-wishlist-item { position: relative; }

/* ── Responsive ── */
@media (max-width:640px) {
    .ff-compare-bar .ff-compare-items { display: none; }
    .ff-compare-bar__inner { justify-content: center; }
    .fp-quick-view-inner { grid-template-columns: 1fr; }
    .ff-qv-gallery { border-right: none; border-bottom: 1px solid #e0e0e0; }
}