/* ========================================
   DESIGN YOUR OWN RING - BUTTON FIX
   Match Diamond Search button styles
   ======================================== */

/* Reset Filters button - match Diamond Search */
.own-dr-reset_own_ring a {
    float: right !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    background: none !important;
    padding: 9px 16px !important;
    font-weight: 700 !important;
    color: #676767 !important; /* Gray color like Diamond Search */
    height: 36px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 3px 8px 0 0 !important;
}

/* Hide/Show Filters button - match Diamond Search */
.resetfilterclassNew {
    width: auto !important;
    float: right !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 16px !important;
    color: #fff !important;
    background: #30a8dc !important;
    text-decoration: none !important;
    border: 1px solid #777 !important;
    border-radius: 4px !important;
    padding: 9px 16px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    margin: 3px 8px 0 0 !important;
}

/* Container styles */
.own-dr-hide-filter {
    float: right !important;
    width: 100% !important;
    margin: 5px 0 13px 0 !important;
}

/* Hide Filters link (non-button) */
.own-dr-hide-filter a:not(.resetfilterclassNew):not([href*="ResetFilter"]) {
    float: right !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #676767 !important;
    text-decoration: none !important;
    background: url(https://b2cimages.s3.amazonaws.com/generalimage/arrow-dropdown.png) no-repeat right !important;
    padding: 0 26px 0 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .own-dr-hide-filter a:not(.resetfilterclassNew) {
        float: none !important;
        min-height: 36px !important;
        height: 36px !important;
    }

    .resetfilterclassNew {
        float: none !important;
        height: 36px !important;
        padding: 9px 16px !important;
    }
}

/* Respect inline display:none */
.own-dr-hide-filter a[style*="display: none"],
.own-dr-hide-filter a[style*="display:none"],
.resetfilterclassNew[style*="display: none"],
.resetfilterclassNew[style*="display:none"] {
    display: none !important;
}

/* ========================================
   VARIANT CLASSES FOR OTHER PAGES
   ======================================== */

/* Lab Diamond Advisor - uses right-aligned container */
.own-dr-hide-filter-right {
    float: right !important;
    width: 100% !important;
    margin: 5px 0 13px 0 !important;
}

.own-dr-hide-filter-right a:not(.resetfilterclassNew):not([href*="ResetFilter"]) {
    float: right !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #676767 !important;
    text-decoration: none !important;
    background: url(https://b2cimages.s3.amazonaws.com/generalimage/arrow-dropdown.png) no-repeat right !important;
    padding: 0 26px 0 0 !important;
}

/* Loose Diamond Advisor - alternative reset button class */
.filterresetbutton {
    width: auto !important;
    float: right !important;
    line-height: 1 !important;
    text-align: center !important;
    font-size: 16px !important;
    color: #676767 !important;
    background: none !important;
    text-decoration: none !important;
    border: 0 !important;
    padding: 9px 16px !important;
    height: 36px !important;
    box-sizing: border-box !important;
    margin: 3px 8px 0 0 !important;
    font-weight: 700 !important;
    display: inline-block !important;
    vertical-align: top !important;
}

/* ========================================
   REMOVE DOWN ARROW ICON FROM RESET BUTTON
   ======================================== */

/* Hide the .reset-filter icon div inside Reset Filters button */
.reset-filter {
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Remove background arrow from ALL Reset Filters anchor tags */
a[onclick*="deleteAllCookies"],
a[onclick*="ResetFilter"],
a[onclick*="resetData"],
a[href*="ResetFilter"] {
    background-image: none !important;
    background: none !important;
}

/* ========================================
   FIX: CONSTRAIN PAGE WIDTH TO 1360PX
   ======================================== */

/* Desktop: Constrain .own-diamond-ring to 1360px max-width
   Issue: .own-diamond-ring has width: 96% with NO max-width in multiple CSS files
          (Oldstyle.css, stylePage.css, _DesignownRing.css)

   Result without this fix:
   - At 1920px viewport: .own-diamond-ring = 1820px (96% of 1920px)
   - At 2560px viewport: .own-diamond-ring = 2435px (96% of 2560px)
   - At 3440px viewport: .own-diamond-ring = 3279px (96% of 3440px)

   This causes:
   - Page takes full width instead of constraining to 1360px
   - Icon sprite positioning breaks (designed for 1360px layout)
   - Inconsistent with other pages (Homepage, PDP, Diamond Search all at 1360px)
   ======================================== */

@media (min-width: 768px) {
    .own-diamond-ring {
        max-width: 1360px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
