:root {--msfo-primary: #007bff;--msfo-primary-hover: #0056b3;--msfo-success: #28a745;--msfo-danger: #dc3545;--msfo-warning: #ffc107;--msfo-gray-100: #f8f9fa;--msfo-gray-200: #e9ecef;--msfo-gray-300: #dee2e6;--msfo-gray-400: #ced4da;--msfo-gray-500: #adb5bd;--msfo-gray-600: #6c757d;--msfo-gray-700: #495057;--msfo-gray-800: #343a40;--msfo-gray-900: #212529;--msfo-modal-backdrop: rgba(0, 0, 0, 0.5);--msfo-modal-bg: #fff;--msfo-modal-radius: 8px;--msfo-modal-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);--msfo-input-border: var(--msfo-gray-300);--msfo-input-focus: var(--msfo-primary);--msfo-input-radius: 4px;--msfo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--msfo-font-size-base: 16px;--msfo-line-height: 1.5;--msfo-z-modal: 1050;--msfo-z-backdrop: 1040;--msfo-modal-max-width: 32rem;--msfo-modal-padding: 1.5rem;--msfo-modal-padding-mobile: 1rem;--msfo-touch-min: 44px;} .msfo-modal {position: fixed;inset: 0;z-index: var(--msfo-z-modal);display: flex;align-items: center;justify-content: center;padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));box-sizing: border-box;} .msfo-modal__backdrop {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: var(--msfo-modal-backdrop);animation: msfo-fade-in 0.3s ease;} .msfo-modal__container {position: relative;z-index: 1;display: flex;flex-direction: column;width: 100%;max-width: var(--msfo-modal-max-width);max-height: min(90dvh, calc(100vh - 2rem));margin: auto;overflow: hidden;animation: msfo-slide-up 0.3s ease;} .msfo-modal__content {display: flex;flex-direction: column;max-height: inherit;overflow: hidden;background: var(--msfo-modal-bg);border-radius: var(--msfo-modal-radius);box-shadow: var(--msfo-modal-shadow);} .msfo-modal__header {display: flex;flex-shrink: 0;align-items: center;justify-content: space-between;gap: 0.75rem;padding: 1rem var(--msfo-modal-padding);border-bottom: 1px solid var(--msfo-gray-200);} .msfo-modal__title {margin: 0;font-size: clamp(1.0625rem, 2.5vw, 1.25rem);font-weight: 600;color: var(--msfo-gray-800);line-height: 1.3;word-break: break-word;} .msfo-modal__close {background: none;border: none;font-size: 1.5rem;line-height: 1;color: var(--msfo-gray-500);cursor: pointer;padding: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: var(--msfo-input-radius);transition: all 0.2s;} .msfo-modal__close:hover {background: var(--msfo-gray-100);color: var(--msfo-gray-700);} .msfo-modal__body {flex: 1 1 auto;min-height: 0;padding: var(--msfo-modal-padding);overflow-x: hidden;overflow-y: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;} .msfo-modal--closing .msfo-modal__backdrop {animation: msfo-fade-out 0.3s ease forwards;} .msfo-modal--closing .msfo-modal__container {animation: msfo-slide-down 0.3s ease forwards;} body.msfo-modal-open {overflow: hidden;} .msfo-form {font-family: var(--msfo-font-family);font-size: var(--msfo-font-size-base);line-height: var(--msfo-line-height);color: var(--msfo-gray-800);box-sizing: border-box;} .msfo-form *, .msfo-form *::before, .msfo-form *::after {box-sizing: border-box;} .msfo-form__error {padding: 0.75rem 1rem;margin-bottom: 1rem;background: #f8d7da;border: 1px solid #f5c6cb;border-radius: var(--msfo-input-radius);color: #721c24;} .msfo-form__fields {display: flex;flex-direction: column;gap: 1rem;margin-bottom: 1.25rem;} .msfo-form__footer {padding-top: 1rem;padding-bottom: 0.25rem;border-top: 1px solid var(--msfo-gray-200);} .msfo-form__note {text-align: center;color: var(--msfo-gray-600);font-size: 0.875rem;line-height: 1.45;margin-top: 0.75rem;margin-bottom: 0;} .msfo-field__required {color: var(--msfo-danger);font-weight: 600;margin-left: 0.125rem;} .msfo-field {display: flex;flex-direction: column;gap: 0.375rem;} .msfo-form .msfo-field__label {display: block;margin: 0 0 0.375rem;padding: 0;font-weight: 500;color: var(--msfo-gray-700);font-size: 0.9375rem;line-height: 1.35;} .msfo-field__error {color: var(--msfo-danger);font-size: 0.875rem;margin-top: 0.25rem;} .msfo-field--error .msfo-input {border-color: var(--msfo-danger);background-color: #fff5f5;} .msfo-modal .msfo-form .msfo-input, #msfo-bootstrap-modal .msfo-form .msfo-input, .msfo-fancybox-content .msfo-form .msfo-input, .msfo-input {display: block;width: 100%;max-width: 100%;min-height: var(--msfo-touch-min);padding: 0.625rem 0.875rem;font-family: inherit;font-size: max(16px, var(--msfo-font-size-base));line-height: var(--msfo-line-height);color: var(--msfo-gray-700);background-color: #fff;border: 1px solid var(--msfo-input-border);border-radius: var(--msfo-input-radius);transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;box-sizing: border-box;-webkit-appearance: none;appearance: none;} .msfo-input:focus {outline: none;border-color: var(--msfo-input-focus);box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);} .msfo-input::placeholder {color: var(--msfo-gray-400);} .msfo-input--small {width: 5.5rem;min-width: 4.5rem;max-width: 100%;min-height: var(--msfo-touch-min);} .msfo-modal .msfo-form textarea.msfo-input, .msfo-modal .msfo-form textarea.msfo-input--textarea, #msfo-bootstrap-modal .msfo-form textarea.msfo-input, #msfo-bootstrap-modal .msfo-form textarea.msfo-input--textarea, .msfo-fancybox-content .msfo-form textarea.msfo-input, .msfo-fancybox-content .msfo-form textarea.msfo-input--textarea, .msfo-input--textarea {display: block;width: 100%;min-height: 5rem;max-height: 12rem;height: auto;margin: 0;padding: 0.625rem 0.875rem;resize: vertical;vertical-align: top;line-height: var(--msfo-line-height);background-image: none;background-clip: padding-box;} .msfo-btn {display: inline-flex;align-items: center;justify-content: center;padding: 0.625rem 1.25rem;font-size: var(--msfo-font-size-base);font-weight: 500;line-height: var(--msfo-line-height);text-align: center;text-decoration: none;border: 1px solid transparent;border-radius: var(--msfo-input-radius);cursor: pointer;transition: all 0.15s ease-in-out;background: var(--msfo-gray-200);color: var(--msfo-gray-700);} .msfo-btn:hover {background: var(--msfo-gray-300);} .msfo-btn:focus {outline: none;box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);} .msfo-btn:disabled {opacity: 0.6;cursor: not-allowed;} .msfo-btn--primary {background: var(--msfo-primary);color: #fff;} .msfo-btn--primary:hover {background: var(--msfo-primary-hover);} .msfo-btn--secondary {background: var(--msfo-gray-100);color: var(--msfo-gray-700);border-color: var(--msfo-gray-300);} .msfo-btn--secondary:hover {background: var(--msfo-gray-200);} .msfo-btn--block {width: 100%;min-height: var(--msfo-touch-min);} .msfo-btn--loading {position: relative;color: transparent !important;} .msfo-btn--loading::after {content: '';position: absolute;width: 1rem;height: 1rem;border: 2px solid currentColor;border-right-color: transparent;border-radius: 50%;animation: msfo-spin 1s linear infinite;} .msfo-product {display: flex;gap: 1rem;padding: 1rem;margin-bottom: 1.5rem;background: var(--msfo-gray-100);border-radius: var(--msfo-input-radius);} .msfo-product__image {flex-shrink: 0;width: 80px;height: 80px;} .msfo-product__image img {width: 100%;height: 100%;object-fit: cover;border-radius: var(--msfo-input-radius);} .msfo-product__info {flex: 1;min-width: 0;} .msfo-product__title {margin: 0 0 0.5rem;font-size: clamp(0.9375rem, 2.2vw, 1rem);font-weight: 600;color: var(--msfo-gray-800);line-height: 1.3;word-break: break-word;} .msfo-product__price {display: flex;align-items: center;gap: 0.5rem;margin-bottom: 0.5rem;} .msfo-price {font-size: 1.125rem;font-weight: 600;color: var(--msfo-primary);} .msfo-price--old {font-size: 0.9375rem;color: var(--msfo-gray-500);text-decoration: line-through;} .msfo-product__count {display: flex;flex-wrap: nowrap;align-items: center;gap: 0.5rem;font-size: 0.875rem;color: var(--msfo-gray-600);} .msfo-product__count label {flex: 0 0 auto;margin: 0;padding: 0;white-space: nowrap;} .msfo-product__count .msfo-input--small {flex: 0 0 auto;width: 4.5rem;min-width: 4.5rem;max-width: 4.5rem;} .msfo-product__total {display: flex;flex-wrap: wrap;align-items: baseline;gap: 0.35rem 0.5rem;margin: 0.75rem 0 0;padding-top: 0.75rem;border-top: 1px solid var(--msfo-gray-300);font-size: 0.9375rem;color: var(--msfo-gray-700);} .msfo-product__total-label {font-weight: 500;} .msfo-order-total {font-size: 1.125rem;font-weight: 600;color: var(--msfo-primary);} .msfo-modal .msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), .msfo-modal .msfo-form textarea.msfo-input, #msfo-bootstrap-modal .msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), #msfo-bootstrap-modal .msfo-form textarea.msfo-input, .msfo-fancybox-content .msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), .msfo-fancybox-content .msfo-form textarea.msfo-input {border-width: 1px;border-style: solid;border-color: var(--msfo-input-border);border-radius: var(--msfo-input-radius);box-shadow: none;} .msfo-modal .msfo-form input.msfo-input:focus, .msfo-modal .msfo-form textarea.msfo-input:focus, #msfo-bootstrap-modal .msfo-form input.msfo-input:focus, #msfo-bootstrap-modal .msfo-form textarea.msfo-input:focus, .msfo-fancybox-content .msfo-form input.msfo-input:focus, .msfo-fancybox-content .msfo-form textarea.msfo-input:focus {border-color: var(--msfo-input-focus);box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);} .msfo-success {text-align: center;padding: 2rem 1rem;} .msfo-success__icon {width: 64px;height: 64px;margin: 0 auto 1rem;display: flex;align-items: center;justify-content: center;font-size: 2rem;color: var(--msfo-success);background: rgba(40, 167, 69, 0.1);border-radius: 50%;} .msfo-success__title {margin: 0 0 0.5rem;font-size: 1.5rem;font-weight: 600;color: var(--msfo-gray-800);} .msfo-success__message {margin: 0 0 1.5rem;color: var(--msfo-gray-600);} .msfo-success__order {margin-bottom: 0.5rem;color: var(--msfo-gray-700);} .msfo-success__total {margin-bottom: 1.5rem;font-size: 1.125rem;color: var(--msfo-gray-800);} .msfo-success__actions {display: flex;gap: 0.75rem;justify-content: center;flex-wrap: wrap;} .msfo-trigger {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;font-size: var(--msfo-font-size-base);font-weight: 500;color: var(--msfo-primary);background: transparent;border: 1px solid var(--msfo-primary);border-radius: var(--msfo-input-radius);cursor: pointer;transition: all 0.15s ease;} .msfo-trigger:hover {color: #fff;background: var(--msfo-primary);} .msfo-trigger--primary {color: #fff;background: var(--msfo-primary);} .msfo-trigger--primary:hover {background: var(--msfo-primary-hover);} @keyframes msfo-fade-in {from {opacity: 0;} to {opacity: 1;}} @keyframes msfo-fade-out {from {opacity: 1;} to {opacity: 0;}} @keyframes msfo-slide-up {from {opacity: 0;transform: translateY(-20px);} to {opacity: 1;transform: translateY(0);}} @keyframes msfo-slide-down {from {opacity: 1;transform: translateY(0);} to {opacity: 0;transform: translateY(-20px);}} @keyframes msfo-spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} #msfo-bootstrap-modal .modal-dialog.msfo-modal-dialog {width: calc(100% - 2rem);max-width: var(--msfo-modal-max-width);margin: 1rem auto;} #msfo-bootstrap-modal .modal-content {max-height: min(90dvh, calc(100vh - 2rem));overflow: hidden;border-radius: var(--msfo-modal-radius);} #msfo-bootstrap-modal .modal-header {flex-shrink: 0;} #msfo-bootstrap-modal .modal-body {padding: var(--msfo-modal-padding);overflow-x: hidden;overflow-y: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;} #msfo-bootstrap-modal .modal-title {font-size: clamp(1.0625rem, 2.5vw, 1.25rem);word-break: break-word;} .fancybox__container.msfo-fancybox .fancybox__content {display: flex;flex-direction: column;padding: 0 !important;margin: 0;width: min(var(--msfo-modal-max-width), calc(100vw - 1.5rem));max-width: 100%;max-height: min(90dvh, calc(100vh - 2rem));overflow: hidden;color: var(--msfo-gray-800);background: var(--msfo-modal-bg) !important;border-radius: var(--msfo-modal-radius);box-shadow: var(--msfo-modal-shadow);cursor: default;} .msfo-fancybox-content {display: flex;flex-direction: column;max-height: inherit;overflow: hidden;font-family: var(--msfo-font-family);} .msfo-fancybox-content .msfo-modal__header {flex-shrink: 0;padding: 1rem var(--msfo-modal-padding);border-bottom: 1px solid var(--msfo-gray-200);} .msfo-fancybox-content .msfo-modal__body {flex: 1 1 auto;min-height: 0;padding: var(--msfo-modal-padding);overflow-x: hidden;overflow-y: auto;overscroll-behavior: contain;-webkit-overflow-scrolling: touch;} .fancybox__container.msfo-fancybox .fancybox__content> .f-button.is-close-btn {--f-button-color: var(--msfo-gray-500);--f-button-hover-color: var(--msfo-gray-700);top: 0.75rem;right: 0.75rem;opacity: 1;} .fancybox__container.msfo-fancybox .carousel__button.is-close {top: max(0.75rem, env(safe-area-inset-top));right: max(0.75rem, env(safe-area-inset-right));} .fancybox__container.msfo-fancybox form.msfo-form {position: static;z-index: auto;} .fancybox__container.msfo-fancybox form.msfo-form textarea, .fancybox__container.msfo-fancybox form.msfo-form input[type='text'], .fancybox__container.msfo-fancybox form.msfo-form input[type='email'], .fancybox__container.msfo-fancybox form.msfo-form input[type='tel'], .fancybox__container.msfo-fancybox form.msfo-form input[type='number'] {padding: 0.625rem 0.875rem !important;font-size: max(16px, var(--msfo-font-size-base)) !important;line-height: var(--msfo-line-height) !important;border: 1px solid var(--msfo-input-border) !important;border-radius: var(--msfo-input-radius) !important;background-color: #fff !important;color: var(--msfo-gray-700) !important;box-shadow: none !important;} .fancybox__container.msfo-fancybox form.msfo-form textarea {height: auto !important;min-height: 5rem !important;max-height: 12rem;resize: vertical !important;} .fancybox__container.msfo-fancybox form.msfo-form button[type='submit'].msfo-btn {padding: 0.625rem 1.25rem !important;background: var(--msfo-primary) !important;color: #fff !important;border: 1px solid transparent !important;border-radius: var(--msfo-input-radius) !important;overflow: visible !important;} .fancybox__container.msfo-fancybox form.msfo-form .msfo-form__footer {padding-top: 1rem;padding-bottom: 0.25rem;} @media (max-width: 768px) {:root {--msfo-modal-padding: 1.25rem;} .msfo-modal__header {padding: 0.875rem var(--msfo-modal-padding);} #msfo-bootstrap-modal .modal-body {padding: var(--msfo-modal-padding);}} @media (max-width: 575.98px) {:root {--msfo-modal-padding: var(--msfo-modal-padding-mobile);--msfo-modal-max-width: 100%;} .msfo-modal {align-items: flex-end;padding: 0;padding-bottom: env(safe-area-inset-bottom);} .msfo-modal__container {max-width: 100%;max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top)));margin: 0;border-radius: 12px 12px 0 0;} .msfo-modal__content {border-radius: 12px 12px 0 0;} .msfo-modal__header {padding: 0.75rem var(--msfo-modal-padding);} .msfo-modal__body {padding: var(--msfo-modal-padding);} .msfo-product {flex-direction: row;align-items: flex-start;padding: 0.875rem;margin-bottom: 1rem;} .msfo-product__image {width: 72px;height: 72px;} .msfo-form__fields {gap: 0.875rem;margin-bottom: 1rem;} .msfo-form__footer {padding-top: 0.875rem;} .msfo-success {padding: 1.5rem 1rem;} .msfo-success__actions {flex-direction: column;} .msfo-success__actions .msfo-btn {width: 100%;} #msfo-bootstrap-modal .modal-dialog.msfo-modal-dialog {width: 100%;max-width: 100%;margin: 0;min-height: calc(100% - env(safe-area-inset-top));align-items: flex-end;} #msfo-bootstrap-modal.modal .modal-dialog-centered {min-height: calc(100% - env(safe-area-inset-top));align-items: flex-end;} #msfo-bootstrap-modal .modal-content {max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top)));border-radius: 12px 12px 0 0;border-bottom: 0;} #msfo-bootstrap-modal .modal-header, #msfo-bootstrap-modal .modal-body {padding-left: var(--msfo-modal-padding);padding-right: var(--msfo-modal-padding);} .fancybox__container.msfo-fancybox .fancybox__content {width: 100vw;max-width: 100vw;max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top)));margin: 0;border-radius: 12px 12px 0 0;} .fancybox__container.msfo-fancybox .fancybox__slide {padding: 0 !important;align-items: flex-end !important;} .msfo-fancybox-content .msfo-modal__header, .msfo-fancybox-content .msfo-modal__body {padding-left: var(--msfo-modal-padding);padding-right: var(--msfo-modal-padding);}} @media (max-width: 360px) {.msfo-product {flex-direction: column;} .msfo-product__image {width: 100%;height: 120px;}} .msfo-modal .msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), .msfo-modal .msfo-form textarea.msfo-input, #msfo-bootstrap-modal .msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), #msfo-bootstrap-modal .msfo-form textarea.msfo-input, .msfo-fancybox-content .msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), .msfo-fancybox-content .msfo-form textarea.msfo-input {height: auto;padding: 0.625rem 0.875rem;font-size: max(16px, var(--msfo-font-size-base));line-height: var(--msfo-line-height);border-radius: var(--msfo-input-radius);background-color: #fff;resize: none;} .msfo-modal .msfo-form textarea.msfo-input, #msfo-bootstrap-modal .msfo-form textarea.msfo-input, .msfo-fancybox-content .msfo-form textarea.msfo-input {min-height: 5rem;max-height: 12rem;height: auto;resize: vertical;} .msfo-modal form.msfo-form textarea.msfo-input, #msfo-bootstrap-modal form.msfo-form textarea.msfo-input, .msfo-fancybox-content form.msfo-form textarea.msfo-input {height: auto !important;min-height: 5rem !important;max-height: 12rem;border-radius: var(--msfo-input-radius) !important;padding: 0.625rem 0.875rem !important;} .msfo-modal form.msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), #msfo-bootstrap-modal form.msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']), .msfo-fancybox-content form.msfo-form input.msfo-input:not([type='checkbox']):not([type='radio']) {border-radius: var(--msfo-input-radius) !important;padding: 0.625rem 0.875rem !important;background-color: #fff !important;width: 100%;} .msfo-modal form.msfo-form .msfo-product__count input.msfo-input--small, #msfo-bootstrap-modal form.msfo-form .msfo-product__count input.msfo-input--small, .msfo-fancybox-content form.msfo-form .msfo-product__count input.msfo-input--small {width: 4.5rem !important;min-width: 4.5rem !important;max-width: 4.5rem !important;} .msfo-modal form.msfo-form .msfo-field__label, #msfo-bootstrap-modal form.msfo-form .msfo-field__label, .msfo-fancybox-content form.msfo-form .msfo-field__label {margin: 0 0 0.375rem !important;padding: 0 !important;} .msfo-modal form.msfo-form .msfo-field textarea.msfo-input, #msfo-bootstrap-modal form.msfo-form .msfo-field textarea.msfo-input, .msfo-fancybox-content form.msfo-form .msfo-field textarea.msfo-input {margin: 0 !important;} .msfo-modal form.msfo-form .msfo-product__title, #msfo-bootstrap-modal form.msfo-form .msfo-product__title, .msfo-fancybox-content form.msfo-form .msfo-product__title {margin: 0 0 0.5rem !important;} .msfo-modal .msfo-form .msfo-btn, #msfo-bootstrap-modal .msfo-form .msfo-btn, .msfo-fancybox-content .msfo-form .msfo-btn {display: inline-flex;padding: 0.625rem 1.25rem;font-size: var(--msfo-font-size-base);line-height: var(--msfo-line-height);background: var(--msfo-gray-200);color: var(--msfo-gray-700);border: 1px solid transparent;border-radius: var(--msfo-input-radius);overflow: visible;} .msfo-modal .msfo-form .msfo-btn--primary, #msfo-bootstrap-modal .msfo-form .msfo-btn--primary, .msfo-fancybox-content .msfo-form .msfo-btn--primary {background: var(--msfo-primary);color: #fff;}