/* ── Foodi360 Connector — Login, register, account ───────── * Woodmart styles the markup (woocommerce-form-login, wd-registration-page, * woocommerce-MyAccount-navigation / -content, form-row, input-text, button). * This file holds what it does not: paired field rows, the OTP input, the * account panels, and :where() fallbacks for other themes. * Tokens: foodi360-public.css. * ───────────────────────────────────────────────────────── */ /* ── Forms ───────────────────────────────────────────────── */ .foodi360-field { margin-block: 0 20px; } .foodi360-field__label .required { font-size: inherit; } .foodi360-field__hint { display: block; margin-block-start: 5px; color: var(--foodi360-muted); font-size: 0.85em; } .foodi360-field--choice { padding: 0; border: 0; } .foodi360-field--choice label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 20px; font-weight: 400; } /* First / last name pairs: grid instead of Woodmart's 48% floats (keeps RTL and gaps even) */ .foodi360-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .foodi360-field-row > :is(.form-row-first, .form-row-last) { width: auto; float: none; } @media (max-width: 576px) { .foodi360-field-row { grid-template-columns: 1fr; } } .foodi360-otp-input { letter-spacing: 0.4em; text-align: center; font-size: 1.2em; } .foodi360-auth__hint { margin-block-end: 20px; color: var(--foodi360-muted); } .foodi360-auth__submit .foodi360-spinner { margin-inline-end: 6px; } .foodi360-auth .login-form-footer { margin-block-start: 15px; } /* "Or / Create an account" under the login form (Woodmart .col-register-text) */ .foodi360-auth__switch { margin-block-start: 30px; text-align: center; } .foodi360-auth__switch .wd-login-divider { margin-block-end: 15px; } .foodi360-auth__switch .btn { width: 100%; } /* Fallbacks without Woodmart */ :where(.foodi360-auth) { max-width: 450px; margin-inline: auto; } :where(.foodi360-auth__title) { text-align: center; } :where(.foodi360-field__label) { display: block; margin-block-end: 5px; font-weight: 600; } :where(.foodi360-field__input) { width: 100%; box-sizing: border-box; } :where(.foodi360-auth .foodi360-auth__submit) { width: 100%; } :where(.foodi360-auth .login-form-footer) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; } /* ── Account (Woodmart My Account layout) ────────────────── */ .foodi360-account { margin-block-end: 40px; } .foodi360-account__section:focus { outline: none; } .foodi360-account__section + .foodi360-account__section { margin-block-start: 40px; } .foodi360-account__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block: 30px 10px; } .foodi360-account__section-title { margin: 0 0 15px; text-transform: uppercase; font-size: 18px; } .foodi360-account__section-head .foodi360-account__section-title { margin: 0; } .foodi360-account__profile th { width: 30%; } .foodi360-account__edit { margin-block-start: 20px; } .foodi360-account__edit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } /* Once the tabs script runs, the navigation names the panel: hide the repeated heading */ .foodi360-tabs-ready [data-foodi360-tab-panel] > .foodi360-account__section-title:first-child { display: none; } :where(.foodi360-account__layout) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 30px; } :where(.foodi360-account__nav ul) { margin: 0; padding: 0; list-style: none; } :where(.foodi360-account__nav a) { display: block; padding: 10px 15px; font-weight: 600; text-decoration: none; } :where(.foodi360-account__nav .is-active a) { background-color: var(--foodi360-bg-soft); } @media (max-width: 768.98px) { :where(.foodi360-account__layout) { grid-template-columns: 1fr; } } /* The account widget ([foodi360_account_widget]) is styled in foodi360-header.css (loaded in ) */ /* ── Continue with Google (templates/auth/google.php) ───── * Woodmart's .wd-social-login .login-goo-link button (colour, radius, hover) with the * Google logo as inline SVG in the white tile Woodmart draws with an external image. */ .foodi360-google { margin-block-start: 20px; } /* The Google block already has the "Or" divider: drop the second one above "Create an account" */ .foodi360-google ~ .foodi360-auth__switch .wd-login-divider { display: none; } .foodi360-google__buttons { display: flex; } .wd-social-login .foodi360-google__button.login-goo-link { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding-inline: 48px; text-transform: none; } .wd-social-login .foodi360-google__button.login-goo-link::before { content: none; } .foodi360-google__logo { position: absolute; top: 50%; inset-inline-start: calc(8px + var(--btn-accented-brd-radius, 0px) / 4); display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 2px; background-color: #fff; transform: translateY(-50%); } .foodi360-google__fallback { margin: 0; color: var(--color-gray-500, #767676); font-size: 14px; text-align: center; } /* Other themes (no Woodmart social-login CSS): Google blue button */ :where(.foodi360-google__button) { min-height: 42px; border: 0; border-radius: 4px; background-color: #4285f4; color: #fff; font-weight: 600; cursor: pointer; } /* Google steps: "Is this your account?" */ .foodi360-google__account { display: grid; gap: 2px; margin-block-end: 20px; } .foodi360-google__account-email { color: var(--color-gray-500, #767676); unicode-bidi: plaintext; text-align: start; } .foodi360-google__answers { display: grid; gap: 10px; } .foodi360-google__answers .button { width: 100%; }