/* Instant Services — Frontend Styles */

/* ─── CSS Custom Properties (overridden by AppearanceHelper inline style) ─── */
:root {
	--insvcs-card-bg:            #ffffff;
	--insvcs-card-border:        #e5e7eb;
	--insvcs-card-hover-border:  #2563eb;
	--insvcs-card-radius:        12px;
	--insvcs-card-shadow:        0 4px 16px rgba(0,0,0,.10);
	--insvcs-accent:             #2563eb;
	--insvcs-btn-color:          #2563eb;
	--insvcs-btn-text:           #ffffff;
	--insvcs-btn-radius:         8px;
	--insvcs-font:               system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--insvcs-card-min-width:     280px;
	--insvcs-card-min-width-mobile: 100%;
}

/* ─── Grid Layout ───────────────────────────────────────────────────────── */
.insvcs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--insvcs-card-min-width), 1fr));
	gap: 24px;
	font-family: var(--insvcs-font);
}

@media (max-width: 768px) {
	.insvcs-grid {
		grid-template-columns: repeat(auto-fit, minmax(var(--insvcs-card-min-width-mobile), 1fr));
		gap: 16px;
	}
}

/* ─── Bento Layout ──────────────────────────────────────────────────────── */
.insvcs-bento {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--insvcs-card-min-width), 1fr));
	grid-auto-rows: auto;
	gap: 24px;
	font-family: var(--insvcs-font);
}

/* First card spans 2 columns on desktop */
.insvcs-bento .insvcs-card-item:first-child {
	grid-column: span 2;
}

/* Every 5th card (after the first) also spans 2 columns */
.insvcs-bento .insvcs-card-item:nth-child(5n) {
	grid-column: span 2;
}

@media (max-width: 768px) {
	.insvcs-bento {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.insvcs-bento .insvcs-card-item:first-child,
	.insvcs-bento .insvcs-card-item:nth-child(5n) {
		grid-column: span 1;
	}
}

/* ─── Carousel Layout ───────────────────────────────────────────────────── */
.insvcs-carousel-wrap {
	position: relative;
	font-family: var(--insvcs-font);
}

.insvcs-carousel {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 8px;
}

.insvcs-carousel::-webkit-scrollbar {
	display: none;
}

.insvcs-carousel .insvcs-card-item {
	flex: 0 0 var(--insvcs-carousel-card-width, 320px);
	scroll-snap-align: start;
	max-width: var(--insvcs-carousel-card-width, 320px);
}

.insvcs-carousel-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.insvcs-carousel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--insvcs-card-border);
	background: var(--insvcs-card-bg);
	color: var(--insvcs-accent);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
	font-size: 18px;
	line-height: 1;
}

.insvcs-carousel-btn:hover {
	background: var(--insvcs-accent);
	border-color: var(--insvcs-accent);
	color: #fff;
}

.insvcs-carousel-btn:disabled {
	opacity: .35;
	cursor: default;
}

@media (max-width: 768px) {
	.insvcs-carousel .insvcs-card-item {
		flex: 0 0 85vw;
		max-width: 85vw;
	}
}

/* ─── Card ──────────────────────────────────────────────────────────────── */
.insvcs-card-item {
	background:    var(--insvcs-card-bg);
	border:        2px solid var(--insvcs-card-border);
	border-radius: var(--insvcs-card-radius);
	box-shadow:    var(--insvcs-card-shadow);
	padding:       32px 28px;
	display:       flex;
	flex-direction: column;
	align-items:   flex-start;
	transition:    transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.insvcs-card-item:hover {
	transform:    translateY(-3px);
	box-shadow:   0 8px 28px rgba(0,0,0,.14);
	border-color: var(--insvcs-card-hover-border);
}

/* ─── Featured Card ─────────────────────────────────────────────────────── */
.insvcs-card-item--featured {
	background:   var(--insvcs-accent);
	border-color: var(--insvcs-accent);
	color:        #fff;
}

.insvcs-card-item--featured .insvcs-card-icon {
	color: #fff;
}

.insvcs-card-item--featured .insvcs-card-title {
	color: #fff;
}

.insvcs-card-item--featured .insvcs-card-features {
	color: rgba(255,255,255,.85);
}

.insvcs-card-item--featured:hover {
	border-color: var(--insvcs-accent);
	box-shadow: 0 8px 32px rgba(0,0,0,.22);
}

.insvcs-card-item--featured .insvcs-card-btn {
	background: #fff;
	color:      var(--insvcs-accent) !important;
}

.insvcs-card-item--featured .insvcs-card-btn:hover {
	background: rgba(255,255,255,.88);
	color:      var(--insvcs-accent) !important;
}

.insvcs-featured-badge {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-size:       0.7rem;
	font-weight:     700;
	text-transform:  uppercase;
	letter-spacing:  .08em;
	color:           rgba(255,255,255,.9);
	background:      rgba(255,255,255,.18);
	border-radius:   4px;
	padding:         2px 8px;
	margin-bottom:   12px;
}

/* ─── Icon ──────────────────────────────────────────────────────────────── */
.insvcs-card-icon {
	width:         56px;
	height:        56px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	margin-bottom: 18px;
	color:         var(--insvcs-accent);
}

.insvcs-card-icon img {
	width:      100%;
	height:     100%;
	object-fit: contain;
}

.insvcs-card-icon svg {
	width:  100%;
	height: 100%;
}

.insvcs-card-icon i {
	font-size: 40px;
}

/* ─── Title ─────────────────────────────────────────────────────────────── */
.insvcs-card-title {
	font-family:   var(--insvcs-font);
	font-size:     1.2rem;
	font-weight:   700;
	margin:        0 0 12px;
	color:         inherit;
	line-height:   1.3;
}

/* ─── Features / Description ─────────────────────────────────────────────── */
.insvcs-card-features {
	font-size:    0.95rem;
	line-height:  1.7;
	color:        #4b5563;
	margin:       0 0 20px;
	flex:         1;
}

.insvcs-card-features ul {
	margin:     0;
	padding:    0 0 0 18px;
}

.insvcs-card-features li {
	margin-bottom: 4px;
}

/* ─── Button ─────────────────────────────────────────────────────────────── */
.insvcs-card-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	background:      var(--insvcs-btn-color);
	color:           var(--insvcs-btn-text) !important;
	border-radius:   var(--insvcs-btn-radius);
	padding:         10px 22px;
	font-size:       0.9rem;
	font-weight:     600;
	text-decoration: none !important;
	transition:      background .18s ease, transform .18s ease;
	margin-top:      auto;
	border:          none;
	cursor:          pointer;
}

.insvcs-card-btn:hover {
	background:  color-mix(in srgb, var(--insvcs-btn-color) 85%, #000 15%);
	transform:   translateY(-1px);
	color:       var(--insvcs-btn-text) !important;
}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.insvcs-empty {
	color:      #6b7280;
	font-style: italic;
}

/* ─── Single Service Page ─────────────────────────────────────────────────── */
.insvcs-single-wrap {
	max-width:  800px;
	margin:     0 auto;
	padding:    40px 20px;
}

.insvcs-single-title {
	font-family:   var(--insvcs-font);
	font-size:     2rem;
	font-weight:   800;
	margin-bottom: 24px;
	line-height:   1.2;
}

.insvcs-single-content {
	font-size:   1rem;
	line-height: 1.8;
	color:       #374151;
}

.insvcs-single-back {
	margin-top: 40px;
	padding-top: 20px;
	border-top:  1px solid #e5e7eb;
}

.insvcs-single-back a {
	color:           var(--insvcs-accent);
	text-decoration: none;
	font-weight:     500;
}

.insvcs-single-back a:hover {
	text-decoration: underline;
}