/* ==========================================================================
   EXTENSIONS / TWEAKS
   ========================================================================== */

/**
 * These are tweaks to the Shadows UI by J-dawg
 */

.mat-swatch {
  display: inline-block;
  vertical-align: baseline;
  width: 40px;
  height: .875rem;
  border-radius: 0%;
  margin: 0px 4px 0px 4px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.mat-dark-green {  background: #3c593d;  }
.mat-black {  background: #0a1614;  }
.mat-orange {  background: #f27243;  }
.mat-gold {  background: #efad32;  }
.mat-red {  background: #a23441;  }
.mat-brown {  background: #71533b;  }
.mat-turquoise {  background: #3b97a4;  }
.mat-royal-blue {  background: #3b5a79;  }
.mat-medium-blue {  background: #4e778b;  }
.mat-redwood {  background: #9b4a39;  }
.mat-navy {  background: #393f5f;  }
.mat-maroon {  background: #724751;  }
.mat-kelly-green { background: #00ad4e; }
.mat-light-blue {  background: #b0c8d4;  }
.mat-ivy-green {  background: #43745e;  }
.mat-forest-green {  background: #4a593a;  }
.mat-burnt-orange {  background: #c45a28;  }
.mat-spice-ivory { background: #f0e9e1;  }
.mat-purple { background: #755d81;  }
.mat-silver { background: #bcc5cc; }

/* left align the subcategory listings that are now in a single column */
.x-product-list__subcat {
  text-align: left;
}
/* less space between subcategory listings */
.x-product-list__item {
  margin-bottom: .5rem !important;
}

/* darker color of sku on PROD */
.x-product-layout-purchase__sku {
  color: #4A4A4A !important;
}

/* space out top line of product descrip */
#desc-pre {
  margin-bottom: .75rem;
}

/* limit site logo height to 100px */
.checkout-logo {
    width: auto !important;
    height: auto !important;
	max-height: 100px;
}

.x-product-layout-purchase__options-attribute {
    box-shadow: none  !important;
}

.with-border {
  border-style: solid;
  border-width: 2px;
  border-color: #000000;
}

.c-button.c-button--full.c-button--huge {
    background-color: #475d75 !important;
    border-radius: 8px !important;
}

/* Product Listing Page - Quantity '+' & '-' buttons */

.c-control-group .c-control-group__button:first-child, .c-control-group .c-control-group__field:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.c-control-group .c-control-group__button:last-child, .c-control-group .c-control-group__field:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.x-contact-form .is-required::after {
	content: ' *';
	color: red;
}

/* center products on school page */
img.x-product-list__image {
  margin-left: auto;
  margin-right: auto;
}
/* reduce the text spacing on the gift card message input box */
.c-form-input.c-form-input--large.c-form-input--long {
   line-height: inherit;
   height: 6rem;
}

/* less space before prod desc */
section.o-layout.x-product-description {
    padding-top: 1rem;
}

/* trying to space out the attribute image swatches */
/*.o-list-inline__item img {
   vertical-align:inherit;
} */

/* attribute title text same size as options */
.x-product-layout-purchase__options-attribute .c-form-label {
   font-size: 1em;
}

/* required options */
.x-product-layout-purchase .is-required {
   color: #000080;
}
/* make drop downs less ridiculously large */
.c-form-input--large {
   height: 2.5em;
}
/* make password field smaller */
.c-control-group .c-control-group__field {
   height: 2.5em;
}

/* fix frame swatches not aligning with mats */
/*.x-product-layout-purchase__swatches ul {
    margin-left: 0px;
}*/
/* change color of add to cart button on product page */
/*.c-button c-button--full c-button--huge u-bg-gray-40 u-color-white u-text-bold u-font-small u-text-uppercase {
    background-color: #000080;
} */
/* make the CTLG, SRCH page images the same height*/
img.x-product-list__image {
    max-height: 320px;
}

/* center images on homepage for gift, lib of congress, emhe */
.center_img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* Bruce's Change Suggestions */

 .u-bg-gray-40 {     
   background-color: #465d75;} 
.c-button:hover.u-bg-gray-40 {
    background-color: #465d75cc;}

.t-site-navigation {
    border-bottom: 1px solid #dbd1c5;
}

.t-site-header {
    border-bottom: 1px solid #dbd1c5;
}

.u-bg-gray-10::before, .u-bg-gray-10 {
    background-color: #dbd1c5;
}

.u-bg-gray-50 {
    background-color: #465d75 !important;
}

/* .u-bg-gray-50:hover
 { background-color: #465d7549 !important }
*/

.u-bg-gray-50::before, .u-bg-gray-50 
{
    background-color: #465d75 !important;
}

.u-font-xl {
	font-size: 1.5em;
}

.u-text-spacing-normal {
	letter-spacing: normal;
}

@media (min-width: 48em) {
.t-site-header__links .o-layout__item:not(:first-of-type) {
    border-left: none;1px solid #465d75;
}
}


.c-keyline {
    border-color: #dbd1c5;
}

#checkout_steps .c-keyline { border: 2px solid #465d75 !important;   color:#465d75 !important }
.txt-clr-gold { color:#465d75 !important }

.u-text-normal { text-transform: none !important; font-weight:400 !important }

.green-highlight-text { color: #4caf50; font-size:120% }

.x-hero { text-align:center }

.x-messages{
	padding: 1rem !important; 
	border-radius: 8px !important; 
	line-height: 1.4 !important;
	letter-spacing: normal;
}

.x-messages--error {
	background-color: #f8d7da !important; 
	color: #721c24 !important; 
	border: 1px solid #f5c6cb !important;
}

.custom-icon {
	width: 24px;
	height: 24px;
}

.x-messages--error .custom-icon {
	color: #721c24; 
}

.apple-pay-button-with-text {
	width: 100%;
}

.alternate-payment-options-container {
	width: 100%;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* styles for "OR" divider that separates native checkout from alternate payment method buttons */

.or-divider {
	width: 100%;
	position: relative;
	margin: 10px 0;
	text-align: center;
}

.or-divider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #e0e0e0;
}

.or-divider span {
	background-color: white;
	padding: 0 16px;
	color: #666;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	z-index: 1;
}

.amazonpay-button-view3{
	display: none;
}

.x-product-layout-purchase__options-attribute .c-form-select::before {
	display: none;
}

.x-product-layout-purchase__options-attribute .c-form-select::after{
	width: calc(.75em) !important;
    	height: calc(.75em) !important;
	right: 1.25em !important;
}

.x-product-layout-purchase__options-attribute .c-form-select__dropdown{
	border-radius: 8px !important;
	padding: 1em !important;
}

.x-product-layout-purchase__options-attribute .c-form-label,
.x-product-layout-purchase__cta .c-form-label{
    letter-spacing: normal;
    font-size: 1rem !important;
    color: #454545 !important;
    font-weight: 900 !important;
    margin-bottom: 1rem !important;
}

.x-product-layout-purchase__options-attribute .c-form-label > span {
    margin-left: .5rem;
    font-weight: 400;
}

.x-product-layout-purchase__options-attribute {
    margin-bottom: 1rem !important;
}

.global-input-container {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.c-form-checkbox  {
    margin: 0px !important;
}

.c-form-checkbox__caption::before {
    display: none !important;
}

.c-form-checkbox__caption::after {
    display: none !important;
}

.c-form-checkbox__caption {
    margin: 0px !important;
}

.c-form-checkbox__caption img {
    border-radius: 8px;
}

.attribute-container-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.x-product_full-width {
    max-width: 100% !important;
    flex-basis: 100% !important;
}

.extra-gap-space {
    gap: 1.5rem;
}

.center-attributes {
    justify-content: center;
}

/* ========== CUSTOM RADIO STYLES START ========== */

.c-form-checkbox--radio {
   display: flex !important;
   align-items: center !important;
}

.custom-radio {
  appearance: none;
  -webkit-appearance: none;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  background-color: white;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 1rem;
}

.custom-radio:hover {
  box-shadow: 0 0 0 3px rgb(69 69 69 / 20%);
}

.custom-radio:checked {
  border-color: #454545;
  background-color: #454545;
}

.custom-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
}

/* Override any existing pseudo-elements */
.custom-radio::before {
  display: none !important;
}

/* ========== CUSTOM RADIO STYLES END ========== */

        /* Custom Radio Card Styles for Color Swatches */
        .custom-radio-card {
            appearance: none;
            -webkit-appearance: none;
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            margin: 0;
        }

        /* Hide any default pseudo-elements */
        .custom-radio-card::before,
        .custom-radio-card::after {
            display: none !important;
        }

        /* Style the label as the swatch */
        .custom-radio-card + .c-form-checkbox__caption {
            border-radius: 8px;
            cursor: pointer;
	    transition: transform 0.2s ease;
        }

        /* Hover state */
        .custom-radio-card:hover:not(:checked) + .c-form-checkbox__caption {
            outline-color: #e5e7eb;
            transform: scale(1.05);
        }

        /* Checkmark overlay for selected state */
        .custom-radio-card:checked + .c-form-checkbox__caption::after {
            content: '';
            position: absolute;
	    display: flex !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #475d75;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11L12.5 5' stroke='%23ffffff' stroke-width='2' /%3E%3C/svg%3E");
            background-size: 25px 25px;
            background-position: center;
            background-repeat: no-repeat;
        }


/* Only apply sticky behavior on medium screens and up */
@media (min-width: 768px) {
    .x-product-layout-images {
        position: sticky;
        /* top value will be set dynamically by JavaScript */
        align-self: flex-start;
        z-index: 10;
        transition: all 0.3s ease;
    }
    
    /* Ensure thumbnails container doesn't break the sticky behavior */
    .x-product-layout-images__thumbnail-list {
        flex-shrink: 0;
    }
}

.x-product-layout-images__image {
	max-height: 500px;
}

[data-id="cc_exp"] .c-control-group {
    gap: .5rem;
}