/* layout/shell.css — talkit.ca shell (Phase 3.3). Loaded after Foundation; wins on specificity/order.
   Scope: header, footer, nav, tabs, buttons, forms, tables. No page-specific rules.
   Tokens: docs/visual-direction.md */

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; overflow-x: hidden; background: #ffffff; }
body {
	font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px; line-height: 1.5; color: #333333;
	text-align: left; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: inherit; font-weight: 600; color: #333333; line-height: 1.25; margin: 0 0 .5em; text-align: left; }
h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; }
p, ul, ol, table { font-size: 16px; }
small, .small { font-size: 14px; }
a { color: #0092cf; text-decoration: none; }
a:hover { color: #0072a3; text-decoration: underline; }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 2px solid #0072a3; outline-offset: 2px; }
hr { border: 0; border-top: 1px solid #e2e2e2; margin: 24px 0; }
img { max-width: 100%; height: auto; }

.shell-inner { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.shell-header { border-bottom: 1px solid #e2e2e2; background: #ffffff; }
.shell-header .shell-inner { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; padding-top: 16px; padding-bottom: 12px; }
.shell-brand { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.shell-logo img { display: block; height: 56px; width: auto; }
.shell-menu { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

/* Account bar */
.shell-account { min-height: 36px; margin-bottom: 8px; }
.shell-account-links { list-style: none; margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; gap: 4px 20px; font-size: 14px; }
.shell-account-links li { margin: 0; }
.shell-account-links a { color: #8a8a8a; }
.shell-account-links a:hover { color: #0072a3; }
.shell-login { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; gap: 8px; margin: 0; }
.shell-login input[type="text"], .shell-login input[type="password"] { width: 170px; height: 36px; margin: 0; }
.shell-login .shell-forgot { font-size: 14px; color: #8a8a8a; -webkit-flex-basis: 100%; flex-basis: 100%; text-align: right; }

/* Nav */
.shell-nav ul { list-style: none; margin: 0; padding: 0; }
.shell-nav > ul { display: -webkit-flex; display: flex; gap: 32px; }
.shell-nav > ul > li { position: relative; margin: 0; }
.shell-nav > ul > li > a { display: block; padding: 6px 0; font-size: 17px; font-weight: 400; color: #333333; border-bottom: 2px solid transparent; }
.shell-nav > ul > li > a:hover, .shell-nav > ul > li.is-active > a { color: #0092cf; text-decoration: none; border-bottom-color: #0092cf; }
.shell-nav li.has-sub > ul {
	display: none; position: absolute; top: 100%; left: 0; z-index: 50; min-width: 260px;
	background: #ffffff; border: 1px solid #e2e2e2; box-shadow: 0 6px 16px rgba(0,0,0,.08); padding: 6px 0;
}
.shell-nav li.has-sub:hover > ul, .shell-nav li.has-sub:focus-within > ul { display: block; }
.shell-nav li.has-sub > ul a { display: block; padding: 8px 16px; color: #333333; font-size: 15px; }
.shell-nav li.has-sub > ul a:hover { background: #f6f6f6; color: #0072a3; text-decoration: none; }

/* Hamburger */
.shell-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.shell-burger span { display: block; width: 24px; height: 2px; background: #333333; margin: 5px 0; }

/* Notices under header */
.shell-notice { background: #fff4e5; border-top: 1px solid #f7941d; font-size: 14px; }
.shell-notice .shell-inner { padding-top: 8px; padding-bottom: 8px; }
.shell-notice a { color: #333333; font-weight: 600; }
.shell-notice-error { background: #fdecec; border-top-color: #c0392b; color: #c0392b; }

/* ---------- Main ---------- */
.shell-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; min-height: 40vh; }
.shell-main > .row { max-width: none; margin-left: -15px; margin-right: -15px; }

/* ---------- Homepage hero (layout/hero.php) — overrides #rotate1/#box rules in styles_newheader.css ---------- */
.shell-hero { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.shell-hero #rotate1 { float: none; position: relative; top: auto; left: auto; height: auto; width: 626px; max-width: 100%; z-index: 1; -webkit-flex: 0 1 626px; flex: 0 1 626px; }
.shell-hero .slideshow { position: relative; width: 100%; }
.shell-hero .slideshow a { display: block; }
.shell-hero .slideshow img { display: block; width: 100%; height: auto; border: 0; }
.shell-hero-arrow { position: absolute; top: 50%; z-index: 5; margin-top: -32px; }
.shell-hero-prev { left: -8px; }
.shell-hero-next { right: -8px; }
.shell-hero-arrow a { display: block; padding: 0 8px; font-size: 64px; line-height: 1; color: #0092cf; text-decoration: none; text-shadow: 0 0 6px #ffffff; }
.shell-hero-boxes { -webkit-flex: 0 0 255px; flex: 0 0 255px; }
.shell-hero-boxes #box1, .shell-hero-boxes #box2, .shell-hero-boxes #box3 { float: none; position: static; top: auto; left: auto; margin: 0 0 8px; }
@media (max-width: 1024px) {
	.shell-hero { -webkit-justify-content: center; justify-content: center; }
	.shell-hero-boxes { display: -webkit-flex; display: flex; -webkit-flex: 1 1 100%; flex: 1 1 100%; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; gap: 8px; }
	.shell-hero-boxes > div { margin: 0 !important; }
}
@media (max-width: 767px) { .shell-hero-arrow { display: none; } }

/* ---------- Portal tabs (linedetail, e911, forwarding, calllogs, porting, voicemail) ---------- */
.shell-tabs { list-style: none; margin: 0 0 24px; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid #e2e2e2; }
.shell-tabs li { margin: 0; }
.shell-tabs a { display: block; padding: 8px 0 10px; color: #8a8a8a; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.shell-tabs a:hover { color: #0072a3; text-decoration: none; }
.shell-tabs li.is-active a { color: #0092cf; border-bottom-color: #0092cf; font-weight: 600; }

/* ---------- Buttons ---------- */
.shell-btn, .button, button, input[type="submit"], input[type="button"] {
	display: inline-block; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
	padding: 10px 18px; border-radius: 3px; border: 1px solid transparent; cursor: pointer;
	text-decoration: none; text-align: center; margin: 0; transition: none;
}
.shell-btn-primary, .button, button, input[type="submit"], input[type="button"] { background: #0092cf; color: #ffffff; }
.shell-btn-primary:hover, .button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: #0072a3; color: #ffffff; text-decoration: none; }
.shell-btn-accent { background: #f7941d; color: #ffffff; }
.shell-btn-accent:hover { background: #e2851a; color: #ffffff; text-decoration: none; }
.shell-btn-outline { background: #ffffff; color: #0092cf; border-color: #0092cf; }
.shell-btn-outline:hover { background: #f6f6f6; color: #0072a3; text-decoration: none; }
.shell-btn-small, .button.small { font-size: 14px; padding: 7px 12px; }
.shell-account .shell-login-mobile { display: none; }

/* ---------- Forms ---------- */
label { font-size: 14px; color: #333333; font-weight: 600; margin-bottom: 4px; display: block; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
	font-family: inherit; font-size: 16px; color: #333333; background: #ffffff;
	border: 1px solid #e2e2e2; border-radius: 3px; padding: 8px 10px; height: 40px; margin: 0 0 12px;
	box-shadow: none; width: 100%; box-sizing: border-box;
}
textarea { height: auto; min-height: 120px; }
input:focus, select:focus, textarea:focus { border-color: #0092cf; background: #ffffff; }
fieldset, .panel { border: 1px solid #e2e2e2; background: #f6f6f6; padding: 16px; margin: 0 0 24px; border-radius: 3px; }
span.error, .error { color: #c0392b; }
span.success, .success { color: #1e7e34; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; border: 0; margin: 0 0 24px; background: #ffffff; }
table th, table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e2e2e2; font-size: 15px; vertical-align: top; }
table th { font-weight: 600; background: #f6f6f6; color: #333333; }
table tr:nth-child(even) td { background: #fafafa; }

/* ---------- Footer ---------- */
.shell-footer { border-top: 1px solid #e2e2e2; background: #f6f6f6; color: #8a8a8a; font-size: 14px; padding: 32px 0 24px; }
.shell-footer h3 { font-size: 16px; font-weight: 600; color: #333333; margin-bottom: 8px; }
.shell-footer ul { list-style: none; margin: 0; padding: 0; }
.shell-footer li { margin: 0 0 4px; }
.shell-footer a { color: #8a8a8a; }
.shell-footer a:hover { color: #0072a3; }
.shell-footer-cols { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 24px 40px; }
.shell-footer-cols > div { -webkit-flex: 1 1 140px; flex: 1 1 140px; }
.shell-footer-mail { -webkit-flex: 1 1 240px !important; flex: 1 1 240px !important; }
.shell-footer-mail input[type="text"] { margin-bottom: 8px; }
.shell-footer-msg { margin: 8px 0 0; }
.shell-footer-base { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; gap: 12px; border-top: 1px solid #e2e2e2; margin-top: 24px; padding-top: 16px; }
.shell-footer-base img { height: 28px; width: auto; vertical-align: middle; margin-right: 12px; }
.shell-social { display: -webkit-flex; display: flex; gap: 12px; }
.shell-social img { height: 24px; width: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.shell-header .shell-inner { display: block; padding-top: 12px; padding-bottom: 8px; }
	.shell-logo img { height: 44px; }
	.shell-burger { display: block; }
	.shell-menu { display: none; -webkit-align-items: stretch; align-items: stretch; padding-top: 12px; }
	.shell-menu.is-open { display: -webkit-flex; display: flex; }
	.shell-account { margin-bottom: 12px; }
	.shell-account-links { display: block; }
	.shell-account-links li { margin: 0 0 6px; }
	.shell-account-links a { display: block; padding: 8px 0; font-size: 16px; }
	.shell-login { display: none; }
	.shell-account .shell-login-mobile { display: inline-block; margin: 0 8px 8px 0; }
	.shell-nav > ul { display: block; }
	.shell-nav > ul > li > a { padding: 10px 0; border-bottom: 1px solid #e2e2e2; }
	.shell-nav li.has-sub > ul { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; }
	.shell-nav li.has-sub > ul a { padding: 8px 0; color: #8a8a8a; }
	.shell-main { padding: 16px 16px 40px; }
	.shell-tabs { gap: 0 16px; }
	.shell-footer-cols > div { -webkit-flex-basis: 40%; flex-basis: 40%; }
	.shell-footer-mail { -webkit-flex-basis: 100% !important; flex-basis: 100% !important; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Legacy — carried from the old header <style> block for order-page custom dropdowns. Remove in v2. ---------- */
form.custom div.custom.dropdown a.selector { display: block; height: 44px; position: absolute; right: 0; top: 0; width: 52px; }
form.custom div.custom.dropdown a.current { background-color: #FFFFFF; border-right: 3px solid #bbbbbb; color: #141414; display: block; line-height: 26px; min-height: 60px; padding: 10px; text-align: left; width: 88.5%; }
form.custom .custom.dropdown { border: 2px #a8a8a8 solid; background: white; box-shadow: none; display: block; font-weight: 300; font-size: 34px; height: 64px; margin-bottom: .5em; margin-top: 0; padding: 0; position: relative; top: 0; vertical-align: top; width: 100%; }
form.custom .custom.dropdown:first-child { border: 1px solid #A8A8A8; height: 66px; margin-bottom: 10px; }
form.custom .custom { background: white; border: 1px solid #CCCCCC; display: inline-block; height: 16px; position: relative; top: -1px; vertical-align: middle; width: 60px; }
form.custom .custom.dropdown .selector:after, form.custom .custom.dropdown:hover a.selector:after, form.custom .custom.dropdown.open a.selector:after { border-color: #bbbbbb transparent transparent; border-style: solid inset inset; border-width: 10px; content: ""; display: block; height: 0; left: 0.5em; margin-top: 3px; position: absolute; top: 50%; width: 0; cursor: pointer; }
form.custom .custom.dropdown.open.medium ul { min-width: 530px; }
form.custom .custom.dropdown ul { max-height: 300px; overflow: auto; }

/* W1 — login / forgot password / logout */
.w1-auth { margin: 2rem auto 3rem; float: none; }
.w1-auth h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.w1-auth label { font-weight: 600; margin-top: 0.75rem; }
.w1-auth-links { margin-top: 1rem; font-size: 0.9rem; }
.w1-msg { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 3px; border: 1px solid transparent; }
.w1-msg-error { background: #fbe9e7; border-color: #e57373; color: #b71c1c; }
.w1-msg-success { background: #e8f5e9; border-color: #81c784; color: #1b5e20; }

.w1-auth { padding-left: 16px; padding-right: 16px; }
.w1-auth p { text-align: left; }

/* W2 — customer_orders (dashboard) */
.w2-orders { margin: 1.5rem auto 3rem; float: none; padding-left: 16px; padding-right: 16px; }
.w2-orders h1 { margin-bottom: 1rem; }
.w2-device { border: 1px solid #e2e2e2; border-radius: 4px; margin-bottom: 1.5rem; background: #fff; }
.w2-device-head { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; gap: 8px 16px; padding: 12px 16px; background: #f6f6f6; border-bottom: 1px solid #e2e2e2; }
.w2-device-title { font-size: 16px; }
.w2-mac { color: #666; margin-left: 8px; font-family: monospace; }
.w2-device-actions { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; }
.w2-device-actions .button, .w2-lines .button { margin: 0; }
.w2-device-foot { padding: 12px 16px; border-top: 1px solid #e2e2e2; }
.w2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.w2-lines { width: 100%; margin: 0; border: 0; }
.w2-lines th, .w2-lines td { padding: 10px 12px; vertical-align: top; text-align: left; font-size: 15px; }
.w2-lines thead th { background: #fff; border-bottom: 2px solid #e2e2e2; font-weight: 600; }
.w2-lines tbody tr:nth-child(even) { background: #f8f8f8; }
.w2-lines tbody tr:nth-child(odd) { background: #fff; }
.w2-ld .button, .w2-actions .button { margin-right: 4px; margin-bottom: 4px; }
.w2-reason { font-size: 13px; color: #666; margin-top: 4px; }
.w2-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; background: #eee; color: #444; white-space: nowrap; }
.w2-badge-error { background: #fbe9e7; color: #b71c1c; }
.w2-badge-success { background: #e8f5e9; color: #1b5e20; }
.w2-linedetail { width: 100%; height: 600px; border: 1px solid #e2e2e2; margin-top: 1rem; }

.w2-lines th, .w2-lines td { white-space: nowrap; }
.w2-lines td .w2-reason { white-space: normal; }

/* W3 */
.w3-orderlist h1, .w3-renewals h1, .w3-invoice h1 { margin-bottom: 1rem; }
.w3-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.w3-table th, .w3-table td { padding: .6rem .75rem; border-bottom: 1px solid #e1e4e8; text-align: left; vertical-align: middle; white-space: nowrap; }
.w3-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; border-bottom: 2px solid #d5d9de; background: #f7f8fa; }
.w3-table tbody tr:hover { background: #fafbfc; }
.w3-table .w3-num { text-align: right; font-variant-numeric: tabular-nums; }
.w3-table .w3-act { text-align: right; }
.w3-table .button.tiny { margin: 0; }
.w3-table .w3-check { width: 2.5rem; text-align: center; }
.w3-table .w3-check input { margin: 0; }
.w3-table tr.w3-group td { background: #eef1f5; font-weight: 600; color: #374151; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

/* W4 */
.w4-notice { padding-top: 1.5rem; padding-bottom: 2rem; }
.w4-notice h2 { margin-bottom: 1rem; }
.w4-notice p { margin-bottom: 1rem; line-height: 1.5; }
.w4-actions { margin-top: 1.5rem; }
.w4-actions .button { margin-bottom: 0; white-space: normal; text-align: left; }

.w4-rmas { padding-top: 1.5rem; padding-bottom: 2rem; }
.w4-rmas h2 { margin-bottom: 1rem; }
.w4-mac { font-family: monospace; white-space: nowrap; }
.w4-appt { display: block; margin-bottom: 0.4rem; white-space: nowrap; }
.w4-rma-table .button.tiny { margin-bottom: 0; }

.w4-form { padding-top: 1.5rem; padding-bottom: 2rem; }
.w4-form h2 { margin-bottom: 1rem; }
.w4-form p { margin-bottom: 1rem; line-height: 1.5; }
.w4-fieldset { border: 1px solid #ddd; border-radius: 3px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.w4-fieldset legend { font-weight: bold; padding: 0 0.5rem; }
.w4-fieldset label { margin-bottom: 0.75rem; }
.w4-email { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.w4-email .button { margin-bottom: 0; }
.w4-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.w4-checkbox input { margin: 0.25rem 0 0; }

.w4-captcha { margin: 0.5rem 0 0.25rem; overflow-x: auto; }
.w4-actions .button + .button { margin-left: 0.5rem; }

.w4-ad { padding-top: 1.5rem; padding-bottom: 2rem; }
.w4-ad img { max-width: 100%; height: auto; }


/* W5 */
.w5-home { padding-top: 1.5rem; padding-bottom: 2rem; }
.w5-cards { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; }
.w5-card { flex: 1 1 260px; background: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 4px; padding: 1.25rem; }
.w5-card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.w5-card p { margin-bottom: 0.75rem; line-height: 1.5; }
.w5-card .w4-actions { margin-top: 1rem; margin-bottom: 0; }
.w5-activate { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.5rem; }
.w5-activate input[type="text"] { flex: 1 1 auto; margin: 0; min-width: 0; }
.w5-activate .button { margin: 0; white-space: nowrap; }
.w5-help { font-size: 0.85rem; }

.w5-faq-side { padding-top: 1.5rem; padding-bottom: 1rem; }
.w5-faq-side h3 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.w5-faq-side h3:first-child { margin-top: 0; }
.w5-side-list { list-style: none; margin: 0; padding: 0; }
.w5-side-list li { margin: 0 0 0.4rem; line-height: 1.4; font-size: 0.92rem; }
.w5-faq-main { padding-top: 1.5rem; padding-bottom: 2rem; }
.w5-faq-main h2 { margin-bottom: 1rem; }
.w5-search { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.w5-search input[type="text"] { flex: 1 1 auto; margin: 0; min-width: 0; }
.w5-search .button { margin: 0; white-space: nowrap; }
.w5-faq-cats { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.w5-faq-cat { flex: 1 1 280px; border-top: 2px solid #f1a11a; padding-top: 0.75rem; }
.w5-faq-cat h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.w5-faq-cat h3 span { color: #888; font-weight: normal; }
.w5-faq-cat ul { list-style: none; margin: 0; padding: 0; }
.w5-faq-cat li { margin: 0 0 0.4rem; line-height: 1.4; }
.w5-new { color: #c00; font-size: 0.7em; }
.w5-result-count { font-size: 1.05rem; margin: 0 0 1rem; }
.w5-results { list-style: none; margin: 0; padding: 0; }
.w5-result { border-bottom: 1px solid #e3e3e3; padding: 0.75rem 0; }
.w5-result > a { font-weight: bold; }
.w5-snippet { margin: 0.3rem 0 0; font-size: 0.92rem; color: #555; }

.w5-ld { padding-top: 1rem; padding-bottom: 1rem; }
.w5-ld h2 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.w5-ld-hero { display: block; max-width: 100%; height: auto; margin: 0.5rem auto 0; }
.w5-ld-rates { max-height: 420px; overflow-y: auto; }
.w5-ld-rates thead th { position: sticky; top: 0; background: #f6f6f6; }
.w5-ld label { margin-bottom: 0.75rem; }
.w5-ld-note { font-size: 0.85rem; color: #777; margin-top: 1rem; }

.w5-crumb { font-size: 0.9rem; color: #777; margin-bottom: 0.25rem; }
.w5-answer { line-height: 1.6; margin-top: 1rem; }
.w5-answer img, .w5-answer iframe { max-width: 100%; }

.w5-ld-rates .w3-table { min-width: 0; width: 100%; table-layout: auto; }
.w5-ld-rates .w3-table th, .w5-ld-rates .w3-table td { white-space: normal; padding-left: 0.6rem; padding-right: 0.6rem; }
.w5-ld-rates .w3-table td.w3-num { white-space: nowrap; }

.w5-ld-rates { overflow-x: hidden; }
.w5-ld-rates .w3-table { table-layout: fixed; }
.w5-ld-rates .w3-table th:nth-child(1) { width: 36%; }
.w5-ld-rates .w3-table th:nth-child(2) { width: 42%; }
.w5-ld-rates .w3-table th:nth-child(3) { width: 22%; }
.w5-ld-rates .w3-table td { overflow-wrap: anywhere; }


/* W6 */
@media (max-width: 767px) {
.shell-hero { gap: 16px; }
.shell-hero #rotate1 { width: 100%; -webkit-flex: 1 1 100%; flex: 1 1 100%; overflow: hidden; }
.shell-hero .slideshow { width: 100% !important; height: auto !important; }
.shell-hero .slideshow > a { display: block !important; width: 100% !important; height: auto !important; top: 0 !important; left: 0 !important; }
.shell-hero .slideshow > a:first-child { position: relative !important; }
.shell-hero-boxes { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; }
.shell-hero-boxes > div { max-width: 100%; }
}
.w6-steps { list-style: none; margin: 0 0 24px; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.w6-steps li { -webkit-flex: 1 1 0; flex: 1 1 0; min-width: 110px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 3px solid #e2e2e2; color: #8a8a8a; font-size: 13px; line-height: 1.3; }
.w6-steps .w6-step-n { display: -webkit-inline-flex; display: inline-flex; -webkit-flex: 0 0 22px; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #c8c8c8; color: #fff; font-size: 12px; font-weight: bold; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.w6-steps .w6-done { border-color: #0092cf; color: #555; }
.w6-steps .w6-done .w6-step-n { background: #0092cf; }
.w6-steps .w6-current { border-color: #0072a3; color: #0072a3; font-weight: bold; }
.w6-steps .w6-current .w6-step-n { background: #0072a3; }
@media (max-width: 767px) {
.w6-steps li { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-width: 0; }
.w6-steps li .w6-step-label { display: none; }
.w6-steps li.w6-current { -webkit-flex: 1 1 auto; flex: 1 1 auto; }
.w6-steps li.w6-current .w6-step-label { display: inline; }
}
.shell-tabs li.w6-on a { color: #0072a3; border-bottom-color: #0072a3; font-weight: bold; }

/* W7 */
.w7-crumb { font-size: 0.8rem; opacity: 0.7; margin: 0 0 0.5rem; }
.w7-title { font-size: 1.35rem; margin: 0 0 0.75rem; }
.w7-lead { font-weight: 600; margin: 0 0 0.25rem; }
.w7-price { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 1.1rem; }
.w7-price li { padding: 0.15rem 0; }
.w7-note { margin: 0 0 0.75rem; }
.w7-actions { margin: 1rem 0; }
.w7-btn { margin: 0; }
.w7-fine { font-size: 0.8rem; opacity: 0.75; margin: 0; }
.w7-cart table { width: 100%; }
.w7-cart img { max-width: 100%; height: auto; }
.w7-side-img { display: block; max-width: 100%; height: auto; margin-top: 1rem; }
@media (max-width: 767px) { .w7-title { font-size: 1.15rem; } }
.w7-required { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.75rem; }
.w7-check { display: block; margin: 0 0 0.75rem; font-weight: normal; }
.w7-check input { margin: 0 0.4rem 0 0; }
.w7-captcha { margin: 0.75rem 0; }
.w7-address { font-style: normal; line-height: 1.4; margin: 0 0 1rem; }
.w7-ship td { vertical-align: middle; }
.w7-ship .w7-check { margin: 0; }
.w7-sub { font-size: 1.1rem; margin: 0 0 0.5rem; }
.w7-summary { table-layout: fixed; }
.w7-summary td:last-child { width: 7rem; }
.w7-amt { text-align: right; white-space: nowrap; }
.w7-total-row td { border-top: 1px solid rgba(0,0,0,0.08); }
.w7-grand td { font-weight: 700; }
.w7-cc { display: block; max-width: 100%; height: auto; margin: 0 0 0.75rem; }
.w7-inline { display: flex; gap: 0.5rem; margin: 0 0 1rem; }
.w7-inline select { margin: 0; }
.w7-seal { text-align: center; }
.w7-share { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0 0 1rem; }
.w7-share-item { min-height: 50px; }
@media (max-width: 767px) {
.w6-steps { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
.w6-steps li { padding: 8px 6px; }
.w6-steps li.w6-current { min-width: 0; }
.w6-steps li.w6-current .w6-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.w7-summary td:first-child { padding-right: 0.75rem; }
.w7-summary td:last-child { width: 6rem; }

/* W9 */
body.w9-frame { margin: 0; background: #ffffff; }
.w9-frame-body { padding: 4px 12px 24px; }
.w9-frame .shell-tabs { margin-bottom: 16px; }
.w9-subnav { font-size: 14px; margin: -8px 0 20px; }
.w9-subnav a { margin-right: 16px; }
.w9-balance { font-size: 18px; font-weight: 600; margin: 0 0 16px; }
.w9-balance strong { color: #0092cf; }

.w9-act { margin-right: 10px; white-space: nowrap; font-size: 14px; }
.w9-phone { margin: 0 0 12px; }
.w9-phone input[type="text"] { display: inline-block; width: 5em; margin: 0 4px; }
.w9-frame table td, .w9-frame table th { font-size: 14px; }

.w9-inline { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; -webkit-align-items: flex-start; align-items: flex-start; }
.w9-inline select { width: auto; margin: 0; }
.w9-inline .button { height: 40px; }

/* W10 */
.shell-main p { text-align: left; }
.w10-rowlink { cursor: pointer; }
.w10-rowlink:hover > td { background: #f3f8fc; }
.w10-inline { display: inline; margin: 0; }
.w10-linkbtn { background: none; border: 0; padding: 0; margin: 0 10px 0 0; font: inherit; font-size: 14px; color: #008cba; cursor: pointer; }
.w10-linkbtn:hover { text-decoration: underline; }