/**
 * ALL visual overrides of third-party plugin/library UI live in this one
 * file -- markup this theme doesn't own/control the PHP for (a bundled JS
 * library's own generated DOM, or another plugin's own admin-style button/
 * form/modal), restyled here via CSS only so the plugin/library can update
 * normally without this theme's own template files needing to track it.
 * Enqueued sitewide (inc/class-zurgle-setup.php), since third-party UI like
 * this can surface on more than one page (see each section below for
 * exactly where). Genuinely page-specific layout CSS that merely reuses a
 * library's class name for JS hooks (e.g. Swiper's own `.swiper-slide` used
 * as a plain content wrapper in product-details.css/media.css) does NOT
 * belong here -- this file is for actually restyling a third party's own
 * visual identity (colors/spacing/typography), not for this theme's own
 * layout code that happens to sit inside a library-provided element.
 */

/* ============================================================
   Dokan Pro -- Store Support module ("Get Support" button + popup)
   No theme code triggers this at all: Dokan Pro hooks its own button
   directly onto woocommerce_after_add_to_cart_button (product page),
   dokan_after_store_tabs (seller Store page), and
   woocommerce_order_details_after_order_table (My Account order details).
   The popup itself is identical everywhere, but the TRIGGER BUTTON'S own
   class combo differs by page (generate_support_button_product_page() vs.
   generate_support_button()) -- confirmed by reading module.php directly --
   so the product-page and store-page variants each get their own rule
   below rather than assuming one selector covers both.
   ============================================================ */

/* Product-page button variant specifically (`.dokan-store-support-btn-product`)
   -- restyled to match this page's own outline-button language
   (.woocommerce-cart-form .button/.btn-visit-store, product-details.css)
   instead of WooCommerce/Dokan's default button.alt styling. !important on
   background/border/color since WooCommerce core's own
   `.woocommerce button.button.alt` selector is otherwise specific enough to
   win the cascade against this button's own class alone. */
.dokan-store-support-btn-product {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 22px;
    border-radius: var(--radius);
    background: #fff !important;
    color: var(--btn-blue) !important;
    border: 1px solid var(--btn-blue) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: var(--transition);
}

.dokan-store-support-btn-product:hover {
    background: #f5fbff !important;
    color: var(--btn-blue) !important;
}

/* Store-page button variant (`.seller-profile-actions .dokan-store-support-btn`)
   -- a DIFFERENT class combo than the product-page variant above
   (generate_support_button() vs. generate_support_button_product_page(),
   dokan-pro's store-support module), so it needs its own rule; same
   outline-button treatment for visual consistency across the two pages. */
.seller-profile-actions .dokan-store-support-btn,
.seller-profile-actions .dokan-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--radius);
    background: #fff !important;
    color: var(--btn-blue) !important;
    border: 1px solid var(--btn-blue) !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: var(--transition);
}

.seller-profile-actions .dokan-store-support-btn:hover,
.seller-profile-actions .dokan-share-btn:hover {
    background: #f5fbff !important;
    color: var(--btn-blue) !important;
}

/* The popup itself: iziModal (bundled by dokan-lite) generates the modal
   chrome; the AJAX-loaded support/login form inside it uses Dokan's own
   generic .dokan-form-* classes. Same popup regardless of which of the
   three hooks above triggered it, so styled once here rather than
   duplicated per page.

   Dokan's own JS sets this modal's width as an inline style (its own
   `width: 430` init option, modules/store-support/assets/js/script.js) --
   !important on width is what it takes to win over that inline style, same
   reasoning as the header background below. max-width is a plain CSS
   addition (nothing inline to fight there) so it still shrinks safely on
   narrow screens instead of overflowing. */
.iziModal {
    width: 480px !important;
    max-width: 92vw;
    border-radius: 12px;
    overflow: hidden;
    font-family: inherit;
}

/* iziModal sets this overlay's own darkness via an inline `background-color`
   (its own `overlayColor` option, default rgba(0,0,0,0.4)) rather than a
   separate `opacity` property -- setting `opacity` here instead of trying to
   out-`!important` that specific inline background-color still needs
   `!important` itself, since iziModal's JS re-applies that inline style on
   every open. Affects the darkening overlay only, not the modal card sitting
   on top of it. Class name is genuinely camelCase (`iziModal-overlay`, per
   the library's own source -- confirmed directly, not a typo) -- CSS class
   matching is case-sensitive, so `.izimodal-overlay` here would silently
   never match at all. */
.iziModal-overlay {
    opacity: 0.7 !important;
}

/* iziModal sets the header's background-color as an inline style via JS
   (its own `headerColor` option) -- !important is what it actually takes to
   win over that inline style from plain CSS. */
.iziModal .iziModal-header {
    background: var(--btn-blue) !important;
    padding: 24px 28px;
}

.iziModal .iziModal-header-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
}

.iziModal .iziModal-content {
    padding: 28px;
}

/* The close button itself sits inside .iziModal-header-buttons, which
   iziModal positions absolutely at `right: 10px` -- close enough to the
   header's own edge that the button visually touched it, since the button
   has no positioning of its own to offset that. Overriding the WRAPPER's
   `right` (not the button) is what actually moves it inward. */
.iziModal .iziModal-header-buttons {
    right: 22px !important;
}

/* iziModal's own native close button (top-right, always present) is by
   default a low-opacity base64-encoded PNG sprite with no padding -- a
   crude, barely-visible "X". Replaced with a proper circular icon button
   (Font Awesome, already loaded sitewide) matching the exact same "close
   this overlay" convention already established for the product gallery's
   own .lightbox-close (product-details.css): solid circle, translucent
   white against a colored header, brightens + a subtle rotate on hover
   (iziModal's own `transform:rotate(180deg)` hover rule still applies on
   top of this -- only the box/icon look is replaced here, the interaction
   itself is kept). background-image/background-size are iziModal's own
   `!important`-marked rules (see the extracted source), so both need
   `!important` here too to actually win. */
.iziModal .iziModal-button-close {
    background-image: none !important;
    background-color: rgba(255, 255, 255, .18) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .5);
    opacity: 1;
    transition: background-color .2s ease, transform .3s cubic-bezier(.16, .81, .32, 1);
}

.iziModal .iziModal-button-close::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00d";
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

.iziModal .iziModal-button-close:hover {
    background-color: rgba(255, 255, 255, .32) !important;
}

/* Dokan's own secondary close button, injected inline only inside specific
   AJAX-loaded states (e.g. the login-error/success messages inside this
   same popup, modules/store-support/assets/js/script.js) -- a plain white
   square with a bare Font Awesome icon and no real button styling. Same
   circular treatment, just on a light background instead of the header's
   colored one since this one sits inside the white modal body. */
.dokan-izimodal-close-btn {
    text-align: right;
}

.dokan-izimodal-close-btn button.icon-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0 !important;
    background: #f2f4f6 !important;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-dark);
    transition: var(--transition);
    margin: 5px;
}

.dokan-izimodal-close-btn button.icon-close:hover {
    background: #e5e9ed !important;
}

.dokan-support-intro-user {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.dokan-support-intro-text {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 16px;
}

.dokan-form-container .dokan-form-group {
    margin-bottom: 16px;
}

.dokan-form-container .dokan-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
}

.dokan-form-container .dokan-form-control,
.dokan-form-container select,
.dokan-form-container textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    color: var(--text-dark);
    background: #fff;
}

/* The support form's own Order dropdown (`<select class="dokan-form-control
   dokan-select" name="order_id">`, module.php's get_support_form()) inherits
   the horizontal padding above same as every other .dokan-form-control --
   on a plain <select>, that padding eats into the space the browser gives
   the option text itself, cropping longer order labels. Zeroed out here,
   specifically for the select variant, rather than lowering the shared
   padding value everyone else (real text inputs/textareas) still needs. */
.dokan-form-container select.dokan-form-control,
.dokan-form-container .dokan-select {
    padding: 0;
}

.dokan-form-container .dokan-form-control:focus {
    outline: none;
    border-color: var(--btn-blue);
}

/* Dokan's own bundled CSS already styles .dokan-btn-theme fairly
   specifically with its own default color -- !important needed here too,
   same reasoning as the header background above. */
.dokan-form-container .dokan-btn.dokan-btn-theme,
#support-submit-btn {
    padding: 10px 28px;
    border-radius: var(--radius);
    background: var(--btn-blue) !important;
    border-color: var(--btn-blue) !important;
    color: #fff !important;
    font-weight: 700;
    cursor: pointer;
    width:100%;
}

.dokan-form-container .dokan-btn.dokan-btn-theme:hover,
#support-submit-btn:hover {
    background: var(--btn-blue-hover) !important;
    border-color: var(--btn-blue-hover) !important;
}

.dokan-popup-create-an-account a.dokan-btn {
    background: #fff !important;
    color: var(--btn-blue) !important;
    border: 1px solid var(--btn-blue) !important;
}

/* ============================================================
   Dokan Pro -- Simple Auction module's seller-dashboard "Auctions
   Activity" page (theme override at dokan/auction/auction-activity.php,
   see that file's own docblock for why it exists). The "Bid Activity"/
   "Auction Results" toggle and the result badges are this theme's own
   additions on top of Dokan's existing dokan-table/dokan-btn markup, so
   only they need styling here -- everything else on that page already
   inherits Dokan's own dashboard styles untouched.
   ============================================================ */
.zurgle-auction-view-toggle {
    display: flex;
    gap: 8px;
    margin: 20px 0;
}

.zurgle-auction-view-tab {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid var(--btn-blue);
    border-radius: var(--radius);
    color: var(--btn-blue);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition);
}

.zurgle-auction-view-tab:hover {
    background: #f5fbff;
    color: var(--btn-blue);
}

.zurgle-auction-view-tab.active {
    background: var(--btn-blue);
    color: #fff;
}

.zurgle-auction-result-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
}

.zurgle-auction-result-sold {
    background: #dcfce7;
    color: #166534;
}

.zurgle-auction-result-failed {
    background: #f2f4f6;
    color: var(--text-muted);
}

/* ============================================================
   Seller dashboard's own "Auctions Activity" table (theme override:
   dokan/auction/auction-activity.php) -- native Dokan dashboard tables
   (.dokan-table) have no real visual styling of their own beyond a plain
   HTML table (no theme stylesheet on this site restyles that class at
   all, confirmed -- product-listing.css only covers product-card grids,
   not this kind of data table), which read as "plain black and default
   html table" per direct request. Restyled here rather than in
   product-details.css since this is genuinely a third-party (Dokan)
   table being given this theme's own visual identity, the exact purpose
   of this file. Status badge colors reuse the SAME
   `.zurgle-auction-status-badge--*` classes/colors the "Auction Details"
   modal already defines (assets/css/auction-manager.css, plugin) -- not
   redefined here, just applied via the same class names server-side
   (Admin_Auction_Manager::status_badge_modifier()).
   ============================================================ */

.zurgle-auction-activity-table {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.zurgle-auction-activity-table thead th {
    background: #F6F8FA;
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.zurgle-auction-activity-table tbody td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-dark);
    border-bottom: 1px solid #ECEEF1;
    vertical-align: middle;
}

.zurgle-auction-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.zurgle-auction-activity-table.table-striped tbody tr:nth-child(even) {
    background: #FAFBFC;
}

.zurgle-auction-activity-table tbody tr:hover {
    background: #F5FBFF;
}

.zurgle-auction-activity-table a {
    color: var(--link-blue2);
    font-weight: 600;
    text-decoration: none;
}

.zurgle-auction-activity-table a:hover {
    text-decoration: underline;
}

.zurgle-auction-activity-table small {
    color: var(--text-muted);
}

.zurgle-auction-activity-table .zurgle-auction-view-details {
    background: #fff;
    color: var(--btn-blue);
    border: 1px solid var(--btn-blue);
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.zurgle-auction-activity-table .zurgle-auction-view-details:hover {
    background: var(--btn-blue);
    color: #fff;
}