.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;
    }