/* ── Design token palette ─────────────────────────────────── */
:root {
    /* Andalusian */
    --pt-and-ivory:      #F5F0E8;
    --pt-and-green:      #2E5D3E;
    --pt-and-gold:       #C8A96E;
    --pt-and-terracotta: #B85C38;

    /* Modern */
    --pt-mod-navy:    #0f172a;
    --pt-mod-blue:    #0ea5e9;
    --pt-mod-indigo:  #6366f1;
}


/* Hexagon Grid Layout Styles */
.prayertimes-hexagons-container {
    text-align: center;
    padding: 20px 0;
}

.prayertimes-mosque-name {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.hexagons-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.hexagon-wrapper {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(
        50%   0%,   /* top point          */
        65%  15%,
        85%  15%,   /* top-right corner   */
        85%  35%,
        100% 50%,   /* right point        */
        85%  65%,
        85%  85%,   /* bottom-right corner*/
        65%  85%,
        50% 100%,   /* bottom point       */
        35%  85%,
        15%  85%,   /* bottom-left corner */
        15%  65%,
         0%  50%,   /* left point         */
        15%  35%,
        15%  15%,   /* top-left corner    */
        35%  15%
    );
}

.hexagon-prayer {
    background: linear-gradient(135deg, #3a6b8b 0%, #7bbbd4 100%);
}

.hexagon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-weight: bold;
}

.prayer-name {
    font-size: 14px;
    margin-bottom: 8px;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.prayer-time {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hexagon-wrapper {
        width: 100px;
        height: 115px;
    }

    .prayer-name {
        font-size: 12px;
    }

    .prayer-time {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .hexagons-grid {
        gap: 10px;
        padding: 10px;
    }

    .hexagon-wrapper {
        width: 80px;
        height: 90px;
    }

    .prayer-name {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .prayer-time {
        font-size: 12px;
    }
}

/* ── Minimalist Style ────────────────────────────────────── */

/* Header — horizontal strip */
.pt-minimal {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	padding: 14px 0;
	border-top: 1px solid #1a1a1a;
	border-bottom: 1px solid #1a1a1a;
}

.pt-minimal-city {
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #999;
}

.pt-minimal-strip {
	display: flex;
	align-items: center;
}

.pt-minimal-cell {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 4px 0;
}

.pt-minimal-sep {
	width: 1px;
	height: 28px;
	background: #e0e0e0;
	flex-shrink: 0;
}

.pt-minimal-name {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #bbb;
}

.pt-minimal-time {
	font-size: 14px;
	font-weight: 300;
	color: #1a1a1a;
	font-variant-numeric: tabular-nums;
}

/* Sidebar */
.pt-minimal-sidebar {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	max-width: 240px;
	border-left: 2px solid #1a1a1a;
	padding-left: 16px;
}

.pt-ms-city {
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #999;
}

.pt-ms-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-ms-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid #f2f2f2;
}

.pt-ms-item:last-child {
	border-bottom: none;
}

.pt-ms-name {
	font-size: 12px;
	font-weight: 500;
	color: #666;
}

.pt-ms-time {
	font-size: 13px;
	font-weight: 300;
	color: #1a1a1a;
	font-variant-numeric: tabular-nums;
}

/* Block */
.pt-minimal-block {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	max-width: 420px;
	border: 1px solid #e0e0e0;
}

.pt-mb-city {
	margin: 0;
	padding: 18px 20px 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #999;
}

.pt-mb-next {
	padding: 18px 20px;
	border-bottom: 1px solid #ebebeb;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pt-mb-next-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #bbb;
}

.pt-mb-next .pt-next-name {
	font-size: 15px;
	font-weight: 400;
	color: #1a1a1a;
}

.pt-mb-next .pt-countdown-timer {
	font-size: 34px;
	font-weight: 200;
	color: #1a1a1a;
	letter-spacing: 3px;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.pt-mb-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-mb-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 9px 20px;
	border-bottom: 1px solid #f5f5f5;
}

.pt-mb-item:last-child {
	border-bottom: none;
}

.pt-mb-name {
	font-size: 12px;
	font-weight: 500;
	color: #666;
}

.pt-mb-time {
	font-size: 13px;
	font-weight: 300;
	color: #1a1a1a;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
	.pt-minimal-cell {
		min-width: 0;
	}

	.pt-minimal-time {
		font-size: 12px;
	}

	.pt-minimal-name {
		font-size: 7px;
		letter-spacing: 1px;
	}
}

/* ── Andalusian Style ─────────────────────────────────────── */

/* Header — horizontal strip */
.pt-andalusian {
	font-family: Georgia, "Times New Roman", serif;
	background: var(--pt-and-ivory);
	padding: 16px 20px;
	border-top: 3px double var(--pt-and-gold);
	border-bottom: 3px double var(--pt-and-gold);
}

.pt-and-city {
	margin: 0 0 12px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-and-green);
	text-align: center;
	font-style: italic;
}

.pt-and-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

.pt-and-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
}

.pt-and-ornament {
	color: var(--pt-and-gold);
	font-size: 9px;
	align-self: center;
	opacity: 0.75;
	flex-shrink: 0;
}

.pt-and-name {
	font-size: 10px;
	letter-spacing: 0.5px;
	color: var(--pt-and-green);
	font-style: italic;
}

.pt-and-time {
	font-size: 16px;
	color: var(--pt-and-terracotta);
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

/* Sidebar */
.pt-andalusian-sidebar {
	font-family: Georgia, "Times New Roman", serif;
	background: var(--pt-and-ivory);
	max-width: 240px;
	border: 1px solid var(--pt-and-gold);
	overflow: hidden;
}

.pt-ands-city {
	margin: 0;
	padding: 12px 14px 10px;
	font-size: 11px;
	font-style: italic;
	letter-spacing: 1px;
	color: var(--pt-and-green);
	text-align: center;
	border-bottom: 1px solid var(--pt-and-gold);
	background: rgba(200, 169, 110, 0.1);
}

.pt-ands-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}

.pt-ands-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-bottom: 1px solid rgba(200, 169, 110, 0.2);
}

.pt-ands-item:last-child {
	border-bottom: none;
}

.pt-ands-diamond {
	font-size: 7px;
	color: var(--pt-and-gold);
	flex-shrink: 0;
}

.pt-ands-name {
	font-size: 12px;
	color: var(--pt-and-green);
	font-style: italic;
	flex: 1;
}

.pt-ands-time {
	font-size: 13px;
	color: var(--pt-and-terracotta);
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

/* Block */
.pt-andalusian-block {
	font-family: Georgia, "Times New Roman", serif;
	background: var(--pt-and-ivory);
	max-width: 440px;
	border: 1px solid var(--pt-and-gold);
}

.pt-andb-header {
	background: var(--pt-and-green);
	padding: 22px 24px;
	text-align: center;
	border-bottom: 3px solid var(--pt-and-gold);
}

.pt-andb-city {
	margin: 0 0 12px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-and-gold);
	font-style: italic;
}

.pt-andb-next {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.pt-andb-next-label {
	font-size: 9px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(200, 169, 110, 0.65);
	font-style: normal;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pt-andb-next .pt-next-name {
	font-size: 18px;
	color: #fff;
	font-style: italic;
}

.pt-andb-next .pt-countdown-timer {
	font-size: 36px;
	font-weight: bold;
	color: var(--pt-and-gold);
	letter-spacing: 3px;
	font-variant-numeric: tabular-nums;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-style: normal;
}

.pt-andb-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

.pt-andb-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 24px;
	border-bottom: 1px solid rgba(200, 169, 110, 0.18);
}

.pt-andb-item:last-child {
	border-bottom: none;
}

.pt-andb-diamond {
	font-size: 7px;
	color: var(--pt-and-gold);
	flex-shrink: 0;
}

.pt-andb-name {
	font-size: 13px;
	color: var(--pt-and-green);
	font-style: italic;
	flex: 1;
}

.pt-andb-time {
	font-size: 14px;
	color: var(--pt-and-terracotta);
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

/* ── Modern Style ─────────────────────────────────────────── */

/* Header — horizontal strip */
.pt-modern {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	background: #f8fafc;
	border-radius: 8px;
	padding: 16px 20px;
	border: 1px solid #e2e8f0;
}

.pt-modern-city {
	margin: 0 0 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #64748b;
}

.pt-modern-strip {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 6px;
}

.pt-modern-cell {
	flex: 1;
	min-width: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	padding: 9px 6px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pt-modern-cell:hover {
	border-color: var(--pt-mod-blue);
	box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.pt-modern-name {
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #94a3b8;
}

.pt-modern-time {
	font-size: 14px;
	font-weight: 600;
	color: var(--pt-mod-navy);
	font-variant-numeric: tabular-nums;
}

/* Sidebar */
.pt-modern-sidebar {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	max-width: 260px;
	background: var(--pt-mod-navy);
	border-radius: 8px;
	padding: 18px 20px;
	color: #f8fafc;
}

.pt-mods-city {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pt-mod-blue);
}

.pt-mods-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.pt-mods-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0 8px 12px;
	border-left: 2px solid #1e3a5f; /* slightly lighter than --pt-mod-navy */
	transition: border-color 0.15s;
}

.pt-mods-item:hover {
	border-left-color: var(--pt-mod-blue);
}

.pt-mods-name {
	font-size: 12px;
	font-weight: 500;
	color: #94a3b8;
}

.pt-mods-time {
	font-size: 13px;
	font-weight: 600;
	color: #f8fafc;
	font-variant-numeric: tabular-nums;
}

/* Block */
.pt-modern-block {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	max-width: 460px;
	background: var(--pt-mod-navy);
	border-radius: 12px;
	overflow: hidden;
	color: #f8fafc;
}

.pt-modb-header {
	background: linear-gradient(135deg, #0369a1 0%, var(--pt-mod-indigo) 100%);
	padding: 24px 28px 22px;
}

.pt-modb-next {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pt-modb-next-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.pt-modb-next .pt-next-name {
	font-size: 22px;
	font-weight: 300;
	color: #fff;
	letter-spacing: 0.5px;
}

.pt-modb-next .pt-countdown-timer {
	font-size: 44px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 2px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin-top: 4px;
}

.pt-modb-city {
	margin: 16px 0 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.pt-modb-list {
	padding: 6px 0;
}

.pt-modb-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition: background 0.15s;
}

.pt-modb-item:last-child {
	border-bottom: none;
}

.pt-modb-item:hover {
	background: rgba(255, 255, 255, 0.04);
}

.pt-modb-name {
	font-size: 13px;
	font-weight: 400;
	color: #94a3b8;
}

.pt-modb-time {
	font-size: 14px;
	font-weight: 600;
	color: #f8fafc;
	font-variant-numeric: tabular-nums;
}

/* ── Admin preview cards ──────────────────────────────────── */
.prayertimes-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.prayertimes-preview-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 12px 14px;
    flex: 1 1 260px;
    max-width: 340px;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.prayertimes-preview-label {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    word-break: break-all;
}

.prayertimes-preview-output {
    overflow: hidden;
}

/* Scaled-down hexagons inside admin preview cards */
.prayertimes-admin-preview .prayertimes-hexagons-container {
    padding: 6px 0;
}

.prayertimes-admin-preview .prayertimes-mosque-name {
    font-size: 13px;
    margin-bottom: 8px;
}

.prayertimes-admin-preview .hexagons-grid {
    gap: 6px;
    padding: 6px;
    justify-content: flex-start;
}

.prayertimes-admin-preview .hexagon-wrapper {
    width: 64px;
    height: 74px;
}

.prayertimes-admin-preview .prayer-name {
    font-size: 8px;
    margin-bottom: 3px;
    letter-spacing: 0;
}

.prayertimes-admin-preview .prayer-time {
    font-size: 9px;
}

/* Wide cards for block-style previews */
.prayertimes-preview-grid--wide .prayertimes-preview-card {
    max-width: 480px;
    flex: 1 1 340px;
}

/* Scale down large countdown timers in admin preview cards */
.prayertimes-preview-card .pt-countdown-timer {
    font-size: 20px !important;
    letter-spacing: 1px !important;
}

/* Prevent block styles from overflowing their admin preview card */
.prayertimes-preview-card .pt-modern-block,
.prayertimes-preview-card .pt-andalusian-block,
.prayertimes-preview-card .pt-minimal-block {
    max-width: 100%;
}

/* ── Admin tab panels ─────────────────────────────────────── */

.pt-tab-panel {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-top: none;
    padding: 24px;
    margin-bottom: 24px;
}

.pt-tab-panel[hidden] {
    display: none;
}

/* Shortcode mini-table inside each tab */
.pt-admin-sc-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 680px;
    margin-bottom: 4px;
}

.pt-admin-sc-table th {
    padding: 7px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #646970;
    background: #f6f7f7;
    border-bottom: 1px solid #e2e4e7;
}

.pt-admin-sc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f1;
    font-size: 13px;
    vertical-align: top;
}

.pt-admin-sc-table tr:last-child td {
    border-bottom: none;
}

.pt-admin-sc-table code {
    white-space: nowrap;
}

/* Section label inside tab (e.g. "Previews") */
.pt-tab-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #646970;
    margin: 24px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e4e7;
}