/* ===== PINCODE FINDER CSS ===== */

.pin-wrapper { margin-bottom: 28px; }

/* Tabs */
.pin-tabs { display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; flex-wrap: wrap; }
.pin-tab {
    background: none; border: none; padding: 11px 18px;
    cursor: pointer; font-size: 13px; font-weight: 700;
    color: #6b7280; border-bottom: 3px solid transparent;
    transition: all 0.2s; margin-bottom: -2px; white-space: nowrap;
}
.pin-tab:hover { color: #ea580c; }
.pin-tab.active { color: #ea580c; border-bottom-color: #ea580c; }

/* Grid */
.pin-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; margin-top: 20px; }

/* Cards */
.pin-input-card,
.pin-output-card {
    background: #fff; border: 2px solid #e5e7eb;
    border-radius: 20px; padding: 22px;
}
.pin-output-card { border-color: #fed7aa; }
.pin-card-title  { font-size: 15px; font-weight: 800; color: #1f2937; margin-bottom: 16px; }

/* Fields */
.pin-field  { margin-bottom: 16px; }
.pin-label  {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px;
}
.pin-opt    { color: #9ca3af; font-weight: 400; font-size: 11px; }
.pin-hint   { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.pin-step   {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: #fff; font-size: 11px; font-weight: 900;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pin-back-btn {
    background: none; border: 1.5px solid #e5e7eb; border-radius: 6px;
    padding: 3px 8px; font-size: 11px; font-weight: 600; color: #6b7280;
    cursor: pointer; transition: all 0.2s; margin-left: auto;
}
.pin-back-btn:hover { border-color: #ea580c; color: #ea580c; }

/* Input Row */
.pin-input-row { display: flex; gap: 8px; }
.pin-input {
    width: 100%; border: 2px solid #e5e7eb; border-radius: 10px;
    padding: 11px 14px; font-size: 15px; outline: none; font-family: inherit;
    transition: border-color 0.2s; box-sizing: border-box; color: #1f2937; font-weight: 600;
}
.pin-input:focus { border-color: #ea580c; }
.pin-textarea {
    width: 100%; min-height: 120px; border: 2px solid #e5e7eb; border-radius: 10px;
    padding: 11px 14px; font-size: 14px; outline: none; font-family: inherit;
    resize: vertical; transition: border-color 0.2s; box-sizing: border-box; color: #1f2937; line-height: 1.7;
}
.pin-textarea:focus { border-color: #ea580c; }
.pin-search-btn {
    background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff;
    border: none; border-radius: 10px; padding: 11px 16px;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s;
    white-space: nowrap; box-shadow: 0 3px 10px rgba(234,88,12,0.3);
}
.pin-search-btn:hover { transform: translateY(-1px); }
.pin-search-full-btn {
    width: 100%; background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff;
    border: none; border-radius: 12px; padding: 13px;
    font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.25s;
    box-shadow: 0 4px 14px rgba(234,88,12,0.3);
}
.pin-search-full-btn:hover:not(:disabled) { transform: translateY(-2px); }
.pin-search-full-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* Quick chips */
.pin-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-chip {
    background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 20px;
    padding: 4px 11px; font-size: 12px; font-weight: 600; color: #c2410c;
    cursor: pointer; transition: all 0.2s;
}
.pin-chip:hover { background: #ea580c; color: #fff; border-color: #ea580c; transform: translateY(-1px); }

/* Recent */
.pin-recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-recent-chip {
    background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 20px;
    padding: 3px 11px; font-size: 12px; font-weight: 600; color: #374151;
    cursor: pointer; transition: all 0.2s; font-family: monospace;
}
.pin-recent-chip:hover { border-color: #ea580c; color: #c2410c; background: #fff7ed; }

/* ===== STATE GRID ===== */
.pin-state-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
    max-height: 340px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #fed7aa #fff;
}
.pin-state-grid::-webkit-scrollbar { width: 4px; }
.pin-state-grid::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 3px; }

.state-btn {
    background: #fff7ed; border: 2px solid #fed7aa; border-radius: 9px;
    padding: 8px 10px; font-size: 12px; font-weight: 700; color: #c2410c;
    cursor: pointer; transition: all 0.2s; text-align: left;
    display: flex; align-items: center; gap: 5px;
}
.state-btn:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: #fff; border-color: #c2410c; transform: translateY(-1px);
}
.state-btn .state-icon { font-size: 14px; flex-shrink: 0; }

/* District List */
.pin-district-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;
    max-height: 320px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #fed7aa #fff;
}
.district-btn {
    background: #fff7ed; border: 2px solid #fed7aa; border-radius: 8px;
    padding: 7px 10px; font-size: 12px; font-weight: 700; color: #c2410c;
    cursor: pointer; transition: all 0.2s; text-align: left;
}
.district-btn:hover {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    color: #fff; border-color: #c2410c;
}

/* Breadcrumb */
.pin-breadcrumb {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 10px;
    padding: 8px 12px; font-size: 13px; font-weight: 700; color: #c2410c;
    margin-bottom: 8px;
}

/* ===== PLACEHOLDER ===== */
.pin-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; min-height: 320px; text-align: center; gap: 10px;
}
.pip-icon  { font-size: 54px; }
.pip-title { font-size: 16px; font-weight: 800; color: #374151; }
.pip-sub   { font-size: 13px; color: #9ca3af; margin-bottom: 8px; }
.pip-tips  { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 320px; }
.pip-tip   { background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 9px; padding: 7px 12px; font-size: 12px; color: #c2410c; text-align: left; }

/* Loading */
.pin-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 160px; gap: 14px; }
.pin-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid #fed7aa; border-top-color: #ea580c; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pin-loading-text { font-size: 14px; color: #6b7280; font-weight: 600; }

/* ===== RESULTS HEADER ===== */
.pin-results-header {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #fed7aa;
}
.pin-results-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pin-results-count { font-size: 14px; font-weight: 800; color: #c2410c; }
.pin-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.pin-stat-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
}

.pin-results-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pin-filter-input {
    flex: 1; min-width: 140px; border: 2px solid #e5e7eb; border-radius: 8px;
    padding: 6px 10px; font-size: 13px; outline: none; font-family: inherit; color: #1f2937;
    transition: border-color 0.2s;
}
.pin-filter-input:focus { border-color: #ea580c; }
.pin-download-group { display: flex; gap: 4px; }
.pin-dl-btn {
    background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 7px;
    padding: 5px 9px; font-size: 11px; font-weight: 700; color: #c2410c;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.pin-dl-btn:hover { background: #ea580c; color: #fff; border-color: #ea580c; }
.pin-dl-btn.copy-btn { background: linear-gradient(135deg,#ea580c,#c2410c); color: #fff; border-color: #c2410c; }

/* Table */
.pin-table-wrap {
    overflow-x: auto; overflow-y: auto; max-height: 460px;
    scrollbar-width: thin; scrollbar-color: #fed7aa #fff;
}
.pin-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
.pin-table-wrap::-webkit-scrollbar-thumb { background: #fed7aa; border-radius: 3px; }

.pin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pin-table th {
    background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff;
    padding: 9px 12px; text-align: left; font-size: 11px; font-weight: 800;
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.pin-table td { padding: 8px 12px; border-bottom: 1px solid #fff7ed; color: #374151; vertical-align: middle; }
.pin-table tr:hover td { background: #fff7ed; }
.pin-table tr:nth-child(even) td { background: #fffbf5; }
.pin-table tr:nth-child(even):hover td { background: #fff7ed; }

.pin-code-cell { font-weight: 900; font-family: 'Courier New', monospace; font-size: 14px; color: #c2410c; }
.pin-type-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px;
    white-space: nowrap;
}
.type-ho { background: #dcfce7; color: #166534; }
.type-so { background: #dbeafe; color: #1e40af; }
.type-bo { background: #fef3c7; color: #92400e; }
.type-other { background: #f3f4f6; color: #374151; }

.map-link {
    color: #ea580c; font-size: 12px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.map-link:hover { text-decoration: underline; }

.copy-pin-btn {
    background: none; border: 1px solid #fed7aa; border-radius: 5px;
    padding: 2px 7px; font-size: 10px; font-weight: 700; color: #c2410c;
    cursor: pointer; transition: all 0.2s;
}
.copy-pin-btn:hover { background: #ea580c; color: #fff; border-color: #ea580c; }

/* ===== SINGLE PINCODE DETAIL ===== */
.pin-detail-card {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 2px solid #fed7aa; border-radius: 16px; padding: 18px;
}
.pin-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid #fed7aa; }
.pin-detail-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg,#ea580c,#c2410c); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.pin-detail-pin  { font-size: 26px; font-weight: 900; color: #c2410c; font-family: 'Courier New', monospace; margin-bottom: 2px; }
.pin-detail-area { font-size: 14px; color: #ea580c; font-weight: 600; }

.pin-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.pin-detail-item { background: #fff; border-radius: 9px; padding: 9px 11px; border: 1px solid #fed7aa; }
.pin-detail-label { font-size: 10px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.pin-detail-value { font-size: 13px; font-weight: 600; color: #1f2937; line-height: 1.4; }
.pin-detail-full  { grid-column: 1 / -1; }

.pin-detail-share { display: flex; gap: 8px; }
.pin-detail-copy-btn, .pin-detail-wa-btn {
    flex: 1; padding: 9px; border-radius: 9px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; border: 2px solid; text-align: center;
}
.pin-detail-copy-btn { background: #fff; border-color: #fed7aa; color: #c2410c; }
.pin-detail-copy-btn:hover { background: #fff7ed; border-color: #ea580c; }
.pin-detail-wa-btn   { background: #25d366; border-color: #25d366; color: #fff; }
.pin-detail-wa-btn:hover { background: #22c55e; }

/* Multi-office accordion */
.pin-offices-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.pin-office-row {
    background: #fff; border: 2px solid #fed7aa; border-radius: 10px;
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
    transition: all 0.2s;
}
.pin-office-row:hover { border-color: #ea580c; background: #fff7ed; }
.por-name    { flex: 1; font-size: 13px; font-weight: 700; color: #1f2937; }
.por-type    { font-size: 11px; }
.por-map     { font-size: 11px; }

/* Bulk results */
.bulk-result-row td.found-yes { color: #166534; font-weight: 700; }
.bulk-result-row td.found-no  { color: #dc2626; font-weight: 700; }

/* Error */
.pin-error { display: flex; align-items: flex-start; gap: 8px; padding: 16px; background: #fff5f5; border-radius: 12px; color: #dc2626; font-size: 14px; min-height: 60px; }

/* Info Box */
.info-box { background: linear-gradient(135deg,#fff7ed,#ffedd5); border-radius: 16px; padding: 24px; margin-bottom: 24px; border: 2px solid rgba(234,88,12,0.2); }
.info-box h4 { color: #9a3412; font-size: 20px; margin-bottom: 14px; }
.info-grid   { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; }
.info-item   { background: #fff; border-radius: 11px; padding: 13px; font-size: 13px; color: #374151; line-height: 1.6; border: 2px solid rgba(234,88,12,0.12); }
.info-item strong { display: block; color: #ea580c; font-size: 13px; font-weight: 700; margin-bottom: 3px; }

/* SEO */
.seo-content { padding: 70px 20px; background: #fff; }
.content-article { max-width: 900px; margin: 0 auto; line-height: 1.8; }
.content-article h2 { font-size: 26px; font-weight: 800; margin-top: 32px; margin-bottom: 14px; color: #333; }
.content-article h2:first-child { margin-top: 0; }
.content-article h3 { font-size: 19px; font-weight: 700; margin-top: 22px; margin-bottom: 10px; color: #444; }
.content-article p  { margin-bottom: 14px; color: #666; font-size: 16px; }
.content-article strong { color: #333; font-weight: 700; }

/* Responsive */
@media (max-width: 960px) { .pin-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .pin-input-card, .pin-output-card { padding: 14px; }
    .pin-tabs .pin-tab { padding: 9px 11px; font-size: 12px; }
    .pin-state-grid, .pin-district-list { grid-template-columns: repeat(2,1fr); }
    .pin-detail-grid { grid-template-columns: 1fr; }
    .pin-results-actions { flex-direction: column; }
    .pin-filter-input { width: 100%; }
    .pin-download-group { justify-content: center; }
}