body.prk-myaccount-v4-auth .woocommerce { max-width: 1200px; margin: 0 auto; padding: 24px 16px 56px; } .prk-mav4-auth, .prk-mav4-auth * { box-sizing: border-box; } .prk-mav4-auth { --prk-mav4-auth-primary: var(--prk-color-gradient-start, #ff3a30); --prk-mav4-auth-secondary: var(--prk-color-gradient-end, #ff6a00); --prk-mav4-auth-text: #23254e; --prk-mav4-auth-muted: #81858b; --prk-mav4-auth-border: #e0e0e2; --prk-mav4-auth-surface: #fff; --prk-mav4-auth-field: #f9fafb; direction: rtl; width: 100%; color: var(--prk-mav4-auth-text); } .prk-mav4-auth__wrap { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 28px; align-items: stretch; } .prk-mav4-auth--style-minimal .prk-mav4-auth__wrap, .prk-mav4-auth:not(:has(.prk-mav4-auth__side)) .prk-mav4-auth__wrap { display: block; max-width: 560px; margin-inline: auto; } .prk-mav4-auth__side, .prk-mav4-auth__main { background: var(--prk-mav4-auth-surface); border: 1px solid var(--prk-mav4-auth-border); border-radius: 22px; box-shadow: 0 18px 60px rgba(15, 23, 42, .06); } .prk-mav4-auth__side { min-height: 560px; padding: 30px; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 24% 8%, rgba(255, 101, 11, .14), transparent 34%), linear-gradient(145deg, #fff, var(--prk-color-primary-soft, #fff7f3)); } .prk-mav4-auth__logo { display: inline-flex; width: 150px; height: 56px; align-items: center; justify-content: flex-start; } .prk-mav4-auth__logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .prk-mav4-auth__side-content { position: relative; z-index: 2; margin-top: 42px; } .prk-mav4-auth__side-content strong { display: block; font-size: 24px; line-height: 1.8; font-weight: 900; color: #0c0c0c; } .prk-mav4-auth__side-content p { margin: 12px 0 0; font-size: 13px; line-height: 2.1; color: #62666d; } .prk-mav4-auth__side-img { position: relative; z-index: 2; width: 100%; max-height: 260px; object-fit: contain; margin-top: 24px; } .prk-mav4-auth__side-art { position: relative; min-height: 230px; } .prk-mav4-auth__side-art span, .prk-mav4-auth__side-art i, .prk-mav4-auth__side-art b { position: absolute; display: block; border-radius: 999px; } .prk-mav4-auth__side-art span { inset-inline-start: 35px; bottom: 30px; width: 190px; height: 190px; background: linear-gradient(135deg, var(--prk-mav4-auth-primary), var(--prk-mav4-auth-secondary)); opacity: .15; } .prk-mav4-auth__side-art i { inset-inline-end: 0; bottom: 44px; width: 120px; height: 120px; background: rgba(16, 81, 239, .12); } .prk-mav4-auth__side-art b { inset-inline-start: 75px; bottom: 68px; width: 180px; height: 86px; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, .12); transform: rotate(-7deg); } .prk-mav4-auth__main { padding: 28px; } .prk-mav4-auth__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .prk-mav4-auth__tabs { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px; border: 1px solid #ececec; border-radius: 14px; background: #fafafa; } .prk-mav4-auth__tab { border: 0; background: transparent; height: 36px; min-width: 92px; padding: 0 18px; border-radius: 10px; color: #62666d; font-size: 13px; font-weight: 800; cursor: pointer; transition: .2s ease; } .prk-mav4-auth__tab.is-active { background: #fff; color: #0c0c0c; box-shadow: 0 8px 22px rgba(15, 23, 42, .08); } .prk-mav4-auth__notices .woocommerce-error, .prk-mav4-auth__notices .woocommerce-message, .prk-mav4-auth__notices .woocommerce-info { border: 1px solid #f0f0f1; border-radius: 14px; background: #fff; color: #3f4064; font-size: 13px; line-height: 2; margin: 0 0 18px; padding: 14px 18px; box-shadow: none; } .prk-mav4-auth__forms { position: relative; } .prk-mav4-auth__panel { display: none; animation: prkMav4AuthIn .28s ease both; } .prk-mav4-auth__panel.is-active { display: block; } @keyframes prkMav4AuthIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .prk-mav4-auth-form { display: flex; flex-direction: column; gap: 18px; margin: 0; } .prk-mav4-auth-field { position: relative; } .prk-mav4-auth-field__label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: #111827; } .prk-mav4-auth-field__icon { position: absolute; inset-inline-start: 12px; top: 40px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #929292; pointer-events: none; } .prk-mav4-auth-field__input { width: 100%; height: 46px; border: 1px solid #d1d5db; border-radius: 10px; background: var(--prk-mav4-auth-field); color: #111827; font-size: 15px; font-weight: 500; outline: none; padding: 0 48px 0 14px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .prk-mav4-auth-field__input:focus { border-color: #717171; background: #fff; box-shadow: 0 0 0 3px rgba(113, 113, 113, .10); } .prk-mav4-auth-field.has-password-toggle .prk-mav4-auth-field__input { padding-left: 50px; } .prk-mav4-auth-field__toggle { position: absolute; inset-inline-end: auto; left: 0; top: 28px; z-index: 2; width: 48px; height: 46px; border: 0; background: transparent; color: #9ca3af; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .prk-mav4-auth-field__toggle .eye-closed, .prk-mav4-auth-field__toggle.is-visible .eye-open { display: none; } .prk-mav4-auth-field__toggle.is-visible .eye-closed { display: block; } .prk-mav4-auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .prk-mav4-auth-check { display: inline-flex; align-items: center; gap: 10px; color: #6b7280; font-size: 13px; user-select: none; cursor: pointer; } .prk-mav4-auth-check__box { position: relative; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; } .prk-mav4-auth-check__box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .prk-mav4-auth-check__box i { width: 18px; height: 18px; border: 1px solid #c3c7d0; border-radius: 6px; background: #fff; transition: .2s ease; } .prk-mav4-auth-check__box i:after { content: ''; position: absolute; width: 9px; height: 5px; border-inline-start: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); top: 6px; right: 5px; transition: .2s ease; } .prk-mav4-auth-check__box input:checked + i { background: var(--prk-mav4-auth-primary); border-color: var(--prk-mav4-auth-primary); } .prk-mav4-auth-check__box input:checked + i:after { transform: rotate(-45deg) scale(1); } .prk-mav4-auth-form__link, .prk-mav4-auth-form__meta a, .prk-mav4-auth-form__switch { color: #1051ef; font-size: 13px; font-weight: 800; text-decoration: none; } .prk-mav4-auth-form__switch { border: 0; padding: 0; background: transparent; cursor: pointer; } .prk-mav4-auth-form__link:hover, .prk-mav4-auth-form__meta a:hover, .prk-mav4-auth-form__switch:hover { text-decoration: underline; } .prk-mav4-auth-form__submit { width: 100%; height: 48px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(90deg, var(--prk-mav4-auth-primary), var(--prk-mav4-auth-secondary)); font-size: 14px; font-weight: 900; cursor: pointer; transition: filter .2s ease, transform .2s ease; } .prk-mav4-auth-form__submit:hover { filter: brightness(1.08); transform: translateY(-1px); } .prk-mav4-auth-form__meta { margin: 0; color: #6b7280; font-size: 13px; line-height: 2; } .prk-mav4-auth-form__hint, .prk-mav4-auth .woocommerce-privacy-policy-text { border: 1px solid #fff1bf; border-radius: 12px; background: #fffbea; color: #8a6d1d; font-size: 12px; line-height: 2; padding: 12px 14px; } .prk-mav4-auth .woocommerce-privacy-policy-text p { margin: 0; } .prk-mav4-auth--style-split .prk-mav4-auth__wrap { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); } .prk-mav4-auth--style-split .prk-mav4-auth__side { order: 2; } .prk-mav4-auth--style-split .prk-mav4-auth__main { order: 1; } .prk-mav4-auth--style-minimal .prk-mav4-auth__main { box-shadow: none; } @media (max-width: 1023px) { body.prk-myaccount-v4-auth .woocommerce { padding: 16px 12px 36px; } .prk-mav4-auth__wrap, .prk-mav4-auth--style-split .prk-mav4-auth__wrap { display: block; } .prk-mav4-auth__side { display: none; } .prk-mav4-auth__main { padding: 20px; border-radius: 18px; } .prk-mav4-auth__head { justify-content: center; } .prk-mav4-auth__tabs { width: 100%; } .prk-mav4-auth__tab { flex: 1; } .prk-mav4-auth-form__row { align-items: flex-start; flex-direction: column; gap: 10px; } } .prk-mav4-auth--sms .prk-mav4-auth__main { display: flex; flex-direction: column; justify-content: center; } .prk-mav4-auth__sms { width: 100%; max-width: 360px; margin-inline: auto; } .prk-mav4-auth__sms > #stm-sms-form-holder, .prk-mav4-auth__sms .stm-sms-form-holder, .prk-mav4-auth__sms .prk-auth-ui { width: 100%; max-width: 100%; margin-inline: auto; } .prk-mav4-auth--sms .prk-mav4-auth__notices:empty { display: none; } @media (max-width: 767px) { .prk-mav4-auth--sms .prk-mav4-auth__main { padding: 20px 16px; margin: 40px 0; } }