/* India Pin Code Directory - Public Styles */

.ipd-wrapper {
	--ipd-primary: #1a5f7a;
	--ipd-primary-dark: #133f52;
	--ipd-accent: #ff9800;
	--ipd-border: #e0e4e8;
	--ipd-bg-light: #f7f9fb;
	--ipd-text: #22292f;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px 16px 60px;
	color: var(--ipd-text);
	line-height: 1.6;
}

.ipd-wrapper * { box-sizing: border-box; }

/* Breadcrumb */
.ipd-breadcrumb {
	font-size: 13px;
	margin-bottom: 18px;
	color: #667;
}
.ipd-breadcrumb a { color: var(--ipd-primary); text-decoration: none; }
.ipd-breadcrumb a:hover { text-decoration: underline; }
.ipd-breadcrumb-sep { margin: 0 4px; color: #aab; }
.ipd-breadcrumb-current { color: #556; }

/* Search form */
.ipd-search-form-wrap { margin: 20px 0 32px; }
.ipd-search-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; position: relative; }
.ipd-search-input,
.ipd-search-form select {
	padding: 12px 14px;
	border: 1px solid var(--ipd-border);
	border-radius: 6px;
	font-size: 15px;
	flex: 1 1 220px;
}
.ipd-search-main .ipd-search-input { flex: 1 1 320px; }
.ipd-search-btn,
.ipd-filter-apply-btn {
	background: var(--ipd-primary);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 12px 22px;
	font-size: 15px;
	cursor: pointer;
	transition: background .15s ease;
}
.ipd-search-btn:hover,
.ipd-filter-apply-btn:hover { background: var(--ipd-primary-dark); }

.ipd-autocomplete-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--ipd-border);
	border-radius: 6px;
	z-index: 40;
	max-height: 320px;
	overflow-y: auto;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.ipd-autocomplete-results a {
	display: block;
	padding: 10px 14px;
	color: var(--ipd-text);
	text-decoration: none;
	border-bottom: 1px solid var(--ipd-bg-light);
	font-size: 14px;
}
.ipd-autocomplete-results a:hover { background: var(--ipd-bg-light); }

.ipd-search-results { margin-top: 10px; }
.ipd-search-loading { color: #778; font-style: italic; padding: 10px 0; }

/* Grid lists (states, districts, popular, recent, other offices, nearby) */
.ipd-grid-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 16px;
	list-style: none;
	margin: 12px 0 24px;
	padding: 0;
}
.ipd-grid-list li { border-bottom: 1px dashed var(--ipd-border); padding-bottom: 6px; }
.ipd-grid-list a { color: var(--ipd-primary); text-decoration: none; font-size: 14.5px; }
.ipd-grid-list a:hover { text-decoration: underline; }

.ipd-alpha-browse { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 28px; }
.ipd-alpha-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ipd-border);
	border-radius: 6px;
	color: var(--ipd-primary);
	text-decoration: none;
	font-weight: 600;
}
.ipd-alpha-link:hover { background: var(--ipd-primary); color: #fff; }

/* Single pincode page */
.ipd-pincode-header h1 { margin-bottom: 4px; font-size: 28px; }
.ipd-pincode-subtitle { color: #667; margin-top: 0; }
.ipd-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 20px; }
.ipd-print-btn {
	background: var(--ipd-bg-light);
	border: 1px solid var(--ipd-border);
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
}
.ipd-share-buttons { display: flex; gap: 12px; }
.ipd-share-buttons a { font-size: 13px; color: var(--ipd-primary); text-decoration: none; }
.ipd-share-buttons a:hover { text-decoration: underline; }

.ipd-detail-table { width: 100%; border-collapse: collapse; margin: 16px 0 28px; }
.ipd-detail-table th,
.ipd-detail-table td {
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--ipd-border);
	font-size: 15px;
}
.ipd-detail-table th { width: 220px; color: #556; font-weight: 600; background: var(--ipd-bg-light); }

.ipd-map-embed { margin: 24px 0; }
.ipd-map-embed iframe { border-radius: 8px; }
.ipd-map-note { font-size: 12px; color: #889; }

.ipd-not-found { text-align: center; padding: 40px 0; }

/* Directory listing table */
.ipd-table-scroll { overflow-x: auto; }
.ipd-listing-table { width: 100%; border-collapse: collapse; margin: 16px 0; min-width: 560px; }
.ipd-listing-table th,
.ipd-listing-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ipd-border);
	text-align: left;
	font-size: 14.5px;
}
.ipd-listing-table th { background: var(--ipd-bg-light); }
.ipd-listing-table a { color: var(--ipd-primary); text-decoration: none; }
.ipd-listing-table a:hover { text-decoration: underline; }
.ipd-result-count { color: #667; font-size: 14px; }

.ipd-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.ipd-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--ipd-border);
	border-radius: 6px;
	color: var(--ipd-primary);
	text-decoration: none;
	font-size: 13.5px;
}
.ipd-page-link.is-current { background: var(--ipd-primary); color: #fff; border-color: var(--ipd-primary); }

/* Pincode card shortcode */
.ipd-pincode-card {
	border: 1px solid var(--ipd-border);
	border-radius: 8px;
	padding: 18px 20px;
	background: var(--ipd-bg-light);
	margin: 16px 0;
}
.ipd-card-title { margin: 0 0 10px; font-size: 18px; }
.ipd-card-title a { color: var(--ipd-primary-dark); text-decoration: none; }
.ipd-card-meta { list-style: none; margin: 0 0 12px; padding: 0; font-size: 14px; }
.ipd-card-meta li { margin-bottom: 4px; }
.ipd-card-link { color: var(--ipd-accent); font-weight: 600; text-decoration: none; font-size: 14px; }

/* Dark mode support (follows OS preference automatically) */
@media (prefers-color-scheme: dark) {
	.ipd-wrapper {
		--ipd-border: #333c44;
		--ipd-bg-light: #1c2126;
		--ipd-text: #e7ebee;
		--ipd-primary: #63b6d8;
		--ipd-primary-dark: #8fd0ee;
	}
	.ipd-autocomplete-results { background: #14181b; }
	.ipd-search-input, .ipd-search-form select { background: #14181b; color: #e7ebee; }
}

/* Print styles */
@media print {
	.ipd-search-again, .ipd-page-actions, .ipd-breadcrumb, .ipd-nearby-pincodes { display: none !important; }
}

/* Responsive */
@media (max-width: 640px) {
	.ipd-detail-table th { width: 140px; font-size: 13.5px; }
	.ipd-detail-table td { font-size: 13.5px; }
	.ipd-search-row { flex-direction: column; }
	.ipd-search-input, .ipd-search-form select, .ipd-search-btn, .ipd-filter-apply-btn { width: 100%; }
}

/* ---------------------------------------------------------------
 * Live location search
 * --------------------------------------------------------------- */
.ipd-location-btn {
	background: #fff;
	border: 1px solid var(--ipd-border);
	color: var(--ipd-primary);
	border-radius: 6px;
	padding: 12px 16px;
	cursor: pointer;
	font-size: 14px;
	white-space: nowrap;
}
.ipd-location-btn:hover { background: var(--ipd-bg-light); }
.ipd-location-status { font-size: 13px; color: #667; margin: 6px 0 0; }

/* ---------------------------------------------------------------
 * Copy pin code
 * --------------------------------------------------------------- */
.ipd-copy-pincode-row { display: flex; align-items: center; gap: 10px; margin: 14px 0; position: relative; }
.ipd-copy-pincode-value { font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--ipd-primary-dark); }
.ipd-copy-btn {
	background: var(--ipd-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13.5px;
	cursor: pointer;
	transition: transform .1s ease;
}
.ipd-copy-btn:active { transform: scale(.96); }
.ipd-copy-toast {
	background: #1e7a34;
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 12px;
	opacity: 0;
	transition: opacity .2s ease;
}
.ipd-copy-toast.is-visible { opacity: 1; }

/* ---------------------------------------------------------------
 * Post office image + QR code
 * --------------------------------------------------------------- */
.ipd-office-image-wrap { margin: 18px 0; }
.ipd-office-image { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.ipd-card-image { max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 10px; }
.ipd-qr-code-block { margin: 24px 0; text-align: center; max-width: 220px; }
.ipd-qr-code-image { border: 1px solid var(--ipd-border); border-radius: 6px; padding: 8px; background: #fff; }
.ipd-qr-note { font-size: 11.5px; color: #889; margin-top: 6px; }

/* ---------------------------------------------------------------
 * Sidebar layout
 * --------------------------------------------------------------- */
.ipd-content-columns { display: flex; gap: 32px; align-items: flex-start; }
.ipd-main-column { flex: 1 1 auto; min-width: 0; }
.ipd-sidebar-column {
	flex: 0 0 260px;
	background: var(--ipd-bg-light);
	border: 1px solid var(--ipd-border);
	border-radius: 8px;
	padding: 18px;
}
.ipd-sidebar-column h3 { margin-top: 0; font-size: 15px; }
@media (max-width: 900px) {
	.ipd-content-columns { flex-direction: column; }
	.ipd-sidebar-column { flex-basis: auto; width: 100%; }
}

/* ---------------------------------------------------------------
 * Width & dark-mode overrides driven by admin settings
 * --------------------------------------------------------------- */
.ipd-width-boxed { max-width: 900px; border: 1px solid var(--ipd-border); border-radius: 10px; padding: 24px 28px; margin-top: 20px; }
.ipd-dark-on { --ipd-border: #333c44; --ipd-bg-light: #1c2126; --ipd-text: #e7ebee; background: #10131a; }
.ipd-dark-on .ipd-search-input, .ipd-dark-on .ipd-search-form select { background: #14181b; color: #e7ebee; }

/* ---------------------------------------------------------------
 * Page layout variants (Classic / Modern / Card / Grid / Minimal /
 * Business / Directory / Blog). These are deliberately built from
 * shared components with CSS-level differences, keeping the plugin
 * lightweight rather than shipping eight full duplicate templates.
 * --------------------------------------------------------------- */
.ipd-layout-modern .ipd-pincode-header { background: linear-gradient(135deg, var(--ipd-primary), var(--ipd-primary-dark)); color: #fff; padding: 28px; border-radius: 12px; margin-bottom: 24px; }
.ipd-layout-modern .ipd-pincode-header h1,
.ipd-layout-modern .ipd-pincode-subheading,
.ipd-layout-modern .ipd-pincode-subtitle { color: #fff; }
.ipd-layout-modern .ipd-detail-table { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

.ipd-layout-card .ipd-detail-table { border: none; }
.ipd-layout-card .ipd-detail-table tr { display: block; background: #fff; border: 1px solid var(--ipd-border); border-radius: 8px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.ipd-layout-card .ipd-detail-table th, .ipd-layout-card .ipd-detail-table td { display: block; border: none; padding: 6px 16px; }
.ipd-layout-card .ipd-detail-table th { background: none; font-size: 12px; text-transform: uppercase; color: #889; padding-bottom: 0; }

.ipd-layout-grid .ipd-detail-table,
.ipd-layout-grid .ipd-detail-table tbody { display: block; }
.ipd-layout-grid .ipd-detail-table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ipd-layout-grid .ipd-detail-table tr { display: block; background: var(--ipd-bg-light); border-radius: 8px; padding: 10px 14px; }
.ipd-layout-grid .ipd-detail-table th, .ipd-layout-grid .ipd-detail-table td { display: block; border: none; padding: 2px 0; }
.ipd-layout-grid .ipd-detail-table th { font-size: 12px; color: #889; }

.ipd-layout-minimal .ipd-detail-table th { background: none; border-bottom: none; }
.ipd-layout-minimal .ipd-detail-table td { border-bottom: none; }
.ipd-layout-minimal .ipd-detail-table tr { border-bottom: 1px solid var(--ipd-border); }
.ipd-layout-minimal .ipd-page-actions, .ipd-layout-minimal .ipd-breadcrumb { opacity: .8; }

.ipd-layout-business .ipd-pincode-header { border-left: 6px solid var(--ipd-accent); padding-left: 18px; }
.ipd-layout-business .ipd-pincode-header h1 { font-size: 32px; font-weight: 800; }

.ipd-layout-directory .ipd-detail-table th { width: 180px; }

.ipd-layout-blog .ipd-pincode-header h1 { font-size: 26px; font-style: italic; }
.ipd-layout-blog .ipd-detail-table { font-size: 14px; }