/* ==========================================================================
   Hijrah Calendar Widget
   ========================================================================== */

.hc-calendar {
	max-width: 420px;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin: 1.25em 0;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Date header
   -------------------------------------------------------------------------- */

.hc-date-section {
	background: linear-gradient(135deg, #1a6e42 0%, #28a160 100%);
	color: #fff;
	padding: 22px 26px;
	text-align: center;
}

.hc-gregorian {
	font-size: 0.95rem;
	opacity: 0.88;
	margin-bottom: 6px;
	letter-spacing: 0.02em;
}

.hc-hijri {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   Prayer-time section
   -------------------------------------------------------------------------- */

.hc-prayer-section {
	background: #fff;
	padding: 18px 22px 20px;
}

.hc-prayer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e8f5ee;
}

.hc-prayer-title {
	font-size: 0.78rem;
	font-weight: 700;
	color: #1a6e42;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hc-prayer-zone {
	font-size: 0.78rem;
	color: #6c757d;
}

/* --------------------------------------------------------------------------
   Prayer-time grid  (2 columns × 4 rows)
   -------------------------------------------------------------------------- */

.hc-prayer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 6px;
}

.hc-prayer-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
	border-bottom: 1px solid #f0f4f2;
}

.hc-prayer-item.hc-prayer-empty {
	visibility: hidden;
	border-bottom: none;
}

.hc-prayer-name {
	font-size: 0.88rem;
	color: #444;
}

.hc-prayer-time {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a6e42;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Error state
   -------------------------------------------------------------------------- */

.hc-calendar.hc-error {
	background: #fff5f5;
	border: 1px solid #f5c2c7;
	border-radius: 10px;
	padding: 18px 22px;
	color: #842029;
	font-size: 0.9rem;
}

.hc-calendar.hc-error p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.hc-calendar {
		max-width: 100%;
		border-radius: 8px;
	}

	.hc-hijri {
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   [hijrah_date] — inline date string for headers / nav bars
   ========================================================================== */

.hc-date-inline {
	display: inline;
	font-size: inherit;
	color: inherit;
	white-space: nowrap;
}

.hc-date-gregorian {
	font-weight: 500;
}

.hc-date-sep {
	opacity: 0.55;
	margin: 0 0.1em;
}

.hc-date-hijri {
	font-weight: 600;
}

.hc-date-error {
	color: #842029;
	font-size: 0.85rem;
}

/* ==========================================================================
   [hijrah_prayer_inline] — single-line prayer time bar
   ========================================================================== */

.hc-prayer-inline {
	margin: 0;
	padding: 8px 14px;
	font-size: 0.88rem;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.hc-pi-label {
	font-weight: 700;
}

.hc-pi-date {
	color: #555;
}

.hc-pi-zone {
	font-weight: 600;
	color: #1a6e42;
}

.hc-pi-times {
	color: #333;
}

.hc-prayer-inline-error {
	color: #842029;
}

/* ==========================================================================
   [hijrah_prayer_times] — prayer-only card (no date header above it)
   ========================================================================== */

/* .hc-calendar already has overflow:hidden + border-radius, so the
   prayer-section corners are clipped correctly with no extra rules needed.
   This class is a hook for theme overrides. */
.hc-prayer-only .hc-prayer-section {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}