/* ================================================================
   SAE Inquiry System v1.3
   Icon button that slots INTO the wishlist icon column
================================================================ */

/* ── Hide prices ── */
.price, .woocommerce-Price-amount, span.amount,
.product-price, .woocommerce-loop-product__price { display:none !important; }

/* ── Hide native add-to-cart in loop ── */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.ajax_add_to_cart,
.woocommerce ul.products li.product .add_to_cart_button { display:none !important; }

/* ════════════════════════════════════════════════════════
   ICON BUTTON — matches the exact style of YITH / theme
   wishlist/compare/zoom icon buttons so it slots right in
════════════════════════════════════════════════════════ */

/*
  Most themes (Flatsome, OceanWP, Woodmart, Astra) render
  wishlist icons as small square/circle links inside a
  .product-loop-action  or  .yith-wcwl-add-to-wishlist
  container that is absolutely positioned on the image.

  Our button mimics that same visual style and uses
  the same  position / size  so it stacks naturally.
*/

.sae-icon-btn {
    /* Size & shape — identical to typical wishlist icon buttons */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 50%;

    /* Colors to match default theme icon buttons (white bg, dark icon) */
    background: #fff !important;
    color: #333 !important;
    border: none !important;
    outline: none;

    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1;

    /* No absolute position — let the theme's icon wrapper
       stack it naturally in the same flex/block column     */
    position: static !important;
    top: auto !important;
    right: auto !important;

    transition: background 0.18s, color 0.18s, transform 0.15s;

    /* Tooltip */
    position: relative !important;
}

.sae-icon-btn svg {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

.sae-icon-btn:hover,
.sae-icon-btn:focus {
    background: #1a3c5e !important;
    color: #fff !important;
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(26,60,94,0.3);
}

.sae-icon-btn:hover svg,
.sae-icon-btn:focus svg { stroke: #fff; }

/* Added state */
.sae-icon-btn.sae-added {
    background: #1a3c5e !important;
    color: #fff !important;
}
.sae-icon-btn.sae-added svg { stroke: #fff; }

/* Loading */
.sae-icon-btn.sae-loading { opacity: 0.55; cursor: wait; }

/* ── Tooltip ── */
.sae-icon-btn::after {
    content: attr(title);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a3c5e;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 100;
}
.sae-icon-btn:hover::after { opacity: 1; }

/* ════════════════════════════════════════════════════════
   THEME COMPATIBILITY — ensure our btn appears inside
   the same icon-action wrapper the theme creates
════════════════════════════════════════════════════════ */

/* Flatsome: icons sit in .box-image .hover-switch .product-loop-action */
.product-loop-action .sae-icon-btn,
.box-image .sae-icon-btn { display:inline-flex !important; }

/* OceanWP / WoodMart: .product-inner .loop-action-icons */
.loop-action-icons .sae-icon-btn,
.product-inner .sae-icon-btn { display:inline-flex !important; }

/* YITH wrapper: icon buttons inside .yith-wcwl-add-to-wishlist sit in
   .product-images .product-loop-action — our btn sits alongside       */

/* Generic: if our btn ends up outside the icon column, push it there  */
.woocommerce ul.products li.product .sae-icon-btn {
    display: inline-flex !important;
    vertical-align: top;
    margin: 2px 0;
}

/* ════════════════════════════════════════════════════════
   SINGLE PRODUCT — full pill button
════════════════════════════════════════════════════════ */
.sae-single-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1a3c5e;
    color: #fff !important;
    border: 2px solid #1a3c5e;
    border-radius: 4px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    text-decoration: none !important;
    margin-top: 12px;
}
.sae-single-btn:hover { background:#0f2a44; border-color:#0f2a44; transform:translateY(-1px); box-shadow:0 4px 14px rgba(26,60,94,0.3); }
.sae-single-btn.sae-added { background:#2e7d32; border-color:#2e7d32; pointer-events:none; }
.sae-single-btn.sae-loading { opacity:0.7; cursor:not-allowed; }

/* ════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════ */
.sae-toast {
    position: fixed;
    bottom: 96px; right: 22px;
    background: #1a3c5e; color: #fff;
    padding: 12px 17px; border-radius: 8px;
    font-size: 13px; max-width: 290px;
    z-index: 999999; box-shadow: 0 5px 22px rgba(0,0,0,0.2);
    display: none; line-height: 1.5;
}
.sae-toast a { color:#90caf9 !important; font-weight:700; }
.sae-toast-success { background:#1b5e20; }

/* ════════════════════════════════════════════════════════
   FLOATING BUBBLE
════════════════════════════════════════════════════════ */
.sae-inquiry-bubble {
    position:fixed; bottom:22px; right:22px;
    background:#1a3c5e; color:#fff !important;
    text-decoration:none !important;
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 18px rgba(0,0,0,0.25);
    z-index:99999; transition:transform 0.2s, box-shadow 0.2s;
}
.sae-inquiry-bubble:hover { transform:scale(1.1); box-shadow:0 7px 26px rgba(0,0,0,0.3); }

#sae-bubble-count {
    position:absolute; top:-3px; right:-3px;
    background:#e53935; color:#fff;
    font-size:10px; font-weight:800; border-radius:50%;
    min-width:17px; height:17px;
    display:flex; align-items:center; justify-content:center;
    padding:0 2px; border:2px solid #fff;
}

/* ════════════════════════════════════════════════════════
   INQUIRY PAGE
════════════════════════════════════════════════════════ */
.sae-inquiry-page { max-width:860px; margin:0 auto; padding:0 16px 60px; }
.sae-inq-title { font-size:25px; font-weight:700; color:#1a3c5e; border-bottom:3px solid #1a3c5e; padding-bottom:11px; margin-bottom:28px; }

.sae-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:16px; margin-bottom:34px; }
.sae-item { background:#fff; border:1px solid #dde3ea; border-radius:10px; overflow:hidden; position:relative; box-shadow:0 2px 7px rgba(0,0,0,0.06); transition:box-shadow 0.2s; }
.sae-item:hover { box-shadow:0 5px 18px rgba(0,0,0,0.11); }
.sae-item img { width:100%; height:135px; object-fit:contain; padding:13px; background:#f7f9fb; border-bottom:1px solid #eef0f3; display:block; }
.sae-no-img { height:135px; background:#f0f2f5; display:flex; align-items:center; justify-content:center; font-size:12px; color:#aaa; border-bottom:1px solid #eef0f3; }
.sae-item-name { display:block; padding:9px 30px 9px 11px; font-size:12px; font-weight:600; color:#1a3c5e; line-height:1.4; }
.sae-remove-btn { position:absolute; top:6px; right:6px; background:#fff; border:1px solid #ddd; border-radius:50%; width:22px; height:22px; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#e53935; transition:background 0.15s; padding:0; line-height:1; }
.sae-remove-btn:hover { background:#ffebee; border-color:#e53935; }
.sae-removing { opacity:0.4; pointer-events:none; }
.sae-empty { text-align:center; padding:56px 20px; color:#888; }
.sae-empty svg { margin-bottom:13px; opacity:0.33; }
.sae-empty p { font-size:15px; }
.sae-empty a { color:#1a3c5e; font-weight:600; text-decoration:underline; }

.sae-form-section { background:#f7f9fb; border:1px solid #dde3ea; border-radius:12px; padding:28px 32px; }
.sae-form-section h3 { font-size:18px; font-weight:700; color:#1a3c5e; margin-bottom:20px; }
.sae-form-section .wpcf7-form input[type="text"],
.sae-form-section .wpcf7-form input[type="email"],
.sae-form-section .wpcf7-form input[type="tel"],
.sae-form-section .wpcf7-form textarea { width:100%; border:1px solid #ccd3dc; border-radius:5px; padding:9px 12px; font-size:14px; transition:border-color 0.2s; }
.sae-form-section .wpcf7-form input:focus,
.sae-form-section .wpcf7-form textarea:focus { border-color:#1a3c5e; outline:none; box-shadow:0 0 0 3px rgba(26,60,94,0.1); }
.sae-form-section .wpcf7-form input[type="submit"] { background:#1a3c5e; color:#fff; border:none; padding:10px 28px; border-radius:5px; font-size:13px; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:0.04em; transition:background 0.2s; }
.sae-form-section .wpcf7-form input[type="submit"]:hover { background:#0f2a44; }

@media(max-width:600px){
    .sae-items { grid-template-columns:1fr 1fr; }
    .sae-form-section { padding:16px 13px; }
}