/** * FaraComputer - Digits Authentication Modal * Clean, consolidated stylesheet for Digits 9.2 native modal. */ :root { --fara-auth-primary: #8bd052; --fara-auth-primary-hover: #76bc3f; --fara-auth-primary-soft: #f2faec; --fara-auth-text: #202632; --fara-auth-text-muted: #727986; --fara-auth-background: #ffffff; --fara-auth-surface: #f7f8fa; --fara-auth-border: #e4e7eb; --fara-auth-border-focus: #8bd052; --fara-auth-error: #e5484d; --fara-auth-radius: 18px; --fara-auth-field-radius: 10px; --fara-auth-shadow: 0 22px 70px rgba(24, 32, 45, 0.18); --fara-auth-font: var(--fara-main-font), var(--rd-fn-fm), rd-iransans, IRANSans, Arial, sans-serif; } /* Scope and internal Digits variables. */ #digits_protected, #digits_protected input, #digits_protected button, #digits_protected select, #digits_protected textarea { font-family: var(--fara-auth-font) !important; } #digits_protected .digits-form_page { --dprimary: var(--fara-auth-primary); --daccent: var(--fara-auth-primary-hover); --dtitle: var(--fara-auth-text); --dfield_bg: var(--fara-auth-surface); --dform_bg: var(--fara-auth-background); --dbutton_text: #ffffff; } /* Modal shell. */ #digits_protected .digits_popup_wrapper { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; direction: rtl !important; } #digits_protected .digits_popup_wrapper > .digits-form_page { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 32px 20px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; background: rgba(23, 30, 42, 0.72) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* * پوسته صفحه‌های مستقل ورود، عضویت و بازنشانی رمز Digits. * Pattern خطی سبک و هماهنگ با بخش خبرنامه فراکامپیوتر. * این selector روی پاپ‌آپ اثر نمی‌گذارد. */ #digits_protected > .digits-form_page { width: 100% !important; min-height: 100vh !important; min-height: 100dvh !important; margin: 0 !important; box-sizing: border-box !important; background-color: #1c2535 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='620' viewBox='0 0 960 620' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ffffff' stroke-width='1.7'%3E%3Cg opacity='.065' transform='translate(38 62) rotate(-11) scale(1.12)'%3E%3Crect x='5' y='5' width='62' height='40' rx='5'/%3E%3Cpath d='M0 51h77l-7 8H8l-8-8Z'/%3E%3C/g%3E%3Cg opacity='.045' transform='translate(355 20) rotate(8) scale(.78)'%3E%3Cpath d='M8 44V32a30 30 0 0 1 60 0v12'/%3E%3Crect x='3' y='40' width='15' height='29' rx='7'/%3E%3Crect x='58' y='40' width='15' height='29' rx='7'/%3E%3C/g%3E%3Cg opacity='.07' transform='translate(760 52) rotate(13) scale(1.18)'%3E%3Cpath d='M20 20h52c12 0 20 9 23 21l5 18c2 8-7 14-14 9L70 56H23L8 69c-7 5-15-1-13-9l5-19c3-12 9-21 20-21Z'/%3E%3Cpath d='M20 36v15M13 43.5h14'/%3E%3Ccircle cx='77' cy='37' r='2.5'/%3E%3Ccircle cx='86' cy='46' r='2.5'/%3E%3C/g%3E%3Cg opacity='.04' transform='translate(170 218) rotate(17) scale(.72)'%3E%3Crect x='8' y='0' width='43' height='70' rx='21'/%3E%3Cpath d='M29.5 0v24M29.5 10v7'/%3E%3C/g%3E%3Cg opacity='.068' transform='translate(545 178) rotate(-8) scale(1.05)'%3E%3Crect x='0' y='0' width='78' height='51' rx='5'/%3E%3Cpath d='M39 51v13M24 68h30'/%3E%3C/g%3E%3Cg opacity='.05' transform='translate(892 256) rotate(-16) scale(.82)'%3E%3Crect x='0' y='0' width='36' height='68' rx='7'/%3E%3Cpath d='M12 8h12'/%3E%3Ccircle cx='18' cy='58' r='2'/%3E%3C/g%3E%3Cg opacity='.055' transform='translate(62 458) rotate(7) scale(.95)'%3E%3Crect x='0' y='20' width='78' height='34' rx='6'/%3E%3Cpath d='M15 20 7 0M63 20 71 0'/%3E%3Ccircle cx='17' cy='38' r='2'/%3E%3Ccircle cx='27' cy='38' r='2'/%3E%3Cpath d='M53 39h13'/%3E%3C/g%3E%3Cg opacity='.04' transform='translate(410 500) rotate(-6) scale(.76)'%3E%3Crect x='0' y='0' width='100' height='46' rx='6'/%3E%3Cpath d='M11 12h8M26 12h8M41 12h8M56 12h8M71 12h8M86 12h3M11 23h8M26 23h8M41 23h8M56 23h8M71 23h8M86 23h3M17 34h14M38 34h38M83 34h6'/%3E%3C/g%3E%3Cg opacity='.065' transform='translate(702 430) rotate(12) scale(1.08)'%3E%3Crect x='0' y='0' width='55' height='66' rx='7'/%3E%3Ccircle cx='27.5' cy='27' r='14'/%3E%3Ccircle cx='27.5' cy='27' r='3'/%3E%3Cpath d='M14 53h27'/%3E%3C/g%3E%3Cg opacity='.045' transform='translate(280 345) rotate(-15) scale(.7)'%3E%3Crect x='0' y='12' width='64' height='43' rx='7'/%3E%3Cpath d='m17 12 6-9h18l6 9'/%3E%3Ccircle cx='32' cy='33.5' r='12'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%238bd052' stroke-width='1.8'%3E%3Cg opacity='.105' transform='translate(225 82) rotate(14) scale(.82)'%3E%3Crect x='12' y='12' width='48' height='48' rx='6'/%3E%3Crect x='23' y='23' width='26' height='26' rx='3'/%3E%3Cpath d='M22 0v12M36 0v12M50 0v12M22 60v12M36 60v12M50 60v12M0 22h12M0 36h12M0 50h12M60 22h12M60 36h12M60 50h12'/%3E%3C/g%3E%3Cg opacity='.08' transform='translate(665 285) rotate(-9) scale(1.15)'%3E%3Cpath d='M0 15a55 55 0 0 1 74 0M13 29a37 37 0 0 1 48 0M27 42a18 18 0 0 1 20 0'/%3E%3Ccircle cx='37' cy='54' r='3' fill='%238bd052' stroke='none'/%3E%3C/g%3E%3Cg opacity='.095' transform='translate(98 330) rotate(-19) scale(.88)'%3E%3Crect x='0' y='13' width='47' height='36' rx='6'/%3E%3Cpath d='M47 21h19v20H47M55 27v8M61 27v8'/%3E%3C/g%3E%3Cg opacity='.07' transform='translate(842 500) rotate(18) scale(.7)'%3E%3Cpath d='M8 6h49v55H8zM17 18h31M17 29h31M17 40h19M17 51h25'/%3E%3C/g%3E%3Cg opacity='.09' transform='translate(480 78) rotate(-13) scale(.66)'%3E%3Crect x='0' y='0' width='38' height='70' rx='8'/%3E%3Cpath d='M13 8h12'/%3E%3Ccircle cx='19' cy='60' r='2'/%3E%3C/g%3E%3Cg opacity='.075' transform='translate(510 390) rotate(11) scale(.8)'%3E%3Cpath d='M10 42V31a28 28 0 0 1 56 0v11'/%3E%3Crect x='5' y='39' width='14' height='27' rx='6'/%3E%3Crect x='57' y='39' width='14' height='27' rx='6'/%3E%3C/g%3E%3Cg opacity='.085' transform='translate(320 250) rotate(9) scale(.62)'%3E%3Crect x='0' y='0' width='78' height='51' rx='5'/%3E%3Cpath d='M39 51v13M24 68h30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important; background-position: var(--fara-auth-pattern-x, center) var(--fara-auth-pattern-y, center) !important; background-repeat: repeat !important; background-size: var(--fara-auth-pattern-width, 700px) var(--fara-auth-pattern-height, 452px) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #digits_protected .digits-form_page > .digits-form_container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; color: var(--fara-auth-text) !important; background: transparent !important; } #digits_protected .digits-form_wrapper.digits_modal_box { position: relative !important; width: 100% !important; max-width: 460px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 64px) !important; margin: auto !important; padding: 34px 38px 30px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; color: var(--fara-auth-text) !important; background: var(--fara-auth-background) !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; border-radius: var(--fara-auth-radius) !important; box-shadow: var(--fara-auth-shadow) !important; scrollbar-width: thin; scrollbar-color: #d9dde2 transparent; } #digits_protected .digits-form_wrapper.digits_modal_box::-webkit-scrollbar { width: 5px; } #digits_protected .digits-form_wrapper.digits_modal_box::-webkit-scrollbar-thumb { background: #d9dde2; border-radius: 10px; } /* Brand logo. */ #digits_protected .digits-form_wrapper.digits_modal_box::before { content: "" !important; position: relative !important; inset: auto !important; display: block !important; float: none !important; width: 210px !important; max-width: 70% !important; height: 58px !important; margin: 0 auto 18px !important; padding: 0 !important; background: transparent url("https://www.faracomputer.net/wp-content/uploads/2024/04/logo_headerrr.webp") center / contain no-repeat !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } /* Keep dynamic forms compact. */ #digits_protected .digits_form_index_section, #digits_protected .digits-form_login, #digits_protected .digits-form_register, #digits_protected .digits-form_forgot_password, #digits_protected .digits-form_tab_wrapper, #digits_protected .digits-form_tab_container, #digits_protected .digits-form_tabs, #digits_protected .digits-form_body, #digits_protected .digits-form_body_wrapper, #digits_protected .digits-form_tab_body, #digits_protected .digits_form-init_step_data, #digits_protected .digits_signup_form_step, #digits_protected .digits_phone_holder { height: auto !important; min-height: 0 !important; max-height: none !important; } #digits_protected form.digits_form_index_section { position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; color: var(--fara-auth-text) !important; background: transparent !important; } /* Heading and back control. */ #digits_protected .digits-form_heading { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; direction: ltr !important; width: 100% !important; min-height: 36px !important; margin: 0 0 15px !important; padding: 0 20px !important; box-sizing: border-box !important; color: var(--fara-auth-text) !important; text-align: center !important; } /* خط تزئینی دو طرف تیتر */ #digits_protected .digits-form_heading::before, #digits_protected .digits-form_heading::after { content: "" !important; flex: 1 1 42px !important; width: auto !important; min-width: 16px !important; max-width: 58px !important; height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; opacity: 0.9 !important; } /* خط سمت چپ؛ سبز در کنار تیتر و محو در بیرون */ #digits_protected .digits-form_heading::before { background: linear-gradient( to right, rgba(139, 208, 82, 0), var(--fara-auth-primary) ) !important; } /* خط سمت راست؛ سبز در کنار تیتر و محو در بیرون */ #digits_protected .digits-form_heading::after { background: linear-gradient( to right, var(--fara-auth-primary), rgba(139, 208, 82, 0) ) !important; } #digits_protected .digits-form_heading_text { flex: 0 1 auto !important; display: block !important; max-width: calc(100% - 56px) !important; margin: 0 !important; padding: 0 !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; font-family: var(--fara-auth-font) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.5 !important; letter-spacing: 0 !important; direction: rtl !important; text-align: center !important; } /* کنترل اصلی بازگشت مخفی می‌شود ولی عملکردش حفظ می‌شود */ #digits_protected .digits-form_heading .digits_back_icon { display: none !important; } /* Tabs. */ #digits_protected .digits-form_tab_wrapper, #digits_protected .digits-form_tab_container, #digits_protected .digits-form_body, #digits_protected .digits-form_body_wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; } #digits_protected .digits-form_tabs { margin: 0 0 18px !important; padding: 0 !important; } /* * حذف نوار تب بدون کاربرد در مرحله تأیید شماره موبایل عضویت */ #digits_protected form.register .digits-form_tab_container:has( .digits-form_body-no_tabs ) .digits-form_tabs { display: none !important; } #digits_protected .digits-form_tab-bar { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 24px !important; width: 100% !important; min-height: 35px !important; margin: 0 !important; padding: 0 0 8px !important; border-bottom: 1px solid var(--fara-auth-border) !important; } #digits_protected .digits-form_tab-item { position: relative !important; margin: 0 !important; padding: 0 2px 8px !important; color: var(--fara-auth-text-muted) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important; cursor: pointer !important; transition: color 0.2s ease !important; } #digits_protected .digits-form_tab-item.digits-tab_active { color: var(--fara-auth-primary-hover) !important; } #digits_protected .digits-slider_line { bottom: -1px !important; height: 3px !important; background: var(--fara-auth-primary) !important; border-radius: 3px 3px 0 0 !important; } /* Shared field rows. */ #digits_protected .digits-mobile_wrapper.digits-form_border, #digits_protected .digits_phone_holder .digits-mobile_wrapper, #digits_protected .digits-user_inp_row, #digits_protected .digits_password_inp_row { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 54px !important; margin: 0 0 14px !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; background: var(--fara-auth-surface) !important; border: 1px solid var(--fara-auth-border) !important; border-radius: var(--fara-auth-field-radius) !important; box-shadow: none !important; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important; } /* * حذف فاصله اضافی والد فیلد موبایل در فرم عضویت. * فاصله استاندارد 14 پیکسلی روی خود فیلد باقی می‌ماند. */ #digits_protected form.register .digits_phone_holder > .digits-form_input_row { margin: 0 !important; padding: 0 !important; } #digits_protected .digits-mobile_wrapper:focus-within, #digits_protected .digits-user_inp_row:focus-within, #digits_protected .digits_password_inp_row:focus-within { background: #ffffff !important; border-color: var(--fara-auth-border-focus) !important; box-shadow: 0 0 0 3px rgba(139, 208, 82, 0.15) !important; } #digits_protected .digits-mobile_wrapper > .digits-form_input:not(.digits-form_countrycode), #digits_protected .digits-user_inp_row > .digits-form_input, #digits_protected .digits_password_inp_row > .digits-form_input { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 52px !important; margin: 0 !important; padding: 0 !important; } #digits_protected .digits-mobile_wrapper input[type="tel"], #digits_protected .digits-user_inp_row input, #digits_protected .digits_password_inp_row input[type="password"], #digits_protected .digits_password_inp_row input[type="text"] { display: block !important; width: 100% !important; height: 52px !important; margin: 0 !important; padding: 0 15px !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; caret-color: var(--fara-auth-primary) !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; font-size: 14px !important; font-weight: 500 !important; line-height: 52px !important; opacity: 1 !important; } #digits_protected .digits-mobile_wrapper input[type="tel"] { direction: ltr !important; text-align: right !important; } #digits_protected .digits_password_inp_row input[type="password"], #digits_protected .digits_password_inp_row input[type="text"] { padding-left: 50px !important; direction: rtl !important; text-align: right !important; } #digits_protected input::placeholder { color: #9aa1ac !important; -webkit-text-fill-color: #9aa1ac !important; opacity: 1 !important; } #digits_protected .field_label { display: none !important; } /* Fixed Iran country code. The 48x32 sprite must remain intact. */ #digits_protected .digits-form_countrycode { display: flex !important; flex: 0 0 88px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 0 !important; width: 88px !important; min-width: 88px !important; height: 52px !important; margin: 0 !important; padding: 0 9px !important; box-sizing: border-box !important; direction: ltr !important; white-space: nowrap !important; background: transparent !important; border: 0 !important; border-left: 1px solid var(--fara-auth-border) !important; cursor: default !important; pointer-events: none !important; -webkit-user-select: none !important; user-select: none !important; } #digits_protected .digits-form_countrycode .digits-field-country_flag, #digits_protected .digits-form_countrycode .untdovr_flag_container_flag { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; flex: 0 0 48px !important; width: 48px !important; min-width: 48px !important; max-width: 48px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; margin: -8px -12px !important; padding: 0 !important; background-repeat: no-repeat !important; transform: scale(0.5) !important; transform-origin: center !important; } #digits_protected .digits-form_countrycode input.countrycode { position: relative !important; inset: auto !important; display: block !important; flex: 0 0 38px !important; width: 38px !important; min-width: 38px !important; max-width: 38px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; caret-color: transparent !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; font-family: Arial, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 30px !important; direction: ltr !important; text-align: center !important; cursor: default !important; pointer-events: none !important; -webkit-user-select: none !important; user-select: none !important; opacity: 1 !important; } /* Password eye on the left. */ #digits_protected .digits_password_eye-cont, #digits_protected .digits_password_eye { position: absolute !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 14px !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; color: var(--fara-auth-text-muted) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(-50%) !important; cursor: pointer !important; } #digits_protected .digits_password_eye svg { width: 22px !important; height: 22px !important; color: var(--fara-auth-text-muted) !important; stroke: currentColor !important; } #digits_protected .digits_password_eye-line { background-color: var(--fara-auth-text-muted) !important; } /* Remember-me checkbox. */ #digits_protected .digits-form_rememberme { min-height: 26px !important; margin: 2px 0 16px !important; } #digits_protected .digits-form_rememberme .dig_input_wrapper { position: relative !important; display: inline-flex !important; align-items: center !important; min-height: 24px !important; margin: 0 !important; padding: 0 31px 0 0 !important; color: var(--fara-auth-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; } #digits_protected .digits-form_rememberme .dig_input_wrapper > div { position: relative !important; z-index: 2 !important; padding: 0 !important; color: inherit !important; } #digits_protected .digits-form_rememberme .dig_input_wrapper::before { content: "" !important; position: absolute !important; top: 50% !important; right: 0 !important; left: auto !important; z-index: 1 !important; display: block !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: #ffffff !important; border: 1.5px solid #cbd1d8 !important; border-radius: 6px !important; -webkit-mask-image: none !important; mask-image: none !important; transform: translateY(-50%) !important; } #digits_protected .digits-form_rememberme .selected .dig_input_wrapper::before, #digits_protected .digits-form_rememberme .dig_opt_mult.selected .dig_input_wrapper::before { background: var(--fara-auth-primary) !important; border-color: var(--fara-auth-primary) !important; box-shadow: 0 0 0 3px rgba(139, 208, 82, 0.15) !important; } #digits_protected .digits-form_rememberme .selected .dig_input_wrapper::after, #digits_protected .digits-form_rememberme .dig_opt_mult.selected .dig_input_wrapper::after { content: "" !important; position: absolute !important; top: calc(50% - 1px) !important; right: 4px !important; left: auto !important; z-index: 2 !important; display: block !important; width: 10px !important; height: 6px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-left: 2px solid #ffffff !important; border-bottom: 2px solid #ffffff !important; -webkit-mask-image: none !important; mask-image: none !important; transform-origin: center center !important; transform: translateY(-50%) rotate(-45deg) !important; } /* OTP field: explicitly interactive and above Digits info layers. */ #digits_protected .digits_secure_login_auth_wrapper, #digits_protected .digits_secure_login_auth_wrapper > .digits-form_input_row, #digits_protected .digits_secure_login_auth_wrapper .digits-form_input_info { position: relative !important; inset: auto !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #digits_protected input.otp_input.digits_otp_input-field { position: relative !important; z-index: 3 !important; display: block !important; width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 17px !important; box-sizing: border-box !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; caret-color: var(--fara-auth-primary) !important; background: var(--fara-auth-surface) !important; border: 1px solid var(--fara-auth-border) !important; border-radius: var(--fara-auth-field-radius) !important; outline: 0 !important; box-shadow: none !important; font-family: var(--fara-auth-font) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 54px !important; letter-spacing: 7px !important; direction: ltr !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; -webkit-user-select: text !important; user-select: text !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } #digits_protected input.otp_input.digits_otp_input-field:focus { background: #ffffff !important; border-color: var(--fara-auth-border-focus) !important; box-shadow: 0 0 0 3px rgba(139, 208, 82, 0.15) !important; } #digits_protected input.otp_input.digits_otp_input-field::placeholder { color: #9aa1ac !important; -webkit-text-fill-color: #9aa1ac !important; font-family: var(--fara-auth-font) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; direction: rtl !important; text-align: right !important; } /* Move OTP explanation below the input so it cannot block typing. */ /* اطلاعات ارسال کد به‌صورت متن راهنما، نه فیلد دوم */ #digits_protected .digits_otp_info { position: relative !important; inset: auto !important; z-index: 1 !important; display: block !important; width: 100% !important; margin: 9px 0 0 !important; padding: 0 2px !important; box-sizing: border-box !important; color: var(--fara-auth-text-muted) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; pointer-events: none !important; transform: none !important; } /* * هنگام ارسال مجدد، پیام موفقیت قبلی موقتاً مخفی می‌شود. * پس از دریافت پاسخ Digits دوباره به‌صورت خودکار نمایش داده می‌شود. */ #digits_protected .digits-form_input_info[data-fara-resend-pending="1"] .digits_otp_info { display: none !important; } /* * فاصله متن OTP و وضعیت ارسال از دکمه ادامه * در بازنشانی رمز عبور و تأیید شماره عضویت */ #digits_protected form.forgot .digits_otp_info, #digits_protected form.forgot .fara-otp-sending, #digits_protected form.register .digits_otp_info, #digits_protected form.register .fara-otp-sending { margin-bottom: 14px !important; } #digits_protected .digits_otp_info_ic { display: none !important; } /* وضعیت در حال ارسال کد تأیید */ #digits_protected .fara-otp-sending { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: 100% !important; margin: 9px 0 0 !important; padding: 0 2px !important; box-sizing: border-box !important; color: var(--fara-auth-text-muted) !important; font-family: var(--fara-auth-font) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.9 !important; direction: rtl !important; text-align: right !important; } /* سه نقطه ضربانی وضعیت ارسال کد */ #digits_protected .fara-otp-sending_spinner { position: relative !important; display: block !important; order: 1 !important; align-self: center !important; flex: 0 0 4px !important; width: 4px !important; height: 4px !important; margin: 0 7px !important; background: var(--fara-auth-primary) !important; border: 0 !important; border-radius: 50% !important; animation: fara-otp-dot 1.1s ease-in-out infinite !important; animation-delay: -0.16s !important; } #digits_protected .fara-otp-sending_spinner::before, #digits_protected .fara-otp-sending_spinner::after { content: "" !important; position: absolute !important; top: 0 !important; display: block !important; width: 4px !important; height: 4px !important; background: var(--fara-auth-primary) !important; border-radius: 50% !important; animation: fara-otp-dot 1.1s ease-in-out infinite !important; } #digits_protected .fara-otp-sending_spinner::before { right: 7px !important; animation-delay: -0.32s !important; } #digits_protected .fara-otp-sending_spinner::after { left: 7px !important; animation-delay: 0s !important; } @keyframes fara-otp-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); } 40% { opacity: 1; transform: scale(1); } } #digits_protected input[name="sms_otp"]:disabled { cursor: wait !important; opacity: 0.65 !important; } #digits_protected .digits-form_submit:disabled { cursor: wait !important; opacity: 0.7 !important; } #digits_protected .digits_otp_info_desc { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } #digits_protected .digits_otp_info_desc_text { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: var(--fara-auth-text-muted) !important; -webkit-text-fill-color: var(--fara-auth-text-muted) !important; background: transparent !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.9 !important; white-space: normal !important; text-align: right !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } #digits_protected .digits_otp_dest { display: inline-block !important; margin-right: 4px !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; font-family: var(--fara-auth-font) !important; font-weight: 700 !important; direction: ltr !important; } /* * کنترل‌های اصلی در محل خود فعال می‌مانند * و فقط از نظر ظاهری مخفی می‌شوند. */ #digits_protected .digits-form_footer, #digits_protected .digits-form_resend_otp { display: none !important; } /* لینک اصلی مخفی می‌شود ولی عملکردش حفظ می‌شود */ #digits_protected .digits-form_show_forgot_password { display: none !important; } /* ردیف ثابت زیر دکمه ادامه */ #digits_protected .fara-auth-secondary-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; width: 100% !important; min-height: 32px !important; margin: 8px 0 0 !important; padding: 0 2px !important; box-sizing: border-box !important; direction: rtl !important; } #digits_protected .fara-auth-back, #digits_protected .fara-auth-forgot, #digits_protected .fara-auth-resend { -webkit-appearance: none !important; appearance: none !important; display: inline-flex !important; align-items: center !important; min-height: 32px !important; margin: 0 !important; padding: 4px 0 !important; font-family: var(--fara-auth-font) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.7 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer !important; transition: color 0.2s ease !important; } #digits_protected .fara-auth-back { justify-content: flex-start !important; gap: 6px !important; color: var(--fara-auth-text-muted) !important; } #digits_protected .fara-auth-back::before { content: "‹" !important; display: inline-block !important; font-family: Arial, sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1 !important; transition: transform 0.2s ease !important; } #digits_protected .fara-auth-back:hover { color: var(--fara-auth-primary-hover) !important; } #digits_protected .fara-auth-back:hover::before { transform: translateX(2px) !important; } #digits_protected .fara-auth-forgot { justify-content: flex-end !important; margin-right: auto !important; color: var(--fara-auth-primary-hover) !important; } #digits_protected .fara-auth-forgot:hover { color: var(--fara-auth-text) !important; } #digits_protected .fara-auth-resend { justify-content: flex-end !important; margin-right: auto !important; padding: 4px 0 !important; color: var(--fara-auth-primary-hover) !important; -webkit-text-fill-color: var(--fara-auth-primary-hover) !important; font-family: var(--fara-auth-font) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.7 !important; font-variant-numeric: normal !important; text-align: left !important; cursor: pointer !important; } #digits_protected .fara-auth-resend span { color: inherit !important; -webkit-text-fill-color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; } #digits_protected .fara-auth-resend:disabled { color: var(--fara-auth-text-muted) !important; -webkit-text-fill-color: var(--fara-auth-text-muted) !important; font-weight: 500 !important; cursor: default !important; opacity: 0.9 !important; } #digits_protected .fara-auth-resend:not(:disabled):hover { color: var(--fara-auth-text) !important; } /* Main submit button. */ #digits_protected .digits-form_button.digits-form_submit { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; direction: rtl !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 11px 18px !important; color: #ffffff !important; background: var(--fara-auth-primary) !important; border: 1px solid var(--fara-auth-primary) !important; border-radius: var(--fara-auth-field-radius) !important; box-shadow: 0 8px 20px rgba(139, 208, 82, 0.24) !important; font-family: var(--fara-auth-font) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.6 !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } #digits_protected .digits-form_login > .digits-form_button { margin-top: 15px !important; } #digits_protected .digits-form_button.digits-form_submit:not(:disabled):hover { color: #ffffff !important; background: var(--fara-auth-primary-hover) !important; border-color: var(--fara-auth-primary-hover) !important; box-shadow: 0 10px 24px rgba(118, 188, 63, 0.28) !important; transform: translateY(-1px) !important; } #digits_protected .digits-form_button.digits-form_submit:not(:disabled):active { box-shadow: 0 6px 16px rgba(118, 188, 63, 0.22) !important; transform: translateY(0) !important; } #digits_protected .digits-form_button-text { order: 1 !important; display: inline-flex !important; align-items: center !important; color: inherit !important; -webkit-text-fill-color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } #digits_protected .digits-form_button_ic { order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; color: inherit !important; -webkit-text-fill-color: inherit !important; transform: translateX(0) rotate(180deg) !important; transition: transform 0.22s ease !important; } /* * فلش دکمه فقط به سمت چپ حرکت می‌کند * و در حالت هاور نمی‌چرخد. */ #digits_protected .digits-form_button.digits-form_submit:not(:disabled):hover .digits-form_button_ic { transform: translateX(-4px) rotate(180deg) !important; } #digits_protected .digits-form_button.digits-form_submit:not(:disabled):active .digits-form_button_ic { transform: translateX(-2px) rotate(180deg) !important; } /* Login/register switch. */ #digits_protected .dig_login_signup_bar { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 5px !important; width: 100% !important; margin: 19px 0 0 !important; padding: 0 !important; color: var(--fara-auth-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.8 !important; text-align: center !important; } #digits_protected .dig_login_signup_bar span { color: #6f7681 !important; -webkit-text-fill-color: #6f7681 !important; font-family: var(--fara-auth-font) !important; font-weight: 650 !important; opacity: 1 !important; } #digits_protected .dig_login_signup_bar a { color: var(--fara-auth-primary-hover) !important; font-weight: 750 !important; text-decoration: none !important; } #digits_protected .dig_login_signup_bar a:hover { color: var(--fara-auth-text) !important; } /* Close button. */ #digits_protected .digits-form_page > .digits-cancel { position: fixed !important; top: 22px !important; right: 22px !important; left: auto !important; z-index: 2147483001 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.13) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 50% !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } #digits_protected .digits-form_page > .digits-cancel::before, #digits_protected .digits-form_page > .digits-cancel::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 17px !important; height: 2px !important; margin: 0 !important; background: currentColor !important; border: 0 !important; border-radius: 2px !important; transform-origin: center !important; } #digits_protected .digits-form_page > .digits-cancel::before { transform: translate(-50%, -50%) rotate(45deg) !important; } #digits_protected .digits-form_page > .digits-cancel::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } #digits_protected .digits-form_page > .digits-cancel:hover { background: var(--fara-auth-error) !important; border-color: var(--fara-auth-error) !important; } /* ================================================== Checkout phone verification modal ================================================== */ /* * قفل اسکرول صفحه هنگام باز بودن * Popup تأیید شماره موبایل Checkout. * * body روی موقعیت فعلی Scroll ثابت می‌ماند * تا WooCommerce یا Digits نتوانند صفحه پشت * Popup را جابه‌جا کنند. */ html.fara-digits-checkout-otp-open { overflow: hidden !important; overscroll-behavior: none !important; } body.fara-digits-checkout-otp-open { position: fixed !important; right: 0 !important; left: 0 !important; width: 100% !important; overflow: hidden !important; overscroll-behavior: none !important; } /* * پاپ‌آپ تأیید شماره موبایل Checkout * فقط همین Modal را هدف می‌گیرد و روی سایر * بخش‌های Digits اثری ندارد. */ .digits_wc_checkout_phone_verification_modal { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 2147483000 !important; width: 100vw !important; min-width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; font-family: var(--fara-auth-font) !important; direction: rtl !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } /* Wrapper کل صفحه */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal_wrapper { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100vw !important; min-width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 32px 20px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; transform: none !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal_wrapper::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* * هنگام بررسی OTP، Overlayهای موقت Digits و WooCommerce * نباید تیرگی پس‌زمینه Popup را تغییر دهند. * * خود Overlayها حذف نمی‌شوند؛ فقط ظاهرشان شفاف می‌شود * تا عملکرد داخلی Checkout دست‌نخورده باقی بماند. */ body.fara-checkout-otp-ui-processing .dig_load_overlay { background: transparent !important; } body.fara-checkout-otp-ui-processing form.checkout .blockUI.blockOverlay { background: transparent !important; opacity: 0 !important; } /* * از لحظه بررسی OTP تا مشخص‌شدن نتیجه نهایی Checkout، * Popup تأیید نباید توسط fadeOut داخلی Digits مخفی شود. * * این Rule فقط ظاهر Modal را حفظ می‌کند و هیچ تغییری * در منطق OTP یا ثبت سفارش ایجاد نمی‌کند. */ body.fara-checkout-otp-ui-processing .digits_wc_checkout_phone_verification_modal { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Overlay مشابه Popup ورود */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal_overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 1 !important; display: block !important; width: 100vw !important; min-width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; background: rgba(23, 27, 36, 0.96) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; } /* کارت اصلی */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal { position: relative !important; inset: auto !important; z-index: 2 !important; display: block !important; width: 100% !important; max-width: 460px !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 64px) !important; margin: auto !important; padding: 34px 38px 30px !important; overflow-x: hidden !important; overflow-y: auto !important; color: var(--fara-auth-text) !important; background: var(--fara-auth-background) !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; border-radius: var(--fara-auth-radius) !important; box-shadow: var(--fara-auth-shadow) !important; box-sizing: border-box !important; transform: none !important; } /* حذف ظاهر تیره داخلی Digits */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal_contents, .digits_wc_checkout_phone_verification_modal .digits_secure_modal-desc, .digits_wc_checkout_phone_verification_modal .digits_secure_modal-body, .digits_wc_checkout_phone_verification_modal .digits_secure_row, .digits_wc_checkout_phone_verification_modal .digits-form_input { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; transform: none !important; } /* ================================================== Logo ================================================== */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal::before { content: "" !important; position: relative !important; display: block !important; width: 210px !important; max-width: 70% !important; height: 58px !important; margin: 0 auto 18px !important; padding: 0 !important; background: transparent url("https://www.faracomputer.net/wp-content/uploads/2024/04/logo_headerrr.webp") center / contain no-repeat !important; border: 0 !important; box-shadow: none !important; } /* ================================================== Form ================================================== */ .digits_wc_checkout_phone_verification_modal form.digits-checkout_phone_verification { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: var(--fara-auth-text) !important; font-family: var(--fara-auth-font) !important; background: transparent !important; box-sizing: border-box !important; } /* ================================================== Title ================================================== */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal-title { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; direction: ltr !important; width: 100% !important; min-height: 36px !important; margin: 0 0 12px !important; padding: 0 20px !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; font-family: var(--fara-auth-font) !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.5 !important; text-align: center !important; box-sizing: border-box !important; } /* خطوط تزئینی دو طرف عنوان */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal-title::before, .digits_wc_checkout_phone_verification_modal .digits_secure_modal-title::after { content: "" !important; flex: 1 1 42px !important; width: auto !important; min-width: 16px !important; max-width: 58px !important; height: 2px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; opacity: 0.9 !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-title::before { background: linear-gradient( to right, rgba(139, 208, 82, 0), var(--fara-auth-primary) ) !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-title::after { background: linear-gradient( to right, var(--fara-auth-primary), rgba(139, 208, 82, 0) ) !important; } /* ================================================== Description ================================================== */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal-desc { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal_text_opacity { display: block !important; width: 100% !important; margin: 0 0 14px !important; padding: 0 !important; color: var(--fara-auth-text-muted) !important; -webkit-text-fill-color: var(--fara-auth-text-muted) !important; font-family: var(--fara-auth-font) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.9 !important; text-align: center !important; opacity: 1 !important; } /* ================================================== OTP input ================================================== */ .digits_wc_checkout_phone_verification_modal input.digits_secure_phone_otp { position: relative !important; display: block !important; width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 17px !important; color: var(--fara-auth-text) !important; -webkit-text-fill-color: var(--fara-auth-text) !important; caret-color: var(--fara-auth-primary) !important; background: var(--fara-auth-surface) !important; border: 1px solid var(--fara-auth-border) !important; border-radius: var(--fara-auth-field-radius) !important; outline: 0 !important; box-shadow: none !important; font-family: var(--fara-auth-font) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 54px !important; letter-spacing: 7px !important; direction: ltr !important; text-align: center !important; opacity: 1 !important; box-sizing: border-box !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .digits_wc_checkout_phone_verification_modal input.digits_secure_phone_otp:focus { background: #ffffff !important; border-color: var(--fara-auth-border-focus) !important; box-shadow: 0 0 0 3px rgba(139, 208, 82, 0.15) !important; } .digits_wc_checkout_phone_verification_modal input.digits_secure_phone_otp::placeholder { color: #9aa1ac !important; -webkit-text-fill-color: #9aa1ac !important; font-family: var(--fara-auth-font) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; direction: rtl !important; text-align: center !important; } /* ================================================== Submit دقیقاً هماهنگ با دکمه Popup ورود / عضویت ================================================== */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal-body { margin-top: 15px !important; } .digits_wc_checkout_phone_verification_modal button.digits-form_button { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; direction: rtl !important; width: 100% !important; min-height: 52px !important; margin: 0 !important; padding: 11px 18px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--fara-auth-primary) !important; border: 1px solid var(--fara-auth-primary) !important; border-radius: var(--fara-auth-field-radius) !important; box-shadow: 0 8px 20px rgba(139, 208, 82, 0.24) !important; font-family: var(--fara-auth-font) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.6 !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } .digits_wc_checkout_phone_verification_modal button.digits-form_button:not(:disabled):hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: var(--fara-auth-primary-hover) !important; border-color: var(--fara-auth-primary-hover) !important; box-shadow: 0 10px 24px rgba(118, 188, 63, 0.28) !important; transform: translateY(-1px) !important; } .digits_wc_checkout_phone_verification_modal button.digits-form_button:not(:disabled):active { box-shadow: 0 6px 16px rgba(118, 188, 63, 0.22) !important; transform: translateY(0) !important; } .digits_wc_checkout_phone_verification_modal button.digits-form_button:disabled { cursor: wait !important; opacity: 0.7 !important; } /* * وضعیت بررسی OTP در Checkout. * * button عمداً disabled نمی‌شود تا Event اصلی * Digits بدون اختلال اجرا شود. */ .digits_wc_checkout_phone_verification_modal button.digits-form_button.fara-checkout-otp-verifying { cursor: wait !important; pointer-events: none !important; } /* * Loader اصلی خود Digits. * * همان کلاس و همان ساختاری که پاپ‌آپ ورود * و عضویت استفاده می‌کند. */ .digits_wc_checkout_phone_verification_modal button.digits-form_button .digits_loading_spinner { order: 1 !important; display: inline-block !important; width: 24px !important; height: 24px !important; flex: 0 0 24px !important; margin: 0 !important; line-height: 1 !important; box-sizing: border-box !important; color: inherit !important; border: 3px solid currentColor !important; border-top-color: transparent !important; border-radius: 50% !important; animation: digits_loading_spin 0.6s linear infinite !important; vertical-align: middle !important; } /* متن دکمه */ .digits_wc_checkout_phone_verification_modal .digits-form_button-text { order: 1 !important; display: inline-flex !important; align-items: center !important; color: inherit !important; -webkit-text-fill-color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } /* * آیکون اصلی خود Digits. * * دقیقاً مثل Popup ورود: * خود Icon استفاده می‌شود و pseudo-element * مصنوعی قبلی دیگر وجود ندارد. */ .digits_wc_checkout_phone_verification_modal .digits-form_button_ic { order: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; color: inherit !important; -webkit-text-fill-color: inherit !important; transform: translateX(0) rotate(180deg) !important; transition: transform 0.22s ease !important; } /* Hover آیکون */ .digits_wc_checkout_phone_verification_modal button.digits-form_button:not(:disabled):hover .digits-form_button_ic { transform: translateX(-4px) rotate(180deg) !important; } /* Active آیکون */ .digits_wc_checkout_phone_verification_modal button.digits-form_button:not(:disabled):active .digits-form_button_ic { transform: translateX(-2px) rotate(180deg) !important; } /* ================================================== Close ================================================== */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close { position: fixed !important; top: 22px !important; right: 22px !important; left: auto !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.13) !important; border: 1px solid rgba(255, 255, 255, 0.24) !important; border-radius: 50% !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: background-color 0.2s ease, border-color 0.2s ease !important; } /* حذف × قدیمی Digits */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close > * { display: none !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close::before, .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 17px !important; height: 2px !important; margin: 0 !important; background: currentColor !important; border: 0 !important; border-radius: 2px !important; transform-origin: center !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close:hover { background: var(--fara-auth-error) !important; border-color: var(--fara-auth-error) !important; } /* Digits toast. */ body > .dig_popmessage { --fara-toast-accent: #5f6875; --fara-toast-soft: #f1f3f5; --fara-toast-icon: "i"; position: fixed !important; top: 82px !important; right: 24px !important; bottom: auto !important; left: auto !important; z-index: 2147483646 !important; display: block; width: min(360px, calc(100vw - 48px)) !important; min-width: 0 !important; max-width: 360px !important; height: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; color: #252a32 !important; background: #ffffff !important; border: 1px solid #e4e7eb !important; border-right: 4px solid var(--fara-toast-accent) !important; border-radius: 14px !important; box-shadow: 0 16px 42px rgba(13, 24, 38, 0.18), 0 3px 10px rgba(13, 24, 38, 0.08) !important; font-family: var(--fara-auth-font) !important; direction: rtl !important; overflow: hidden !important; } /* وضعیت خطا */ body > .dig_popmessage[class*="error"], body > .dig_popmessage[class*="critical"] { --fara-toast-accent: #e5484d; --fara-toast-soft: #fff0f0; --fara-toast-icon: "!"; } /* وضعیت موفقیت */ body > .dig_popmessage[class*="success"] { --fara-toast-accent: var(--fara-auth-primary); --fara-toast-soft: #f0fae8; --fara-toast-icon: "✓"; } /* وضعیت هشدار */ body > .dig_popmessage[class*="warning"], body > .dig_popmessage[class*="alert"] { --fara-toast-accent: #e7a321; --fara-toast-soft: #fff8e8; --fara-toast-icon: "!"; } /* وضعیت اطلاع‌رسانی */ body > .dig_popmessage[class*="info"], body > .dig_popmessage[class*="notice"] { --fara-toast-accent: #438bd8; --fara-toast-soft: #edf6ff; --fara-toast-icon: "i"; } body > .dig_popmessage .dig_popmessage_contents { position: relative !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 28px !important; align-items: center !important; column-gap: 12px !important; width: 100% !important; min-height: 86px !important; margin: 0 !important; padding: 16px 16px 16px 12px !important; box-sizing: border-box !important; color: inherit !important; background: transparent !important; border: 0 !important; direction: rtl !important; } /* آیکون وضعیت */ body > .dig_popmessage .dig_firele { position: relative !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; background: var(--fara-toast-soft) !important; border: 0 !important; border-radius: 12px !important; transform: none !important; } body > .dig_popmessage .dig_firele::before { content: var(--fara-toast-icon) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; color: var(--fara-toast-accent) !important; font-family: Arial, sans-serif !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; } /* حذف شکل و رنگ‌بندی قدیمی Digits */ body > .dig_popmessage .dig_pop_bg, body > .dig_popmessage .dig_pop_bg_over { display: none !important; } /* بخش عنوان و پیام */ body > .dig_popmessage .dig_lasele { position: relative !important; inset: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 3px !important; min-width: 0 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; background: transparent !important; transform: none !important; } body > .dig_popmessage .dig_lase_snap { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #252a32 !important; -webkit-text-fill-color: #252a32 !important; font-family: var(--fara-auth-font) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.7 !important; text-align: right !important; opacity: 1 !important; transform: none !important; } body > .dig_popmessage .dig_lase_message { position: relative !important; inset: auto !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #6f7681 !important; -webkit-text-fill-color: #6f7681 !important; font-family: var(--fara-auth-font) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.8 !important; text-align: right !important; opacity: 1 !important; transform: none !important; } /* دکمه بستن Toast */ body > .dig_popmessage .dig_popdismiss { position: relative !important; inset: auto !important; display: block !important; width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; cursor: pointer !important; opacity: 1 !important; transform: none !important; transition: background-color 0.2s ease !important; } body > .dig_popmessage .dig_popdismiss:hover { background: #f1f3f5 !important; } body > .dig_popmessage .dig_popdismiss::before, body > .dig_popmessage .dig_popdismiss::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; width: 14px !important; height: 1.5px !important; margin: 0 !important; background: #8a919c !important; border: 0 !important; border-radius: 2px !important; transform-origin: center !important; } body > .dig_popmessage .dig_popdismiss::before { transform: translate(-50%, -50%) rotate(45deg) !important; } body > .dig_popmessage .dig_popdismiss::after { transform: translate(-50%, -50%) rotate(-45deg) !important; } /* Responsive. */ @media (max-width: 767px) { #digits_protected .digits_popup_wrapper > .digits-form_page { padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important; } #digits_protected .digits-form_wrapper.digits_modal_box { max-width: 420px !important; max-height: calc(100dvh - 36px) !important; padding: 28px 22px 24px !important; border-radius: 16px !important; } #digits_protected .digits-form_wrapper.digits_modal_box::before { width: 164px !important; height: 46px !important; margin-bottom: 16px !important; } #digits_protected .digits-form_heading { gap: 9px !important; min-height: 34px !important; margin-bottom: 13px !important; padding: 0 8px !important; } #digits_protected .digits-form_heading_text { font-size: 21px !important; } #digits_protected .digits-form_tabs { margin-bottom: 15px !important; } #digits_protected .digits-form_tab-bar { gap: 18px !important; } #digits_protected .digits-mobile_wrapper.digits-form_border, #digits_protected .digits_phone_holder .digits-mobile_wrapper, #digits_protected .digits-user_inp_row, #digits_protected .digits_password_inp_row { margin-bottom: 12px !important; } #digits_protected input.otp_input.digits_otp_input-field { height: 52px !important; line-height: 52px !important; letter-spacing: 6px !important; } #digits_protected .digits_otp_info { padding: 0 2px !important; } #digits_protected .digits-form_button.digits-form_submit { min-height: 50px !important; } #digits_protected .digits-form_page > .digits-cancel { top: max(14px, env(safe-area-inset-top)) !important; right: 14px !important; width: 38px !important; height: 38px !important; } /* ============================================== Checkout OTP modal ============================================== */ .digits_wc_checkout_phone_verification_modal .digits_secure_modal_wrapper { padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal { max-width: 420px !important; max-height: calc(100dvh - 36px) !important; padding: 28px 22px 24px !important; border-radius: 16px !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal::before { width: 164px !important; height: 46px !important; margin-bottom: 16px !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-title { gap: 9px !important; min-height: 34px !important; margin-bottom: 11px !important; padding: 0 8px !important; font-size: 21px !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal_text_opacity { margin-bottom: 12px !important; font-size: 11px !important; } .digits_wc_checkout_phone_verification_modal input.digits_secure_phone_otp { height: 52px !important; font-size: 17px !important; line-height: 52px !important; letter-spacing: 6px !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-body { margin-top: 12px !important; } .digits_wc_checkout_phone_verification_modal button.digits-form_button { min-height: 50px !important; } .digits_wc_checkout_phone_verification_modal .digits_secure_modal-close { top: max( 14px, env(safe-area-inset-top) ) !important; right: 14px !important; width: 38px !important; height: 38px !important; } body > .dig_popmessage { top: max( 66px, calc(env(safe-area-inset-top) + 62px) ) !important; right: 14px !important; left: 14px !important; width: auto !important; max-width: none !important; border-radius: 13px !important; } body > .dig_popmessage .dig_popmessage_contents { grid-template-columns: 40px minmax(0, 1fr) 28px !important; column-gap: 10px !important; min-height: 80px !important; padding: 14px 14px 14px 10px !important; } body > .dig_popmessage .dig_firele { width: 40px !important; height: 40px !important; border-radius: 11px !important; } } @media (max-width: 380px) { #digits_protected .digits-form_wrapper.digits_modal_box { padding: 24px 17px 21px !important; border-radius: 14px !important; } #digits_protected .digits-form_wrapper.digits_modal_box::before { width: 148px !important; height: 42px !important; margin-bottom: 13px !important; } }