/*
 * OWNED styles for the city pages - v3, measured from the production page
 * (computed styles), not guessed. np-city-* is all ours.
 * Measured: h2 #172a6e 30px/600; body text #616161 16px; aside 281px with
 * #dcdcdc widget boxes; buttons/banner #ed3237; process band #284064.
 */

.np-city, .np-city * { box-sizing: border-box; }
.np-city-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Hero */
.np-city-hero { background-size: cover; background-position: center top; }
.np-city-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; padding: 0 12px; max-width: 1200px; margin: 0 auto; min-height: 486px; position: relative; }
.np-city-title { flex: 0 1 576px; margin: 0; }
.np-city-title span { display: inline-block; background: rgba(0,0,0,.34); color: #fff; padding: 22px; font-size: 38px; line-height: 45px; font-weight: 600; }
/* Card: production anchors it 40px from the hero top (not vertically centered) */
.np-city-order { flex: 0 0 376px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.18); align-self: flex-start; margin-top: 40px; }
/* Center the submit button inside the card, like production. The button is
   <button class="calc-send">; block + auto margins centers it regardless of
   the wrapping <p> alignment (without affecting the input fields). */
.np-city-order .calc-send,
.np-city-order button[type="submit"],
.np-city-order input[type="submit"] { display: block; margin-left: auto; margin-right: auto; }

/* Layout: production geometry exactly - sidebar 276px flush-left, main 924px,
   no gap, no wrap padding; text spacing lives inside the columns. */
.np-city-wrap.np-city-layout { padding-left: 0; padding-right: 0; }
.np-city-layout { display: flex; gap: 0; padding-top: 0; padding-bottom: 40px; align-items: flex-start; }
.np-city-main { padding-top: 30px; }
.np-city-aside { flex: 0 0 276px; order: 0; padding: 0 26px 0 10px; box-sizing: border-box; }
.np-city-main { flex: 1 1 auto; min-width: 0; order: 1; padding-left: 50px; }
@media (max-width: 900px) {
    .np-city-layout { flex-direction: column; }
    .np-city-aside { flex-basis: auto; width: 100%; order: 2; }
}

.np-city h2 { color: #172a6e; font-size: 30px; line-height: 36px; font-weight: 600; margin: 0 0 22px; }
.np-city h3 { color: #172a6e; font-size: 18px; font-weight: 600; margin: 0 0 14px; }

/* Red underline under section headings + aside headings (production :after) */
.np-city-contact-info h2:after,
.np-city-offices > h2:after,
.np-city-services h2:after,
.np-city-quarters h2:after,
.np-aside-box h3:after {
    content: ''; display: block; height: 3px; margin-top: 10px;
    max-width: 80px; background: #ed3237;
}
.np-aside-box h3:after { max-width: 72px; }
.np-city-main section { margin-bottom: 45px; }
.np-city-main, .np-city-main p, .np-city-main li { color: #616161; font-size: 16px; }

/* Red button / banner (production #ed3237) */
.np-btn-red { display: block; background: #ed3237; color: #fff !important; text-align: center; font-weight: 600; padding: 13px 18px; }
.np-btn-red:hover { background: #c8102e; color: #fff; }
.np-city-review { margin: 0 0 35px; font-size: 16px; }
/* Production CTA: 19.2px/500, 18px vertical padding -> 63px tall, sits BELOW
   the cities box (box brings its own 30px margin) */
.np-aside-cta { margin: 0; font-size: 19.2px; font-weight: 500; line-height: 23px; padding: 20px 15px; }

/* Contact + map: two equal halves like production (H2 lives in the left half) */
.np-city-contact-cols { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.np-city-contact-info { flex: 1 1 0; min-width: 260px; }
.np-city-map-col { flex: 1 1 0; min-width: 300px; }
.np-city-contact-info h2 { margin-bottom: 20px; }
#np-city-map { width: 100%; height: 300px; background: #e8e8e8; }
.np-city-map-links { display: flex; justify-content: space-between; margin-top: 14px; }
.np-city-map-links a { color: #2084a2; font-weight: 400; display: inline-flex; align-items: center; gap: 8px; }
.np-city-map-links img { width: 26px; height: auto; }
/* Office photo: sits under the map links, same width as the map above it.
   No crop - the file is already exported at the ratio it should display at. */
.np-city-office-photo { margin: 14px 0 0; }
.np-city-office-photo img { display: block; width: 100%; height: auto; }

/* With a photo the map column runs far taller than the contact text beside it,
   leaving a big gap under that text. Keep the contact info in its own left
   column exactly as before, but float the map column so the city description
   that follows wraps up alongside it instead of starting below everything.
   Scoped to .has-office-photo - every other city keeps the plain flex row. */
.np-city-contact.has-office-photo .np-city-contact-cols { display: block; }
.np-city-contact.has-office-photo .np-city-map-col {
    float: right; width: 50%; margin: 0 0 20px 30px;
}
/* The contact text keeps its own column beside the map. It must be floated
   too: it precedes the map in source order, so a plain block would sit ABOVE
   the float at full width instead of next to it. Widths total 100% (50% + 50%)
   with the map's 30px left margin providing the gutter. */
.np-city-contact.has-office-photo .np-city-contact-info {
    float: left; width: calc(50% - 30px); min-width: 0;
}
/* Let the description wrap around the float rather than clearing it. */
.np-city-contact.has-office-photo + .np-city-desc { overflow: visible; }
/* Narrow screens: drop the float so the map and photo stack full width. */
@media (max-width: 700px) {
    .np-city-contact.has-office-photo .np-city-contact-info,
    .np-city-contact.has-office-photo .np-city-map-col {
        float: none; width: 100%;
    }
    .np-city-contact.has-office-photo .np-city-map-col { margin: 20px 0 0; }
}
.np-city-reveals { list-style: none; margin: 0 0 18px; padding: 0; }
.np-city-reveals li { padding: 6px 0 6px 18px; position: relative; }
.np-city-reveals li:before { content: '\203A'; position: absolute; left: 0; color: #ed3237; font-weight: 700; }
.np-city-reveals a { color: #2084a2; }

/* Description */
.np-city-desc p { margin: 0 0 16px; line-height: 24px; }

/* Office photos (Plovdiv): two half-width lightbox frames side by side.
   !important because the theme's #Content img { max-width:100% } outranks
   any class selector. */
.np-city-photos { display: flex; gap: 20px; flex-wrap: wrap; }
.np-city-photos .image_frame { flex: 1 1 300px; max-width: calc(50% - 10px); }
.np-city-photos img { width: 100% !important; height: auto; display: block; }
@media (max-width: 700px) { .np-city-photos .image_frame { max-width: 100%; } }

/* Services - arrow-marked list; "Писмени преводи на:" has a nested sub-list */
.np-city-services-list { list-style: none; margin: 0; padding: 0; }
.np-city-services-list > li { padding: 6px 0 6px 20px; position: relative; line-height: 24px; }
.np-city-services-list > li:before { content: '\203A'; position: absolute; left: 2px; top: 5px; color: #616161; font-weight: 700; }
.np-city-services-list ul { list-style: none; margin: 8px 0 4px; padding: 0; }
.np-city-services-list ul li { padding: 5px 0 5px 20px; position: relative; line-height: 24px; }
.np-city-services-list ul li:before { content: '\203A'; position: absolute; left: 2px; top: 4px; color: #616161; font-weight: 700; }

/* Useful: full-bleed NAVY band (like production), white text, news | languages.
   Production: two equal 588px halves 12px apart, columns start 6px inside the
   wrap; 36px white H2 with a 50px red underline, content 51px below */
.np-city-useful-band { background: #284064; padding: 40px 0 10px; }
.np-city-useful { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 6px 40px; align-items: flex-start; }
.np-city-useful-col { flex: 1 1 0; min-width: 300px; }
.np-city-useful-col h2 { color: #fff; font-size: 36px; margin: 0 0 51px; }
.np-city-useful-col h2:after { content: ''; display: block; height: 3px; margin-top: 15px; max-width: 50px; background: #ed3237; }

/* Owned news list. Production: 176x99 photo, 12px gap; 16px/600 title (7px
   below), date row 16px at .6 white behind a faint top rule, excerpt at .8 */
.np-news-list { list-style: none; margin: 0; padding: 0; }
.np-news-item { display: flex; gap: 12px; margin-bottom: 40px; }
.np-news-photo { flex: 0 0 176px; width: 176px; height: 99px; overflow: hidden; display: block; }
.np-city .np-news-photo img { width: 176px !important; height: 99px !important; max-height: 99px !important; object-fit: cover; display: block; }
.np-news-body { flex: 1 1 auto; min-width: 0; }
.np-news-body h4 { margin: 0 0 7px; font-size: 16px; font-weight: 600; line-height: 19px; }
.np-news-body h4 a { color: #fff; }
.np-news-body h4 a:hover { color: #ed3237; }
.np-news-date { color: rgba(255,255,255,.6); font-size: 16px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 5px; }
.np-news-body p { margin: 10px 0 5px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.8); }

/* Languages grid - production: 3 columns, 60px flags, 40px between rows,
   16px white captions; red "all languages" button 40px below, centered */
.np-city-langs-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 8px; text-align: center; }
.np-city-langs-grid img { width: 60px; height: 59px; object-fit: contain; }
.np-city-langs-grid span { display: block; margin-top: 8px; color: #fff; font-size: 16px; font-weight: 400; }
.np-langs-more { text-align: center; margin-top: 40px; }
.np-langs-more a { display: inline-block; background: #ed3237; color: #fff; font-size: 17.6px; line-height: 20px; padding: 15px 20px 15px 30px; }
.np-langs-more a:hover { background: #c8102e; }
.np-langs-more i { margin-left: 10px; }

/* Sofia office tabs (production: 130x88 #777 buttons, hidden panels toggled
   per click; panel = info half + 406px map half, 68px apart; two 199x149
   office photos under the address; gray 18px office h3) */
.np-office-btns { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 33px; }
.np-office-btn { flex: 1 1 110px; max-width: 148px; background: #777; color: #fff !important; text-align: center; padding: 20px 0; font-size: 16px; line-height: 24px; }
.np-office-btn:hover { background: #ed3237; color: #fff; }
/* production: 40px section margin + 30px padding above the office h3 */
.np-office { padding-top: 70px; }
.np-office[hidden] { display: none; }
.np-office .np-city-reveals li { padding-left: 30px; }
/* 62px gutter -> two 406px halves (fits the 199+8+199 photo pair exactly) */
.np-office-cols { display: flex; gap: 62px; flex-wrap: wrap; align-items: flex-start; }
.np-office-info { flex: 1 1 0; min-width: 260px; }
.np-office-info h3 { color: #616161; font-size: 18px; font-weight: 600; margin: 0 0 15px; }
.np-office-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.np-office-photos .image_frame { width: 199px; }
.np-city .np-office-photos img { width: 199px !important; height: 149px !important; object-fit: cover; }

/* Hover magnifier on the lightbox photos (theme hides .image_links; user
   asked for a visible icon): dark veil + red round icon-search badge */
.np-office-photos .image_wrapper, .np-city-photos .image_wrapper { position: relative; }
.np-office-photos .image_links, .np-city-photos .image_links { display: block !important; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s ease; pointer-events: none; }
/* veil stays click-transparent so any click lands on the photo's own
   prettyphoto link; only the badge itself takes pointer events */
.np-office-photos .image_frame:hover .image_links, .np-city-photos .image_frame:hover .image_links { opacity: 1; }
.np-office-photos .image_links a.zoom, .np-city-photos .image_links a.zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: #ed3237; border-radius: 50%; color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.np-office-photos .image_links a.zoom:hover, .np-city-photos .image_links a.zoom:hover { background: #c8102e; color: #fff; }
.np-office-map { width: 100%; height: 300px; background: #e8e8e8; }

/* Typed content blocks (Sofia intro/tail): bold titles + arrow lists.
   Production anatomy: ul margin 0 0 15px 30px, li no padding + 5px apart,
   inline FontAwesome \f054 chevron at 10px before the text */
.np-city-blocks p { margin: 0 0 15px; line-height: 24px; }
.np-block-title strong { font-weight: 600; }
.np-blocks-list { margin: 0 0 15px 30px !important; padding: 0; }
.np-blocks-list > li { padding: 0; margin: 0 0 5px; line-height: 24px; }
.np-blocks-list > li:before { content: '\f054'; font-family: FontAwesome; font-size: 10px; position: static; display: inline; margin-right: 10px; color: #616161; }

/* Mania Print promo card (Sofia). Production: shadow 0 0 20px .2, margins
   20px/40px, 40x45 padding; 532px 20px/600 text + 250px logo fill the 782px
   content width side by side with no gap */
.np-mania-promo { box-shadow: 0 0 20px rgba(0,0,0,.2); padding: 40px 45px; margin: 20px 0 40px; text-align: center; }
.np-mania-promo span { color: #ed3237; font-weight: 600; font-size: 20px; line-height: 24px; display: inline-block; max-width: 532px; vertical-align: middle; }
.np-city .np-mania-promo img { width: 250px !important; height: auto; vertical-align: middle; display: inline-block; }
.np-mania-wrap .np-city-partner { margin: 64px 0 0; }

/* Service pages: per-page semantic content, production typography
   (h2 30/600 navy + 80px underline, 30/15 margins; 16/24 text; FontAwesome
   arrow lists; teal links) */
.np-sp-content h2 { margin: 30px 0 15px; }
.np-sp-content h2:after { content: ''; display: block; height: 3px; margin-top: 10px; max-width: 80px; background: #ed3237; }
.np-sp-content p { margin: 0 0 15px; line-height: 24px; }
.np-sp-content ul, .np-sp-content ol { margin: 0 0 15px 30px; padding: 0; list-style: none; }
.np-sp-content li { margin: 0 0 5px; line-height: 24px; }
.np-sp-content li:before { content: '\f054'; font-family: FontAwesome; font-size: 10px; display: inline; margin-right: 10px; color: #616161; }
.np-sp-content a { color: #2084a2; }

/* leg-page-par: production keeps these as unstyled text blocks */
.np-sp-content .leg-page-par { line-height: 24px; }

/* Three-column document lists (лицензиран превод) */
.np-sp-cols3 { display: flex; gap: 24px; flex-wrap: wrap; }
.np-sp-col3 { flex: 1 1 240px; min-width: 220px; }
.np-sp-col3 ul { margin: 0 0 15px 30px; padding: 0; list-style: none; }
.np-sp-col3 li { margin: 0 0 5px; line-height: 24px; }
.np-sp-col3 li:before { content: '\f054'; font-family: FontAwesome; font-size: 10px; margin-right: 10px; color: #616161; }

/* FAQ band heading: production 36px navy, centered */
.np-faq-band h2 { font-size: 36px; color: #172a6e; margin: 0 0 20px; }

/* Icon-box grids (заверка в посолства embassies, специализирани текстове):
   three per row; theme .icon_box styles handle the internals */
.np-icon-grid { display: flex; flex-wrap: wrap; gap: 20px 24px; }
.np-icon-cell { flex: 0 1 calc(33.333% - 16px); min-width: 240px; }

/* Order-process steps (информация за процеса): h2 + 140px icon + text */
.np-sp-step { margin-bottom: 35px; }
.np-sp-step-body { display: flex; gap: 25px; align-items: flex-start; }
.np-city .np-sp-step-body > img { flex: 0 0 140px; width: 140px !important; height: auto; }
.np-sp-step-desc { flex: 1 1 auto; min-width: 0; }
.np-sp-step-desc p { margin: 0 0 15px; line-height: 24px; }

/* Езици index: five language-group columns (theme .lang-li/.flag-* sprites
   style the items) */
.np-lang-groups { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 25px; }
.np-lang-group { flex: 1 1 150px; min-width: 140px; }
.np-lang-group h3 { margin-bottom: 12px; }
.np-lang-group ul { list-style: none; margin: 0; padding: 0; }

/* Aside boxes (production: #dcdcdc box 240px at x130, 20px padding) */
/* Sidebar: 30px gap above the first box (production spacing off the hero) */
.np-city-aside > :first-child { margin-top: 30px; }
.np-aside-box { background: #dcdcdc; padding: 20px; margin-bottom: 30px; }
.np-aside-box h3 { font-size: 18px; font-weight: 600; line-height: 22px; margin-bottom: 15px; }
/* Production list anatomy: gray square markers (list-style square), links as
   41px blocks, and a short 70px separator line hanging at each item's bottom */
.np-aside-box ul { list-style: square; margin: 5px 0 0; padding: 0 10px 0 30px; }
.np-aside-box li { color: #787878; position: relative; }
.np-aside-box li::marker { color: #787878; }
.np-aside-box li:after { content: ''; position: absolute; left: -30px; bottom: 0; width: 70px; border-top: 1px solid #c5c5c5; }
.np-aside-box a { color: #787878; display: block; padding: 8px 0 9px 3px; }
.np-aside-box a:hover { color: #ed3237; }

/* Process - navy band, 4 numbered steps with caption under each.
   Production: 150px circle (border rgba(255,255,255,.51)), 80px icon, 35px
   pure-red number badge inset 6px, 276px step columns, caption at .9 white */
.np-city-process { background: #284064; padding: 40px 0 50px; }
/* 12px side padding so 4x276 steps + 3x24 gaps (1176px) fit like production */
.np-city-process .np-city-wrap { padding: 0 12px; }
.np-city-process h2 { color: #fff; text-align: center; margin-bottom: 35px; font-size: 36px; }
.np-city-steps { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.np-step { flex: 1 1 276px; max-width: 276px; text-align: center; color: rgba(255,255,255,.9); }
.np-step-icon { position: relative; width: 150px; height: 150px; margin: 0 auto 15px; border: 2px solid rgba(255,255,255,.51); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.np-step-icon img { width: 80px; height: auto; filter: brightness(0) invert(1); }
.np-step-num { position: absolute; right: 6px; bottom: 6px; width: 35px; height: 35px; background: #ff0000; color: #fff; border-radius: 50%; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.np-step p { font-size: 16px; line-height: 24px; margin: 0; }

/* Award banner - red band, trophy images flank the text (production: two
   225x300 images, 576px text column, 50px band padding) */
.np-city-award { background: #e85d5d; padding: 50px 0; }
.np-city-award-inner { display: flex; align-items: flex-start; justify-content: center; gap: 49px; flex-wrap: wrap; }
.np-award-img { flex: 0 0 225px; width: 225px; height: auto; }
.np-city-award p { flex: 0 1 576px; color: #fff; margin: 0; line-height: 24px; font-size: 16px; }