/* =====================================================================
   Re-Find Marketplace — Stylesheet
   Clean, flat marketplace design. Single accent color, no gradients,
   no decorative emoji. Figtree typeface throughout.
   ===================================================================== */

:root {
    --refind-primary:        #0077B6;
    --refind-primary-hover:  #00628F;
    --refind-primary-active: #004F73;
    --refind-primary-tint:   #EAF4FB;
    --refind-primary-border: #BFE0F2;

    --refind-text:           #1A1D21;
    --refind-text-secondary: #5B636D;
    --refind-text-muted:     #8B929B;

    --refind-border:         #E3E6E9;
    --refind-border-strong:  #CBD0D5;
    --refind-bg:             #FFFFFF;
    --refind-bg-subtle:      #F6F7F8;
    --refind-bg-muted:       #EFF1F3;

    --refind-success:        #1E8E5A;
    --refind-success-tint:   #E7F5EE;
    --refind-warning:        #B4720C;
    --refind-warning-tint:   #FCF1DF;
    --refind-danger:         #C7361F;
    --refind-danger-tint:    #FBEAE6;

    --refind-radius-sm: 0;
    --refind-radius: 0;
    --refind-radius-lg: 0;
    --refind-radius-search: 6px;
    --refind-shadow: 0 2px 8px rgba(20, 24, 28, 0.06);
    --refind-shadow-md: 0 6px 20px rgba(20, 24, 28, 0.10);
    --refind-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

[class^="refind-"],
[class*=" refind-"] {
    font-family: var(--refind-font);
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.refind-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--refind-primary);
    color: #fff;
    border: 1px solid var(--refind-primary);
    border-radius: var(--refind-radius-sm);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.refind-btn:hover { background: var(--refind-primary-hover); border-color: var(--refind-primary-hover); color: #fff; }
.refind-btn:active { background: var(--refind-primary-active); border-color: var(--refind-primary-active); }
.refind-btn-secondary {
    background: #fff;
    color: var(--refind-text);
    border: 1px solid var(--refind-border-strong);
}
.refind-btn-secondary:hover { background: var(--refind-bg-subtle); border-color: var(--refind-border-strong); color: var(--refind-text); }

.refind-btn-sm { font-size: 12px !important; padding: 6px 14px !important; }

.refind-btn-link {
    background: none;
    border: none;
    color: var(--refind-danger);
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
}
.refind-btn-link:hover { text-decoration: underline; }

.refind-error { color: var(--refind-danger); font-size: 13px; }
.refind-success { color: var(--refind-success); font-size: 13px; }

/* =====================================================================
   FORMS
   ===================================================================== */
.refind-form label { font-weight: 600; color: var(--refind-text); }
.refind-add-listing,
.refind-form {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.refind-form input,
.refind-form select,
.refind-form textarea {
    padding: 9px 12px;
    border: 1px solid var(--refind-border-strong);
    border-radius: var(--refind-radius-sm);
    margin-top: 4px;
    box-sizing: border-box;
    font-family: var(--refind-font);
    font-size: 14px;
    color: var(--refind-text);
    background: #fff;
}
.refind-form input:focus,
.refind-form select:focus,
.refind-form textarea:focus {
    outline: none;
    border-color: var(--refind-primary);
    box-shadow: 0 0 0 3px var(--refind-primary-tint);
}

/* Individually-placeable [refind_listing_field_*] shortcodes */
.refind-form-field {
    margin-bottom: 16px;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.refind-form-field label { display: block; margin-bottom: 4px; }
.refind-form-field small {
    display: block;
    margin-top: 4px;
    color: var(--refind-text-muted);
    font-size: 12px;
}

/* [refind_listing_field_*] — apply the marketplace field styling to
   individually placed fields as well as fields rendered inside
   [refind_add_listing].  Do not require the .refind-add-listing ancestor:
   the standalone field shortcodes are intentionally usable outside it.
   Selectors are duplicated with an .refind-add-listing/form.refind-form
   prefix to raise specificity above theme/page-builder input styling,
   which otherwise can win the width/height cascade even against !important
   rules of equal specificity that load later. */
.refind-form-field input:not([type="checkbox"]),
.refind-form-field select,
.refind-form-field textarea,
.refind-form-field .refind-combobox-input,
.refind-add-listing .refind-form-field input:not([type="checkbox"]),
.refind-add-listing .refind-form-field select,
.refind-add-listing .refind-form-field textarea,
.refind-add-listing .refind-form-field .refind-combobox-input,
form.refind-form .refind-form-field input:not([type="checkbox"]),
form.refind-form .refind-form-field select,
form.refind-form .refind-form-field textarea,
form.refind-form .refind-form-field .refind-combobox-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border: 2px solid #F4F4F4 !important;
    border-radius: var(--refind-radius-sm) !important;
    padding: var(--wp--preset--spacing--x-small, 8px) !important;
    font-size: var(--wp--preset--font-size--medium, 16px) !important;
    box-sizing: border-box !important;
}
.refind-form-field select,
.refind-form-field .refind-combobox-input,
.refind-add-listing .refind-form-field select,
.refind-add-listing .refind-form-field .refind-combobox-input,
form.refind-form .refind-form-field select,
form.refind-form .refind-form-field .refind-combobox-input {
    /* Re-declared here (not just inherited from the shared rule above)
       because some themes carry their own `select { width: ... }` rule
       targeting the element type directly — redeclaring on the more
       specific .refind-form-field selector, later in the source,
       guarantees this wins regardless of load order. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.refind-form-field textarea,
.refind-add-listing .refind-form-field textarea,
form.refind-form .refind-form-field textarea {
    /* Re-declared here (not just inherited from the shared rule above)
       because a <textarea>'s intrinsic size comes from its `cols`/`rows`
       attributes rather than content, and some themes carry their own
       `textarea { width: ... }` rule targeting the element directly —
       redeclaring on the more specific .refind-form-field selector,
       later in the source, guarantees this wins regardless of load order. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    resize: none !important;
    /* Fixed height like the other fields — scrolls internally instead of
       growing with content or offering a manual drag-to-resize handle. */
    overflow-y: auto !important;
    scrollbar-width: thin;
}
.refind-form-field textarea::-webkit-scrollbar,
.refind-add-listing .refind-form-field textarea::-webkit-scrollbar,
form.refind-form .refind-form-field textarea::-webkit-scrollbar {
    width: 8px;
}

/* Description field: 3x the standard 44px field height (132px). Needs the
   extra .refind-field-description class in the selector so it's more
   specific than the generic ".refind-form-field textarea" rule above —
   otherwise that rule's height: 44px !important would win regardless of
   source order, since both use !important at otherwise-equal specificity. */
.refind-form-field.refind-field-description textarea,
.refind-add-listing .refind-form-field.refind-field-description textarea,
form.refind-form .refind-form-field.refind-field-description textarea {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
}

.refind-form-field input:not([type="checkbox"]):focus,
.refind-form-field select:focus,
.refind-form-field textarea:focus,
.refind-form-field .refind-combobox-input:focus {
    outline: none !important;
    border-color: var(--refind-primary) !important;
}

/* Price field: input + live "buyer pays" total sit side by side. The
   global ".refind-form-field input" rule above forces width:100% !important
   on every text-like input, so the input here needs a more specific
   override (extra .refind-field-price + .refind-price-field-row classes)
   to shrink back down and share the row with the total display. */
.refind-price-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.refind-form-field.refind-field-price .refind-price-field-row input,
.refind-add-listing .refind-form-field.refind-field-price .refind-price-field-row input,
form.refind-form .refind-form-field.refind-field-price .refind-price-field-row input {
    width: auto !important;
    flex: 1 1 120px;
}
.refind-price-total-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    color: var(--refind-text-secondary);
}
.refind-price-total-amount {
    font-weight: 700;
    color: var(--refind-text);
}

/* Simple hover/focus tooltip, used by the "Buyer pays" ⓘ next to the price
   field (and reusable anywhere else a short explanation is needed).
   Positioning (top/left) is computed and clamped to the viewport by
   assets/tooltip.js rather than centered via CSS alone — a fixed-width
   bubble centered purely with CSS on an icon near a screen edge (very
   common on mobile, where this field spans nearly the full width) could
   push part of itself past the edge of the page, which both clipped it
   against nearby overflow:hidden containers *and* forced a horizontal
   scrollbar on the whole page. position: fixed + JS clamping fixes both:
   the bubble is no longer confined by any ancestor's overflow, and its
   left/top are always kept within [8px, viewport edge - 8px]. */
.refind-tooltip {
    position: relative;
    display: inline-flex;
}
.refind-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--refind-border-strong);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: help;
}
.refind-tooltip-bubble {
    position: fixed;
    background: var(--refind-text);
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: var(--refind-radius-sm);
    box-shadow: var(--refind-shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    z-index: 100000;
    pointer-events: none;
}
.refind-tooltip-bubble-visible {
    opacity: 1;
    visibility: visible;
}

/* Featured-listing checkbox — the generic .refind-form-field input rule
   above forces width:100%/border/padding for text-like inputs, which
   would otherwise stretch a checkbox into a giant box. */
.refind-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--refind-text);
    cursor: pointer;
}
.refind-checkbox-label input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--refind-border-strong) !important;
    padding: 0 !important;
    margin: 0 !important;
    accent-color: var(--refind-primary);
    cursor: pointer;
}

/* Add-listing photos: the real <input type="file"> is hidden — the
   dropzone below stands in for it visually, and assets/refind-add-listing
   -photos.js keeps the two in sync. Kept off-screen rather than
   display:none so it stays keyboard/screen-reader reachable via labels
   that reference its id. */
.refind-photos-input-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.refind-photo-dropzone {
    border: 2px dashed var(--refind-border-strong);
    border-radius: var(--refind-radius);
    background: var(--refind-bg-subtle);
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.refind-photo-dropzone:hover,
.refind-photo-dropzone:focus-visible {
    border-color: var(--refind-primary);
    background: var(--refind-primary-tint);
}
.refind-photo-dropzone-active {
    border-color: var(--refind-primary);
    background: var(--refind-primary-tint);
}
.refind-photo-dropzone-hint {
    margin: 0;
    color: var(--refind-text-secondary);
    font-size: 14px;
}
.refind-photo-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.refind-photo-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: var(--refind-radius-sm);
    overflow: hidden;
    border: 1px solid var(--refind-border);
    background: var(--refind-bg-muted);
}
.refind-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-drag: none;
    user-drag: none;
}
.refind-photo-thumb-cover::after {
    content: "★";
    position: absolute;
    left: 4px;
    bottom: 4px;
    color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,0.7);
    font-size: 13px;
}
.refind-photo-thumb-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(20, 24, 28, 0.65);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}
.refind-photo-thumb-remove:hover {
    background: var(--refind-danger);
}
.refind-photo-thumb-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 2px 0;
    background: rgba(20, 24, 28, 0.55);
}
.refind-photo-thumb-move,
.refind-photo-thumb-cover-btn {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: var(--refind-radius-sm);
}
.refind-photo-thumb-move:hover,
.refind-photo-thumb-cover-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}
.refind-photo-thumb-cover-btn {
    font-size: 12px;
}

/* Full-page overlay shown while dragging a file over the page anywhere —
   this is what makes "drop anywhere" discoverable rather than just an
   invisible behavior. Fades in only once a real file drag is detected
   (see the dragenter/dragover checks in the JS), not on every drag. */
.refind-photo-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 119, 182, 0.12);
    border: 4px dashed var(--refind-primary);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.refind-photo-drop-overlay-visible {
    opacity: 1;
}
.refind-photo-drop-overlay-inner {
    background: var(--refind-bg);
    color: var(--refind-text);
    font-weight: 600;
    font-size: 18px;
    padding: 18px 28px;
    border-radius: var(--refind-radius);
    box-shadow: var(--refind-shadow-md);
}

/* Standalone filter shortcodes ([refind_filter_category], [refind_filter_price], etc.) */
.refind-filter-form {
    display: inline-flex;
    width: 220px;
}
.refind-filter-form select,
.refind-filter-form input[type="number"] {
    width: 100%;
    height: 44px;
    border: 2px solid #F4F4F4;
    border-radius: var(--refind-radius-sm);
    padding: var(--wp--preset--spacing--x-small, 8px);
    font-size: var(--wp--preset--font-size--medium, 16px);
    background: #fff;
    font-family: var(--refind-font);
    color: var(--refind-text);
    text-align: left;
    box-sizing: border-box;
}
.refind-filter-form select:focus,
.refind-filter-form input:focus {
    outline: none;
    border-color: var(--refind-primary);
}
.refind-filter-price {
    display: flex;
    gap: 8px;
}
.refind-filter-price input[type="number"] { width: 100%; }

/* Searchable combobox (e.g. [refind_filter_brand] with 100+ terms) */
.refind-combobox {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.refind-combobox-wrap {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.refind-combobox-input {
    width: 100%;
    height: 44px;
    border: 2px solid #F4F4F4 !important;
    border-radius: var(--refind-radius-sm);
    padding: var(--wp--preset--spacing--x-small, 8px);
    padding-right: 32px !important;
    font-size: var(--wp--preset--font-size--medium, 16px);
    background: #fff;
    font-family: var(--refind-font);
    color: var(--refind-text);
    text-align: left;
    box-sizing: border-box;
}
.refind-combobox-input:focus {
    outline: none;
    border-color: var(--refind-primary);
}
.refind-combobox-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    color: var(--refind-text-muted);
}
.refind-combobox-clear:hover { color: var(--refind-text); }
.refind-combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--refind-border-strong);
    border-radius: var(--refind-radius-sm);
    box-shadow: var(--refind-shadow-md);
    max-height: 260px;
    overflow-y: auto;
}
.refind-combobox-option {
    padding: 8px 14px;
    font-size: var(--wp--preset--font-size--medium, 16px);
    font-family: var(--refind-font);
    color: var(--refind-text);
    cursor: pointer;
}
.refind-combobox-option:hover,
.refind-combobox-option.is-active {
    background: var(--refind-primary-tint);
    color: var(--refind-primary);
}
.refind-combobox-empty {
    padding: 8px 14px;
    font-size: 13px;
    color: var(--refind-text-muted);
}
.refind-filter-clear-all {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    color: var(--refind-primary-active);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--refind-font);
    text-decoration: underline;
}
.refind-filter-clear-all:hover { color: var(--refind-text); }

/* =====================================================================
   GRID / CARDS
   ===================================================================== */
.refind-marketplace {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 24px;
}
.refind-marketplace.refind-marketplace-flush { padding-left: 0; padding-right: 0; }
.refind-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    align-items: start;
}
.refind-grid-marketplace {
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) {
    .refind-grid-marketplace { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
    .refind-grid-marketplace { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .refind-grid-marketplace { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .refind-grid-marketplace { grid-template-columns: repeat(1, 1fr); }
}

.refind-infinite-status {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--refind-text-muted);
}
#refind-infinite-sentinel {
    height: 1px;
}
.refind-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid var(--refind-border);
    border-radius: var(--refind-radius);
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.refind-card:hover {
    border-color: var(--refind-border-strong);
    box-shadow: var(--refind-shadow);
}
.refind-card-image {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--refind-bg-subtle);
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}
.refind-card-image img { width: 100%; height: 100%; object-fit: cover; }
.refind-no-image,
.refind-no-image-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--refind-bg-muted);
    color: var(--refind-text-muted);
    font-size: 13px;
}
.refind-no-image-small { aspect-ratio: 1/1; width: 60px; height: 60px; border-radius: var(--refind-radius-sm); }
.refind-card-info { display: block; padding: 12px; margin: 0; border: none; }
.refind-card-title { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--refind-text); }
.refind-card-price { display: block; font-weight: 700; margin: 0; color: var(--refind-text); }
.refind-sold .refind-card-image img { opacity: 0.4; }
.refind-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.refind-badge {
    background: var(--refind-text);
    color: #fff;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--refind-radius-sm);
}
.refind-badge-featured { background: var(--refind-primary); }
.refind-badge-tested { background: var(--refind-success); }
.refind-tested-line { color: var(--refind-success); font-weight: 600; }

.refind-pagination { margin-top: 28px; text-align: center; }
.refind-pagination .page-numbers {
    display: inline-block;
    padding: 7px 13px;
    margin: 0 2px;
    border: 1px solid var(--refind-border-strong);
    border-radius: var(--refind-radius-sm);
    text-decoration: none;
    color: var(--refind-text);
    font-size: 13px;
    font-weight: 600;
}
.refind-pagination .page-numbers:hover { border-color: var(--refind-primary); color: var(--refind-primary); }
.refind-pagination .page-numbers.current { background: var(--refind-primary); border-color: var(--refind-primary); color: #fff; }

/* Featured listings — horizontally scrollable single row */
.refind-featured-section {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 32px;
}
.refind-featured-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 2px 0 10px;
    margin: 0;
    min-width: 0;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-user-select: none;
}
.refind-featured-scroll.refind-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.refind-featured-scroll::-webkit-scrollbar { height: 6px; }
.refind-featured-scroll::-webkit-scrollbar-thumb { background: var(--refind-border-strong); border-radius: 10px; }
.refind-featured-scroll .refind-card-wrap {
    flex: 0 0 220px;
    width: 220px;
    min-width: 0;
    scroll-snap-align: start;
}
@media (max-width: 400px) {
    .refind-featured-scroll .refind-card-wrap { flex: 0 0 85%; width: 85%; }
}

/* Card wrap + favourite (heart) */
.refind-card-wrap {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}
.refind-heart-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--refind-border);
    border-radius: 50%;
    width: 32px; height: 32px; padding: 0; margin: 0; box-sizing: border-box;
    font-size: 16px; line-height: 1;
    cursor: pointer; color: var(--refind-text-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    -webkit-appearance: none; appearance: none;
}
.refind-heart-btn:hover { color: var(--refind-danger); border-color: var(--refind-danger); }
.refind-hearted { color: var(--refind-danger) !important; border-color: var(--refind-danger) !important; }

/* =====================================================================
   DASHBOARD TABLE (generic)
   ===================================================================== */
.refind-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
.refind-dashboard-table th, .refind-dashboard-table td {
    padding: 10px;
    border-bottom: 1px solid var(--refind-border);
    text-align: left;
    vertical-align: middle;
    font-size: 14px;
}
.refind-dashboard-table th { color: var(--refind-text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.refind-dash-thumb img, .refind-no-image-small { border-radius: var(--refind-radius-sm); }

.refind-status {
    padding: 3px 10px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: inline-block;
}
.refind-status-available { background: var(--refind-success-tint); color: var(--refind-success); }
.refind-status-reserved  { background: var(--refind-warning-tint); color: var(--refind-warning); }
.refind-status-sold      { background: var(--refind-danger-tint); color: var(--refind-danger); }

.refind-link {
    color: var(--refind-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
}
.refind-link:hover { text-decoration: underline; }
.refind-link-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.refind-link-danger { color: var(--refind-danger); font-size: 12px; }

/* =====================================================================
   SINGLE LISTING
   ===================================================================== */
.refind-single-listing { margin-bottom: 24px; }
.refind-single-price { font-size: 30px; font-weight: 700; margin: 0; color: var(--refind-text); }
.refind-attributes { list-style: none; padding: 0; margin: 14px 0; }
.refind-attributes li { padding: 6px 0; border-bottom: 1px solid var(--refind-border); font-size: 14px; color: var(--refind-text); }
.refind-seller { color: var(--refind-text-secondary); font-size: 14px; }
.refind-single-action { margin-top: 20px; }
.refind-badge-large {
    display: inline-block;
    background: var(--refind-text);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--refind-radius-sm);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* =====================================================================
   AUTH PAGES
   ===================================================================== */
.refind-auth-wrap { max-width: 420px; margin: 0 auto; }
.refind-auth-wrap h2 { margin-bottom: 20px; color: var(--refind-text); }

/* Unread badge */
.refind-unread-badge {
    display: inline-block;
    background: var(--refind-danger);
    color: #fff;
    border-radius: 0;
    font-size: 11px;
    padding: 1px 6px;
    margin-left: 4px;
    font-weight: 700;
}
.refind-unread-badge-offer { background: var(--refind-warning); }

/* =====================================================================
   DASHBOARD — username / name / bell, tab nav, "My Listings" rows
   ===================================================================== */
.refind-dashboard {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.refind-dash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
}
.refind-dash-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}
.refind-dashboard-name {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--refind-text);
}
.refind-dashboard-username {
    display: inline-block;
    width: 220px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--refind-radius-sm);
    padding: 4px 8px;
    font-size: 22px;
    line-height: 1.2;
    font-family: var(--refind-font);
    background: #fff;
    color: var(--refind-text-muted);
    text-align: left;
}
.refind-dashboard-bell { display: inline-flex; align-items: center; }
.refind-dashboard-avatar {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
    border: 2px solid var(--refind-border);
}
.refind-dashboard-avatar img {
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fixed 44px — matches the height of the Search button/input elsewhere
   in this header (see .refind-search-input/.refind-search-btn above,
   and the 44px convention used throughout this stylesheet), which is
   an actual sibling element to size against. The earlier
   container-driven attempt assumed a width-constrained wrapper around
   it, like the old button image had — this header doesn't have one, so
   it was rendering at the avatar's full native size instead of
   shrinking. !important + flex-shrink: 0 because, same as elsewhere in
   this stylesheet, a flex header row or a theme rule can otherwise
   still override or squeeze a plain width/height. */
.refind-header-avatar {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 0;
}
.refind-header-avatar img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    object-fit: cover;
}
/* Logged-out state: a plain circle outline with a person icon, in the
   same slot/size as the logged-in photo, instead of the header avatar
   just disappearing when there's no one logged in. */
.refind-header-avatar-guest {
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--refind-border-strong);
    color: var(--refind-text-muted);
    box-sizing: border-box;
}
.refind-header-avatar-guest svg {
    width: 60%;
    height: 60%;
}
.refind-header-avatar-guest:hover {
    border-color: var(--refind-primary);
    color: var(--refind-primary);
}

.refind-dash-tabs-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    box-sizing: border-box;
}
.refind-dash-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    gap: 4px;
    margin-bottom: 24px;
}
.refind-dash-content {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
}
.refind-tab {
    padding: 12px 18px;
    text-decoration: none;
    color: var(--refind-text-secondary);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.refind-tab:hover { color: var(--refind-primary); }
.refind-tab-active,
.refind-tab-active:hover {
    color: var(--refind-primary);
    border-bottom-color: var(--refind-primary);
}

.refind-listing-rows { display: flex; flex-direction: column; gap: 12px; }
.refind-listing-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--refind-border);
    border-radius: var(--refind-radius);
}
.refind-listing-photo {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    background: var(--refind-bg-muted);
    color: var(--refind-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    border-radius: var(--refind-radius-sm);
    overflow: hidden;
}
.refind-listing-photo img { width: 100%; height: 100%; object-fit: cover; }

.refind-listing-info { flex: 1 1 auto; min-width: 0; }
.refind-listing-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--refind-text);
    text-decoration: none;
}
.refind-listing-name:hover { color: var(--refind-primary); }
.refind-listing-price { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--refind-text); }
.refind-listing-price-strike { text-decoration: line-through; margin-right: 8px; opacity: 0.6; font-weight: 500; }

.refind-listing-meta {
    flex: 0 0 auto;
    min-width: 110px;
    text-align: right;
    font-size: 13px;
    color: var(--refind-text-secondary);
    line-height: 1.6;
}
.refind-sold-label { font-size: 15px; font-weight: 700; color: var(--refind-text); }

.refind-listing-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 96px;
}
.refind-listing-actions form { display: block; }
.refind-listing-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: var(--refind-primary);
    color: #fff !important;
    padding: 7px 12px;
    border: 1px solid var(--refind-primary);
    border-radius: var(--refind-radius-sm);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}
.refind-listing-btn:hover { background: var(--refind-primary-hover); border-color: var(--refind-primary-hover); color: #fff !important; }

/* =====================================================================
   MESSAGING
   ===================================================================== */
.refind-contact-seller { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--refind-border); }
.refind-messages-wrap { display: flex; gap: 0; border: none; border-radius: var(--refind-radius); overflow: hidden; min-height: 400px; background: #fff; }

.refind-thread-list { width: 220px; min-width: 220px; border-right: 1px solid var(--refind-border); background: var(--refind-bg-subtle); overflow-y: auto; }
.refind-thread-item {
    display: block;
    padding: 12px;
    border-bottom: 1px solid var(--refind-border);
    text-decoration: none;
    color: var(--refind-text);
    font-size: 13px;
    position: relative;
}
.refind-thread-item:hover { background: var(--refind-bg-muted); }
.refind-thread-active { background: #fff; font-weight: 700; }
.refind-thread-item strong { display: flex; align-items: center; gap: 6px; }
.refind-thread-item-presence { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--refind-border-strong); }
.refind-thread-item-presence.refind-online { background: var(--refind-success); }
.refind-thread-listing { display: block; color: var(--refind-text-muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.refind-thread-panel { flex: 1; display: flex; flex-direction: column; padding: 16px; background: #fff; }
.refind-thread-header { margin-bottom: 12px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--refind-text); }
.refind-thread-header a { color: var(--refind-text); }
.refind-presence { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12px; color: var(--refind-text-muted); }
.refind-presence-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--refind-border-strong); }
.refind-presence-dot.refind-online { background: var(--refind-success); }
.refind-presence-dot.refind-offline { background: var(--refind-border-strong); }

.refind-thread-messages { flex: 1; overflow-y: auto; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.refind-msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: var(--refind-radius); font-size: 14px; }
.refind-msg-bubble small { display: block; font-size: 11px; color: var(--refind-text-muted); margin-top: 4px; }
.refind-msg-bubble p { margin: 0; }
.refind-msg-mine { background: var(--refind-primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.refind-msg-mine small { color: rgba(255,255,255,0.75); }
.refind-msg-theirs { background: var(--refind-bg-muted); color: var(--refind-text); align-self: flex-start; border-bottom-left-radius: 3px; }

.refind-typing-indicator { display: none; align-items: center; gap: 6px; padding: 0 4px 8px; color: var(--refind-text-muted); font-size: 12px; }
.refind-typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: var(--refind-border-strong); display: inline-block; animation: refind-typing-bounce 1.2s infinite ease-in-out; }
.refind-typing-indicator span:nth-child(2) { animation-delay: .15s; }
.refind-typing-indicator span:nth-child(3) { animation-delay: .3s; }
@keyframes refind-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.refind-reply-form textarea {
    padding: 9px 12px;
    border: 1px solid var(--refind-border-strong);
    border-radius: var(--refind-radius-sm);
    resize: vertical;
    font-family: var(--refind-font);
}
.refind-reply-form textarea:focus { outline: none; border-color: var(--refind-primary); }

/* Price breakdown */
.refind-price-breakdown { background: var(--refind-bg-subtle); border: 1px solid var(--refind-border); border-radius: var(--refind-radius); padding: 14px 16px; margin: 12px 0; }
.refind-price-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--refind-text); }
.refind-price-row:not(:last-child) { border-bottom: 1px solid var(--refind-border); }
.refind-price-total { font-weight: 700; font-size: 16px; padding-top: 8px; }

/* =====================================================================
   MODAL
   ===================================================================== */
.refind-modal {
    position: fixed; inset: 0; background: rgba(20, 24, 28, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9998;
}
.refind-modal-box {
    background: #fff; border-radius: var(--refind-radius-lg); padding: 28px 32px;
    width: 90%; max-width: 480px; max-height: 90vh;
    overflow-y: auto; position: relative;
    box-shadow: var(--refind-shadow-md);
}
.refind-modal-close {
    position: absolute; top: 12px; right: 16px;
    background: none; border: none; font-size: 22px;
    cursor: pointer; color: var(--refind-text-muted); line-height: 1;
}
.refind-modal-close:hover { color: var(--refind-text); }
.refind-modal-box h3 { margin: 0 0 16px; font-size: 18px; color: var(--refind-text); }
.refind-modal-box input, .refind-modal-box textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid var(--refind-border-strong); border-radius: var(--refind-radius-sm); font-size: 14px;
    font-family: var(--refind-font);
}
.refind-modal-box input:focus, .refind-modal-box textarea:focus { border-color: var(--refind-primary); outline: none; }

.refind-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
.refind-modal-actions .refind-listing-btn { display: inline-block; width: auto; }
.refind-modal-cancel {
    background: #fff !important;
    color: var(--refind-text) !important;
    border: 1px solid var(--refind-border-strong) !important;
}
.refind-modal-cancel:hover { background: var(--refind-bg-subtle) !important; }

/* =====================================================================
   DELIVERY OPTIONS
   ===================================================================== */
.refind-delivery-options { display: flex; gap: 12px; margin-bottom: 20px; }
.refind-delivery-option {
    flex: 1; border: 1.5px solid var(--refind-border); border-radius: var(--refind-radius);
    padding: 12px; cursor: pointer; text-align: center; font-size: 14px;
    color: var(--refind-text); transition: border-color 0.15s ease, background 0.15s ease;
}
.refind-delivery-option:hover { border-color: var(--refind-border-strong); }
.refind-delivery-option input { margin-right: 6px; }
.refind-delivery-fields { margin-bottom: 16px; }
.refind-delivery-fields input {
    padding: 9px 12px; border: 1px solid var(--refind-border-strong); border-radius: var(--refind-radius-sm);
    box-sizing: border-box; font-family: var(--refind-font);
}

/* Locker / pickup point map + list */
#refind-locker-map { height: 220px; border: 1px solid var(--refind-border); border-radius: var(--refind-radius-sm); margin-bottom: 8px; background: var(--refind-bg-subtle); }
#refind-locker-map .leaflet-popup-content { font-family: var(--refind-font); font-size: 13px; }
#refind-locker-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--refind-border); border-radius: var(--refind-radius-sm); margin-top: 8px; }
#refind-selected-shop { margin-top: 8px; font-size: 13px; color: var(--refind-text-secondary); }

.refind-shop-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--refind-border);
    font-size: 13px;
    line-height: 1.4;
    color: var(--refind-text);
    transition: background 0.1s ease;
}
.refind-shop-item:last-child { border-bottom: none; }
.refind-shop-item:hover { background: var(--refind-bg-subtle); }
.refind-shop-item.refind-shop-selected,
.refind-shop-selected {
    background: var(--refind-primary-tint);
    border-left: 3px solid var(--refind-primary);
}
.refind-shop-badge {
    font-size: 11px;
    font-weight: 700;
    background: var(--refind-bg-muted);
    color: var(--refind-text-secondary);
    border-radius: var(--refind-radius-sm);
    padding: 1px 6px;
    margin-right: 4px;
}

/* =====================================================================
   SEARCH BAR
   ===================================================================== */
/* One connected pill: input and button share a single fully-rounded
   outline instead of two separate boxes with a gap between them. The
   outer wrapper carries the rounded border/background; the input and
   button are both borderless/transparent inside it, so the whole thing
   reads as one long bar. min-width keeps it from feeling squat like the
   old two-piece version at typical header widths. The wildcard reset
   below exists because a plain outline:none/box-shadow:none on just
   the input/button (tried previously) wasn't enough to beat the
   theme's own focus/appearance styling — !important across the whole
   wrapper is the reliable version of the same fix. */
.refind-search-bar,
.refind-search-bar * {
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.refind-search-bar {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
    border: 2px solid #F4F4F4 !important;
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.refind-search-bar:focus-within { border-color: var(--refind-primary) !important; }
.refind-search-input {
    flex: 1;
    min-width: 0;
    padding: 0 20px;
    border: none !important;
    background: transparent;
    font-size: 15px;
    font-family: var(--refind-font);
    color: var(--refind-text);
}
.refind-search-btn {
    flex-shrink: 0;
    padding: 0 28px;
    background: var(--refind-primary);
    color: #fff;
    border: none !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--refind-font);
}
.refind-search-btn:hover { background: var(--refind-primary-hover); }

/* =====================================================================
   SELLER PROFILE / REVIEWS
   ===================================================================== */
.refind-stars { color: var(--refind-primary); letter-spacing: 2px; }

.refind-reviews { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.refind-review-item { border: 1px solid var(--refind-border); border-radius: var(--refind-radius); padding: 16px; background: #fff; }
.refind-review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.refind-review-header img { border-radius: 50%; }
.refind-review-comment { margin: 8px 0; color: var(--refind-text); }
.refind-review-listing { color: var(--refind-text-muted); margin: 0; font-size: 13px; }
.refind-review-done { background: var(--refind-bg-subtle); padding: 10px 12px; border-radius: var(--refind-radius-sm); font-size: 13px; color: var(--refind-text-secondary); }

/* Star picker */
.refind-star-picker { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 12px; }
.refind-star-picker input { display: none; }
.refind-star-picker label { font-size: 26px; color: var(--refind-border-strong); cursor: pointer; }
.refind-star-picker input:checked ~ label,
.refind-star-picker label:hover,
.refind-star-picker label:hover ~ label { color: var(--refind-primary); }

/* =====================================================================
   WALLET
   ===================================================================== */
.refind-wallet { max-width: 600px; }
.refind-wallet-balance {
    background: var(--refind-primary); color: #fff; border-radius: var(--refind-radius-lg);
    padding: 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;
}
.refind-wallet-label { font-size: 13px; opacity: 0.85; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.refind-wallet-amount { font-size: 32px; font-weight: 700; }
.refind-wallet-tab-balance { font-size: 12px; background: var(--refind-bg-muted); color: var(--refind-text-secondary); padding: 2px 7px; border-radius: var(--refind-radius-sm); margin-left: 4px; }
.refind-wallet-note { color: var(--refind-text-muted); font-size: 13px; }
.refind-credit { color: var(--refind-success); font-weight: 600; }
.refind-debit  { color: var(--refind-danger); font-weight: 600; }
.refind-withdraw-form { background: var(--refind-bg-subtle); border: 1px solid var(--refind-border); border-radius: var(--refind-radius); padding: 20px; margin-bottom: 24px; }

/* Order cards in purchases tab */
.refind-order-card { border: 1px solid var(--refind-border); border-radius: var(--refind-radius); padding: 16px; margin-bottom: 16px; background: #fff; }
.refind-order-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.refind-tracking { font-size: 13px; color: var(--refind-text-secondary); margin: 8px 0; }
.refind-tracking a { margin-left: 8px; color: var(--refind-primary); font-weight: 600; text-decoration: none; }
.refind-tracking a:hover { text-decoration: underline; }
.refind-review-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--refind-border); }
.refind-review-section h4 { margin: 0 0 12px; color: var(--refind-text); }

/* =====================================================================
   LANGUAGE SWITCHER
   ===================================================================== */
.refind-lang-switcher { display: flex; gap: 8px; align-items: center; }
.refind-lang-option { text-decoration: none; color: var(--refind-text-secondary); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--refind-radius-sm); }
.refind-lang-option:hover { background: var(--refind-bg-muted); color: var(--refind-text); }
.refind-lang-active { font-weight: 700; color: var(--refind-primary); background: var(--refind-primary-tint); }

/* =====================================================================
   NOTIFICATIONS — bell + dropdown
   ===================================================================== */
.refind-notif-bell-wrap { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0; }
.refind-notif-bell { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.refind-notif-bell-icon { width: 36px; height: 36px; display: block; object-fit: contain; }
.refind-notif-count {
    position: absolute; top: -4px; right: -6px;
    background: var(--refind-danger); color: #fff; border-radius: 0;
    font-size: 11px; font-weight: 700; min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px; pointer-events: none;
}
.refind-notif-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 320px; background: #fff; border: 1px solid var(--refind-border);
    border-radius: var(--refind-radius); box-shadow: var(--refind-shadow-md);
    z-index: 9999; overflow: hidden;
}
.refind-notif-dropdown-header { padding: 12px 16px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--refind-border); background: var(--refind-bg-subtle); color: var(--refind-text); }
.refind-notif-list { max-height: 360px; overflow-y: auto; }
.refind-notif-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 16px; border-bottom: 1px solid var(--refind-border);
    text-decoration: none; color: inherit; transition: background .15s ease;
}
.refind-notif-item:hover { background: var(--refind-bg-subtle); }
.refind-notif-unread { background: var(--refind-primary-tint); }
.refind-notif-text { font-size: 13px; line-height: 1.4; color: var(--refind-text); }
.refind-notif-time { font-size: 11px; color: var(--refind-text-muted); }
.refind-notif-empty { padding: 20px 16px; color: var(--refind-text-muted); font-size: 13px; margin: 0; }

/* =====================================================================
   OFFERS
   ===================================================================== */
.refind-offer-widget-wrap { margin-top: 12px; }
.refind-offer-box { background: var(--refind-bg-subtle); border: 1px solid var(--refind-border); border-radius: var(--refind-radius); padding: 14px 16px; margin-top: 8px; font-size: 14px; color: var(--refind-text); }
.refind-offer-accepted { background: var(--refind-success-tint); border-color: #BFE3CE; }

.refind-msg-offer {
    align-self: center;
    width: 100%;
    max-width: 90%;
    background: var(--refind-bg-subtle);
    border: 1px solid var(--refind-border);
    border-radius: var(--refind-radius);
    padding: 14px 16px;
}
.refind-msg-offer.refind-msg-offer-accepted  { background: var(--refind-success-tint); border-color: #BFE3CE; }
.refind-msg-offer.refind-msg-offer-declined,
.refind-msg-offer.refind-msg-offer-cancelled,
.refind-msg-offer.refind-msg-offer-countered { background: var(--refind-bg-subtle); border-color: var(--refind-border); opacity: .7; }

.refind-offer-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; gap: 12px; color: var(--refind-text); }
.refind-offer-note { font-size: 13px; color: var(--refind-text-secondary); margin: 8px 0 0; font-style: italic; }
.refind-msg-offer small { display: block; margin-top: 8px; font-size: 11px; color: var(--refind-text-muted); }

.refind-status { display: inline-block; font-weight: 700; font-size: 15px; white-space: nowrap; }
.refind-status-pending   { color: var(--refind-warning); }
.refind-status-accepted  { color: var(--refind-success); }
.refind-status-declined  { color: var(--refind-danger); }
.refind-status-cancelled { color: var(--refind-text-muted); }
.refind-status-countered { color: var(--refind-text-muted); }

.refind-offer-waiting { color: var(--refind-text-muted); font-size: 13px; margin: 8px 0 0; }
.refind-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.refind-offer-counter-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 8px; }
.refind-offer-counter-amount {
    padding: 9px 12px; border: 1px solid var(--refind-border-strong); border-radius: var(--refind-radius-sm);
    font-size: 13px; width: 130px; font-family: var(--refind-font);
}
.refind-offer-msg { font-size: 13px; margin: 4px 0 0; color: var(--refind-text-secondary); }

/* =====================================================================
   SHIPPING — carrier tabs + pickup point list
   ===================================================================== */
.refind-carrier-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.refind-carrier-tab {
    padding: 7px 16px;
    border: 1.5px solid var(--refind-border-strong);
    border-radius: 0;
    background: #fff;
    color: var(--refind-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--refind-font);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.refind-carrier-tab:hover { border-color: var(--refind-primary); color: var(--refind-primary); }
.refind-carrier-tab.refind-tab-active {
    border-color: var(--refind-primary);
    background: var(--refind-primary);
    color: #fff;
}

/* Tracking status badges */
.refind-tracking-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
}
.refind-tracking-badge.booked        { background: var(--refind-primary-tint); color: var(--refind-primary); }
.refind-tracking-badge.in_transit    { background: var(--refind-warning-tint); color: var(--refind-warning); }
.refind-tracking-badge.ready_pickup  { background: var(--refind-success-tint); color: var(--refind-success); }
.refind-tracking-badge.delivered     { background: var(--refind-success-tint); color: var(--refind-success); }
.refind-tracking-badge.error         { background: var(--refind-danger-tint); color: var(--refind-danger); }

/* Shipping rates widget */
.refind-rates-section { margin-bottom: 16px; }
.refind-rates-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--refind-text); }
.refind-rate-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.refind-rates-loading { color: var(--refind-text-muted); font-size: 13px; animation: refind-pulse 1.5s ease-in-out infinite; }
@keyframes refind-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
.refind-rate-option {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1.5px solid var(--refind-border);
    border-radius: var(--refind-radius);
    cursor: pointer;
    font-size: 13px;
    color: var(--refind-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.refind-rate-option:hover { border-color: var(--refind-border-strong); background: var(--refind-bg-subtle); }
.refind-rate-option.refind-rate-selected { border-color: var(--refind-primary); background: var(--refind-primary-tint); }
.refind-rate-carrier { font-weight: 700; font-size: 12px; color: var(--refind-text); }
.refind-rate-service { color: var(--refind-text-secondary); }
.refind-rate-eta { color: var(--refind-text-muted); font-size: 12px; }
.refind-rate-price { font-weight: 700; font-size: 15px; color: var(--refind-text); white-space: nowrap; }
.refind-rate-est { font-size: 10px; color: var(--refind-text-muted); font-weight: 400; }

/* Saved addresses */
.refind-saved-addresses { margin-bottom: 12px; }
.refind-saved-addr-btn {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 6px 14px;
    border: 1.5px solid var(--refind-border-strong);
    border-radius: 0;
    background: #fff;
    color: var(--refind-text);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--refind-font);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.refind-saved-addr-btn:hover,
.refind-saved-addr-btn.active {
    border-color: var(--refind-primary);
    background: var(--refind-primary-tint);
    color: var(--refind-primary);
}

/* Addresses dashboard tab */
.refind-addresses-wrap { max-width: 600px; }
.refind-address-country-pref {
    background: var(--refind-bg-subtle);
    border: 1px solid var(--refind-border);
    border-radius: var(--refind-radius);
    padding: 16px 20px;
    margin-bottom: 4px;
}
.refind-address-card {
    border: 1px solid var(--refind-border);
    border-radius: var(--refind-radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
}
.refind-address-label { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.refind-address-country-badge {
    font-size: 11px;
    font-weight: 600;
    background: var(--refind-bg-muted);
    border-radius: var(--refind-radius-sm);
    padding: 2px 7px;
    color: var(--refind-text-secondary);
}
.refind-address-detail { font-size: 13px; color: var(--refind-text-secondary); line-height: 1.5; margin-bottom: 8px; }
.refind-addr-delete { font-size: 12px; color: var(--refind-danger); font-weight: 600; background: none; border: none; cursor: pointer; padding: 0; }
.refind-addr-delete:hover { text-decoration: underline; }

/* QR + shipping block in order cards */
.refind-shipping-block { margin-top: 10px; border-top: 1px solid var(--refind-border); padding-top: 10px; }
.refind-shipping-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.refind-shipping-info { flex: 1; font-size: 13px; color: var(--refind-text); }

.refind-carrier-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--refind-radius-sm);
    padding: 2px 8px;
    margin-right: 4px;
    color: #fff;
}
.refind-carrier-badge.refind-carrier-dpd       { background: #B3261E; }
.refind-carrier-badge.refind-carrier-omniva    { background: #C46A0A; }
.refind-carrier-badge.refind-carrier-lpexpress { background: #8A6D00; }

.refind-qr-block { text-align: center; flex-shrink: 0; }
.refind-qr-img { border: 1px solid var(--refind-border); border-radius: var(--refind-radius-sm); padding: 4px; background: #fff; display: block; }
.refind-qr-label { font-size: 10px; color: var(--refind-text-muted); margin-top: 3px; }

/* =====================================================================
   Category tag/pill filter (refind_filter_category_tags shortcode)
   ===================================================================== */
.refind-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.refind-filter-tag {
    display: inline-block;
    padding: var(--wp--preset--spacing--x-small, 8px) calc(var(--wp--preset--spacing--x-small, 8px) * 1.75);
    font-size: var(--wp--preset--font-size--medium, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: var(--refind-text-secondary);
    background: var(--refind-bg-subtle);
    border: 1px solid var(--refind-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.refind-filter-tag:hover {
    color: var(--refind-text);
    border-color: var(--refind-border-strong);
    background: var(--refind-bg-muted);
}
.refind-filter-tag.is-active {
    color: var(--refind-primary);
    background: var(--refind-primary-tint);
    border-color: var(--refind-primary-border);
}
.refind-grid-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ==========================================================================
   Checkout modal — two-column layout
   Replaces the old single-column delivery modal. The carrier-tab and
   rate-option rules further up are no longer used by checkout.js (the
   buyer picks a locker, not a logistics company) but are left in place
   in case another view still references them.
   ========================================================================== */

body.refind-modal-open { overflow: hidden; }

.refind-checkout-modal {
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}

.refind-checkout-box {
    position: relative;
    background: var(--refind-bg);
    border: 1px solid var(--refind-border);
    box-shadow: var(--refind-shadow-md);
    width: 100%;
    max-width: 940px;
    margin: auto;
}

.refind-checkout-box .refind-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    font-size: 26px;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--refind-text-muted);
}
.refind-checkout-box .refind-modal-close:hover { color: var(--refind-text); }

.refind-checkout-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: stretch;
}

/* ---------- Left: order summary ---------- */
.refind-checkout-summary {
    background: var(--refind-bg-subtle);
    border-right: 1px solid var(--refind-border);
}
.refind-summary-inner {
    position: sticky;
    top: 0;
    padding: 28px 24px;
}
.refind-summary-eyebrow {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--refind-text-secondary);
}

.refind-summary-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--refind-border);
}
.refind-summary-thumb img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
}
.refind-summary-item-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.refind-summary-item-meta strong {
    font-size: 14px;
    line-height: 1.35;
    color: var(--refind-text);
    overflow-wrap: anywhere;
}
.refind-summary-item-meta span { font-size: 12px; color: var(--refind-text-secondary); }

.refind-summary-lines { margin: 16px 0 0; }
.refind-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    margin: 0 0 10px;
}
.refind-summary-line dt { color: var(--refind-text-secondary); margin: 0; }
.refind-summary-line dd { margin: 0; color: var(--refind-text); font-variant-numeric: tabular-nums; }
.refind-summary-sublabel { color: var(--refind-text-muted); font-size: 12px; }

.refind-summary-total {
    border-top: 1px solid var(--refind-border);
    padding-top: 12px;
    margin-top: 14px;
}
.refind-summary-total dt { color: var(--refind-text); font-weight: 700; font-size: 15px; }
.refind-summary-total dd { font-weight: 700; font-size: 20px; }

.refind-summary-note {
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--refind-text-muted);
}

/* ---------- Right: steps ---------- */
.refind-checkout-main { padding: 28px 28px 32px; min-width: 0; }
.refind-checkout-title { margin: 0 0 22px; font-size: 20px; color: var(--refind-text); }

.refind-step { margin-bottom: 26px; }
.refind-step-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--refind-text);
}
.refind-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--refind-text);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: 0 0 auto;
}

.refind-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.refind-field-full { grid-column: 1 / -1; }

.refind-checkout-main .refind-input {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--refind-font);
    font-size: 14px;
    color: var(--refind-text);
    background: var(--refind-bg);
    border: 1px solid var(--refind-border-strong);
    border-radius: var(--refind-radius-sm);
    box-sizing: border-box;
}
.refind-checkout-main .refind-input:focus {
    border-color: var(--refind-primary);
    outline: 2px solid var(--refind-primary-tint);
    outline-offset: 0;
}

/* ---------- Radio choice rows (delivery + payment) ---------- */
.refind-choice-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.refind-choice {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--refind-border-strong);
    background: var(--refind-bg);
    cursor: pointer;
}
.refind-choice:hover { border-color: var(--refind-primary); }
.refind-choice.refind-choice-active {
    border-color: var(--refind-primary);
    background: var(--refind-primary-tint);
}
.refind-choice input[type="radio"] { margin: 0; flex: 0 0 auto; }
.refind-choice-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.refind-choice-title { font-size: 14px; font-weight: 600; color: var(--refind-text); }
.refind-choice-sub { font-size: 12px; color: var(--refind-text-secondary); }
.refind-choice-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--refind-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.refind-choice-disabled { opacity: 0.55; cursor: not-allowed; }
.refind-choice-disabled:hover { border-color: var(--refind-border-strong); }

/* ---------- Locker picker ---------- */
.refind-checkout-main #refind-locker-map {
    height: 240px;
    margin: 10px 0 0;
    border: 1px solid var(--refind-border);
}
.refind-locker-list {
    max-height: 230px;
    overflow-y: auto;
    border: 1px solid var(--refind-border);
    border-top: 0;
}
.refind-locker-msg { padding: 12px; margin: 0; font-size: 13px; color: var(--refind-text-muted); }
.refind-locker-msg-error { color: var(--refind-danger); }
.refind-locker-hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--refind-text-muted);
}

.refind-checkout-main .refind-shop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--refind-border);
    cursor: pointer;
}
.refind-checkout-main .refind-shop-item:last-child { border-bottom: 0; }
.refind-checkout-main .refind-shop-item:hover { background: var(--refind-bg-subtle); }
.refind-checkout-main .refind-shop-item.refind-shop-selected {
    background: var(--refind-primary-tint);
    box-shadow: inset 3px 0 0 var(--refind-primary);
}
.refind-shop-dot { width: 10px; height: 10px; flex: 0 0 auto; }
.refind-shop-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.refind-shop-text strong { font-size: 13px; color: var(--refind-text); }
.refind-shop-text small { font-size: 12px; color: var(--refind-text-secondary); }
.refind-shop-carrier {
    font-size: 11px;
    color: var(--refind-text-muted);
    white-space: nowrap;
    flex: 0 0 auto;
}
.refind-selected-shop {
    margin: 10px 0 0;
    padding: 9px 11px;
    font-size: 13px;
    color: var(--refind-text);
    background: var(--refind-success-tint);
    border-left: 3px solid var(--refind-success);
}
.refind-selected-shop:empty { display: none; }

/* Carrier-coloured map pin */
.refind-locker-pin span {
    display: block;
    width: 14px;
    height: 14px;
    margin: 2px;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ---------- Saved addresses ---------- */
.refind-checkout-main .refind-saved-addresses { margin-bottom: 12px; }
.refind-saved-addr-title { margin: 0 0 6px; font-size: 12px; color: var(--refind-text-secondary); }

.refind-save-addr {
    margin-top: 10px;
    padding: 11px;
    background: var(--refind-bg-subtle);
    border: 1px solid var(--refind-border);
}
.refind-save-addr-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 8px;
}

/* ---------- Submit ---------- */
.refind-checkout-submit { width: 100%; margin-top: 4px; }
.refind-checkout-submit[disabled] { opacity: .6; cursor: progress; }
.refind-checkout-main .refind-error { margin: 0 0 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
    .refind-checkout-grid { grid-template-columns: 1fr; }
    .refind-checkout-summary {
        border-right: 0;
        border-bottom: 1px solid var(--refind-border);
        order: -1;
    }
    .refind-summary-inner { position: static; padding: 22px 20px; }
    .refind-checkout-main { padding: 22px 20px 26px; }
    .refind-checkout-modal { padding: 0; }
    .refind-checkout-box { max-width: none; min-height: 100%; border: 0; }
}

@media (max-width: 480px) {
    .refind-field-grid { grid-template-columns: 1fr; }
    .refind-checkout-main #refind-locker-map { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
    .refind-checkout-box * { transition: none !important; }
}

/* ---------- Wallet discount line ---------- */
#refind-sum-wallet-line dd { color: var(--refind-success); }

/* ---------- TEMPORARY: test delivery option — remove before launch ---------- */
.refind-choice-test {
    border-style: dashed;
    background: repeating-linear-gradient(
        135deg,
        var(--refind-bg) 0 10px,
        var(--refind-bg-subtle) 10px 20px
    );
}
.refind-choice-test.refind-choice-active { border-style: solid; }