.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > ul {
        display: none; /* Hide by default */
        position: absolute;
        left: 100%; /* Position it to the right of the parent */
        top: 0;
        margin: 0;
        padding: 0;
        z-index: 1000;
    }

    .dropdown-submenu:hover > ul {
        display: block; /* Show on hover */
    }

    .dropdown-submenu > ul > li {
        list-style: none;
    }

/* Video Guide Banner */
.video-guide-banner {
    display: flex;
    width: 100%;
    height: 120px;
    margin-bottom: 1rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s ease;
}

.video-guide-banner:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    text-decoration: none;
}

.video-guide-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 30px;
    white-space: nowrap;
    background: #406da4;
    color: white;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.video-guide-thumb-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

    .video-guide-thumb-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 100%;
        background: linear-gradient(to right, #406da4, transparent);
        z-index: 1;
    }

.video-guide-thumb-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 117, 191, 0.8), transparent);
}

.video-guide-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.video-guide-thumbnail.active {
    opacity: 1;
}

/* Keep the top navigation on one row.
   The public nav has seven items. At Bootstrap's default 15px horizontal
   padding they overflow the col-md-9 the nav sits in by roughly 45px, which
   pushed LOG IN onto a second row. Trimming the padding to 10px recovers
   about 70px across the seven items, so every item fits without shortening
   any label - CUSTOMER PORTAL and MAKE A PAYMENT are the names WEB-4763 and
   WEB-4766 specify. Scoped to >=768px, where the navbar is horizontal;
   below that it collapses and the padding does not apply. */
@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Producer PRODUCTS menu: let long product names fit their submenu.
   main.css gives nested navbar submenus min-width:190px. Because .dropdown-submenu > ul
   is absolutely positioned at left:100%, its available width for shrink-to-fit is zero,
   so the box collapses to that minimum while nowrap link text runs past the edge -
   "Road Warrior Safe Driver Auto Program" overflowed visibly. Widen the box and let the
   text wrap instead of overflowing. Scoped to the product menu so the short Customer
   Portal submenus (AR, IL, IN / AZ, OK, TX) keep their current sizing. */
[data-product-nav] .dropdown-menu {
    min-width: 280px;
}

    [data-product-nav] .dropdown-menu > li > a {
        white-space: normal;
    }

/* Product document lists: four columns like FCIC, collapsing on narrow screens.
   These used to render as a single table row with one cell per document, so every
   document in a product sat on one line stretched across the page. */
.productforms-doc-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 18px;
    -webkit-columns: 4 200px;
    -moz-columns: 4 200px;
    columns: 4 200px;
    -webkit-column-gap: 24px;
    -moz-column-gap: 24px;
    column-gap: 24px;
}

    .productforms-doc-list > li {
        /* Keep a wrapped document name from splitting across two columns. */
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 4px;
    }

/* State picker: replaces the "Please Select State" dropdown. Each state is a link laid
   out on the Bootstrap grid, styled after the bordered buttons used on the home page so
   it reads as part of the site rather than a bare form control. */
.productforms-state {
    display: block;
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 2px solid #355987;
    border-radius: 3px;
    background-color: #fff;
    color: #355987;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .productforms-state:hover,
    .productforms-state:focus {
        background-color: #355987;
        color: #fff;
        text-decoration: none;
    }

/* Product sections on a state page. */
.productforms-product {
    margin-bottom: 34px;
}

.productforms-product-title {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e7eb;
    color: #355987;
    font-size: 22px;
    font-weight: 600;
}

.productforms-group-title {
    margin: 18px 0 8px;
    color: #474747;
    font-size: 16px;
    font-weight: 600;
}

    .productforms-doc-list > li > a > .fa {
        margin-right: 8px;
        color: #9aa5b1;
    }

    .productforms-doc-list > li > a:hover > .fa {
        color: #355987;
    }

/* Systems Access cards on the producer login page (WEB-5423).
   Bordered cards after FCIC's pattern: system logo, one line of copy, a Click Here
   button. The two logos have very different aspect ratios - Guidewire is 308x49 and
   PTS is 486x312 - so the logo sits in a fixed-height box and scales inside it, which
   keeps the two cards aligned instead of one towering over the other. */
.systems-access-title {
    margin: 10px 0 18px;
    color: #355987;
    font-size: 26px;
    font-weight: 600;
}

.system-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 22px;
    padding: 22px 20px 20px;
    border: 1px solid #d8dde4;
    border-radius: 3px;
    background-color: #fff;
    text-align: center;
}

.system-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin-bottom: 14px;
}

    .system-card-logo img {
        max-width: 82%;
        max-height: 72px;
    }

.system-card-copy {
    flex: 1 1 auto;
    margin: 0 0 16px;
    color: #4a5768;
    font-size: 14.5px;
    line-height: 1.5;
}

.system-card-cta {
    align-self: center;
    padding: 9px 26px;
    border-radius: 3px;
    background-color: #4aabdf;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease;
}

    .system-card-cta:hover,
    .system-card-cta:focus {
        background-color: #355987;
        color: #fff;
        text-decoration: none;
    }

/* Agent News lists. The page carried the same inline style on every list; it is one
   class now so the new Press Releases and Marketing Flashes sections match the existing
   Newsletters and Partner Resources without repeating it. Values are unchanged. */
.news-list {
    margin: 0 10px 5px 10px;
    padding: 0 10px 5px 10px;
    list-style-type: square;
}

    .news-list .news-empty {
        list-style: none;
        margin-left: -10px;
        color: #74839a;
        font-style: italic;
    }

/* "Keep me logged in" on the producer login page (WEB-4756).
   Bootstrap's .checkbox absolutely positions the input at margin-left:-20px and relies
   on a wrapping label carrying padding-left to line the text back up. asp:CheckBox
   renders the input and its label as siblings, so that padding never applied and on
   narrow screens the box detached and sat against the left edge. Lay the pair out
   explicitly instead of fighting the framework rule. */
.login-remember {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

    .login-remember input[type="checkbox"] {
        position: static;
        margin: 0 8px 0 0;
    }

    .login-remember label {
        margin: 0;
        font-weight: normal;
    }

/* Services modal backdrop on mobile (WEB-6307).
   main.css sets background-color: #B1191E on #servicesOKModal below 768px. Bootstrap's
   own .modal-backdrop is present and working - black at 50% opacity, full coverage - and
   paints on top of that red, so the two composite into a dark maroon wash instead of the
   dimmed page seen on desktop. The red is doing no work; only the z-index alongside it is,
   and that is left alone. Overriding here rather than in main.css: the offending rule was
   hand-edited into the compiled file and has no counterpart in sass/, so recompiling would
   drop it. Custom.css loads after main.css at equal specificity, so source order wins and
   no !important is needed. */
@media only screen and (max-width: 768px) {
    #servicesOKModal {
        background-color: transparent;
    }
}

/* Services modal position on mobile (WEB-6307).
   main.css centres modals with the old Bootstrap 3 strut trick: .modal:before is an
   inline-block of height 100%, and .modal-dialog is inline-block with vertical-align
   middle, so the two share a line and the dialog centres against the strut. It only
   works while the dialog is narrower than the line. Below 768px Bootstrap gives
   .modal-dialog width:auto and margin:10px, so it spans the full viewport; with the
   strut and the inline whitespace between them there is nothing left, and the dialog
   wraps onto the line BELOW a full-viewport-height strut. Measured at 414x896: dialog
   top 906px, i.e. entirely off screen, and the user has to scroll to find the popup.
   Above 768px .modal-dialog is a fixed 600px, which leaves room, so desktop is fine
   and is deliberately left untouched.
   Dropping the strut here and letting the dialog be a normal block puts it back at the
   top of the viewport, horizontally centred by its own 10px margins.
   Bounded at 767px, not 768px, because Bootstrap switches .modal-dialog to a fixed
   600px at min-width:768px. Overlapping the two at exactly 768px produced a hybrid -
   a 600px dialog pinned to the top instead of centred. */
@media only screen and (max-width: 767px) {
    #servicesOKModal:before {
        display: none;
    }

    #servicesOKModal .modal-dialog {
        display: block;
        /* Bootstrap's own margin is a flat 10px. Designer asked for 100px of clearance
           from the top so the popup does not sit flush against the status bar. Sides are
           auto so the dialog stays centred once max-width caps it below the viewport. */
        margin: 100px auto 10px;
    }
}

/* Services modal width (WEB-6307).
   Capped at 600px at every width - Bootstrap already uses 600px from 768px up, so this
   only bites below that, where .modal-dialog was width:auto and grew to fill the screen.
   max-width is calc(100% - 20px) rather than a flat 600px so the 10px gutters survive on
   screens narrower than 600px; between the two, the dialog is never wider than 600px and
   never flush against the edge. */
#servicesOKModal .modal-dialog {
    width: 600px;
    max-width: calc(100% - 20px);
}

/* Services modal close button (WEB-6307).
   main.css gives .modal-title display:inline, so the floated .close sits in the middle
   of the text flow and drifts down the moment the title wraps to a second line. Laying
   the header out as a flex row pins the close to the top right corner and lets the title
   take the remaining width. Applied at every width: when the title fits on one line this
   renders identically to the float, so desktop is unchanged. */
#servicesOKModal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

    #servicesOKModal .modal-title {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
    }

    #servicesOKModal .modal-header .close {
        flex: 0 0 auto;
        float: none;
        margin-left: 10px;
    }

/* Services modal Policyholder / Producer buttons (WEB-6307).
   main.css sets .policy-buttons a to width:45% with no flex-wrap on the container, so the
   pair stays locked side by side however narrow the popup gets and the labels spill out of
   their borders. height:3.5em is fixed too, so a wrapped label overflows downward as well.
   Below 768px: drop to a 16px label, let each button size from a 140px basis, and allow the
   row to wrap so the two stack once there is no longer room for both. Height becomes a
   minimum rather than a cap so a wrapped label grows the button instead of escaping it. */
@media only screen and (max-width: 767px) {
    #servicesOKModal .policy-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

        #servicesOKModal .policy-buttons a {
            width: auto;
            flex: 1 1 140px;
            font-size: 16px;
            height: auto;
            min-height: 3.5em;
            padding: 8px 12px;
            overflow-wrap: break-word;
        }
}