/* ==========================================================================
   My Account — "Meridian" Design System (eSIM Only)
   Premium travel-grade dashboard for eSIM management.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand */
	--grcki-navy: #0A2540;
	--grcki-brand: #0D74CE;
	--grcki-brand-hover: #095BA1;
	--grcki-gold: #D4A843;
	--grcki-gold-hover: #C49A36;

	/* Surfaces */
	--grcki-bg: #F6F7F9;
	--grcki-surface: #FFFFFF;
	--grcki-surface-raised: #FFFFFF;
	--grcki-surface-sunken: #EEF0F4;

	/* Text */
	--grcki-heading: #0A2540;
	--grcki-body: #334155;
	--grcki-muted: #64748B;
	--grcki-faint: #94A3B8;

	/* Status */
	--grcki-success-bg: #ECFDF5;
	--grcki-success: #059669;
	--grcki-warning-bg: #FFFBEB;
	--grcki-warning: #B45309;
	--grcki-error-bg: #FEF2F2;
	--grcki-error: #DC2626;
	--grcki-info-bg: #EFF6FF;
	--grcki-info: #2563EB;

	/* Structure */
	--grcki-radius: 10px;
	--grcki-radius-lg: 14px;
	--grcki-radius-pill: 100px;
	--grcki-shadow-sm: 0 1px 2px rgba(10,37,64,.04);
	--grcki-shadow: 0 1px 3px rgba(10,37,64,.06), 0 1px 2px rgba(10,37,64,.04);
	--grcki-shadow-md: 0 4px 12px rgba(10,37,64,.06);
	--grcki-shadow-lg: 0 12px 32px rgba(10,37,64,.08);
	--grcki-border: #E2E8F0;
	--grcki-border-light: #F1F5F9;

	/* Typography */
	--grcki-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--grcki-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

	/* Transitions */
	--grcki-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Base & Layout (Minimal - eSIM Page Only)
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* Only apply to eSIM endpoint */
.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-family: var(--grcki-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--grcki-heading);
	letter-spacing: -0.01em;
	margin-bottom: 28px;
}

/* --------------------------------------------------------------------------
   3. eSIM Cards
   -------------------------------------------------------------------------- */
.grcki-esim-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 20px;
	font-family: var(--grcki-font);
}

@media (max-width: 768px) {
	.grcki-esim-grid {
		grid-template-columns: 1fr;
	}
}

.grcki-esim-card {
	background: var(--grcki-surface);
	border: 1px solid var(--grcki-border-light);
	border-radius: var(--grcki-radius-lg);
	padding: 22px;
	box-shadow: var(--grcki-shadow-sm);
	transition: box-shadow .2s var(--grcki-ease), border-color .2s var(--grcki-ease);
}

.grcki-esim-card:hover {
	box-shadow: var(--grcki-shadow-md);
	border-color: var(--grcki-border);
}

.grcki-esim-card-title {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
	gap: 12px;
}

.grcki-esim-card-header {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.grcki-esim-card-country {
	font-size: 17px;
	font-weight: 700;
	color: var(--grcki-heading);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.grcki-esim-plan-subtitle {
	font-size: 11px;
	font-weight: 600;
	color: var(--grcki-faint);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.grcki-esim-status-badge {
	padding: 4px 10px;
	border-radius: var(--grcki-radius-pill);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	flex-shrink: 0;
}

.grcki-esim-badge-completed, .grcki-esim-badge-provisioned, .grcki-esim-badge-active {
	background: var(--grcki-success-bg);
	color: var(--grcki-success);
}
.grcki-esim-badge-pending, .grcki-esim-badge-queued {
	background: var(--grcki-warning-bg);
	color: var(--grcki-warning);
}
.grcki-esim-badge-failed {
	background: var(--grcki-error-bg);
	color: var(--grcki-error);
}

/* Usage bar */
.grcki-esim-usage-container {
	margin-bottom: 16px;
}

.grcki-esim-usage-container--duration {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--grcki-border-light);
}

.grcki-esim-usage-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
}

.grcki-esim-total-data {
	font-size: 13px;
	font-weight: 600;
	color: var(--grcki-body);
}

.grcki-esim-usage-pct {
	font-size: 12px;
	color: var(--grcki-muted);
	font-weight: 500;
	font-family: var(--grcki-font-mono);
}

.grcki-esim-progress-track {
	height: 6px;
	border-radius: var(--grcki-radius-pill);
	background: var(--grcki-surface-sunken);
	overflow: hidden;
	margin-bottom: 6px;
}

.grcki-esim-progress-fill {
	height: 100%;
	border-radius: var(--grcki-radius-pill);
	background: linear-gradient(90deg, var(--grcki-brand), #38BDF8);
	transition: width .5s var(--grcki-ease);
}

.grcki-esim-usage-container.is-loading .grcki-esim-progress-fill {
	background: linear-gradient(90deg, var(--grcki-surface-sunken), var(--grcki-brand), var(--grcki-surface-sunken));
	background-size: 220% 100%;
	animation: grcki-esim-loading-bar 1.1s linear infinite;
}

.grcki-esim-usage-container.is-loading .grcki-esim-usage-pct {
	color: var(--grcki-faint);
}

@keyframes grcki-esim-loading-bar {
	from {
		background-position: 220% 0;
	}
	to {
		background-position: -220% 0;
	}
}

.grcki-esim-remaining-text {
	font-size: 13px;
	color: var(--grcki-muted);
	font-weight: 500;
}

/* Info boxes */
.grcki-esim-info-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}

.grcki-esim-info-box {
	background: var(--grcki-surface-sunken);
	border-radius: var(--grcki-radius);
	padding: 12px 14px;
}

.grcki-esim-info-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--grcki-faint);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 4px;
}

.grcki-esim-info-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--grcki-heading);
	display: flex;
	align-items: center;
	gap: 6px;
}

.grcki-esim-info-value a {
	color: var(--grcki-brand);
	text-decoration: none;
	font-weight: 600;
}

.grcki-esim-info-value a:hover {
	color: var(--grcki-brand-hover);
}

.grcki-esim-refill-history {
	margin-bottom: 16px;
	padding: 12px 14px;
	background: var(--grcki-info-bg);
	border: 1px solid rgba(37, 99, 235, .08);
	border-radius: var(--grcki-radius);
}

.grcki-esim-refill-history-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--grcki-heading);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 8px;
}

.grcki-esim-refill-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid rgba(37, 99, 235, .08);
}

.grcki-esim-refill-row:first-of-type {
	border-top: none;
	padding-top: 0;
}

.grcki-esim-refill-row:last-of-type {
	padding-bottom: 0;
}

.grcki-esim-refill-row-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--grcki-body);
}

.grcki-esim-refill-row-order {
	font-size: 12px;
	font-weight: 600;
	color: var(--grcki-brand);
	text-decoration: none;
	white-space: nowrap;
}

.grcki-esim-refill-row-order:hover {
	color: var(--grcki-brand-hover);
}

.grcki-esim-attached-packages {
	margin-bottom: 16px;
	padding: 12px 14px;
	background: #F8FAFC;
	border: 1px solid var(--grcki-border-light);
	border-radius: var(--grcki-radius);
}

.grcki-esim-attached-packages-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--grcki-heading);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 8px;
}

.grcki-esim-attached-packages-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.grcki-esim-attached-package {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--grcki-border-light);
}

.grcki-esim-attached-package:first-child {
	padding-top: 0;
	border-top: none;
}

.grcki-esim-attached-package-main {
	min-width: 0;
}

.grcki-esim-attached-package-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--grcki-body);
}

.grcki-esim-attached-package-meta {
	margin-top: 3px;
	font-size: 12px;
	color: var(--grcki-muted);
}

.grcki-esim-attached-package-status {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--grcki-info);
	text-align: right;
}

.grcki-esim-attached-package-status.is-pending {
	color: var(--grcki-warning);
}

/* Meta rows */
.grcki-esim-meta-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px solid var(--grcki-border-light);
	font-size: 13px;
}

.grcki-esim-meta-label {
	color: var(--grcki-muted);
	font-weight: 500;
}

.grcki-esim-meta-value {
	color: var(--grcki-heading);
	font-weight: 600;
}

.grcki-esim-meta-value a {
	color: var(--grcki-brand);
	text-decoration: none;
}

.grcki-esim-meta-value code {
	background: var(--grcki-surface-sunken);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: var(--grcki-font-mono);
	font-size: 12px;
	color: var(--grcki-brand);
}

/* Copy button */
.grcki-esim-copy-btn {
	background: var(--grcki-surface);
	color: var(--grcki-muted);
	border: 1px solid var(--grcki-border);
	padding: 3px 8px;
	border-radius: 5px;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s var(--grcki-ease);
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.grcki-esim-copy-btn:hover {
	background: var(--grcki-info-bg);
	color: var(--grcki-brand);
	border-color: var(--grcki-brand);
}

/* Card actions */
.grcki-esim-card-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.grcki-esim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border-radius: var(--grcki-radius);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: all .15s var(--grcki-ease);
	border: none;
	text-decoration: none !important;
	width: 100%;
	gap: 8px;
}

.grcki-esim-btn-primary {
	background: var(--grcki-navy);
	color: #FFFFFF !important;
}

.grcki-esim-btn-primary:hover {
	background: var(--grcki-brand);
	transform: translateY(-1px);
}

.grcki-esim-btn-secondary {
	background: var(--grcki-surface);
	color: var(--grcki-brand) !important;
	border: 1px solid var(--grcki-border);
}

.grcki-esim-btn-secondary:hover {
	border-color: var(--grcki-brand);
	background: var(--grcki-info-bg);
}

.grcki-esim-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Auto-refill status in card footer */
.grcki-esim-auto-refill-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--grcki-muted);
	cursor: pointer;
	padding: 6px 0;
	transition: color .15s var(--grcki-ease);
}

.grcki-esim-auto-refill-status:hover {
	color: var(--grcki-brand);
}

.grcki-esim-auto-refill-status svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.grcki-esim-auto-refill-status.enabled svg {
	color: var(--grcki-success);
}

.grcki-esim-auto-refill-status.disabled svg {
	color: var(--grcki-faint);
}

.grcki-esim-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--grcki-border-light);
}

.grcki-esim-expiration {
	font-size: 12px;
	color: var(--grcki-muted);
	text-align: right;
}

.grcki-esim-expiration-label {
	font-size: 10px;
	color: var(--grcki-faint);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.grcki-esim-expiration-date {
	font-weight: 600;
	color: var(--grcki-body);
}

/* --------------------------------------------------------------------------
   4. Install / Detail Panel
   -------------------------------------------------------------------------- */
.grcki-esim-detail-panel {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--grcki-border-light);
	display: none;
}

.grcki-esim-card.is-open .grcki-esim-detail-panel {
	display: block;
}

.grcki-esim-install-grid {
	display: grid;
	gap: 24px;
}

@media (max-width: 768px) {
	.grcki-esim-install-grid {
		grid-template-columns: 1fr;
	}
}

.grcki-esim-qr-card {
	background: var(--grcki-surface);
	padding: 20px;
	border-radius: var(--grcki-radius-lg);
	border: 1px solid var(--grcki-border-light);
	text-align: center;
}

.grcki-esim-qr-image {
	max-width: 100%;
	height: auto;
	margin-bottom: 14px;
}

.grcki-esim-install-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 20px;
}

.grcki-esim-activation-details {
	background: var(--grcki-surface-sunken);
	padding: 14px;
	border-radius: var(--grcki-radius);
	margin-bottom: 20px;
}

.grcki-esim-activation-row {
	margin-bottom: 10px;
}

.grcki-esim-activation-row:last-child {
	margin-bottom: 0;
}

.grcki-esim-activation-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--grcki-faint);
	text-transform: uppercase;
	letter-spacing: .06em;
	display: block;
	margin-bottom: 3px;
}

.grcki-esim-activation-value {
	display: flex;
	align-items: center;
	gap: 6px;
}

.grcki-esim-activation-value code {
	flex: 1;
	font-size: 12px;
	word-break: break-all;
	font-family: var(--grcki-font-mono);
}

.grcki-esim-steps-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--grcki-heading);
	margin: 0 0 12px;
}

.grcki-esim-steps-list {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 13px;
	color: var(--grcki-body);
	line-height: 1.6;
}

.grcki-esim-steps-list li {
	margin-bottom: 8px;
}

.grcki-esim-install-note {
	background: var(--grcki-warning-bg);
	padding: 10px 14px;
	border-radius: var(--grcki-radius);
	font-size: 12px;
	color: var(--grcki-warning);
	margin-top: 16px;
	font-weight: 500;
}

/* Auto-refill toggle in detail panel */
.grcki-esim-auto-refill-toggle {
	margin: 16px 0;
	padding: 14px;
	background: var(--grcki-surface-sunken);
	border-radius: var(--grcki-radius);
	border: none;
}

.grcki-auto-refill-options {
	background: var(--grcki-surface) !important;
	border: 1px solid var(--grcki-border) !important;
	border-radius: var(--grcki-radius) !important;
	box-shadow: var(--grcki-shadow-sm);
}

/* --------------------------------------------------------------------------
   5. Auto-Refill Modal
   -------------------------------------------------------------------------- */
.grcki-esim-modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(10, 37, 64, .45);
	backdrop-filter: blur(4px);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.grcki-esim-modal-overlay.is-open {
	display: flex !important;
}

.grcki-esim-modal-content {
	background: var(--grcki-surface);
	border-radius: var(--grcki-radius-lg);
	max-width: 440px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 24px;
	position: relative;
	box-shadow: var(--grcki-shadow-lg);
}

.grcki-esim-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: var(--grcki-faint);
	line-height: 1;
	padding: 0;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: all .15s var(--grcki-ease);
}

.grcki-esim-modal-close:hover {
	background: var(--grcki-surface-sunken);
	color: var(--grcki-heading);
}

.grcki-esim-modal-content h3 {
	margin: 0 0 6px 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--grcki-heading);
	letter-spacing: -0.01em;
}

.grcki-auto-refill-plans {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.grcki-auto-refill-plan {
	display: flex;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--grcki-border);
	border-radius: var(--grcki-radius);
	cursor: pointer;
	transition: all .15s var(--grcki-ease);
}

.grcki-auto-refill-plan:hover {
	border-color: var(--grcki-brand);
	background: var(--grcki-info-bg);
}

.grcki-auto-refill-plan.is-selected {
	border-color: var(--grcki-brand);
	background: var(--grcki-info-bg);
	box-shadow: 0 0 0 2px rgba(13, 116, 206, .15);
}

.grcki-auto-refill-plan input[type="radio"] {
	margin: 0 10px 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--grcki-brand);
}

.grcki-auto-refill-plan-info {
	flex: 1;
}

.grcki-auto-refill-plan-name {
	font-weight: 600;
	color: var(--grcki-heading);
	font-size: 14px;
}

.grcki-auto-refill-plan-data {
	font-size: 12px;
	color: var(--grcki-muted);
	margin-top: 1px;
}

.grcki-auto-refill-plan-price {
	font-weight: 700;
	color: var(--grcki-brand);
	font-size: 15px;
}

.grcki-auto-refill-loading {
	text-align: center;
	color: var(--grcki-muted);
	padding: 16px;
	font-size: 14px;
}

.grcki-auto-refill-message.success {
	color: var(--grcki-success);
}

.grcki-auto-refill-message.error {
	color: var(--grcki-error);
}

/* --------------------------------------------------------------------------
   6. Modal internal sections (replaces inline styles)
   -------------------------------------------------------------------------- */
.grcki-auto-refill-enable-section {
	margin-bottom: 16px;
	padding: 14px;
	background: var(--grcki-surface-sunken);
	border-radius: var(--grcki-radius);
	border: none;
}

.grcki-auto-refill-enable-section label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	margin: 0;
}

.grcki-auto-refill-enable-section input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--grcki-brand);
}

.grcki-auto-refill-enable-section .enable-label {
	font-weight: 600;
	color: var(--grcki-heading);
	font-size: 14px;
}

.grcki-auto-refill-plans-section-label {
	font-weight: 600;
	color: var(--grcki-heading);
	font-size: 13px;
	margin-bottom: 10px;
}

.grcki-auto-refill-actions {
	margin-top: 20px;
	display: flex;
	gap: 8px;
}

.grcki-auto-refill-actions .grcki-esim-btn {
	flex: 1;
}

.grcki-auto-refill-message {
	margin-top: 10px;
	font-size: 13px;
	text-align: center;
	font-weight: 500;
}

/* Install autorefill section (replaces inline styles) */
.grcki-esim-install-autorefill {
	margin: 16px 0;
	padding: 14px;
	background: var(--grcki-surface-sunken);
	border-radius: var(--grcki-radius);
	border: none;
}

.grcki-esim-install-autorefill-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.grcki-esim-install-autorefill-title {
	font-weight: 600;
	color: var(--grcki-heading);
	font-size: 14px;
}

.grcki-esim-install-autorefill-subtitle {
	font-size: 12px;
	color: var(--grcki-muted);
	margin-top: 2px;
}

.grcki-esim-autorefill-toggle-btn {
	font-size: 12px !important;
	padding: 7px 14px !important;
}

/* Centered meta label (for refill/activation placeholders) */
.grcki-esim-meta-label--centered {
	text-align: center;
	width: 100%;
	display: block;
}

/* Modal description */
.grcki-auto-refill-description {
	color: var(--grcki-muted);
	font-size: 13px;
	margin-bottom: 16px;
	line-height: 1.5;
}