/* ==========================================================================
   My Spectacles – footer (reviews, newsletter, link columns, bottom bar)
   Markup: inc/footer.php
   ========================================================================== */

/* Social icons: 5-glyph subset of Font Awesome Free Brands (SIL OFL / CC BY 4.0), see assets/fonts/ms-social-LICENSE.txt */
@font-face { font-family: "ms-social"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ms-social.woff2") format("woff2"); }

/* The old Elementor / Astra footers are never shown when this one is on. */
body.ms-has-footer .elementor-location-footer,
body.ms-has-footer footer#colophon,
body.ms-has-footer .site-footer:not(.ms-ft) { display: none !important; }

.ms-ft {
	--ft-bg: #272c66;
	--ft-bg-2: #1f2354;
	--ft-navy: #333974;
	--ft-purple: #575d9b;
	--ft-ink: #1d1f2b;
	--ft-soft: #f4f5fa;
	--ft-line: rgba(255, 255, 255, .16);
	--ft-font: "Poppins", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--ft-font);
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
	clear: both;
}
.ms-ft *,
.ms-ft *::before,
.ms-ft *::after { box-sizing: border-box; }
:where(.ms-ft) ul { list-style: none; margin: 0; padding: 0; }
:where(.ms-ft) a { color: inherit; text-decoration: none; }
:where(.ms-ft) p { margin: 0; }
.ms-ft :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.ms-ft__wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 20px; }

/* ---------- 1. Reviews ---------- */
.ms-ft__reviews { background: var(--ft-soft); color: var(--ft-ink); padding: 40px 0 48px; }

/* ---------- 2. Newsletter (card straddles white page / dark footer) ---------- */
.ms-ft__news { position: relative; z-index: 1; padding: 44px 0 0; background: linear-gradient(to bottom, #fff 0, #fff 50%, var(--ft-bg) 50%, var(--ft-bg) 100%); }
.ms-ft__reviews + .ms-ft__news { background: linear-gradient(to bottom, var(--ft-soft) 0, var(--ft-soft) 50%, var(--ft-bg) 50%, var(--ft-bg) 100%); padding-top: 0; }
.ms-ft__news-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 28px 48px; padding: 36px 44px; border-radius: 22px; color: var(--ft-ink); background: linear-gradient(313deg, #d1e3e3 38%, #ecebd7 57%); box-shadow: 0 18px 44px rgba(20, 24, 70, .22); }
.ms-ft__news-copy h2 { margin: 0 0 6px; font-family: var(--ft-font); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; color: var(--ft-navy); }
.ms-ft__news-copy p { font-size: 15px; color: #3a3a3a; max-width: 46ch; }
.ms-ft__news-perks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; margin-top: 18px; }
.ms-ft__news-perks li { display: flex; align-items: center; gap: 10px; padding-right: 22px; font-weight: 500; font-size: 14.5px; color: var(--ft-navy); }
.ms-ft__news-perks li + li { padding: 0 0 0 22px; border-left: 1px solid rgba(51, 57, 116, .3); }
.ms-ft__news-perks svg { flex: none; color: var(--ft-navy); }
.ms-ft__terms { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: #4a4d5c; }
.ms-ft__terms a { color: var(--ft-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* WPForms [wpforms id="24686"] – one row: fields + button */
.ms-ft__form .wpforms-container { margin: 0 !important; max-width: none !important; }
.ms-ft__form form.wpforms-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; margin: 0; padding: 0; }
.ms-ft__form .wpforms-field-container { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; }
.ms-ft__form .wpforms-field { flex: 1 1 180px; margin: 0 !important; padding: 0 !important; }
.ms-ft__form .wpforms-field-label,
.ms-ft__form .wpforms-field-sublabel { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ms-ft__form .wpforms-field input[type="email"],
.ms-ft__form .wpforms-field input[type="text"],
.ms-ft__form .wpforms-field input[type="tel"] { width: 100% !important; max-width: none !important; height: 52px !important; margin: 0; padding: 0 22px !important; font-family: var(--ft-font) !important; font-size: 15px !important; color: var(--ft-ink) !important; background: #fff !important; border: 2px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; transition: border-color .2s, box-shadow .2s; }
.ms-ft__form .wpforms-field input:focus { border-color: var(--ft-purple) !important; box-shadow: 0 0 0 3px rgba(87, 93, 155, .22) !important; outline: 0; }
.ms-ft__form .wpforms-field input::placeholder { color: #7a7f8e; opacity: 1; }
.ms-ft__form .wpforms-submit-container { flex: none; margin: 0 !important; padding: 0 !important; }
.ms-ft__form button.wpforms-submit,
.ms-ft__form .wpforms-submit { height: 52px !important; margin: 0 !important; padding: 0 34px !important; font-family: var(--ft-font) !important; font-weight: 600 !important; font-size: 15px !important; color: #fff !important; background: var(--ft-navy) !important; border: 2px solid var(--ft-navy) !important; border-radius: 999px !important; box-shadow: none !important; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.ms-ft__form .wpforms-submit:hover { background: var(--ft-ink) !important; border-color: var(--ft-ink) !important; transform: translateY(-1px); }
.ms-ft__form .wpforms-error,
.ms-ft__form label.wpforms-error { display: block; margin-top: 6px; padding-left: 20px; font-size: 13px; color: #b4001e !important; }
.ms-ft__form .wpforms-confirmation-container-full,
.ms-ft__form .wpforms-confirmation-container { margin: 0 !important; padding: 14px 20px !important; font-size: 15px; font-weight: 500; color: #14532d !important; background: #e6f6ea !important; border: 1px solid #b6e2c2 !important; border-radius: 14px; }
.ms-ft__form .wpforms-confirmation-container-full p { margin: 0; }
.ms-ft__form .wpforms-field-hp,
.ms-ft__form .wpforms-recaptcha-container { flex-basis: 100%; }

/* ---------- 3. Link columns ---------- */
.ms-ft__main { background: var(--ft-bg); padding: 56px 0 44px; }
.ms-ft__news + .ms-ft__main { padding-top: 56px; }
.ms-ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px 48px; }
.ms-ft__logo { display: inline-block; margin-bottom: 18px; background: none; }
.ms-ft__logo .ms-hd__logo-img { display: block; width: 150px; height: auto; max-height: 68px; object-fit: contain; background: none; }
.ms-ft__logo--mono .ms-hd__logo-img { filter: brightness(0) invert(1); } /* one-colour white version of the normal logo */
.ms-ft__logo .ms-hd__logo-text { color: #fff; font-weight: 700; font-size: 1.35rem; }
.ms-ft__about { max-width: 38ch; color: rgba(255, 255, 255, .82); }
.ms-ft__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ms-ft__soc { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #fff; font-size: 13px; font-weight: 500; border: 1px solid var(--ft-line); border-radius: 999px; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.ms-ft__soc:hover { background: #fff; color: var(--ft-navy); border-color: #fff; transform: translateY(-2px); }
.ms-ft__soc[class*="ms-ft__soc--"] { width: 42px; padding: 0; }
.ms-ft__soc-ico::before { display: block; font-family: "ms-social"; font-weight: 400; font-style: normal; font-size: 18px; line-height: 1; -webkit-font-smoothing: antialiased; }
.ms-ft__soc--facebook .ms-ft__soc-ico::before { content: "\f39e"; }
.ms-ft__soc--instagram .ms-ft__soc-ico::before { content: "\f16d"; }
.ms-ft__soc--pinterest .ms-ft__soc-ico::before { content: "\f231"; }
.ms-ft__soc--youtube .ms-ft__soc-ico::before { content: "\f167"; }
.ms-ft__soc--tiktok .ms-ft__soc-ico::before { content: "\e07b"; }

.ms-ft__title { margin: 0 0 12px; font-family: var(--ft-font); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.ms-ft__acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: default; pointer-events: none; }
.ms-ft__chev { display: none; flex: none; transition: transform .25s; }
.ms-ft__panel { display: block; }
.ms-ft__list li { margin: 0; }
.ms-ft__list a { display: inline-block; padding: 5px 0; font-size: 15px; color: rgba(255, 255, 255, .82); transition: color .15s, transform .15s; }
.ms-ft__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 4. Bottom bar ---------- */
.ms-ft__bar { background: var(--ft-bg-2); color: rgba(255, 255, 255, .78); font-size: 13.5px; }
.ms-ft__bar-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding-block: 16px; }
.ms-ft__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ms-ft__card { display: flex; height: 26px; overflow: hidden; line-height: 0; background: #fff; border-radius: 5px; }
.ms-ft__card img { display: block; width: auto; height: 26px; }
.ms-ft__chip { display: flex; align-items: center; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--ft-ink); background: #fff; border-radius: 5px; }
.ms-ft__country { color: #fff; }
.ms-ft__country .mys-cs-btn { font-size: 13.5px; border-color: var(--ft-line); }
.ms-ft__country .mys-cs-list { top: auto; bottom: calc(100% + 6px); }

/* ---------- Tablet / phone ---------- */
@media (max-width: 1024px) {
	.ms-ft__grid { grid-template-columns: 1fr 1fr 1fr; }
	.ms-ft__brand { grid-column: 1 / -1; }
	.ms-ft__news-card { grid-template-columns: 1fr; padding: 30px 28px; gap: 18px; }
	.ms-ft__news-copy p { max-width: none; }
}
@media (max-width: 767px) {
	.ms-ft__reviews { padding: 36px 0 40px; }
	.ms-ft__news-card { grid-template-columns: 1fr; padding: 26px 20px; border-radius: 18px; }
	.ms-ft__form form.wpforms-form,
	.ms-ft__form .wpforms-field-container { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
	.ms-ft__form .wpforms-field-container { flex: none; }
	.ms-ft__form .wpforms-field { flex: none; }
	.ms-ft__form .wpforms-submit-container { width: 100%; }
	.ms-ft__form .wpforms-submit { width: 100% !important; }
	.ms-ft__main,
	.ms-ft__news + .ms-ft__main { padding: 30px 0 14px; }
	.ms-ft__grid { grid-template-columns: 1fr; gap: 0; }
	.ms-ft__brand { padding-bottom: 22px; }
	.ms-ft__logo { margin-bottom: 12px; }
	.ms-ft__logo .ms-hd__logo-img { width: 132px; }
	.ms-ft__about { max-width: none; font-size: 14px; line-height: 1.55; }
	.ms-ft__social { margin-top: 16px; }

	/* Link columns become accordions (footer.js adds .ms-ft--acc; without JS they just stay open) */
	.ms-ft--acc .ms-ft__col { border-top: 1px solid var(--ft-line); }
	.ms-ft--acc .ms-ft__col:last-child { border-bottom: 1px solid var(--ft-line); }
	.ms-ft--acc .ms-ft__title { margin: 0; }
	.ms-ft--acc .ms-ft__acc { padding: 15px 0; cursor: pointer; pointer-events: auto; }
	.ms-ft--acc .ms-ft__chev { display: block; }
	.ms-ft--acc .ms-ft__col.is-open .ms-ft__chev { transform: rotate(180deg); }
	.ms-ft--acc .ms-ft__panel { display: none; padding-bottom: 12px; }
	.ms-ft--acc .ms-ft__col.is-open .ms-ft__panel { display: block; }

	.ms-ft__bar-in { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 12px; padding-block: 16px 20px; }
	.ms-ft__pay { order: 1; flex: 1 1 100%; }
	.ms-ft__country { order: 2; }
	.ms-ft__copy { order: 3; flex: 1 1 100%; font-size: 12.5px; opacity: .85; }
}
@media (max-width: 480px) {
	.ms-ft__news-perks { gap: 8px 0; }
	.ms-ft__news-perks li { flex: 1 1 100%; padding-right: 0; }
	.ms-ft__news-perks li + li { padding-left: 0; border-left: 0; }
}
@media (max-width: 420px) {
	.ms-ft__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-ft *, .ms-ft *::before, .ms-ft *::after { transition: none !important; }
}