/* ==========================================================================
   SMM Order Form Widget — Professional Stylesheet
   Developed by Zoon11 (https://zoon11.com)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Elementor wrapper fix — root cause of the narrow-form bug.

   Elementor places every widget inside:
     .elementor-widget-smm_order_form   (flex child of the Elementor column)
       .elementor-widget-container

   Both default to content-based sizing, so the widget shrinks to match
   whichever platform/service name is currently displayed. We force them to
   always fill the full column width. The class name is generated by Elementor
   from our widget's get_name() = "smm_order_form", so it only targets us.
   -------------------------------------------------------------------------- */
.elementor-widget-smm_order_form {
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important;
	flex-shrink: 0 !important;
}

.elementor-widget-smm_order_form > .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   CSS Custom Properties (defaults — overridden per-widget via inline style)
   -------------------------------------------------------------------------- */
.smm-widget-wrap {
	--smm-accent:         #3b82f6;
	--smm-accent2:        #0ea5e9;
	--smm-card-bg:        #111827;   /* slightly lighter — separates card from dark page */
	--smm-card-bg2:       #0d1424;   /* inner fill — noticeably different from inputs   */
	--smm-input-bg:       #1a2235;   /* lighter inputs — text and placeholders readable */
	--smm-input-border:   #2a4a7f;   /* more visible border                             */
	--smm-text-primary:   #f1f5f9;
	--smm-text-secondary: #94a3b8;
	--smm-label-color:    #60a5fa;
	--smm-max-width:      520px;

	/* Derived tokens */
	--smm-accent-rgb:    59, 130, 246;
	--smm-accent2-rgb:   14, 165, 233;
	--smm-border-subtle: rgba(255,255,255,0.08);
	--smm-hover-surface: rgba(255,255,255,0.05);
	--smm-radius-lg:     18px;
	--smm-radius-md:     12px;
	--smm-radius-sm:     8px;
	--smm-transition:    0.2s ease;

	/* width: 100% + min-width: 0 prevents the card from ever growing wider
	   than the Elementor column, regardless of text length inside triggers. */
	width: 100% !important;
	min-width: 0 !important;
	display: flex !important;
	justify-content: center !important;
	font-family: inherit;
	box-sizing: border-box !important;
}

/* Global box-sizing reset within widget */
.smm-widget-wrap *,
.smm-widget-wrap *::before,
.smm-widget-wrap *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   Hard reset for ALL button elements inside the widget.
   Themes (Elementor's Hello, Astra, OceanWP, etc.) often inject unwanted
   borders, colours and shadows onto <button>. We kill every override here.
   -------------------------------------------------------------------------- */
.smm-widget-wrap button,
.smm-widget-wrap button:hover,
.smm-widget-wrap button:focus,
.smm-widget-wrap button:active,
.smm-widget-wrap button:visited {
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	/* border and background will be set per-component below */
}

/* --------------------------------------------------------------------------
   Spinning border — CSS @property technique.
   Animates the start angle of a conic-gradient used as a border-box
   background. No overflow:hidden needed, so dropdowns are never clipped.
   A small bright "hot spot" (~20% of the arc) glides around the edge slowly.
   Browsers that don't support @property fall back to the static gradient.
   -------------------------------------------------------------------------- */
@property --smm-spin-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes smm-border-rotate {
	to { --smm-spin-angle: 360deg; }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.smm-card {
	width: 100% !important;
	min-width: 0 !important;
	max-width: var(--smm-max-width) !important;
	border-radius: var(--smm-radius-lg) !important;

	/* Spinning gradient border via conic-gradient on border-box.
	   The padding-box layer is a solid fill — it covers the card interior
	   completely, so only the 2px border strip shows the spinning gradient. */
	background:
		linear-gradient(var(--smm-card-bg), var(--smm-card-bg)) padding-box,
		conic-gradient(
			from var(--smm-spin-angle),
			transparent        0%,
			transparent        60%,
			rgba(var(--smm-accent-rgb),  0.25) 68%,
			var(--smm-accent)  75%,
			var(--smm-accent2) 80%,
			rgba(var(--smm-accent2-rgb), 0.25) 87%,
			transparent        95%,
			transparent        100%
		) border-box !important;

	border: 2px solid transparent !important;
	animation: smm-border-rotate 6s linear infinite !important;

	box-shadow:
		0 4px 6px -1px rgba(0,0,0,0.4),
		0 24px 64px -16px rgba(var(--smm-accent-rgb), 0.12) !important;
}

/* Static fallback for browsers without @property support */
@supports not (background: conic-gradient(from 1deg, red, blue) border-box) {
	.smm-card {
		background:
			linear-gradient(var(--smm-card-bg), var(--smm-card-bg)) padding-box,
			linear-gradient(135deg, var(--smm-accent) 0%, var(--smm-accent2) 100%) border-box !important;
		animation: none !important;
	}
}

.smm-card-inner {
	width: 100% !important;
	min-width: 0 !important;
	background: var(--smm-card-bg2) !important;
	border-radius: calc(var(--smm-radius-lg) - 2px) !important;
	padding: 32px 28px !important;
}

@media (max-width: 480px) {
	.smm-card-inner {
		padding: 24px 18px !important;
	}
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.smm-header {
	margin-bottom: 24px !important;
}

.smm-title {
	font-size: 22px !important;
	font-weight: 800 !important;
	color: var(--smm-text-primary) !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.3px !important;
}

.smm-subtitle {
	font-size: 12px !important;
	color: var(--smm-text-secondary) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Form Layout
   -------------------------------------------------------------------------- */
.smm-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	width: 100% !important;
	min-width: 0 !important;
}

.smm-field-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px !important;
	width: 100% !important;
	min-width: 0 !important;
}

.smm-field-group--flex {
	flex: 1 !important;
	min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   Labels
   -------------------------------------------------------------------------- */
.smm-label {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--smm-label-color) !important;
	display: block !important;
}

/* --------------------------------------------------------------------------
   Text Inputs
   -------------------------------------------------------------------------- */
.smm-input {
	width: 100% !important;
	height: 50px !important;
	background: var(--smm-input-bg) !important;
	border: 1.5px solid var(--smm-input-border) !important;
	border-radius: var(--smm-radius-md) !important;
	padding: 0 16px !important;
	color: var(--smm-text-primary) !important;
	font-size: 14px !important;
	font-family: inherit !important;
	outline: none !important;
	transition: border-color var(--smm-transition), box-shadow var(--smm-transition) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
}

.smm-input::placeholder {
	color: rgba(148,163,184,0.5) !important;
}

.smm-input:focus {
	border-color: var(--smm-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--smm-accent-rgb), 0.12) !important;
	outline: none !important;
}

/* Hide number spinner arrows */
.smm-input--number::-webkit-inner-spin-button,
.smm-input--number::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
.smm-input--number {
	-moz-appearance: textfield !important;
	font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Custom Select Dropdowns
   -------------------------------------------------------------------------- */
.smm-select {
	position: relative !important;
	width: 100% !important;
	min-width: 0 !important;
}

.smm-select__trigger {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	/* width: 100% + min-width: 0 is the key fix — prevents the flex trigger
	   from expanding to fit its text content and widening the whole card. */
	width: 100% !important;
	min-width: 0 !important;
	height: 50px !important;
	background: var(--smm-input-bg) !important;
	border: 1.5px solid var(--smm-input-border) !important;
	border-radius: var(--smm-radius-md) !important;
	padding: 0 16px !important;
	cursor: pointer !important;
	user-select: none !important;
	transition: border-color var(--smm-transition), box-shadow var(--smm-transition) !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--smm-text-primary) !important;
	text-align: left !important;
	overflow: hidden !important;
	/* NOTE: white-space: nowrap must NOT be here — it would make the
	   trigger's intrinsic width equal to the full text, causing the card
	   to grow or shrink with the selected platform/service name.
	   nowrap lives only on .smm-select__text which already has overflow:hidden. */
}

.smm-select__trigger:focus,
.smm-select__trigger:focus-visible {
	border-color: var(--smm-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--smm-accent-rgb), 0.12) !important;
	outline: none !important;
}

.smm-select--accent .smm-select__trigger {
	border-color: var(--smm-accent) !important;
}

.smm-select--open .smm-select__trigger {
	border-color: var(--smm-accent) !important;
	box-shadow: 0 0 0 3px rgba(var(--smm-accent-rgb), 0.12) !important;
}

.smm-select__icon {
	font-size: 15px !important;
	flex-shrink: 0 !important;
	width: 18px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.smm-select__text {
	flex: 1 !important;
	color: var(--smm-text-primary) !important;
	font-size: 14px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	min-width: 0 !important;
}

.smm-select__text--small {
	font-size: 12px !important;
	letter-spacing: 0.01em !important;
}

.smm-select__chevron {
	font-size: 11px !important;
	color: var(--smm-accent) !important;
	flex-shrink: 0 !important;
	transition: transform var(--smm-transition) !important;
}

.smm-select--open .smm-select__chevron {
	transform: rotate(180deg) !important;
}

/* Dropdown Panel */
.smm-select__dropdown {
	display: none !important;
	position: absolute !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	width: 100% !important;
	background: var(--smm-input-bg) !important;
	border: 1.5px solid var(--smm-accent) !important;
	border-radius: var(--smm-radius-md) !important;
	box-shadow:
		0 10px 30px -5px rgba(0,0,0,0.5),
		0 0 0 1px rgba(var(--smm-accent-rgb), 0.1) !important;
	z-index: 99999 !important;
	overflow: hidden !important;
	padding: 6px !important;
}

.smm-select--open .smm-select__dropdown {
	display: block !important;
}

/* Platform options */
.smm-select__option {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 11px 12px !important;
	border-radius: var(--smm-radius-sm) !important;
	cursor: pointer !important;
	color: var(--smm-text-secondary) !important;
	font-size: 13px !important;
	transition: background var(--smm-transition), color var(--smm-transition) !important;
}

.smm-select__option:hover,
.smm-select__option.smm-active {
	background: rgba(var(--smm-accent-rgb), 0.1) !important;
	color: var(--smm-text-primary) !important;
}

.smm-select__option > i {
	font-size: 14px !important;
	width: 18px !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

/* Services dropdown */
.smm-select__dropdown--services {
	padding: 6px !important;
}

.smm-srv-list {
	max-height: 256px !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.smm-srv-list::-webkit-scrollbar { width: 4px; }
.smm-srv-list::-webkit-scrollbar-track { background: transparent; }
.smm-srv-list::-webkit-scrollbar-thumb {
	background: rgba(var(--smm-accent-rgb), 0.3);
	border-radius: 4px;
}

/* Service items */
.smm-srv-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 10px 12px !important;
	border-radius: var(--smm-radius-sm) !important;
	cursor: pointer !important;
	transition: background var(--smm-transition), color var(--smm-transition) !important;
	border: 1.5px solid transparent !important;
}

.smm-srv-item:hover {
	background: var(--smm-hover-surface) !important;
}

.smm-srv-item--active {
	background: rgba(var(--smm-accent-rgb), 0.1) !important;
	border-color: rgba(var(--smm-accent-rgb), 0.3) !important;
}

.smm-srv-item__info {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	overflow: hidden !important;
	min-width: 0 !important;
}

.smm-srv-item__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: var(--smm-accent) !important;
	flex-shrink: 0 !important;
	opacity: 0.5 !important;
}

.smm-srv-item--active .smm-srv-item__dot {
	opacity: 1 !important;
	box-shadow: 0 0 6px rgba(var(--smm-accent-rgb), 0.5) !important;
}

.smm-srv-item__name {
	font-size: 11.5px !important;
	color: var(--smm-text-secondary) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.4 !important;
}

.smm-srv-item--active .smm-srv-item__name {
	color: var(--smm-text-primary) !important;
	font-weight: 600 !important;
}

.smm-srv-item__price {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	padding: 4px 9px !important;
	border-radius: 6px !important;
	background: rgba(255,255,255,0.05) !important;
	color: var(--smm-text-secondary) !important;
	letter-spacing: 0.01em !important;
}

.smm-srv-item--active .smm-srv-item__price {
	background: linear-gradient(135deg, var(--smm-accent), var(--smm-accent2)) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Description Accordion
   -------------------------------------------------------------------------- */
.smm-accordion {
	border: 1.5px solid var(--smm-input-border) !important;
	border-radius: var(--smm-radius-md) !important;
	overflow: hidden !important;
	background: var(--smm-input-bg) !important;
}

/* Full nuclear reset on the accordion trigger button */
.smm-accordion__trigger,
.smm-accordion__trigger:hover,
.smm-accordion__trigger:focus,
.smm-accordion__trigger:active {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-color: transparent !important;
	border-width: 0 !important;
	border-style: none !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	color: var(--smm-text-secondary) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	text-align: left !important;
	transition: color var(--smm-transition) !important;
	gap: 8px !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
}

.smm-accordion__trigger:hover {
	color: var(--smm-text-primary) !important;
}

.smm-accordion__trigger[aria-expanded="true"] .smm-select__chevron {
	transform: rotate(180deg) !important;
}

.smm-accordion__title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: inherit !important;
}

.smm-info-icon {
	color: var(--smm-accent) !important;
	font-size: 13px !important;
}

.smm-accordion__content {
	display: none !important;
	padding: 12px 14px 14px !important;
	border-top: 1.5px solid var(--smm-border-subtle) !important;
	background: rgba(0,0,0,0.15) !important;
}

.smm-accordion__content.smm-open {
	display: block !important;
}

.smm-description {
	font-size: 11.5px !important;
	color: var(--smm-text-secondary) !important;
	line-height: 1.75 !important;
}

.smm-description strong,
.smm-description b {
	color: #cbd5e1 !important;
}

/* --------------------------------------------------------------------------
   Currency Toggle
   -------------------------------------------------------------------------- */
.smm-currency-toggle {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 4px !important;
	background: var(--smm-input-bg) !important;
	border: 1.5px solid var(--smm-input-border) !important;
	border-radius: var(--smm-radius-md) !important;
	padding: 5px !important;
}

/* Full nuclear reset on currency buttons */
.smm-currency-btn,
.smm-currency-btn:hover,
.smm-currency-btn:focus,
.smm-currency-btn:active,
.smm-currency-btn:visited {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	height: 40px !important;
	padding: 0 10px !important;
	border-radius: calc(var(--smm-radius-md) - 4px) !important;
	border: 1.5px solid transparent !important;
	border-style: solid !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--smm-text-secondary) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: all var(--smm-transition) !important;
	user-select: none !important;
	outline: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
}

.smm-currency-btn:hover {
	background: var(--smm-hover-surface) !important;
	color: var(--smm-text-primary) !important;
	border-color: transparent !important;
}

.smm-currency-btn--active,
.smm-currency-btn--active:hover,
.smm-currency-btn--active:focus {
	background: rgba(var(--smm-accent-rgb), 0.1) !important;
	background-color: rgba(var(--smm-accent-rgb), 0.1) !important;
	border-color: rgba(var(--smm-accent-rgb), 0.35) !important;
	border-width: 1.5px !important;
	color: var(--smm-text-primary) !important;
	box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

.smm-currency-symbol--usdt {
	font-size: 16px !important;
	font-weight: 900 !important;
	color: #34d399 !important;
	line-height: 1 !important;
}

.smm-currency-flag {
	font-size: 14px !important;
	line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   Quantity + Price Row
   -------------------------------------------------------------------------- */
.smm-qty-price-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 14px !important;
}

@media (max-width: 380px) {
	.smm-qty-price-row {
		grid-template-columns: 1fr !important;
	}
}

.smm-simple-price-row {
	display: flex !important;
}

/* --------------------------------------------------------------------------
   Price Display
   -------------------------------------------------------------------------- */
.smm-price-display {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 50px !important;
	background: rgba(var(--smm-accent-rgb), 0.08) !important;
	border: 1.5px solid rgba(var(--smm-accent-rgb), 0.2) !important;
	border-radius: var(--smm-radius-md) !important;
	color: var(--smm-accent) !important;
	font-size: 20px !important;
	font-weight: 900 !important;
	letter-spacing: 0.02em !important;
	user-select: none !important;
	transition: color var(--smm-transition) !important;
}

.smm-price-display--invalid {
	color: rgba(148,163,184,0.4) !important;
}

/* --------------------------------------------------------------------------
   Error Message
   -------------------------------------------------------------------------- */
.smm-link-error {
	display: flex !important;
	align-items: flex-start !important;
	gap: 6px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #f87171 !important;
	margin: 4px 0 0 0 !important;
	padding: 6px 10px !important;
	background: rgba(248, 113, 113, 0.08) !important;
	border: 1px solid rgba(248, 113, 113, 0.25) !important;
	border-radius: 6px !important;
	line-height: 1.4 !important;
}

.smm-link-error i {
	margin-top: 2px !important;
	flex-shrink: 0 !important;
}

.smm-error-msg {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	color: #22d3ee !important;
	margin: 0 !important;
	text-align: center !important;
	justify-content: center !important;
}

/* --------------------------------------------------------------------------
   Submit Button — full nuclear reset + own styles
   -------------------------------------------------------------------------- */
.smm-submit-btn,
.smm-submit-btn:visited {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 15px 20px !important;
	background: linear-gradient(135deg, var(--smm-accent) 0%, var(--smm-accent2) 100%) !important;
	background-color: var(--smm-accent) !important;
	border: none !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	border-radius: var(--smm-radius-md) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: opacity var(--smm-transition), transform var(--smm-transition), box-shadow var(--smm-transition) !important;
	box-shadow: 0 4px 14px rgba(var(--smm-accent-rgb), 0.3) !important;
	letter-spacing: 0.01em !important;
	margin-top: 2px !important;
	text-decoration: none !important;
	outline: none !important;
}

.smm-submit-btn:hover {
	opacity: 0.9 !important;
	box-shadow: 0 6px 20px rgba(var(--smm-accent-rgb), 0.4) !important;
	transform: translateY(-1px) !important;
	color: #fff !important;
	background: linear-gradient(135deg, var(--smm-accent) 0%, var(--smm-accent2) 100%) !important;
}

.smm-submit-btn:active {
	opacity: 1 !important;
	transform: translateY(0) !important;
	box-shadow: 0 2px 8px rgba(var(--smm-accent-rgb), 0.3) !important;
}

.smm-submit-btn:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(var(--smm-accent-rgb), 0.3) !important;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.smm-hidden {
	display: none !important;
}