/* ---------- Toast Notification ---------- */
.dwr-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #222722;
    color: #fff;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-family: "Avenir-book", Poppins, sans-serif;
    letter-spacing: 0.04em;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
    border-left: 3px solid #adc3c7;
}

.dwr-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dwr-search-result .dwr-btn--loading {
    position: relative;
    cursor: wait;
    opacity: 0.92;
    padding-right: 46px;
}

.dwr-search-result .dwr-btn--loading::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dwr-spin 0.8s linear infinite;
}

@keyframes dwr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   RTL (Right-to-Left) Overrides
   Used when site language is Arabic or another RTL language
   ========================================================== */
body.rtl .dwr-error {
    border-left: none;
    border-right: 3px solid #bb251a;
}

body.rtl .dwr-datepicker__input {
    padding: 11px 14px 11px 40px;
}

body.rtl .dwr-datepicker__icon {
    right: auto;
    left: 12px;
}

body.rtl .dwr-csel__trigger {
    padding: 11px 14px 11px 36px;
    text-align: right;
}

body.rtl .dwr-csel__trigger::after {
    right: auto;
    left: 14px;
}

body.rtl .dwr-csel__option {
    text-align: right;
}

body.rtl .dwr-char-counter {
    text-align: left;
}

body.rtl .dwr-gift-table th {
    text-align: right;
}

body.rtl .dwr-gift-tracker__code code {
    margin-left: 0;
    margin-right: 8px;
}

body.rtl .dwr-drawer {
    right: auto;
    left: -500px;
    box-shadow: 4px 0 24px rgba(10, 13, 19, 0.14);
}

body.rtl .dwr-drawer--open {
    left: 0;
    right: auto;
}

body.rtl .dwr-reg-sidebar {
    right: auto;
    left: -520px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

body.rtl .dwr-reg-sidebar--open {
    left: 0;
    right: auto;
}

body.rtl .dwr-item-card__remove {
    right: auto;
    left: 8px;
}

body.rtl .dwr-field input,
body.rtl .dwr-field select {
    text-align: right;
}

body.rtl .dwr-datepicker__input {
    text-align: right;
}

body.rtl .dwr-cal__nav#dwr-cal-prev {
    order: 1;
}

body.rtl .dwr-cal__nav#dwr-cal-next {
    order: -1;
}

body.rtl .dwr-cal__header {
    flex-direction: row-reverse;
}

body.rtl .dwr-step__actions .dwr-btn {
    letter-spacing: 0;
}

body.rtl .dwr-hero__title {
    letter-spacing: 0;
}

body.rtl .dwr-btn {
    letter-spacing: 0;
}

/* ============================================================
   LOOP / SHOP: Add to Registry — full-width button
   Injected AFTER .add-links-wrap (outside Porto's hover row)
   so the heart / ATC / quickview layout is never affected.
   ============================================================ */

/* Wrapper */
.dwr-loop-atw {
    display: block;
    width: 100%;
}

/* Button — matches Porto ATC font (Poppins 12px) with teal accent */
.dwr-loop-atw__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #dddddd;
    background: transparent;
    color: #000 !important;
    font-family: inherit;
    /* picks up Poppins from Porto */
    font-size: 12px;
    /* matches ATC button 12px */
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-sizing: border-box;
    white-space: nowrap;
}

.dwr-loop-atw__btn:hover {
    background: #adc3c7;
    color: #fff !important;
    border-color: #adc3c7;
    text-decoration: none !important;
}

.dwr-loop-atw__btn--added {
    background: rgba(173, 195, 199, 0.12) !important;
    color: #adc3c7 !important;
    border-color: #adc3c7 !important;
}

.dwr-loop-atw__btn--added:hover {
    background: #adc3c7 !important;
    color: #fff !important;
}

.dwr-loop-atw__btn--loading {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Porto hover fix ──────────────────────────────────────────
   Porto triggers its ATC blue-fill on ANY hover inside li.product.
   :has() targets the ATC button ONLY when the registry btn is hovered,
   resetting Porto's hover style so only the registry btn shows its hover.
   Supported: Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+
   ─────────────────────────────────────────────────────────── */
li.product:has(.dwr-loop-atw:hover) .add_to_cart_button,
li.product:has(.dwr-loop-atw:hover) .viewcart-style-2 {
    background-color: transparent !important;
    color: #333333 !important;
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}