.magic-link-form {
display: flex;
flex-direction: column;
gap: 12px;
} .magic-link-info {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: var(--primary-fonce) !important;
color: var(--text-color) !important;
border-radius: var(--border-radius);
margin-bottom: 22px;
animation: slideInDown 0.3s ease;
}
.magic-link-info .info-icon {
color: var(--accent-color) !important;
flex-shrink: 0;
margin-top: 3px;
width: 20px;
height: 20px;
}
.magic-link-info span {
color: #fff;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.woocommerce-form-login.magic-link-form label,
.woocommerce-form-register.magic-link-form label {
display: none !important;
} .magic-link-btn {
font-size: 1.25rem;
line-height: 1.45;
display: inline-block;
text-align: center;
background-color: var(--accent-color);
color: var(--primary-fonce);
padding: 1rem 2rem;
border-radius: var(--border-radius);
border: 1px solid var(--accent-color);
text-decoration: none !important;
font-weight: bold;
transition: background-color 0.3s ease;
}
.magic-link-btn:hover:not(:disabled) {
background-color: var(--secondary-fonce) !important;
color: var(--text-color) !important;
border: 1px solid var(--text-color) !important;
}
.magic-link-btn:disabled {
opacity: 0.7 !important;
cursor: not-allowed !important;
}
.magic-link-btn.loading {
pointer-events: none !important;
} .spinner-small {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-top-color: #000;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .magic-link-error {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--primary-fonce);
border: 1px solid var(--accent-color);
border-radius: 12px;
margin-bottom: 16px;
animation: slideInDown 0.3s ease;
}
.magic-link-error .error-icon {
color: var(--accent-color) !important;
font-size: 18px;
flex-shrink: 0;
}
.magic-link-error .error-text {
color: var(--accent-color) !important;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
} .magic-link-success-msg {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--primary-fonce);
border: 1px solid var(--text-color);
border-radius: 12px;
margin-bottom: 16px;
animation: slideInDown 0.3s ease;
}
.magic-link-success-msg .success-icon {
color: var(--accent-color);
font-size: 18px;
flex-shrink: 0;
}
.magic-link-success-msg .success-text {
color: var(--accent-color);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
} .magic-link-sent-message {
padding: 20px;
background: var(--primary-fonce);
border: 1px solid var(--text-color);
border-radius: 12px;
margin: 20px;
animation: slideInDown 0.3s ease;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.magic-link-sent-message.show {
opacity: 1;
transform: translateY(0);
}
.message-content {
display: flex;
align-items: flex-start;
gap: 16px;
text-align: left;
}
.message-icon {
color: var(--accent-color);
font-size: 32px;
flex-shrink: 0;
line-height: 1;
}
.message-text h3 {
color: #fff;
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.message-text p {
color: #8e8e93;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
margin: 0 0 8px 0;
}
.message-text p strong {
color: #fff;
}
.message-text p.small-text {
font-size: 12px;
color: #6d6d70;
margin-top: 12px;
} .magic-link-verifying {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
min-height: 300px;
text-align: center;
}
.magic-link-verifying .spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255, 159, 10, 0.2);
border-top-color: #ff9f0a;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 20px;
}
.magic-link-verifying h2 {
color: #fff;
font-size: 20px;
font-weight: 600;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.magic-link-verifying p {
color: #8e8e93;
font-size: 14px;
font-weight: 500;
margin: 0;
} .magic-link-success {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
min-height: 300px;
text-align: center;
animation: fadeIn 0.6s ease;
}
.magic-link-success .success-icon {
color: var(--accent-color);
font-size: 60px;
line-height: 1;
margin-bottom: 20px;
animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.magic-link-success h2 {
color: #fff;
font-size: 24px;
font-weight: 600;
margin: 0 0 12px 0;
letter-spacing: -0.01em;
}
.magic-link-success p {
color: #8e8e93;
font-size: 14px;
font-weight: 500;
margin: 0;
} .magic-link-error-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px;
min-height: 300px;
text-align: center;
animation: fadeIn 0.6s ease;
}
.magic-link-error-message .error-icon {
color: var(--accent-color) !important;
font-size: 60px;
line-height: 1;
margin-bottom: 20px;
animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.magic-link-error-message h2 {
color: #fff;
font-size: 24px;
font-weight: 600;
margin: 0 0 12px 0;
letter-spacing: -0.01em;
}
.magic-link-error-message p {
color: #8e8e93;
font-size: 14px;
font-weight: 500;
margin: 0 0 24px 0;
line-height: 1.5;
}
.retry-link {
display: inline-block;
padding: 12px 24px;
background: #ff9f0a;
color: #000;
text-decoration: none;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.retry-link:hover {
background: #ffb340;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 159, 10, 0.3);
} @keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes popIn {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
} body:not(.admin-user) .woocommerce-form-login__password,
body:not(.admin-user) .woocommerce-form-register__password,
body:not(.admin-user) .woocommerce-form-login__rememberme,
body:not(.admin-user) .woocommerce-form-register__password-2,
body:not(.admin-user) [name*="password"] {
display: none !important;
} body:not(.admin-user) .woocommerce-EditAccountForm fieldset,
body:not(.admin-user) fieldset legend:contains("Changement"),
body:not(.admin-user) .woocommerce-form-row:has(input[name*="password"]) {
display: none !important;
} body:not(.admin-user) input[name="password_current"],
body:not(.admin-user) input[name="password_1"],
body:not(.admin-user) input[name="password_2"],
body:not(.admin-user) input[id*="password"],
body:not(.admin-user) label[for*="password"],
body:not(.admin-user) .woocommerce-password-strength,
body:not(.admin-user) .woocommerce-password-hint {
display: none !important;
} @media (max-width: 768px) {
.magic-link-info {
padding: 10px 12px;
gap: 10px;
}
.magic-link-info span {
font-size: 12px;
}
.magic-link-btn {
padding: 14px 20px !important;
font-size: 15px !important;
}
.message-content {
gap: 12px;
}
.message-icon {
font-size: 28px;
}
.message-text h3 {
font-size: 16px;
}
.message-text p {
font-size: 13px;
}
}
@media (max-width: 480px) {
.magic-link-btn {
padding: 12px 16px !important;
font-size: 14px !important;
}
.magic-link-info {
margin-bottom: 10px;
}
.message-content {
flex-direction: column;
text-align: center;
}
.message-icon {
margin-bottom: 8px;
}
}  .pin-mode-toggle {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pin-mode-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius);
color: var(--text-color);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.pin-mode-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent-color);
transform: translateY(-1px);
}
.pin-mode-btn svg {
flex-shrink: 0;
} .pin-email-request {
max-width: 560px;
margin: 0 auto;
padding: 30px;
background: var(--primary-fonce);
border-radius: 16px;
animation: fadeIn 0.4s ease;
}
.pin-header {
margin-bottom: 24px;
text-align: center;
}
.pin-header h2 {
color: #fff;
font-size: 24px;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
}
.pin-back-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.pin-back-btn:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--accent-color);
}
.pin-instructions {
text-align: center;
margin-bottom: 24px;
}
.instruction-icon {
color: var(--accent-color);
margin-bottom: 16px;
}
.pin-instructions p {
color: #FFFFFF;
font-size: 15px;
line-height: 1.5;
margin: 0 0 8px 0;
}
.pin-instructions p.small-text {
color: #FFFFFF;
margin-top: 8px;
}
.pin-email-form {
margin-bottom: 16px;
}
.pin-email-form .form-group {
margin-bottom: 16px;
}
.pin-email-form input[type="email"] {
width: 100%;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: #fff !important;
font-size: 16px;
transition: all 0.3s ease;
}
.pin-email-form input[type="email"]:focus {
outline: none;
border-color: var(--accent-color);
background: rgba(255, 255, 255, 0.08);
color: #fff !important;
}
.pin-email-form input[type="email"]:active {
color: #fff !important;
}
.pin-email-form input[type="email"]::placeholder {
color: #FFFFFF;
} .pin-submit-btn:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
} .pin-submit-btn:not(:disabled) {
cursor: pointer !important;
}
.pin-submit-btn:not(:disabled):hover {
cursor: pointer !important;
}
.pin-error-message {
padding: 12px 16px;
background: rgba(255, 59, 48, 0.1);
border: 1px solid rgba(255, 59, 48, 0.3);
border-radius: 8px;
color: #ff3b30;
font-size: 14px;
margin-top: 12px;
animation: slideInDown 0.3s ease;
} .pin-display-container {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background: var(--primary-fonce);
border-radius: 16px;
animation: fadeIn 0.4s ease;
}
.pin-code-display {
background: rgba(255, 159, 10, 0.1);
border: 2px solid var(--accent-color);
border-radius: 16px;
padding: 32px 24px;
text-align: center;
margin: 24px 0;
}
.pin-code-label {
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 12px;
}
.pin-code-value {
color: #FFFFFF;
font-size: 48px;
font-weight: bold;
font-family: 'Courier New', monospace;
letter-spacing: 12px;
margin-bottom: 16px;
text-shadow: 0 2px 10px rgba(255, 159, 10, 0.3);
}
.pin-code-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #FFFFFF;
font-size: 13px;
}
.pin-code-timer svg {
flex-shrink: 0;
} .pin-waiting {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px;
text-align: center;
}
.pin-waiting .spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 159, 10, 0.2);
border-top-color: var(--accent-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.pin-waiting p {
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
margin: 0;
}
.pin-waiting .error-icon {
color: var(--accent-color);
font-size: 40px;
} .pin-cancel-btn {
display: block;
width: 100%;
padding: 12px 20px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
color: var(--text-color);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 16px;
}
.pin-cancel-btn:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--accent-color);
} @media (max-width: 768px) {
.pin-email-request,
.pin-display-container {
padding: 24px 20px;
}
.pin-code-value {
font-size: 36px;
letter-spacing: 8px;
}
.pin-header h2 {
font-size: 20px;
}
}
@media (max-width: 480px) {
.pin-email-request,
.pin-display-container {
padding: 20px 16px;
}
.pin-code-value {
font-size: 32px;
letter-spacing: 6px;
}
.pin-code-display {
padding: 24px 16px;
}
} @media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
} .magic-link-btn:focus-visible,
.retry-link:focus-visible {
outline: 2px solid #ff9f0a;
outline-offset: 2px;
} @media (prefers-color-scheme: dark) {
.magic-link-info span {
color: #fff;
}
.magic-link-error .error-text {
color: var(--accent-color) !important;
}
.magic-link-success-msg .success-text {
color: var(--accent-color) !important;
}
}  .woocommerce:has(.convo-notices-container) {
flex-direction: column !important;
} .convo-notices-container {
width: 100%;
max-width: 600px;
animation: slideInDown 0.4s ease;
box-sizing: border-box;
display: block;
position: relative;
margin: 0 auto;
} .woocommerce-notices-wrapper .convo-magic-link-notice,
.convo-magic-link-notice,
.convo-notices-container .convo-magic-link-notice {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 18px 20px !important;
border-radius: 12px !important;
margin: 0 0 16px 0 !important;
animation: slideInDown 0.3s ease !important;
list-style: none !important;
border-left: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
width: 100% !important;
box-sizing: border-box !important;
} .convo-magic-link-notice.woocommerce-error {
border: 1px solid var(--accent-color) !important;
color: var(--accent-color) !important;
margin-bottom: 0 !important;
}
.convo-magic-link-notice.woocommerce-error::before {
display: none !important;
}
.convo-magic-link-notice.woocommerce-error li {
color: var(--accent-color) !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.5 !important;
list-style: none !important;
} .convo-magic-link-notice.woocommerce-info {
background: var(--primary-fonce) !important;
border: 1px solid var(--text-color) !important;
color: var(--text-color) !important;
}
.convo-magic-link-notice.woocommerce-info::before {
display: none !important;
}
.convo-magic-link-notice.woocommerce-info li {
color: var(--text-color) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
list-style: none !important;
} .convo-magic-link-notice.woocommerce-message {
border: 1px solid var(--accent-color) !important;
color: var(--accent-color) !important;
}
.convo-magic-link-notice.woocommerce-message::before {
display: none !important;
}
.convo-magic-link-notice.woocommerce-message li {
color: var(--accent-color) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
list-style: none !important;
} .convo-magic-link-notice .notice-icon {
font-size: 2rem !important;
flex-shrink: 0 !important;
line-height: 1 !important;
margin-top: 0px !important;
margin-right: 4px !important;
display: inline-block !important;
}
.convo-magic-link-notice.woocommerce-error .notice-icon {
color: var(--accent-color) !important;
}
.convo-magic-link-notice.woocommerce-info .notice-icon {
color: var(--accent-color) !important;
}
.convo-magic-link-notice.woocommerce-message .notice-icon {
color: var(--accent-color) !important;
} .convo-magic-link-notice ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
.convo-magic-link-notice li {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
} .woocommerce-notices-wrapper:empty {
display: none !important;
} .woocommerce-order-received .convo-notices-container {
margin-top: 20px;
margin-bottom: 30px;
} @media (max-width: 768px) {
.convo-notices-container {
max-width: 100%;
padding: 0 16px;
margin-bottom: 16px;
}
.woocommerce-order-received .convo-notices-container {
margin-top: 16px;
margin-bottom: 20px;
}
.convo-magic-link-notice {
padding: 16px 18px !important;
gap: 10px !important;
}
.convo-magic-link-notice .notice-icon {
font-size: 20px !important;
}
.convo-magic-link-notice li {
font-size: 13px !important;
}
}
@media (max-width: 480px) {
.convo-notices-container {
padding: 0 12px;
margin-bottom: 12px;
}
.convo-magic-link-notice {
padding: 14px 16px !important;
gap: 8px !important;
border-radius: 10px !important;
}
.convo-magic-link-notice .notice-icon {
font-size: 18px !important;
}
.convo-magic-link-notice li {
font-size: 12px !important;
}
}