/* Dokan store page tweaks.
 *
 * Palette from the active Electro theme. #0a6ab5 rather than the brand
 * #0787ea for anything carrying text: measured, #0787ea gives 3.71:1 on
 * white and 3.71:1 under white, both short of 4.5:1. #0a6ab5 clears it at
 * 5.61:1 in each direction while still reading as the same blue.
 */

/* ---------------------------------------- the Share button
 *
 * Dokan renders it as .dokan-btn.dokan-btn-theme.dokan-btn-sm inside the
 * store tab bar, and between Dokan's stylesheet and Electro's it came out
 * 75x57 with `padding: 19px 0 18px` — no horizontal padding at all, so the
 * label pressed against a 22px-radius border. It also had a blue outline with
 * grey text, reading as neither a primary nor a secondary control.
 *
 * The !important flags are on exactly the properties Electro contests and no
 * others. Its rule is
 *   .dokan-elector-style-active.store-v1 .dokan-store-tabs ul li.dokan-share…
 * which measures 52 to this file's 21, and it already sets `color` with
 * !important of its own. Out-specifying it would mean repeating
 * `.dokan-elector-style-active.store-v1` here and inheriting their class
 * names as a dependency; flagging four declarations is the smaller promise.
 */

/* :not(#_) adds an id's worth of specificity while matching everything — the
   selector still means "the share button". It is here because Electro sets
   `color` with !important from a 52-specificity selector, so !important alone
   is not enough; between two !important declarations, specificity decides.
   The alternative was to repeat `.dokan-elector-style-active.store-v1` from
   their rule, which would make this stylesheet break the day someone changes
   the store layout setting. */
body .dokan-store-tabs .dokan-share-btn:not(#_),
body .dokan-share-btn.dokan-btn:not(#_) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 0.5rem 1.05rem !important;
	border: 1px solid #0a6ab5;
	border-radius: 999px;
	background: transparent;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: 1.2;
	color: #0a6ab5 !important;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

body .dokan-store-tabs .dokan-share-btn:not(#_):hover,
body .dokan-share-btn.dokan-btn:not(#_):hover,
body .dokan-store-tabs .dokan-share-btn:not(#_):focus-visible,
body .dokan-share-btn.dokan-btn:not(#_):focus-visible {
	border-color: #0a6ab5;
	background: #0a6ab5;
	color: #fff !important;
}

/* Drawn rather than left to the browser: the button sits on a white bar
   where a default focus ring is easy to miss. */
body .dokan-store-tabs .dokan-share-btn:focus-visible,
body .dokan-share-btn.dokan-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(10, 106, 181, .3);
}

body .dokan-store-tabs .dokan-share-btn:not(#_):active,
body .dokan-share-btn.dokan-btn:not(#_):active {
	border-color: #075390;
	background: #075390;
	color: #fff !important;
}

/* Font Awesome gives the icon its own left margin; the flex gap above already
   spaces it, so the margin would count twice. */
body .dokan-share-btn.dokan-btn i,
body .dokan-store-tabs .dokan-share-btn i {
	margin: 0 !important;
	font-size: 0.82em;
	line-height: 1;
}

/* The wrapper is a list item in the tab bar and inherits the tabs' vertical
   rhythm; centring keeps the button on their line. */
body .dokan-store-tabs .dokan-share-btn-wrap {
	display: flex;
	align-items: center;
}

@media (max-width: 640px) {
	body .dokan-store-tabs .dokan-share-btn:not(#_),
	body .dokan-share-btn.dokan-btn:not(#_) {
		padding: 0.45rem 0.85rem !important;
		font-size: 0.8rem !important;
	}
}

/* ---------------------------------------- category tabs
 *
 * SMC_Store_Category_Tabs. One row of pills that scrolls sideways on a phone
 * rather than wrapping into a block that pushes the products off screen.
 * Text in #0a6ab5 for contrast (see the note at the top); the active tab is
 * filled, and says so to screen readers with aria-current.
 */
.smc-store-cats {
    margin: 18px 0 22px;
}
.smc-store-cats ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 2px 2px 6px;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.smc-store-cats li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}
.smc-store-cats .smc-store-cats__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid #cfd8e3;
    border-radius: 999px;
    background: #fff;
    color: #0a6ab5;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.smc-store-cats .smc-store-cats__tab:hover,
.smc-store-cats .smc-store-cats__tab:focus-visible {
    border-color: #0a6ab5;
    background: #f0f6fc;
    color: #0a6ab5;
}
.smc-store-cats .smc-store-cats__tab:focus-visible {
    outline: 2px solid #0a6ab5;
    outline-offset: 2px;
}
.smc-store-cats .smc-store-cats__tab.is-active {
    border-color: #0a6ab5;
    background: #0a6ab5;
    color: #fff;
}
.smc-store-cats .smc-store-cats__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e8f0f8;
    color: #0a6ab5;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.smc-store-cats .smc-store-cats__tab.is-active .smc-store-cats__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}