/* =========================================================
   Aita Newsletter Banner — Public Styles v1.1
   Modes: vertical | bubble | floating   /   left | right
   ========================================================= */

/* Default custom properties — PHP injects #aita-nl-widget overrides */
#aita-nl-widget {
	--aita-primary:        #F5C118;
	--aita-bg:             #0d0d0d;
	--aita-text:           #ffffff;
	--aita-trigger-bg:     #F5C118;
	--aita-trigger-text:   #0d0d0d;
	--aita-trigger-hover:  #d4a80f;
	--aita-btn-bg:         #F5C118;
	--aita-btn-text:       #0d0d0d;
	--aita-btn-hover:      #d4a80f;
	--aita-close:          #ffffff;
	--aita-close-hover-bg: rgba(255,255,255,0.15);
	--aita-speed:          0.38s;
	--aita-ease:           cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scope reset — prevent theme bleed-in ─────────────────
   !important is intentional: WordPress themes frequently
   set button/input colours at high specificity. We need
   to win that specificity war for every colour-bearing rule.
   ──────────────────────────────────────────────────────── */
#aita-nl-widget,
#aita-nl-widget * {
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
	line-height: 1.4;
}

#aita-nl-widget { position: fixed !important; z-index: 999999 !important; }

/* ── All buttons: hard-reset so themes can't paint them blue ── */
#aita-nl-widget button {
	cursor: pointer !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}


/* ═══════════════════════════════════════════════════════════
   TRIGGER — shared base
   ═══════════════════════════════════════════════════════════ */

#aita-nl-widget .aita-nl-trigger {
	background-color: var(--aita-trigger-bg)   !important;
	color:            var(--aita-trigger-text)  !important;
	border:           none                       !important;
}

#aita-nl-widget .aita-nl-trigger:hover,
#aita-nl-widget .aita-nl-trigger:focus {
	background-color: var(--aita-trigger-hover) !important;
	color:            var(--aita-trigger-text)  !important;
}

#aita-nl-widget .aita-nl-trigger svg,
#aita-nl-widget .aita-nl-trigger path {
	fill: currentColor !important;
}


/* ═══════════════════════════════════════════════════════════
   VERTICAL SIDEBAR MODE
   ═══════════════════════════════════════════════════════════ */

#aita-nl-widget.aita-nl-vertical {
	top:       50%;
	transform: translateY(-50%);
	display:   flex;
	align-items: stretch;
}

#aita-nl-widget.aita-nl-vertical.aita-nl-left  { left: 0; flex-direction: row; }
#aita-nl-widget.aita-nl-vertical.aita-nl-right { right: 0; flex-direction: row-reverse; }

/* Trigger tab */
#aita-nl-widget.aita-nl-vertical .aita-nl-trigger {
	display:        flex          !important;
	flex-direction: column        !important;
	align-items:    center        !important;
	justify-content: center       !important;
	width:          40px          !important;
	min-height:     160px         !important;
	padding:        14px 8px      !important;
	gap:            10px          !important;
	position:       relative;
	z-index:        2;
	flex-shrink:    0;
	transition:     background-color var(--aita-speed) var(--aita-ease);
}

#aita-nl-widget.aita-nl-vertical.aita-nl-left  .aita-nl-trigger { border-radius: 0 6px 6px 0 !important; }
#aita-nl-widget.aita-nl-vertical.aita-nl-right .aita-nl-trigger { border-radius: 6px 0 0 6px !important; }

#aita-nl-widget.aita-nl-vertical .aita-nl-trigger-text {
	writing-mode:    vertical-rl;
	text-orientation: mixed;
	font-size:       11px   !important;
	font-weight:     800    !important;
	letter-spacing:  2px;
	text-transform:  uppercase;
	white-space:     nowrap;
	user-select:     none;
}

#aita-nl-widget.aita-nl-vertical.aita-nl-left  .aita-nl-trigger-text { transform: rotate(180deg); }
#aita-nl-widget.aita-nl-vertical.aita-nl-right .aita-nl-trigger-text { transform: rotate(0deg); }

#aita-nl-widget.aita-nl-vertical .aita-nl-trigger-icon svg { width: 18px; height: 18px; }

/* Panel */
#aita-nl-widget.aita-nl-vertical .aita-nl-panel {
	width:      0;
	min-height: 440px;
	overflow:   hidden;
	background: var(--aita-bg);
	border:     2px solid var(--aita-primary);
	position:   relative;
	transition: width var(--aita-speed) var(--aita-ease);
}

#aita-nl-widget.aita-nl-vertical.aita-nl-left  .aita-nl-panel { border-left: none; border-radius: 0 6px 6px 0; }
#aita-nl-widget.aita-nl-vertical.aita-nl-right .aita-nl-panel { border-right: none; border-radius: 6px 0 0 6px; }

#aita-nl-widget.aita-nl-vertical.aita-nl-open .aita-nl-panel { width: 300px; }


/* ═══════════════════════════════════════════════════════════
   BUBBLE MODE
   ═══════════════════════════════════════════════════════════ */

#aita-nl-widget.aita-nl-bubble { bottom: 24px; }
#aita-nl-widget.aita-nl-bubble.aita-nl-left  { left:  24px; }
#aita-nl-widget.aita-nl-bubble.aita-nl-right { right: 24px; }

#aita-nl-widget.aita-nl-bubble .aita-nl-trigger {
	display:         flex           !important;
	flex-direction:  column         !important;
	align-items:     center         !important;
	justify-content: center         !important;
	width:           68px           !important;
	height:          68px           !important;
	border-radius:   50%            !important;
	box-shadow:      0 4px 18px rgba(0,0,0,0.35) !important;
	position:        relative;
	z-index:         2;
	gap:             3px;
	padding:         8px !important;
	transition:      transform 0.22s, box-shadow 0.22s, background-color 0.2s;
}

#aita-nl-widget.aita-nl-bubble .aita-nl-trigger:hover {
	transform:  scale(1.1);
	box-shadow: 0 6px 24px rgba(0,0,0,0.45) !important;
}

#aita-nl-widget.aita-nl-bubble.aita-nl-open .aita-nl-trigger { transform: scale(0.92); }

#aita-nl-widget.aita-nl-bubble .aita-nl-trigger-text {
	font-size:     7.5px !important;
	font-weight:   900   !important;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	text-align:    center;
	line-height:   1.1;
	user-select:   none;
}

#aita-nl-widget.aita-nl-bubble .aita-nl-trigger-icon svg { width: 22px; height: 22px; }

/* Bubble panel */
#aita-nl-widget.aita-nl-bubble .aita-nl-panel {
	position:   absolute;
	bottom:     80px;
	width:      0;
	max-height: 0;
	overflow:   hidden;
	background: var(--aita-bg);
	border:     2px solid var(--aita-primary);
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.5);
	transition: width var(--aita-speed) var(--aita-ease),
	            max-height var(--aita-speed) var(--aita-ease);
}

#aita-nl-widget.aita-nl-bubble.aita-nl-left  .aita-nl-panel { left:  0; }
#aita-nl-widget.aita-nl-bubble.aita-nl-right .aita-nl-panel { right: 0; }

#aita-nl-widget.aita-nl-bubble.aita-nl-open .aita-nl-panel { width: 300px; max-height: 520px; }


/* ═══════════════════════════════════════════════════════════
   FLOATING PILL MODE
   ═══════════════════════════════════════════════════════════ */

#aita-nl-widget.aita-nl-floating { bottom: 80px; }
#aita-nl-widget.aita-nl-floating.aita-nl-left  { left:  24px; }
#aita-nl-widget.aita-nl-floating.aita-nl-right { right: 24px; }

#aita-nl-widget.aita-nl-floating:not(.aita-nl-open) {
	animation: aita-bob 3.8s ease-in-out infinite;
}

@keyframes aita-bob {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

#aita-nl-widget.aita-nl-floating .aita-nl-trigger {
	display:        flex          !important;
	align-items:    center        !important;
	gap:            8px;
	padding:        11px 20px 11px 16px !important;
	border-radius:  50px          !important;
	box-shadow:     0 5px 22px rgba(0,0,0,0.4) !important;
	font-size:      12px          !important;
	font-weight:    800           !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space:    nowrap;
	position:       relative;
	z-index:        2;
	user-select:    none;
	transition:     transform 0.22s, box-shadow 0.22s, background-color 0.2s;
}

#aita-nl-widget.aita-nl-floating .aita-nl-trigger:hover {
	transform:  scale(1.05);
	box-shadow: 0 7px 28px rgba(0,0,0,0.5) !important;
}

#aita-nl-widget.aita-nl-floating .aita-nl-trigger-icon svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Floating panel */
#aita-nl-widget.aita-nl-floating .aita-nl-panel {
	position:   absolute;
	bottom:     calc(100% + 14px);
	width:      0;
	max-height: 0;
	overflow:   hidden;
	background: var(--aita-bg);
	border:     2px solid var(--aita-primary);
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.5);
	transition: width var(--aita-speed) var(--aita-ease),
	            max-height var(--aita-speed) var(--aita-ease);
}

#aita-nl-widget.aita-nl-floating.aita-nl-left  .aita-nl-panel { left:  0; }
#aita-nl-widget.aita-nl-floating.aita-nl-right .aita-nl-panel { right: 0; }

#aita-nl-widget.aita-nl-floating.aita-nl-open .aita-nl-panel { width: 300px; max-height: 520px; }


/* ═══════════════════════════════════════════════════════════
   PANEL INNER — shared
   ═══════════════════════════════════════════════════════════ */

#aita-nl-widget .aita-nl-panel-inner {
	width:        300px;
	padding:      20px 18px 18px;
	color:        var(--aita-text) !important;
	overflow-y:   auto;
	max-height:   514px;
}

/* Header */
#aita-nl-widget .aita-nl-header {
	margin-bottom:  14px;
	padding-bottom: 12px;
	border-bottom:  1px solid rgba(255,255,255,0.12);
}

#aita-nl-widget .aita-nl-logo {
	font-size:   17px     !important;
	font-weight: 900      !important;
	letter-spacing: -0.5px;
	color:       var(--aita-text) !important;
	margin-bottom: 8px;
}

#aita-nl-widget .aita-nl-logo .aita-x { color: var(--aita-primary) !important; }

#aita-nl-widget .aita-nl-logo img {
	display:   block;
	height:    auto;
}

#aita-nl-widget .aita-nl-headline {
	color:          var(--aita-primary) !important;
	font-size:      16px                !important;
	font-weight:    900                 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin:         0 0 4px             !important;
	line-height:    1.2                 !important;
	padding:        0                   !important;
	border:         none                !important;
	background:     none                !important;
}

#aita-nl-widget .aita-nl-subtext {
	color:     rgba(255,255,255,0.55) !important;
	font-size: 11.5px                 !important;
	margin:    0                       !important;
	padding:   0                       !important;
}

/* ── Close button ─────────────────────────────────────────── */
#aita-nl-widget .aita-nl-close {
	position:         absolute    !important;
	top:              8px         !important;
	right:            9px         !important;
	background-color: transparent !important;
	border:           none        !important;
	color:            var(--aita-close) !important;
	font-size:        14px        !important;
	line-height:      1;
	padding:          5px 6px     !important;
	border-radius:    50%         !important;
	transition:       color 0.18s, background-color 0.18s;
	z-index:          3;
	width:            auto        !important;
	height:           auto        !important;
	opacity:          0.65;
}

#aita-nl-widget .aita-nl-close:hover {
	color:            var(--aita-close)          !important;
	background-color: var(--aita-close-hover-bg) !important;
	opacity:          1;
}

/* ── Form ─────────────────────────────────────────────────── */
#aita-nl-widget .aita-nl-form {
	display:        flex;
	flex-direction: column;
	gap:            9px;
	margin:         0 !important;
	padding:        0 !important;
}

#aita-nl-widget .aita-nl-field {
	display:        flex;
	flex-direction: column;
	gap:            3px;
}

#aita-nl-widget .aita-nl-field label {
	font-size:      10.5px !important;
	font-weight:    700    !important;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color:          rgba(255,255,255,0.6) !important;
	margin:         0 !important;
	padding:        0 !important;
}

#aita-nl-widget .aita-nl-field .aita-req { color: var(--aita-primary) !important; }

#aita-nl-widget .aita-nl-field input,
#aita-nl-widget .aita-nl-field input[type="text"],
#aita-nl-widget .aita-nl-field input[type="email"],
#aita-nl-widget .aita-nl-field input[type="date"] {
	background-color: rgba(255,255,255,0.07) !important;
	border:           1px solid rgba(255,255,255,0.18) !important;
	border-radius:    5px  !important;
	color:            #fff !important;
	padding:          8px 10px !important;
	font-size:        13px     !important;
	width:            100%     !important;
	outline:          none     !important;
	transition:       border-color 0.2s, background-color 0.2s;
	-webkit-appearance: none   !important;
	appearance:       none     !important;
	color-scheme:     dark;
	box-shadow:       none     !important;
	margin:           0        !important;
}

#aita-nl-widget .aita-nl-field input::placeholder { color: rgba(255,255,255,0.25) !important; }

#aita-nl-widget .aita-nl-field input:focus {
	border-color:     var(--aita-primary)         !important;
	background-color: rgba(255,255,255,0.11)      !important;
	outline:          none                         !important;
	box-shadow:       none                         !important;
}

/* ── Submit button ────────────────────────────────────────── */
#aita-nl-widget .aita-nl-submit,
#aita-nl-widget button.aita-nl-submit,
#aita-nl-widget input[type="submit"].aita-nl-submit {
	background-color: var(--aita-btn-bg)   !important;
	color:            var(--aita-btn-text) !important;
	border:           none                  !important;
	border-radius:    5px                   !important;
	padding:          11px 14px             !important;
	font-size:        12px                  !important;
	font-weight:      900                   !important;
	text-transform:   uppercase;
	letter-spacing:   1.2px;
	margin:           3px 0 0               !important;
	transition:       opacity 0.2s, transform 0.15s, background-color 0.18s;
	width:            100%                  !important;
	display:          block                 !important;
	text-align:       center;
	box-shadow:       none                  !important;
	text-shadow:      none                  !important;
	line-height:      1.3                   !important;
}

#aita-nl-widget .aita-nl-submit:hover {
	background-color: var(--aita-btn-hover) !important;
	color:            var(--aita-btn-text)  !important;
	opacity:          1                     !important;
	transform:        translateY(-1px);
}

#aita-nl-widget .aita-nl-submit:active  { transform: translateY(0); }
#aita-nl-widget .aita-nl-submit:disabled { opacity: 0.55 !important; transform: none; cursor: not-allowed; }

/* ── Message ──────────────────────────────────────────────── */
#aita-nl-widget .aita-nl-msg {
	font-size:  11.5px;
	text-align: center;
	min-height: 14px;
	margin:     0 !important;
	color:      var(--aita-text);
}
#aita-nl-widget .aita-nl-msg.aita-error   { color: #ff6b6b !important; }
#aita-nl-widget .aita-nl-msg.aita-already { color: var(--aita-primary) !important; }

/* ── Success ──────────────────────────────────────────────── */
#aita-nl-widget .aita-nl-success {
	text-align: center;
	padding:    28px 10px;
}

#aita-nl-widget .aita-nl-check {
	width:           52px;
	height:          52px;
	background-color: var(--aita-primary) !important;
	color:           var(--aita-btn-text) !important;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       26px  !important;
	font-weight:     900   !important;
	margin:          0 auto 14px;
}

#aita-nl-widget .aita-nl-success-text {
	color:          var(--aita-primary) !important;
	font-size:      15px                !important;
	font-weight:    900                 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin:         0 !important;
}

/* ── Pulse animation (bubble + floating triggers) ─────────── */
@keyframes aita-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--aita-trigger-bg) 55%, transparent); }
	70%  { box-shadow: 0 0 0 12px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

#aita-nl-widget.aita-nl-bubble:not(.aita-nl-open)  .aita-nl-trigger,
#aita-nl-widget.aita-nl-floating:not(.aita-nl-open) .aita-nl-trigger {
	animation: aita-pulse 2.2s ease-out 1.5s 2;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 380px) {
	#aita-nl-widget.aita-nl-vertical.aita-nl-open  .aita-nl-panel,
	#aita-nl-widget.aita-nl-bubble.aita-nl-open    .aita-nl-panel,
	#aita-nl-widget.aita-nl-floating.aita-nl-open  .aita-nl-panel {
		width: calc(100vw - 60px);
	}
	#aita-nl-widget .aita-nl-panel-inner { width: calc(100vw - 64px); }
}