/* MoreVision Club – front end (RTL first). Every look-and-feel value is a CSS variable set from the club's design settings. */
:root {
	--mvc-primary: #222; --mvc-accent: #c9a27e;
	--mvc-font: inherit; --mvc-font-size: 15px; --mvc-text: #333; --mvc-link: var(--mvc-primary); --mvc-text-align: right;
	--mvc-title-color: var(--mvc-primary); --mvc-title-size: 24px;
	--mvc-cols: 1fr 1fr; --mvc-form-max: none; --mvc-form-margin: 0 0 0 auto;
	--mvc-form-bg: transparent; --mvc-form-border: transparent; --mvc-form-radius: 12px; --mvc-form-pad: 0px; --mvc-form-shadow: none;
	--mvc-input-bg: #fff; --mvc-input-border: #cfcfcf; --mvc-input-focus: var(--mvc-accent); --mvc-input-text: #222; --mvc-input-radius: 6px; --mvc-input-h: 42px; --mvc-label: #333;
	--mvc-btn-bg: var(--mvc-primary); --mvc-btn-hover: var(--mvc-accent); --mvc-btn-text: #fff; --mvc-btn-radius: 6px; --mvc-btn-h: 44px; --mvc-btn-w: 100%;
	--mvc-box-bg: #fff; --mvc-box-border: #e6e6e6; --mvc-box-hl: #f6f1ea;
}

.mvc-box, .mvc-login, .mvc-register, .mvc-account, .mvc-verify, .mvc-joined, .mvc-terms, .mvc-modal__dialog {
	direction: rtl; text-align: var(--mvc-text-align); box-sizing: border-box; font-family: var(--mvc-font); font-size: var(--mvc-font-size); color: var(--mvc-text); line-height: 1.5;
}
.mvc-box *, .mvc-login *, .mvc-register *, .mvc-verify *, .mvc-modal__dialog * { box-sizing: border-box; font-family: inherit; }
.mvc-box a, .mvc-register a, .mvc-login a, .mvc-account a, .mvc-modal__dialog a { color: var(--mvc-link); }

/* Form container */
.mvc-form { max-width: var(--mvc-form-max); margin: var(--mvc-form-margin); background: var(--mvc-form-bg); border: 1px solid var(--mvc-form-border); border-radius: var(--mvc-form-radius); padding: var(--mvc-form-pad); box-shadow: var(--mvc-form-shadow); }
.mvc-form-head { margin-bottom: 14px; }
.mvc-form-head.mvc-empty, .mvc-form-head[data-mvc-modal] { display: none; }
.mvc-form-title, .mvc-modal__title { margin: 0 0 6px; color: var(--mvc-title-color); font-size: var(--mvc-title-size); line-height: 1.25; font-weight: 700; font-family: inherit; }
.mvc-form-sub { color: var(--mvc-text); opacity: .85; margin: 0 0 6px; }
.mvc-form-sub:empty { display: none; }

/* Fields */
.mvc-fields { display: grid; grid-template-columns: var(--mvc-cols); gap: 6px 14px; margin-bottom: 12px; }
.mvc-field { margin: 0 0 4px; }
.mvc-field label { display: block; font-size: .87em; margin-bottom: 4px; color: var(--mvc-label); font-weight: 500; }
.mvc-req { color: #c0392b; }
.mvc-input { width: 100%; height: var(--mvc-input-h); min-height: var(--mvc-input-h); padding: 6px 12px; border: 1px solid var(--mvc-input-border); border-radius: var(--mvc-input-radius); font-size: 1em; background: var(--mvc-input-bg); color: var(--mvc-input-text); box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s; }
.mvc-input:focus { border-color: var(--mvc-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvc-input-focus) 25%, transparent); }
.mvc-fields:not(.mvc-ph) .mvc-input::placeholder { color: transparent; }
.mvc-fields.mvc-ph .mvc-field:not(.mvc-field--date) label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mvc-code { letter-spacing: 6px; text-align: center; font-size: 1.3em; direction: ltr; }
.mvc-check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: flex-start; font-size: .87em; color: var(--mvc-text); margin: 2px 0; text-align: right; }
.mvc-check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--mvc-primary); }
.mvc-note { margin: 4px 0 8px; opacity: .85; }

/* Buttons */
.mvc-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--mvc-btn-w); height: var(--mvc-btn-h); min-height: var(--mvc-btn-h); padding: 6px 22px; border: 0; border-radius: var(--mvc-btn-radius); background: var(--mvc-btn-bg); color: var(--mvc-btn-text); font-weight: 600; cursor: pointer; font-size: 1em; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s; }
.mvc-btn:hover, .mvc-btn:focus { background: var(--mvc-btn-hover); color: var(--mvc-btn-text); }
.mvc-btn[disabled] { opacity: .6; cursor: default; }
.mvc-btn--ghost { background: transparent; color: var(--mvc-btn-bg); border: 1px solid var(--mvc-btn-bg); margin-top: 6px; width: 100%; }
.mvc-btn--ghost:hover { background: var(--mvc-btn-bg); color: var(--mvc-btn-text); }
.mvc-link { background: none; border: 0; padding: 4px 0; color: var(--mvc-link); text-decoration: underline; cursor: pointer; font-size: .87em; }
.mvc-link[disabled] { opacity: .5; text-decoration: none; cursor: default; }

/* Steps */
.mvc-step { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.mvc-step[hidden] { display: none !important; }
.mvc-step .mvc-input { flex: 1 1 180px; }
.mvc-step .mvc-btn { width: auto; flex: 0 0 auto; }
.mvc-step--register, .mvc-step--details { display: block; }
.mvc-step--details .mvc-btn, .mvc-step--register .mvc-btn { width: var(--mvc-btn-w); }

/* Club box in cart / checkout */
.mvc-box { border: 1px solid var(--mvc-box-border); border-top: 3px solid var(--mvc-accent); border-radius: 10px; padding: 14px 16px; margin: 12px 0; background: var(--mvc-box-bg); font-size: .93em; }
.mvc-box__title { font-weight: 700; margin-bottom: 8px; color: var(--mvc-title-color); }
.mvc-box__note, .mvc-box__cta { opacity: .85; margin: 6px 0; }
.mvc-box__bday, .mvc-box__applied { background: var(--mvc-box-hl); border-radius: 6px; padding: 7px 10px; margin: 6px 0; }
.mvc-box__applied a { margin-inline-start: 6px; }
.mvc-redeem { display: flex; gap: 8px; margin-top: 8px; }
.mvc-redeem .mvc-input { max-width: 120px; }
.mvc-redeem .mvc-btn { width: auto; }

/* Messages */
.mvc-msg { margin-top: 8px; font-size: .87em; color: #2e7d32; }
.mvc-msg:empty { display: none; }
.mvc-msg--err { color: #c0392b; }

/* Modal */
.mvc-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mvc-modal[hidden] { display: none; }
.mvc-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.mvc-modal__dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--mvc-form-radius); padding: 26px 22px; border-top: 4px solid var(--mvc-accent); }
.mvc-modal__dialog .mvc-form { border: 0; padding: 0; box-shadow: none; background: transparent; max-width: none; }
.mvc-modal__sub { margin-bottom: 12px; }
.mvc-modal__close { position: absolute; top: 8px; left: 10px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #666; }
body.mvc-modal-open { overflow: hidden; }

/* My account */
.mvc-account__cards { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.mvc-card { flex: 1 1 140px; border: 1px solid var(--mvc-box-border); border-top: 3px solid var(--mvc-accent); border-radius: 10px; padding: 14px; text-align: center; background: var(--mvc-box-bg); }
.mvc-card__num { font-size: 1.6em; font-weight: 700; color: var(--mvc-title-color); }
.mvc-card__label { font-size: .87em; opacity: .8; }
.mvc-history .mvc-plus { color: #2e7d32; font-weight: 600; }
.mvc-history .mvc-minus { color: #c0392b; font-weight: 600; }
.mvc-balance { display: inline-block; padding: 2px 10px; border-radius: 20px; background: var(--mvc-accent); color: #fff; font-size: 13px; text-decoration: none; }
.mvc-joined { padding: 12px 14px; background: var(--mvc-box-hl); border-radius: 8px; }
.mvc-terms ol { padding-inline-start: 22px; }
.mvc-terms li { margin-bottom: 8px; }

@media (max-width: 600px) {
	.mvc-fields { grid-template-columns: 1fr; }
	.mvc-step .mvc-btn { flex: 1 1 100%; width: 100%; }
}

/* FunnelKit checkout colours every <button> inside #wfacp-e-form ("body #wfacp-e-form button[type=button]:not(...)"), which gave the club buttons its colour with grey text. */
#wfacp-e-form .mvc-box .mvc-btn,
#wfacp-e-form .mvc-box .mvc-btn:focus { background: var(--mvc-btn-bg) !important; color: var(--mvc-btn-text) !important; border: 0 !important; border-radius: var(--mvc-btn-radius) !important; box-shadow: none !important; text-transform: none; letter-spacing: normal; }
#wfacp-e-form .mvc-box .mvc-btn:hover { background: var(--mvc-btn-hover) !important; color: var(--mvc-btn-text) !important; }
#wfacp-e-form .mvc-box .mvc-btn--ghost,
#wfacp-e-form .mvc-box .mvc-btn--ghost:focus { background: transparent !important; color: var(--mvc-btn-bg) !important; border: 1px solid var(--mvc-btn-bg) !important; }
#wfacp-e-form .mvc-box .mvc-btn--ghost:hover { background: var(--mvc-btn-bg) !important; color: var(--mvc-btn-text) !important; }
#wfacp-e-form .mvc-box .mvc-link { background: transparent !important; color: var(--mvc-link) !important; border: 0 !important; box-shadow: none !important; }