/* =====================================================================
   Elementor Forms – Credit Card Fields  (v3.0.0)
   Covers: Card Number, CVC, Expiry Date
   ===================================================================== */

/* Label fix: force label above input (not inline beside it) ──────── */
.elementor-field-group:has([data-cc-field]) {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
}
.elementor-field-group:has([data-cc-field]) > label.elementor-field-label {
	display: block;
	width:   100%;
}
.elementor-field-group:has([data-cc-field]) > .elementor-cc-wrapper,
.elementor-field-group:has([data-cc-field]) > .elementor-cvc-wrapper,
.elementor-field-group:has([data-cc-field]) > .elementor-expiry-wrapper {
	width: 100%;
}

/* Fallback for browsers without :has() support (Firefox < 121, older Safari) */
.elementor-cc-wrapper,
.elementor-cvc-wrapper,
.elementor-expiry-wrapper {
	display: block;
	width:   100%;
	clear:   both;
}

/* ── Shared wrapper ─────────────────────────────────────────────────── */
.elementor-cc-wrapper {
	position: relative;
	display:  block;
}

/* Push text away from the right-side icon */
.elementor-cc-wrapper > input.elementor-field-textual {
	padding-right: 58px !important;
	box-sizing:    border-box;
}

/* Smaller icon fields don't need as much padding */
.elementor-cvc-wrapper > input.elementor-field-textual,
.elementor-expiry-wrapper > input.elementor-field-textual {
	padding-right: 44px !important;
}

/* ── Shared icon base ───────────────────────────────────────────────── */
.elementor-cc-icon,
.elementor-cvc-icon,
.elementor-expiry-icon {
	position:        absolute;
	top:             50%;
	right:           10px;
	transform:       translateY(-50%);
	width:           38px;
	height:          24px;
	border-radius:   4px;
	overflow:        hidden;
	background:      #f2f2f2;
	border:          1px solid #ddd;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-direction:  row;
	font-family:     Arial, Helvetica, sans-serif;
	font-size:       9px;
	font-weight:     bold;
	color:           #ccc;
	pointer-events:  none;
	user-select:     none;
	transition:      background 0.2s ease, border-color 0.2s ease;
}

/* ── Validation states (shared) ─────────────────────────────────────── */
.elementor-cc-wrapper.cc-valid   > input.elementor-field-textual,
.elementor-cvc-wrapper.cc-valid  > input.elementor-field-textual,
.elementor-expiry-wrapper.cc-valid > input.elementor-field-textual {
	border-color: #28a745 !important;
	box-shadow:   0 0 0 2px rgba(40, 167, 69, 0.18) !important;
}
.elementor-cc-wrapper.cc-invalid   > input.elementor-field-textual,
.elementor-cvc-wrapper.cc-invalid  > input.elementor-field-textual,
.elementor-expiry-wrapper.cc-invalid > input.elementor-field-textual {
	border-color: #dc3545 !important;
	box-shadow:   0 0 0 2px rgba(220, 53, 69, 0.18) !important;
}

/* Focus refinement */
.elementor-cc-wrapper:focus-within .elementor-cc-icon,
.elementor-cvc-wrapper:focus-within .elementor-cvc-icon,
.elementor-expiry-wrapper:focus-within .elementor-expiry-icon {
	box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ════════════════════════════════════════════════════════════════════
   CARD NUMBER ICONS
   ════════════════════════════════════════════════════════════════════ */

/* Unknown / empty state */
.elementor-cc-icon[data-card-type="unknown"]::after {
	content:        '····';
	letter-spacing: 2px;
	font-size:      10px;
	color:          #ccc;
}

/* VISA */
.elementor-cc-icon[data-card-type="visa"] {
	background: #1a1f71; border-color: #1a1f71; color: #fff;
	font-size: 13px; font-style: italic;
}
.elementor-cc-icon[data-card-type="visa"]::after { content: 'VISA'; }

/* Mastercard – two overlapping circles */
.elementor-cc-icon[data-card-type="mastercard"] {
	background: #1c1c1c; border-color: #1c1c1c;
}
.elementor-cc-icon[data-card-type="mastercard"]::before,
.elementor-cc-icon[data-card-type="mastercard"]::after {
	content: ''; position: absolute; top: 50%; transform: translateY(-50%);
	width: 15px; height: 15px; border-radius: 50%;
}
.elementor-cc-icon[data-card-type="mastercard"]::before { left: 3px; background: #eb001b; }
.elementor-cc-icon[data-card-type="mastercard"]::after  { right: 3px; background: #f79e1b; opacity: .9; }

/* American Express */
.elementor-cc-icon[data-card-type="amex"] {
	background: #2557d6; border-color: #2557d6; color: #fff;
	font-size: 7px; letter-spacing: .3px; line-height: 1.3;
	flex-direction: column; padding: 2px 3px;
}
.elementor-cc-icon[data-card-type="amex"]::before { content: 'AMERICAN'; }
.elementor-cc-icon[data-card-type="amex"]::after  { content: 'EXPRESS';  }

/* Discover */
.elementor-cc-icon[data-card-type="discover"] {
	background: #fff; border-color: #e0e0e0;
}
.elementor-cc-icon[data-card-type="discover"]::before {
	content: ''; position: absolute; right: -4px; top: 50%;
	transform: translateY(-50%); width: 28px; height: 28px;
	border-radius: 50%; background: #f76f20;
}
.elementor-cc-icon[data-card-type="discover"]::after {
	content: 'DISC'; position: relative; z-index: 1;
	color: #231f20; font-size: 8px;
}

/* ════════════════════════════════════════════════════════════════════
   CVC ICON  – shield with lock
   ════════════════════════════════════════════════════════════════════ */
.elementor-cvc-icon {
	width: 34px; height: 22px;
	background: #f8f8f8; border-color: #ddd;
	font-size: 8px; color: #888;
	flex-direction: column; padding: 2px;
}
.elementor-cvc-icon::before {
	font-size: 11px;
	line-height: 1;
}
.elementor-cvc-icon::after {
	content: 'CVC';
	font-size: 7px;
	font-weight: bold;
	color: #aaa;
	letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════════════
   EXPIRY DATE ICON  – calendar
   ════════════════════════════════════════════════════════════════════ */
.elementor-expiry-icon {
	width: 34px; height: 22px;
	background: #f8f8f8; border-color: #ddd;
	font-size: 8px; color: #888;
	flex-direction: column; padding: 2px;
}
.elementor-expiry-icon::before {
	font-size: 11px;
	line-height: 1;
}
.elementor-expiry-icon::after {
	content: 'EXP';
	font-size: 7px;
	font-weight: bold;
	color: #aaa;
	letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════════════
   RTL SUPPORT
   ════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .elementor-cc-wrapper > input.elementor-field-textual,
[dir="rtl"] .elementor-cvc-wrapper > input.elementor-field-textual,
[dir="rtl"] .elementor-expiry-wrapper > input.elementor-field-textual {
	padding-right: inherit !important;
	padding-left:  58px   !important;
}
[dir="rtl"] .elementor-cc-icon,
[dir="rtl"] .elementor-cvc-icon,
[dir="rtl"] .elementor-expiry-icon { right: auto; left: 10px; }

[dir="rtl"] .elementor-cc-icon[data-card-type="mastercard"]::before { left: auto; right: 3px; }
[dir="rtl"] .elementor-cc-icon[data-card-type="mastercard"]::after  { right: auto; left: 3px; }
[dir="rtl"] .elementor-cc-icon[data-card-type="discover"]::before   { right: auto; left: -4px; }