:root { --lw_green:#1EA321; --lw_lt_green:#04D510; --lw_dk_grey:#7B7B7B; --lw_lt_grey:#A1A1A1; --lw_off_white:#D8D8D8; --top_margin:3em; --shadow1:5px 5px 5px 0 rgba(0, 0, 0, 0.50); --section_pad:1rem; --text_normal:1.5rem; --text_header:3rem; --text_menu:1.75rem; --text_copyright:0.7em; }

@font-face {
    font-family: "Arquitecta";
    src: url("/fonts/Arquitecta.woff2") format("woff2"), url("/fonts/Arquitecta.woff") format("woff"), url("/fonts/Arquitecta.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "ArquitectaBold";
    src: url("/fonts/ArquitectaBold.woff2") format("woff2"), url("/fonts/ArquitectaBold.woff") format("woff"), url("/fonts/ArquitectaBold.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "ArquitectaLight";
    src: url("/fonts/ArquitectaLight.woff2") format("woff2"), url("/fonts/ArquitectaLight.woff") format("woff"), url("/fonts/ArquitectaLight.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
}

* { box-sizing: border-box; }

body, html { margin: 0; padding: 0; font-size: 16px; /*font-size:clamp(1rem, 0.9rem + 0.5vw, 1.5rem);*/ font-family: "Arquitecta"; font-weight: 400; font-style: normal; }

body { margin: 0 auto; }

p { margin: 0; }

.header { background-color:var(--lw_green); font-family: "ArquitectaLight"; font-size:var(--text_menu); padding: 0.75em 1rem; }

.header_image img { display: block; }

.header img { vertical-align: middle; }

.header a { text-decoration: none; color: #FFF; padding: 0.25em 0.5em; text-wrap: nowrap; }

.header a.head_icon:hover { background: #666; }

.nav-links a:hover, .nav-icons a:hover { background: #FFF; color:var(--lw_green); border-radius: 0.25em; }

.navActive a { text-decoration: underline; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.nav-links { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

.nav-icons { display: flex; gap: 1rem; }

.welcome { display: grid; grid-template-columns: 10% 1fr 10%; grid-template-rows: auto 164px auto; gap: 0; }

.landingImage { grid-area: 1 / 1 / 3 / 4; background-image: url("/images/home_img.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 534px; }

.landingHeader { grid-area: 1 / 1 / 2 / 4; padding:var(--section_pad); }

.landingImage-text { font-family: "ArquitectaLight"; font-size:var(--text_normal); display: block; width: 80%; margin: 0 auto; text-align: center; background-color: rgba(232, 232, 232, 0.70); padding:var(--section_pad); border-radius: 1em; box-shadow: 0 0 15px #FFF; }

.landingHeader .section_header { padding-top: 1.75em; }

.howItWorks { grid-area: 2 / 2 / 4 / 3; background-image: url("/images/how_works.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 1em; padding:var(--section_pad) 5em 2rem; box-shadow:var(--shadow1); }

.worksDetail strong { font-family: "ArquitectaBold"; font-size: 2.25rem; display: block; text-align: center; color: white; padding: 1rem 0 0.5rem 0; font-weight: normal; }

.worksDetail { font-family: "ArquitectaLight"; font-size: 1.5em; display: block; text-align: center; color: white; }

.treatment { margin-top:var(--top_margin); display: grid; grid-template-columns: 10% 1fr 10%; gap: 0; padding:var(--section_pad); }

.treatmentCards { grid-area: 2 / 2 / 3 / 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; justify-content: space-around; }

.treatmentCard { text-align: center; display: grid; grid-template-columns: 1fr; grid-template-rows: 128px auto; place-items: center; }

.treatmentCardImage { width: 128px; height: 128px; display: grid; place-items: center; }

.treatmentCard .standardText { align-self: start; padding: 0.5em 0.25em; }

.newYou { display: grid; grid-template-columns: 10% 1fr 10%; }

.newYouHead { margin-top:var(--top_margin); grid-area: 1 / 1 / 2 / 4; background-color:var(--lw_dk_grey); }

.newYouFeatureBG { grid-area: 2 / 1 / 4 / 4; background-color:var(--lw_lt_grey); }

.newYouFeature { grid-area: 2 / 1 / 3 / 4; padding:var(--section_pad); }

.newYouFeatureCards { grid-area: 3 / 2 / 5 / 3; padding:var(--section_pad) 0 0 0; }

.newYouFeatureCards ul { display: grid; list-style-type: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 201px)); gap: 1em; justify-content: space-around; }

.newYouFeatureCards li { background-color: #D8D8D8; border-radius: 1em; text-align: center; font-family: "ArquitectaBold"; font-size: 2rem; padding: 1em; }

.newYouFeatureCards li img { padding: 0.5em 0 0 0; }

.yourTeam { margin-top:var(--top_margin); }

.yourTeamMembers { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); grid-auto-flow: row; gap: 1em; padding:var(--section_pad); justify-content: space-around; }

.yourTeamMember { text-align: center; display: inline-block; font-size:var(--text_normal); }

.yourTeamMember img { border-radius: 1em; box-shadow:var(--shadow1); max-height: 400px; margin-bottom: 1em; }

.TeamMember { text-align: left; display: inline-block; width: 100%; font-size:var(--text_normal); }

.TeamMember img:not(:first-child) { border-radius: 1em; float: left; box-shadow:var(--shadow1); max-height: 400px; margin: 0 2em 1em 0; }

.TeamMember img:first-child { border-radius: 1em; box-shadow:var(--shadow1); max-width: 25%; height: 100%; min-width: 200px; margin: 0 0 1em 1em; }

.TeamMember p { padding: 0 0 1em 0; }

.planWrapper { margin-top:var(--top_margin); display: grid; grid-template-columns: 10% 1fr 10%; }

.treatmentPlans { grid-area: 1 / 2 / 2 / 3; background-color:var(--lw_off_white); border:1px solid var(--lw_dk_grey); border-radius: 1em; display: grid; grid-template-columns: auto auto; gap: 1em; padding: 1em; box-shadow:var(--shadow1); }

.treatmentPlans img { box-shadow:var(--shadow1); width: 100%; max-width: 300px; }

.treatmentPlans img:nth-child(1) { margin: 0 0 1em 0; }

.treatmentPlansDetail { font-size: 1.5em; display: block; padding: 0 0 1em 0; }

.availablePlans { margin-top:var(--top_margin); background-color:var(--lw_green); padding:var(--section_pad); }

.planCardWrap { display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(200px, 258px)); justify-content: space-around; }

.planCard { background-color:var(--lw_off_white); border-radius: 1em; padding: 1em; box-shadow:var(--shadow1); font-size:var(--text_normal); margin: 1em 0; display: grid; grid-template-rows: auto auto auto 1fr auto; }

.planCard ul { list-style: none; margin: 0; padding: 0; }

.planCard li { padding: 0 0 0.25em 0; }

.planCard li:before { content: '✓ '; }

.planName { font-family: "ArquitectaBold"; display: block; text-align: center; padding: 0 0 0.5em 0; }

.planPrice { display: block; text-align: center; padding: 0 0 0.5em 0; }

.planBuy { text-align: center; display: grid; grid-auto-flow: column; gap: 2em; justify-items: center; }

.planOverview { margin-top: 2rem; /*border: 1px solid green;*/ display: block; }

.planOverview p { padding: 0 0 0.75rem; }

.journey { margin-top:var(--top_margin); text-align: center; }

.journey img { max-width: 98%; }

.faq { margin-top:var(--top_margin); background-color:var(--lw_off_white); padding:var(--section_pad) 3rem 2rem; }

/*.faq DT
{
	font-family: "ArquitectaBold";
}*/
/*.faq DD
{
	padding: 0.25em 0 0.75em 0;
}*/
.faqItem { background: #FAFAFA; border-radius: 1rem; box-shadow:var(--shadow1); overflow: hidden; }

.faqItem:not(:first-child) { margin-top: 1.5rem; }

.faqItem p { padding: 0 0 1rem 0; }

.faqItem p:last-child { padding: 0; }

.faqItem ul, .faqItem ol { margin: 0 0 1rem 0; }

.faqItem li { padding-bottom: 1rem; }

.faqItem li:last-child { padding-bottom: 0; }

.faqToggle { cursor: pointer; font-weight: 600; padding: 1rem; position: relative; list-style: none; }

.faqToggle::-webkit-details-marker { display: none; }

.faqToggle::after { content: ''; width: 1.5rem; height: 1.5rem; position: absolute; right: 1rem; background: url("/images/chevron-down.svg") no-repeat center; background-size: contain; transition: transform 0.3s ease; }

/* rotate chevron when open */
.faqItem[open] .faqToggle::after { transform: rotate(180deg); }

.faqAnswer { padding: 1rem; border-top: 1px solid #DDD; /* key trick for CSS-only animation */ max-height: 0; /* collapsed height */ overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* expand when open */
.faqItem[open] .faqAnswer { max-height: 1500px; /* must be taller than tallest content */ }

.articles { margin-top:var(--top_margin); text-align: center; }

.articles a { color: #000; }

.articleRead a { color: #FFF; text-align: center; }

.shakesWrapper { margin-top:var(--top_margin); display: grid; grid-template-columns: 10% 1fr 10%; }

.shakes { grid-area: 1 / 2 / 2 / 3; background-color:var(--lw_off_white); border:1px solid var(--lw_dk_grey); border-radius: 1em; display: grid; grid-template-columns: auto auto; gap: 1em 2em; padding:var(--section_pad) 2rem 2rem; box-shadow:var(--shadow1); }

.shakes img { border: 1px solid black; box-shadow:var(--shadow1); max-width: 100%; }

.shakeImage { text-align: center; }

.testimonials { margin-top:var(--top_margin); display: grid; grid-template-columns: 10% 1fr 10%; grid-template-rows: auto auto auto auto; }

.testimonialsBG { grid-area: 1 / 1 / 3 / 4; background-color:var(--lw_lt_grey); }

.testimonialsHeader { grid-area: 1 / 1 / 2 / 4; padding:var(--section_pad); }

.testimonialItems { grid-area: 2 / 2 / 4 / 3; }

.testimonialRead { grid-area: 4 / 2 / 4 / 3; text-align: center; }

.testimonials ul { display: grid; list-style-type: none; margin: 0; padding:var(--section_pad) 0; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(230px, 400px)); justify-content: space-around; }

.testimonials li, .testimonials_page_item { background-color:var(--lw_off_white); padding: 1.5em; border-radius: 1em; display: grid; grid-template-columns: 1fr; /*grid-template-rows: 1fr auto;*/ box-shadow:var(--shadow1); }

.testimonialWho { font-family: "ArquitectaBold"; display: block; text-align: right; font-size: 2rem; padding-top: 0.5em; }

.contact { margin-top:var(--top_margin); background-color:var(--lw_green); padding:var(--section_pad); }

.contact a { color: #FFF; }

.contact ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); list-style: none; margin: 0; padding: 0; gap: 3em; justify-content: space-around; }

.contact li { color: white; text-align: center; }

.contact li img { max-height: 40px; }

.copyright { padding:var(--section_pad); text-align: right; color:var(--lw_dk_grey); }

.copyright a { color: #000; }

.section_header { font-family: "ArquitectaBold"; font-size:var(--text_header); display: block; text-align: center; grid-column: 1 / -1; color: white; padding: 0.5rem 0; column-span: all; }

.sub_section_header { font-family: "ArquitectaBold"; font-size: 2rem; display: block; text-align: center; grid-column: 1 / -1; color: white; padding: 0 0 1.5rem 0; column-span: all; }

.standardText { display: block; font-size: 1.5em; line-height: 1.2em; }

.articles ul { list-style: none; margin: 0; padding: 1rem 0 0 0; }

ul.standardText li { padding: 0.5rem; }

.green { color:var(--lw_green); }

.lt_green { color:var(--lw_lt_green); }

.black { color: #000000; }

.white { color: #FFFFFF; }

.left { text-align: left; }

.center { text-align: center; }

.btn { padding: 0.5em 1em; color: white !important; border: 0; border-radius: 1rem; font-size: 1.5rem; display: inline-block; margin: 0.75em 0 0 0; cursor: pointer; text-decoration: none; }

.btn.grey { background-color: #7B7B7B; }

.btn.grey:hover { background-color: #6A6A6A; text-decoration: underline; }

.btn.blue { background-color: #1D4AA3; }

.btn.blue:hover { background-color: #3469D4; text-decoration: underline; }

.btn.blue.small { font-size: 1rem; border-radius: 0.5rem; }

.btn:hover { text-decoration: underline; }

a.btn:hover { text-decoration: underline; }

.btn.blue:disabled { background-color: #CCCCCC; cursor: not-allowed; opacity: 0.8; pointer-events: all; position: relative; }

.btn.blue:disabled:hover::after { content: 'Total items must match\A multi pack quantity'; white-space: pre; /* This preserves the \A line break */ position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 5px 10px; background-color: #333; color: white; border-radius: 4px; font-size: 14px; z-index: 1000; margin-bottom: 5px; text-align: center; width: 150px; /* Fixed width to ensure consistent wrapping */ line-height: 1.3; /* Adds some spacing between lines */ }

.btn.blue:disabled:hover::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; margin-bottom: -5px; }

.article_page, .testimonials_page, .team_member_page, .plan_page, .cart_page { padding: 0 2rem 0 2rem; font-size:var(--text_normal); }

.article_content { columns: 300px 2; column-rule: 1px solid #333; text-align: justify; column-gap: 4em; }

.article_page ul { margin: 0; padding: 0; list-style: none; }

.article_page li { margin: 0 0 0.75em 0; }

.article_page img { max-width: 600px; width: 100%; height: auto; }

.article_page p { padding: 0 0 1em 0; }

.article_page a { color: #000; }

.article_columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1em; }

.article_columns > div { /*border-right: 1px solid #CCC;*/ border: 1px solid #CCC; padding: 1em 1em 0.5em 1em; border-radius: 1em; }

.page_header { font-family: "ArquitectaBold"; font-size:var(--text_header); display: block; text-align: center; grid-column: 1 / -1; color:var(--lw_green); padding:var(--section_pad); column-span: all; }

.testimonials_page { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-content: space-around; gap: 2rem; }

.PlanInfo { }

.PlanInfoDetails { display: block; }

.PlanInfoDetails a { color: #000; }

.PlanInfoDetails p, .PlanInfoDetails details { margin: 0 0 1em 0; }

.table_left { text-align: left; }

.table_right { text-align: right; }

.cart_total { font-weight: bold; border-top: 1px solid black; }

.cart-page-total { border-top: 1px solid black; }

/* Wrapper - Primarily for grouping checkbox and siblings */
.alert-wrapper { /* No positioning needed here anymore unless for other reasons */ /* We need *something* to wrap the checkbox and its siblings */ }

/* Hide the actual checkbox visually but keep it accessible */
.alert-checkbox { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* The Backdrop/Overlay - Stays Full Screen */
.alert-backdrop { position: fixed; /* Cover the entire viewport */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */ z-index: 1045; /* Below alert (1050), above content */ opacity: 0; /* Start hidden */ pointer-events: none; /* Start non-interactive */ transition: opacity 0.4s ease-out; }

/* The main floating alert container - Now positioned independently */
.floating-alert-container { position: fixed; /* Position relative to viewport */ top: 50%; /* Center vertically */ left: 50%; /* Center horizontally */ transform: translate(-50%, -50%) scale(0.95); /* Adjust position & start scaled down */ z-index: 1050; /* Above backdrop */ /* Apply width constraints directly here */ min-width: 250px; max-width: 90%; /* Or a specific pixel value like 500px */ width: auto; /* Allow it to shrink if content is narrow */ padding: 15px 40px 15px 20px; /* Initial padding state for transition (right side accommodates close btn) */ border: 1px solid transparent; border-radius: 0.5rem; background-color: white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); overflow: hidden; /* Important for smooth height transition */ /* Keep transform transition */ /* Transition padding */ /* Transition margin */ transition: opacity 0.4s ease-out, transform 0.4s ease-out, max-height 0.4s ease-out, padding-top 0.4s ease-out, padding-bottom 0.4s ease-out, margin-top 0.4s ease-out, margin-bottom 0.4s ease-out, border-width 0.4s ease-out; /* Transition border */ opacity: 0; /* Start hidden */ max-height: 0; /* Start collapsed */ padding-top: 0; /* Start collapsed */ padding-bottom: 0; /* Start collapsed */ margin-top: 0; /* Start collapsed */ margin-bottom: 0; /* Start collapsed */ border-width: 0; /* Start collapsed */ pointer-events: none; /* Start non-interactive */ }

/* Wrapper for icon and text content */
.alert-content-wrapper { display: flex; /* Use flexbox for alignment */ align-items: center; /* Vertically align items in the center */ gap: 0.75rem; /* Add space between icon and text */ }

/* Styling for the SVG icon */
.alert-icon { width: 3rem; /* Adjust size as needed */ height: 3rem; /* Adjust size as needed */ flex-shrink: 0; /* Prevent icon from shrinking if text is long */ /* Color is inherited from the parent via 'fill="currentColor"' in the SVG */ }

/* The alert message content */
.floating-alert-content { /* Add any specific styling for the text content if needed */ }

/* Styling for the close button (the label) */
.close-btn { position: absolute; top: 8px; /* Adjust position slightly */ right: 8px; /* Adjust position slightly */ width: 28px; /* Fixed width */ height: 28px; /* Fixed height */ display: flex; align-items: center; justify-content: center; font-size: 1.25rem; /* Slightly smaller 'x' */ font-weight: bold; line-height: 1; color: inherit; /* Inherit color from parent */ background-color: rgba(0, 0, 0, 0.05); /* Subtle background */ border: none; border-radius: 50%; /* Make it circular */ cursor: pointer; opacity: 0.6; /* Start slightly more transparent */ transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; user-select: none; /* Prevent text selection on the 'x' */ }

.close-btn:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.15); /* Darker background on hover */ }

/* --- Show elements when checkbox is NOT checked --- */
/* Show backdrop */
.alert-checkbox:not(:checked) ~ .alert-backdrop { opacity: 1; pointer-events: auto; }

/* Show container */
.alert-checkbox:not(:checked) ~ .floating-alert-container { opacity: 1; /* Correct centering transform when visible */ transform: translate(-50%, -50%) scale(1); max-height: 500px; /* Expand - adjust if content could be taller */ padding-top: 15px; /* Restore padding */ padding-bottom: 15px; /* margin-bottom: 1rem; */ /* Restore margin if needed */ border-width: 1px; /* Restore border */ pointer-events: auto; /* Make interactive */ }

/* --- Alert Color Variations --- */
.alert-success { color: #155724; background-color: #D4EDDA; border-color: #C3E6CB; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 1.25rem; }

.alert-danger { color: #721C24; background-color: #F8D7DA; border-color: #F5C6CB; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 1.25rem; }

.alert-info { background-color: #CCE5FF; color: #004085; padding: 1rem; border: 1px solid #B8DAFF; border-radius: 4px; margin-top: 1.5rem; text-align: center; font-size: 1.2rem; }

.alert-warning { color: #856404; background-color: #FFF3CD; border-color: #FFEEBA; }

.isAdminRow { background-color: #11770088 !important; }

/*
--------------------------------------------------------------------------
 E-commerce & Page-Specific Styles
--------------------------------------------------------------------------
*/
/* --- Cart Page --- */
.cart-container { margin: 1rem; padding: 1rem; }

.cart-container p { font-size: 1.2rem; }

/* For empty cart message */
.cart-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid #E0E0E0; }

.cart-item:last-child { border-bottom: none; }

.item-details { flex: 2 1 300px; padding-right: 1rem; }

.item-details .item-name { font-size: 1.4rem; font-weight: bold; }

.item-price, .item-subtotal { flex: 1 1 100px; text-align: right; font-size: 1.3rem; }

.item-quantity { flex: 1 1 120px; display: flex; justify-content: center; align-items: center; }

.item-actions { flex: 0 0 80px; text-align: right; }

.quantity-controls { display: flex; align-items: center; border: 1px solid #CCC; border-radius: 8px; }

.quantity-controls a { padding: 0.5rem 1rem; text-decoration: none; color: #333; font-size: 1.4rem; font-weight: bold; }

.quantity-controls span { padding: 0.5rem; font-size: 1.3rem; }

.item-quantity > span { font-size: 1.3rem; }

/* Style for plan quantity */
.sub-items-list { list-style-type: none; padding-left: 1.5rem; margin-top: 0.75rem; font-size: 1.1rem; color: #555; }

.cart-summary { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #333; text-align: right; }

.cart-summary .grand-total { font-size: 1.8rem; font-weight: bold; margin-bottom: 1rem; }

.cart-actions { display: flex; justify-content: space-between; margin-top: 1rem; }

.remove-link { color: #C00; text-decoration: none; transition: color 0.2s ease-in-out; display: inline-block; /* Helps with alignment */ }

.remove-link:hover { color: #900; /* Darker red on hover */ }

.remove-link svg { width: 28px; /* A bit larger for easier clicking */ height: 28px; }

/* --- Shop Page (Mixed Case) --- */
.mixed-case-selector { margin-top: 2rem; border-top: 1px solid #DDD; padding-top: 1.5rem; }

.case-item-list { display: grid; gap: 1rem; margin-bottom: 1rem; }

.case-item-row { display: flex; justify-content: space-between; align-items: center; }

.case-item-row label { flex-grow: 1; font-size: 1.5rem; }

.case-summary { display: flex; justify-content: space-between; align-items: center; font-weight: bold; }

.case-summary button:disabled { background-color: #CCC; cursor: not-allowed; }

.item_unavailable { text-align: center; color:var(--lw_green); font-size: 2.5rem; font-weight: bold; padding: 1rem; }

/* --- Quantity Stepper (Shop Page) --- */
.quantity-stepper { display: flex; align-items: center; }

.quantity-btn { width: 44px; height: 44px; border: 1px solid #CCC; background-color: #F0F0F0; color: #333; cursor: pointer; font-size: 1.8rem; font-weight: bold; line-height: 1; display: flex; align-items: center; justify-content: center; user-select: none; transition: background-color 0.2s; }

.quantity-btn:hover { background-color: #E0E0E0; }

.quantity-btn.minus-btn { border-radius: 8px 0 0 8px; }

.quantity-btn.plus-btn { border-radius: 0 8px 8px 0; }

.case-item-qty::-webkit-outer-spin-button,
.case-item-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.case-item-qty { -moz-appearance: textfield; /* Firefox */ height: 44px; width: 50px; text-align: center; font-size: 1.2rem; font-weight: bold; border: 1px solid #CCC; border-left: none; border-right: none; }

/* --- Checkout & Review Pages --- */
.review-container { margin: 1rem; padding: 0 1rem; }

.address-container { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }

.address-block { flex: 1; min-width: 300px; font-size: 1.25rem; line-height: 1.25; }

.section-container { margin-bottom: 2rem; }

.checkout_header { display: block; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #EEE; }

.cart_table { width: 100%; font-size: 1.5rem; border-collapse: collapse; }

.cart_table td, .cart_table th { padding: 0.5rem 0.5rem 0.5rem; /*vertical-align: top;*/ width: 100%; }

.cart_table tbody tr:nth-child(even) { background-color: #EFEFEF; }

.cart_table .summary-label { text-align: right; }

.cart_table .summary-value { text-align: right; }

.actions-container { margin-top: 2rem; display: flex; justify-content: space-between; align-items: center; }

.actions-container button:disabled { background-color: #A0AEC0; cursor: not-allowed; opacity: 0.8; }

/* --- Shipping Method Section (Checkout) --- */
#shipping-method-container { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

#shipping-rate-select { padding: 0.75rem 2.5rem 0.75rem 0.75rem; font-size: 1.25rem; border-radius: 4px; border: 1px solid #CCC; background-color: white; }

#shipping-rate-select:disabled { background-color: #F3F4F6; cursor: not-allowed; }

#shipping-loader-container { display: flex; align-items: center; gap: 1rem; color: #555; }

.shipping-loader { display: inline-block; border: 4px solid #F3F3F3; border-top: 4px solid #3498DB; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    
    100% { transform: rotate(360deg); }
}

/* --- Custom Select Styles (Checkout) --- */
.custom-select-wrapper { position: relative; }

.custom-select-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.custom-select-wrapper::after { content: ' '; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: center; pointer-events: none; }

.remember_signup { font-size: 1.5em; }

/*
--------------------------------------------------------------------------
 Responsive Media Queries
--------------------------------------------------------------------------
*/
@media screen and (max-width: 1165px) {
    .nav { flex-direction: column; align-items: center; }
    
    .nav-links { flex-wrap: wrap; justify-content: center; }
}

@media screen and (max-width: 865px) {
    :root { --top_margin:3em; --section_pad:1rem; --text_normal:1.5rem; --text_header:2.5rem; --text_menu:1.75rem; --text_copyright:0.7em; }
    
    .nav { flex-direction: column; align-items: center; }
    
    .nav-links { flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; }
}

@media screen and (max-width: 815px) {
    .treatmentPlans { grid-template-columns: auto; }
    
    .treatmentPlans img { box-shadow:var(--shadow1); width: 100%; max-width: 600px; }
    
    .shakes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1em; }
    
    .howItWorks { padding:var(--section_pad) 2rem 2rem; }
}