/* TNC Wedding Suite -- public homepage (luxury editorial design).
   Self-contained: defines its own --tnc-* tokens scoped to
   .tnc-premium-home, so it doesn't depend on tnc-base.css. */

/* =========================================================
   TOP NOTCH CELEBRATIONS
   LUXURY EDITORIAL HOMEPAGE
   LAHORE EVENTS & WEDDING MARKETPLACE
   ========================================================= */

.tnc-premium-home {

    --tnc-oxblood: #3A1A17;
    --tnc-oxblood-dark: #1F0E0C;
    --tnc-oxblood-soft: #5C2B24;

    --tnc-gold: #C6A15B;
    --tnc-gold-light: #E5CF9A;

    --tnc-ivory: #FBF8F1;
    --tnc-cream: #F3EBDD;
    --tnc-rose: #E9D8D4;

    --tnc-text: #383334;
    --tnc-muted: #756D6D;
    --tnc-white: #FFFFFF;

    font-family: Arial, Helvetica, sans-serif;
    color: var(--tnc-text);

    overflow: hidden;
}

.tnc-premium-home *,
.tnc-premium-home *:before,
.tnc-premium-home *:after {
    box-sizing: border-box;
}


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.tnc-ph-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 25px;
    padding-right: 25px;
}


/* =========================================================
   HERO
   ========================================================= */

.tnc-ph-hero {

    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    /* Light, elegant cream -- not a dark brand-color panel. Dark is kept
       to text/accents only (headings, buttons), matching the Log In /
       Become a Member card design. */
    background: var(--tnc-ivory);

    overflow: hidden;
}


/* Elegant decorative circle -- gold on the cream background */

.tnc-ph-hero:before {

    content: "";

    position: absolute;

    width: 570px;
    height: 570px;

    right: -235px;
    top: -210px;

    border: 1px solid rgba(198,161,91,.30);

    border-radius: 50%;
}


.tnc-ph-hero:after {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -105px;
    top: -105px;

    border: 1px solid rgba(198,161,91,.18);

    border-radius: 50%;
}


/* Small editorial gold line */

.tnc-ph-hero-inner:after {

    content: "";

    position: absolute;

    width: 1px;
    height: 115px;

    right: 8%;

    bottom: 0;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(198,161,91,.60)
    );
}


.tnc-ph-hero-inner {

    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 105px 25px;
}


.tnc-ph-hero-content {

    /* Widened from 780px so the search card below (which fills this
       column almost edge to edge) has real room to stretch out
       instead of looking cramped next to the hero copy. The
       headline/description keep their own narrower max-widths below,
       so this only gives the search card more space, not the text. */
    max-width: 1000px;
}


/* HERO KICKER */

.tnc-ph-kicker {

    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 25px;

    color: var(--tnc-gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3.5px;

    text-transform: uppercase;
}


.tnc-ph-kicker:before {

    content: "";

    width: 43px;
    height: 1px;

    background: var(--tnc-gold);
}


/* HERO HEADING */

.tnc-ph-hero h1 {

    margin: 0 0 25px;

    color: var(--tnc-oxblood);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 68px;
    line-height: 1.06;

    font-weight: 400;

    letter-spacing: -1.5px;
}


.tnc-ph-hero h1 span {

    color: var(--tnc-gold);
}


/* HERO DESCRIPTION */

.tnc-ph-hero-description {

    max-width: 690px;

    margin: 0 0 38px;

    color: var(--tnc-text);

    font-size: 17px;

    line-height: 1.85;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.tnc-ph-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.tnc-ph-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 0 31px;

    border: 1px solid var(--tnc-gold);

    border-radius: 0;

    background: linear-gradient(180deg, var(--tnc-gold-light), var(--tnc-gold));

    color: var(--tnc-oxblood-dark) !important;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .2px;

    text-decoration: none !important;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.tnc-ph-btn:hover {

    background: var(--tnc-gold-light);

    border-color: var(--tnc-gold-light);

    color: var(--tnc-oxblood-dark) !important;

    transform: translateY(-2px);
}


.tnc-ph-btn-light {

    background: transparent;

    color: var(--tnc-white) !important;

    border-color: rgba(255,255,255,.55);
}


.tnc-ph-btn-light:hover {

    background: var(--tnc-white);

    border-color: var(--tnc-white);

    color: var(--tnc-oxblood-dark) !important;
}


/* =========================================================
   HERO SEARCH CARD -- "Service & City" / "Search By Name"
   ========================================================= */

.tnc-ph-search {

    max-width: 840px;

    margin-top: 34px;

    background: var(--tnc-white);

    border: 1px solid rgba(198,161,91,.22);

    border-radius: 0;

    box-shadow: 0 24px 60px rgba(58,26,23,.14), 0 1px 0 rgba(255,255,255,.6) inset;

    /* Selects need to be able to open a native dropdown outside this
       card's own box -- overflow:hidden here was clipping the field
       text and hiding/truncating the dropdown itself. The border-radius
       above still rounds every corner without clipping anything. */
    overflow: visible;
}


#tnc-ph-search .tnc-ph-search-tabs {

    display: flex;

    gap: 30px;

    padding: 20px 28px 0;
}


#tnc-ph-search .tnc-ph-search-tab {

    background: none;

    border: 0;

    padding: 0 0 16px;

    font-family: inherit;

    font-size: 13.5px;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;

    color: var(--tnc-muted);

    cursor: pointer;

    border-bottom: 2px solid transparent;

    transition: color .15s ease, border-color .15s ease;
}


#tnc-ph-search .tnc-ph-search-tab:hover {

    color: var(--tnc-oxblood);
}


#tnc-ph-search .tnc-ph-search-tab.active {

    color: var(--tnc-oxblood-dark);

    border-bottom-color: var(--tnc-gold);
}


/* ONE continuous bar -- a single outer border around the whole row,
   thin dividers between fields instead of each field having its own
   box, and the button flush against the right end with no gap. No
   per-field labels, no icon on the button -- a single clean strip
   instead of several separate controls lined up next to each other. */
#tnc-ph-search .tnc-ph-search-row {

    display: flex !important;

    align-items: stretch !important;

    margin: 24px 24px 26px !important;

    padding: 0 !important;

    border: 1px solid #E3D9C4;

    transition: border-color .15s ease;
}


#tnc-ph-search .tnc-ph-search-row:focus-within {

    border-color: var(--tnc-gold);
}


/* Needs !important now that the base .tnc-ph-search-row rule above
   also carries display:flex !important (added to force this row to
   win against theme overrides) -- without !important here too, that
   base rule would beat this one on importance alone regardless of
   this selector's higher specificity, and the inactive tab's form
   would show through stacked under the active one. */
#tnc-ph-search .tnc-ph-search-row[hidden] {

    display: none !important;
}


#tnc-ph-search .tnc-ph-search-field {

    flex: 1;

    align-self: stretch !important;

    min-width: 0;

    display: flex !important;

    align-items: center !important;

    position: relative;

    margin: 0 !important;

    padding: 0 !important;

    background: var(--tnc-white);
}


/* Thin divider between adjacent fields -- replaces each field having
   its own separate border, so the whole row reads as one bar instead
   of several boxes pushed together. */
#tnc-ph-search .tnc-ph-search-field + .tnc-ph-search-field {

    border-left: 1px solid #E3D9C4;
}


#tnc-ph-search .tnc-ph-search-field-wide {

    flex: 1;
}


#tnc-ph-search .tnc-ph-search-field select,
#tnc-ph-search .tnc-ph-search-field input[type="text"] {

    width: 100% !important;

    /* A <select> clips its own text hard against whatever box height it
       ends up with -- if the theme's base stylesheet forces a shorter
       height than our padding+line-height need (very common), the top
       or bottom of every letter gets sliced off instead of just
       overflowing like a normal block would. Explicit height with a
       matching line-height (the classic robust fix for vertically
       centring text in a native select) plus !important on both makes
       this immune to whatever height/line-height the theme sets
       elsewhere, instead of relying on padding to do the centring. */
    height: 40px !important;

    min-height: 40px !important;

    line-height: 40px !important;

    box-sizing: border-box !important;

    border: 0 !important;

    /* macOS Safari/Chrome keep a faint inset shadow on a <select>
       even with appearance:none unless the background is explicitly
       opaque and the shadow/outline are also reset -- with
       background:transparent that shadow was showing through as a
       thin extra line under the text, making the field look like it
       had its own border separate from the row's outer border. */
    background-color: var(--tnc-white) !important;

    box-shadow: none !important;

    outline: none !important;

    padding: 0 36px 0 20px !important;

    font-family: inherit;

    font-size: 14.5px;

    letter-spacing: .01em;

    color: var(--tnc-text);

    /* Native select chrome varies wildly across browsers/OSes and was
       the other half of the clipped look -- appearance:none plus our
       own chevron (below) makes it render identically everywhere. */
    appearance: none !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    cursor: pointer;
}


#tnc-ph-search .tnc-ph-search-field input[type="text"] {

    cursor: text;

    line-height: normal !important;
}


#tnc-ph-search .tnc-ph-search-field select {

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1L5.5 5.5L10 1' stroke='%23A6803A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 18px center;

    /* Without an explicit size, some themes' own select/background
       resets stretch this chevron well past its native 11x7 -- pin it
       down so it stays a small, understated mark instead of a bold
       oversized arrow. */
    background-size: 11px 7px !important;
}


#tnc-ph-search .tnc-ph-search-field select:focus,
#tnc-ph-search .tnc-ph-search-field input[type="text"]:focus {

    outline: none;
}


#tnc-ph-search .tnc-ph-search-field select option {

    color: var(--tnc-text);

    background: var(--tnc-white);
}


/* Defensive override for Select2/Chosen -- Flatsome (and several
   WooCommerce setups) auto-enhance every <select> on the page into a
   styled JS widget with its own markup (.select2-container,
   .select2-selection, etc.), which our plain `select` rules above
   never touch since that markup sits *next to* the real <select>,
   which gets hidden. If that's what's inflating this field past our
   intended height, these rules force the enhanced widget back down to
   match. Harmless no-op if no such plugin is active here. */
#tnc-ph-search .tnc-ph-search-field .select2-container,
#tnc-ph-search .tnc-ph-search-field .select2-selection--single,
#tnc-ph-search .tnc-ph-search-field .chosen-container,
#tnc-ph-search .tnc-ph-search-field .chosen-container-single .chosen-single {

    width: 100% !important;

    height: 40px !important;

    min-height: 40px !important;

    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}

#tnc-ph-search .tnc-ph-search-field .select2-selection__rendered,
#tnc-ph-search .tnc-ph-search-field .chosen-single span {

    line-height: 40px !important;

    padding: 0 36px 0 20px !important;

    font-size: 14.5px !important;

    color: var(--tnc-text) !important;
}

#tnc-ph-search .tnc-ph-search-field .select2-selection__arrow,
#tnc-ph-search .tnc-ph-search-field .chosen-single div {

    height: 40px !important;

    top: 0 !important;

    right: 10px !important;
}


#tnc-ph-search .tnc-ph-search-divider {

    display: none;
}


#tnc-ph-search .tnc-ph-search-btn {

    flex-shrink: 0;

    /* Deliberately NO explicit height here (see below) -- align-self
       only stretches an item that doesn't already have a definite
       cross-size, so setting height:50px here, as a previous version
       did, actively *blocked* this from matching the row. Leaving
       height unset and letting stretch do the work means the button
       always matches whatever the row's real height ends up being,
       even if that's not exactly 50px in some browser. */
    align-self: stretch !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    vertical-align: top !important;

    line-height: normal !important;

    border: 0 !important;

    border-left: 1px solid rgba(31,14,12,.12) !important;

    border-radius: 0 !important;

    padding: 0 40px !important;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: var(--tnc-oxblood-dark);

    background: linear-gradient(180deg, var(--tnc-gold-light) 0%, var(--tnc-gold) 100%);

    cursor: pointer;

    transition: background .15s ease;

    white-space: nowrap;
}


#tnc-ph-search .tnc-ph-search-btn:hover {

    background: var(--tnc-gold);
}


/* =========================================================
   HERO NOTE
   ========================================================= */

.tnc-ph-hero-note {

    max-width: 710px;

    margin-top: 45px;

    padding-top: 22px;

    border-top: 1px solid rgba(58,26,23,.14);

    color: var(--tnc-muted);

    font-size: 13px;

    line-height: 1.7;
}


.tnc-ph-hero-note strong {

    color: var(--tnc-oxblood);
}


/* =========================================================
   SECTION HEADING SYSTEM
   ========================================================= */

.tnc-ph-heading {

    max-width: 760px;

    margin: 0 auto 58px;

    text-align: center;
}


.tnc-ph-heading-label {

    display: block;

    margin-bottom: 14px;

    color: var(--tnc-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3.2px;

    text-transform: uppercase;
}


.tnc-ph-heading h2 {

    margin: 0 0 17px;

    color: var(--tnc-oxblood-dark);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 45px;

    line-height: 1.16;

    font-weight: 400;

    letter-spacing: -.5px;
}


.tnc-ph-heading p {

    margin: 0;

    color: var(--tnc-muted);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   SECTION 2
   HOW IT WORKS -- single-path step strip (search / explore /
   contact / arrange). Replaces the old two-option "Plan With Us
   or Find Vendors" layout -- see the comment in homepage.php.
   ========================================================= */

.tnc-ph-how {

    position: relative;

    padding: 112px 0;

    background: var(--tnc-white);
}


.tnc-ph-how-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 20px;
}


.tnc-ph-how-step {

    position: relative;

    padding: 34px 24px 28px;

    background: var(--tnc-ivory);

    border: 1px solid rgba(198,161,91,.20);

    overflow: hidden;

    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}


.tnc-ph-how-step:hover {

    transform: translateY(-4px);

    border-color: rgba(198,161,91,.55);

    box-shadow: 0 18px 40px rgba(58,26,23,.08);
}


.tnc-ph-how-step:before {

    content: "";

    position: absolute;

    top: 0;
    left: 24px;

    width: 36px;
    height: 3px;

    background: var(--tnc-gold);
}


.tnc-ph-how-num {

    position: absolute;

    top: 14px;
    right: 18px;

    color: rgba(198,161,91,.28);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;

    line-height: 1;
}


.tnc-ph-how-icon {

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border: 1px solid rgba(198,161,91,.35);

    border-radius: 50%;

    background: var(--tnc-white);

    color: var(--tnc-oxblood);

    font-size: 18px;
}


.tnc-ph-how-step h3 {

    margin: 0 0 8px;

    color: var(--tnc-oxblood);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 19px;

    font-weight: 400;
}


.tnc-ph-how-step p {

    margin: 0;

    color: var(--tnc-muted);

    font-size: 12.5px;

    line-height: 1.65;
}


/* =========================================================
   LEGACY -- "TWO WAYS TO PLAN" styles, no longer used by any
   markup in homepage.php (kept rather than deleted, in case any
   other template still references .tnc-ph-way; harmless if so).
   ========================================================= */

.tnc-ph-two-ways {

    position: relative;

    padding: 112px 0;

    background: var(--tnc-ivory);
}


.tnc-ph-two-ways:before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 55px;

    background: var(--tnc-gold);

    opacity: .45;
}


.tnc-ph-way-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


/* WAY CARD */

.tnc-ph-way {

    position: relative;

    padding: 48px 45px 45px;

    background: var(--tnc-white);

    border: 1px solid rgba(198,161,91,.28);

    border-radius: 8px;

    box-shadow: 0 18px 45px rgba(31,14,12,.055);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.tnc-ph-way:hover {

    transform: translateY(-5px);

    border-color: rgba(198,161,91,.65);

    box-shadow: 0 25px 55px rgba(31,14,12,.10);
}


/* TOP GOLD DETAIL */

.tnc-ph-way:before {

    content: "";

    position: absolute;

    top: 0;
    left: 45px;

    width: 52px;
    height: 3px;

    background: var(--tnc-gold);
}


/* DARK CARD */

.tnc-ph-way.direct {

    background: var(--tnc-oxblood);

    border-color: var(--tnc-oxblood);
}


.tnc-ph-way.direct:before {

    background: var(--tnc-gold-light);
}


/* NUMBER */

.tnc-ph-way-number {

    position: absolute;

    top: 20px;
    right: 25px;

    color: rgba(198,161,91,.22);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 43px;

    line-height: 1;
}


/* ICON */

.tnc-ph-way-icon {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 27px;

    border-radius: 50%;

    background: var(--tnc-cream);

    color: var(--tnc-oxblood);

    font-family: Georgia, serif;

    font-size: 26px;
}


.tnc-ph-way.direct .tnc-ph-way-icon {

    background: rgba(255,255,255,.10);

    color: var(--tnc-gold-light);
}


/* LABEL */

.tnc-ph-way-label {

    margin-bottom: 9px;

    color: var(--tnc-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


.tnc-ph-way.direct .tnc-ph-way-label {

    color: var(--tnc-gold-light);
}


/* TITLE */

.tnc-ph-way h3 {

    margin: 0 0 16px;

    color: var(--tnc-oxblood-dark);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 31px;

    line-height: 1.2;

    font-weight: 400;
}


.tnc-ph-way.direct h3 {

    color: var(--tnc-white);
}


/* DESCRIPTION */

.tnc-ph-way p {

    margin: 0 0 27px;

    color: var(--tnc-muted);

    font-size: 14px;

    line-height: 1.85;
}


.tnc-ph-way.direct p {

    color: rgba(255,255,255,.76);
}


/* PROCESS */

.tnc-ph-process {

    margin: 0 0 31px;

    padding: 0;

    list-style: none;
}


.tnc-ph-process li {

    position: relative;

    margin-bottom: 12px;

    padding-left: 27px;

    color: var(--tnc-text);

    font-size: 13px;

    line-height: 1.6;
}


.tnc-ph-process li:last-child {

    margin-bottom: 0;
}


.tnc-ph-process li:before {

    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: var(--tnc-gold);

    font-weight: 700;
}


.tnc-ph-way.direct .tnc-ph-process li {

    color: rgba(255,255,255,.86);
}


/* =========================================================
   SECTION 3
   WEDDING MARKETPLACE
   ========================================================= */

.tnc-ph-wedding {

    padding: 115px 0;

    background: var(--tnc-white);
}


/* HEADER */

.tnc-ph-wedding-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 52px;
}


.tnc-ph-wedding-heading span {

    display: block;

    margin-bottom: 13px;

    color: var(--tnc-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3.2px;

    text-transform: uppercase;
}


.tnc-ph-wedding-heading h2 {

    max-width: 760px;

    margin: 0;

    color: var(--tnc-oxblood-dark);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 45px;

    line-height: 1.15;

    font-weight: 400;

    letter-spacing: -.5px;
}


.tnc-ph-see-all {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding-bottom: 5px;

    color: var(--tnc-oxblood);

    border-bottom: 1px solid rgba(198,161,91,.55);

    font-size: 13px;

    font-weight: 700;

    text-decoration: none !important;

    white-space: nowrap;

    transition: all .25s ease;
}


.tnc-ph-see-all:hover {

    color: var(--tnc-gold);

    border-color: var(--tnc-gold);
}


/* =========================================================
   WEDDING CATEGORY GRID
   ========================================================= */

.tnc-ph-vendor-grid {

    /* Flexbox instead of a fixed grid so a category count that doesn't
       divide evenly into the column count (11, 12, ...) still looks
       intentional: the last, partial row centers itself instead of a
       lone card sitting stranded in the far-left column. */
    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 16px;
}

.tnc-ph-vendor-grid .tnc-ph-vendor {

    /* 4 per row -- 12 seeded categories divide evenly into exactly
       3 full rows this way. */
    flex: 0 1 calc((100% - 3 * 16px) / 4);
}


/* CATEGORY CARD */

.tnc-ph-vendor {

    position: relative;

    min-height: 205px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    padding: 27px 22px 23px;

    background: var(--tnc-ivory);

    border: 1px solid rgba(198,161,91,.18);

    border-radius: 0;

    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform .28s ease,
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


.tnc-ph-vendor:hover {

    transform: translateY(-5px);

    background: var(--tnc-cream);

    border-color: rgba(198,161,91,.58);

    box-shadow: 0 18px 40px rgba(31,14,12,.09);
}


/* GOLD TOP LINE */

.tnc-ph-vendor:before {

    content: "";

    position: absolute;

    left: 22px;
    top: 0;

    width: 30px;
    height: 2px;

    background: var(--tnc-gold);

    opacity: .7;

    transition: width .25s ease;
}


.tnc-ph-vendor:hover:before {

    width: 55px;
}


/* NUMBER */

.tnc-ph-vendor-num {

    position: absolute;

    top: 11px;
    right: 14px;

    color: rgba(198,161,91,.25);

    font-family: Georgia, serif;

    font-size: 34px;

    line-height: 1;
}


/* ICON */

.tnc-ph-vendor-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border: 1px solid rgba(198,161,91,.22);

    border-radius: 50%;

    background: var(--tnc-white);

    color: var(--tnc-oxblood);

    font-family: Georgia, serif;

    font-size: 20px;

    transition: all .25s ease;
}


.tnc-ph-vendor:hover .tnc-ph-vendor-icon {

    background: var(--tnc-oxblood);

    border-color: var(--tnc-oxblood);

    color: var(--tnc-gold-light);
}


/* TITLE */

.tnc-ph-vendor h3 {

    margin: 0 0 8px;

    color: var(--tnc-oxblood-dark);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;

    line-height: 1.25;

    font-weight: 400;
}


/* DESCRIPTION */

.tnc-ph-vendor p {

    margin: 0;

    color: var(--tnc-muted);

    font-size: 11.5px;

    line-height: 1.55;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.tnc-ph-final {

    position: relative;

    padding: 86px 20px;

    background: var(--tnc-ivory);

    text-align: center;

    overflow: hidden;
}


/* Decorative circles */

.tnc-ph-final:before {

    content: "";

    position: absolute;

    width: 310px;
    height: 310px;

    left: -165px;
    top: -160px;

    border: 1px solid rgba(198,161,91,.22);

    border-radius: 50%;
}


.tnc-ph-final:after {

    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    right: -105px;
    bottom: -115px;

    border: 1px solid rgba(198,161,91,.20);

    border-radius: 50%;
}


.tnc-ph-final-inner {

    position: relative;

    z-index: 2;
}


.tnc-ph-final h2 {

    margin: 0 0 15px;

    color: var(--tnc-oxblood-dark);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 400;
}


.tnc-ph-final p {

    max-width: 650px;

    margin: 0 auto 29px;

    color: var(--tnc-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .tnc-ph-vendor-grid .tnc-ph-vendor {

        flex-basis: calc((100% - 2 * 16px) / 3);
    }

}


@media (max-width: 950px) {

    .tnc-ph-hero h1 {

        font-size: 56px;
    }


    .tnc-ph-way-grid {

        grid-template-columns: 1fr;
    }


    .tnc-ph-how-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .tnc-ph-wedding-heading h2 {

        font-size: 40px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .tnc-ph-container {

        padding-left: 18px;
        padding-right: 18px;
    }


    /* HERO */

    .tnc-ph-hero {

        min-height: auto;
    }


    .tnc-ph-hero-inner {

        padding: 76px 20px 80px;
    }


    .tnc-ph-hero-inner:after {

        display: none;
    }


    .tnc-ph-hero h1 {

        font-size: 43px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    .tnc-ph-hero-description {

        font-size: 15.5px;

        line-height: 1.75;
    }


    .tnc-ph-actions {

        flex-direction: column;

        width: 100%;
    }


    .tnc-ph-btn {

        width: 100%;
    }


    #tnc-ph-search {

        margin-top: 26px;
    }


    #tnc-ph-search .tnc-ph-search-tabs {

        padding: 14px 16px 0;

        gap: 20px;
    }


    /* On mobile, the continuous shared-border bar (right for a wide
       desktop row) reads as cramped once everything stacks into one
       column -- three touching boxes with no breathing room. Instead
       each field gets its own box with real gaps between them, and
       the button is a clearly separate, taller call-to-action rather
       than a fourth identical-looking strip. */
    #tnc-ph-search .tnc-ph-search-row {

        flex-direction: column !important;

        gap: 12px !important;

        margin: 18px 16px 20px !important;

        border: 0 !important;
    }


    #tnc-ph-search .tnc-ph-search-field {

        width: 100% !important;

        border: 1px solid #E3D9C4 !important;
    }


    #tnc-ph-search .tnc-ph-search-field select,
    #tnc-ph-search .tnc-ph-search-field input[type="text"] {

        /* Slightly taller than the desktop row -- a touch target
           benefits from more room than a mouse pointer does. */
        height: 46px !important;

        min-height: 46px !important;

        line-height: 46px !important;
    }


    /* No longer a shared divider between fields -- each has its own
       full border now (set above), so this old left/top-border
       divider rule would just double up with it. */
    #tnc-ph-search .tnc-ph-search-field + .tnc-ph-search-field {

        border-left: 0 !important;

        border-top: 1px solid #E3D9C4 !important;
    }


    #tnc-ph-search .tnc-ph-search-btn {

        width: 100% !important;

        justify-content: center !important;

        /* Taller and set apart by the row's own gap above instead of
           sharing a border with the fields -- reads as the one clear
           action to take, not a third dropdown-shaped box. */
        height: 52px !important;

        margin-top: 4px !important;

        border: 0 !important;

        padding: 0 26px !important;

        font-size: 13.5px !important;

        letter-spacing: .12em !important;
    }


    .tnc-ph-hero-note {

        margin-top: 34px;

        font-size: 12.5px;
    }


    /* HOW IT WORKS */

    .tnc-ph-how {

        padding: 78px 0;
    }


    .tnc-ph-how-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* TWO WAYS (legacy, unused) */

    .tnc-ph-two-ways {

        padding: 78px 0;
    }


    .tnc-ph-two-ways:before {

        height: 40px;
    }


    .tnc-ph-heading {

        margin-bottom: 40px;
    }


    .tnc-ph-heading h2 {

        font-size: 34px;
    }


    .tnc-ph-heading p {

        font-size: 14px;
    }


    .tnc-ph-way-grid {

        gap: 17px;
    }


    .tnc-ph-way {

        padding: 38px 25px 32px;
    }


    .tnc-ph-way:before {

        left: 25px;
    }


    .tnc-ph-way h3 {

        font-size: 28px;
    }


    /* WEDDING */

    .tnc-ph-wedding {

        padding: 80px 0;
    }


    .tnc-ph-wedding-header {

        display: block;

        margin-bottom: 35px;
    }


    .tnc-ph-wedding-heading h2 {

        font-size: 35px;
    }


    .tnc-ph-see-all {

        margin-top: 20px;
    }


    .tnc-ph-vendor-grid {

        gap: 11px;
    }

    .tnc-ph-vendor-grid .tnc-ph-vendor {

        flex-basis: calc((100% - 11px) / 2);
    }


    .tnc-ph-vendor {

        min-height: 168px;

        padding: 23px 17px 19px;
    }


    .tnc-ph-vendor:before {

        left: 17px;
    }


    .tnc-ph-vendor-icon {

        width: 43px;
        height: 43px;

        margin-bottom: 16px;

        font-size: 18px;
    }


    .tnc-ph-vendor h3 {

        font-size: 16px;
    }


    .tnc-ph-vendor p {

        font-size: 10.5px;
    }


    .tnc-ph-vendor-num {

        font-size: 28px;
    }


    /* FINAL CTA */

    .tnc-ph-final {

        padding: 68px 20px;
    }


    .tnc-ph-final h2 {

        font-size: 32px;
    }


    .tnc-ph-final p {

        font-size: 14px;
    }

}


/* =========================================================
   WELCOME POPUP -- Become a Member / Log In
   ========================================================= */

.tnc-ph-btn.tnc-ph-btn-outline-dark {

    background: transparent;

    color: var(--tnc-oxblood-dark) !important;

    border-color: var(--tnc-oxblood-dark);
}

.tnc-ph-btn.tnc-ph-btn-outline-dark:hover {

    background: var(--tnc-oxblood-dark);

    color: var(--tnc-white) !important;
}

.tnc-ph-popup-overlay {

    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(31,14,12,.62);

    animation: tnc-ph-popup-fade .25s ease;
}

.tnc-ph-popup-overlay[hidden] {

    display: none;
}

@keyframes tnc-ph-popup-fade {

    from { opacity: 0; }
    to { opacity: 1; }
}

.tnc-ph-popup {

    position: relative;

    width: 100%;
    max-width: 420px;

    padding: 44px 36px 34px;

    background: var(--tnc-white);

    border-radius: 0;

    text-align: center;

    box-shadow: 0 30px 80px rgba(58,26,23,.22);

    animation: tnc-ph-popup-rise .3s ease;
}

@keyframes tnc-ph-popup-rise {

    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.tnc-ph-popup-close {

    position: absolute;

    top: 14px;
    right: 14px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: var(--tnc-ivory);

    color: var(--tnc-muted);

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition: background .2s ease, color .2s ease;
}

.tnc-ph-popup-close:hover {

    background: var(--tnc-cream);

    color: var(--tnc-oxblood-dark);
}

.tnc-ph-popup-mark {

    width: 46px;
    height: 46px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--tnc-gold);
    border-radius: 50%;

    color: var(--tnc-gold);

    font-size: 18px;
}

.tnc-ph-popup-label {

    margin-bottom: 10px;

    color: var(--tnc-gold);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.tnc-ph-popup h2 {

    margin: 0 0 12px;

    color: var(--tnc-oxblood-dark);

    font-size: 26px;
}

.tnc-ph-popup p {

    margin: 0 0 26px;

    color: var(--tnc-muted);

    font-size: 13.5px;

    line-height: 1.7;
}

.tnc-ph-popup-actions {

    display: flex;

    gap: 10px;

    margin-bottom: 16px;
}

.tnc-ph-popup-actions .tnc-ph-btn {

    flex: 1;

    min-height: 48px;

    padding: 0 14px;

    font-size: 12px;
}

.tnc-ph-popup-later {

    background: none;
    border: 0;

    color: var(--tnc-muted);

    font-size: 12px;

    text-decoration: underline;

    cursor: pointer;
}

.tnc-ph-popup-later:hover {

    color: var(--tnc-oxblood-dark);
}

@media (max-width: 480px) {

    .tnc-ph-popup {

        padding: 38px 24px 28px;
    }

    .tnc-ph-popup-actions {

        flex-direction: column;
    }
}

/* ==========================================================================
   FAQ accordion -- [tnc_faq] page (templates/faq.php).

   Same native <details>/<summary> pattern already used on the single
   vendor listing page (.tnc-vp-faq* in tnc-marketplace.css), rebuilt
   here with .tnc-premium-home's own token names instead of enqueueing
   the unrelated tnc-marketplace stylesheet just for this one pattern --
   keeps the FAQ page depending on the one "saved" stylesheet, same as
   the About page.
   ========================================================================== */

.tnc-ph-faq-group {
    margin-bottom: 44px;
}

.tnc-ph-faq-group:last-child {
    margin-bottom: 0;
}

.tnc-ph-faq-group-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 19px;
    color: var(--tnc-oxblood-dark);
    margin: 0 0 18px;
}

.tnc-ph-faq {
    border-bottom: 1px solid rgba(56, 51, 52, 0.12);
    padding: 16px 0;
}

.tnc-ph-faq:first-child {
    padding-top: 0;
}

.tnc-ph-faq:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.tnc-ph-faq-q {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tnc-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tnc-ph-faq-q::-webkit-details-marker {
    display: none;
}

.tnc-ph-faq-q::after {
    content: "+";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: var(--tnc-gold);
    font-weight: 400;
    border: 1px solid rgba(198, 161, 91, 0.35);
    border-radius: 50%;
    transition: transform .15s ease;
}

.tnc-ph-faq[open] .tnc-ph-faq-q::after {
    content: "\2212";
}

.tnc-ph-faq-a {
    font-size: 13.5px;
    color: var(--tnc-muted);
    line-height: 1.7;
    margin-top: 10px;
    max-width: 68ch;
}

/* --------------------------------------------------------------------
   FAQ quick-nav pills + callout note -- [tnc_faq] page.
   -------------------------------------------------------------------- */

.tnc-ph-faq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 28px 0 0;
}

.tnc-ph-faq-nav a {
    display: inline-block;
    padding: 9px 18px;
    border: 1px solid rgba(198, 161, 91, 0.4);
    border-radius: 999px;
    background: var(--tnc-cream);
    color: var(--tnc-oxblood-dark);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tnc-ph-faq-nav a:hover {
    background: var(--tnc-gold);
    border-color: var(--tnc-gold);
    color: var(--tnc-oxblood-dark);
}

.tnc-ph-faq-note {
    display: flex;
    gap: 14px;
    background: var(--tnc-cream);
    border-left: 3px solid var(--tnc-gold);
    padding: 18px 22px;
    margin: 6px 0 36px;
}

.tnc-ph-faq-note-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tnc-oxblood-dark);
    margin: 0 0 6px;
}

.tnc-ph-faq-note-text {
    font-size: 13px;
    color: var(--tnc-muted);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 480px) {

    .tnc-ph-faq-note {
        flex-direction: column;
    }
}

/* ==========================================================================
   Contact form -- [tnc_contact] page (templates/contact.php).

   New component (no existing card/form style fit a two-column contact
   layout), built with .tnc-premium-home's own tokens so it still reads
   as part of the one saved design system -- ivory/white flat sections,
   gold-outline accents, sharp corners, serif headings.
   ========================================================================== */

.tnc-ph-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 50px;
    align-items: start;
}

.tnc-ph-contact-info {
    background: var(--tnc-ivory);
    border: 1px solid rgba(198, 161, 91, 0.25);
    padding: 34px 30px;
}

.tnc-ph-contact-info h3 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    color: var(--tnc-oxblood-dark);
    margin: 0 0 10px;
}

.tnc-ph-contact-info > p {
    font-size: 13.5px;
    color: var(--tnc-muted);
    line-height: 1.7;
    margin: 0 0 26px;
}

.tnc-ph-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.tnc-ph-contact-item:last-child {
    margin-bottom: 0;
}

.tnc-ph-contact-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(198, 161, 91, 0.4);
    background: var(--tnc-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--tnc-oxblood-dark);
}

.tnc-ph-contact-item-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tnc-oxblood);
    margin: 0 0 4px;
}

.tnc-ph-contact-item a,
.tnc-ph-contact-item span {
    font-size: 14px;
    color: var(--tnc-text);
    text-decoration: none;
}

.tnc-ph-contact-item a:hover {
    color: var(--tnc-oxblood-dark);
    text-decoration: underline;
}

.tnc-ph-contact-form {
    background: var(--tnc-white);
    border: 1px solid rgba(198, 161, 91, 0.22);
    box-shadow: 0 24px 60px rgba(58, 26, 23, .08);
    padding: 38px 36px;
}

.tnc-ph-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.tnc-ph-field {
    margin-bottom: 18px;
}

.tnc-ph-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--tnc-oxblood-dark);
    margin-bottom: 7px;
}

.tnc-ph-field input,
.tnc-ph-field select,
.tnc-ph-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #E3D9C4;
    background: var(--tnc-ivory);
    padding: 12px 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--tnc-text);
    transition: border-color .15s ease;
}

.tnc-ph-field select {
    /* A <select> clips its own text hard against whatever box height it
       ends up with -- relying on padding alone to center the text (like
       the shared input/textarea rule above) means any theme/base style
       that forces a shorter height wins, and the top of every letter
       gets sliced off instead of the field just growing. Explicit
       height with a matching line-height is the robust fix (same one
       already used on the homepage search's own select further up this
       file) -- !important on both makes it immune to whatever
       height/line-height gets set elsewhere. */
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: light;
    color: var(--tnc-text) !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23756D6D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
    cursor: pointer;
}

.tnc-ph-field select option {
    color: var(--tnc-text);
    background: var(--tnc-white);
}

.tnc-ph-field input:focus,
.tnc-ph-field select:focus,
.tnc-ph-field textarea:focus {
    outline: none;
    border-color: var(--tnc-gold);
}

.tnc-ph-field textarea {
    min-height: 130px;
    resize: vertical;
}

.tnc-ph-contact-submit {
    border: 0;
    cursor: pointer;
    width: 100%;
}

.tnc-ph-contact-submit:disabled {
    opacity: .6;
    cursor: default;
}

.tnc-ph-contact-result {
    margin-top: 16px;
    font-size: 13px;
}

.tnc-ph-contact-result.is-success {
    color: #2F6B3A;
}

.tnc-ph-contact-result.is-error {
    color: #A3362B;
}

@media (max-width: 860px) {

    .tnc-ph-contact-grid {
        grid-template-columns: 1fr;
    }

    .tnc-ph-contact-row {
        grid-template-columns: 1fr;
    }

    .tnc-ph-contact-form {
        padding: 28px 22px;
    }
}