/**
 * Register Page Styles
 */

/* CSS Variables */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --error-color: #dc3545;
    /* Same as the dashboard sidebar (--sidebar-bg in style.css) */
    --sidebar-bg: #2c3e50;
    --text-color: #2c3e50;
    --border-color: #ddd;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    --transition-speed: 0.3s;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
}

/* Global Text Wrapping */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Container & Layout */
.useraccess-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Background Decorative Shapes */
.background-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
}

.shape-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: -50px;
}

.shape-3 {
    width: 150px;
    height: 150px;
    top: 50%;
    right: 10%;
}

/* Main Content Area */
.useraccess-content {
    position: relative;
    z-index: 10;
    max-width: 500px;
    width: 100%;
}

/* Brand Section */
.brand-section {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInDown 0.6s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

.brand-name {
    display: inline-block;
    margin-bottom: 0.75rem;
    line-height: 0;
}

.brand-name img {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.brand-tagline {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

/* Form Container */
.form-container {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Header */
.form-header {
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--primary-color), #0056b3);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.form-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.form-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Form Steps */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Form Elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--primary-color);
}

/* Inputs: the icon sits in its own box joined to the left of the input.
   Labels carry text only (blue, no icon). */
.input-icon-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: white;
    overflow: hidden;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.input-icon-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.input-icon-group:has(.form-control.error) {
    border-color: var(--error-color);
}

.input-icon-group:has(.form-control.success) {
    border-color: var(--success-color);
}

.input-icon-addon {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    color: var(--primary-color);
    border-right: 2px solid var(--border-color);
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.input-icon-group:focus-within .input-icon-addon {
    border-right-color: var(--primary-color);
}

.input-icon-group .form-control,
.input-icon-group .form-control:focus {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.input-icon-group .country-select-wrapper {
    flex: 1;
    min-width: 0;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: all var(--transition-speed);
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-control.error {
    border-color: var(--error-color);
}

.form-control.success {
    border-color: var(--success-color);
}

/* Country Select with Flag Icon */
.country-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.country-flag-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.country-flag-icon.fi {
    opacity: 1;
}

.country-select-with-flag {
    padding-left: 1rem;
    transition: padding-left 0.3s ease;
}

.country-select-with-flag.has-flag {
    padding-left: 3rem !important;
}

.form-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Error & Success Messages */
.error-message,
.success-message {
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message {
    background: #fee;
    color: var(--error-color);
    border: 1px solid #fcc;
}

.success-message {
    background: #efe;
    color: var(--success-color);
    border: 1px solid #cfc;
}

/* Photo Upload */
.photo-upload-container {
    margin-top: 0.5rem;
}

.photo-preview {
    /* Square container, em-sized so it scales with the form and never
       overflows the card. The crop frame keeps the same 15:10 ratio. */
    width: 18em;
    max-width: 90%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border: 3px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-speed);
    background: #f8f9fa;
    overflow: hidden;
}

/* Once an image is loaded the container becomes the cropper surface */
.photo-preview.has-image {
    cursor: default;
    border-style: solid;
    border-color: var(--border-color);
    background: #000;
}

.photo-preview:hover {
    border-color: var(--primary-color);
    background: #e9ecef;
}

.photo-preview i {
    font-size: 4rem;
    color: #6c757d;
}

.photo-preview p {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-input {
    display: none;
}

/* Image Cropper */
.image-cropper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 9px;
}

.cropper-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: none;
}

/* The 10cm x 10cm crop frame (66.667% of the 15cm container). Everything
   outside the frame is dimmed via a large spread shadow clipped by the
   cropper's overflow:hidden. The part inside the frame is what gets stored. */
.crop-frame {
    position: absolute;
    width: 66.6667%;
    height: 66.6667%;
    box-sizing: border-box;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    cursor: move;
    touch-action: none;
}

/* Rule-of-thirds guides inside the frame */
.crop-frame::before,
.crop-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.crop-frame::before {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 33.3333%;
}

.crop-frame::after {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin: 33.3333% 0;
}


/* Buttons */
.btn {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: #e9ecef;
    color: #495057;
    border: 2px solid #dee2e6;
}

.btn-secondary:hover {
    background: #d3d6d9;
    color: #495057;
    border-color: #c6c8ca;
}

.button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Form Links */
.form-links {
    margin-top: 1.5rem;
    text-align: center;
}

.form-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-speed);
}

.form-links a:hover {
    color: #0056b3;
}

/* Footer */
.useraccess-footer {
    text-align: center;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

/* Loading State */
.btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 576px) {
    .useraccess-container {
        padding: 1rem;
    }
    
    .form-container {
        padding: 1.5rem;
    }
    
    .brand-name img {
        height: 1.75rem;
    }
    
    .form-title {
        font-size: 1.25rem;
    }
    
    .button-group {
        grid-template-columns: 1fr;
    }
    
    .photo-preview i {
        font-size: 3rem;
    }
}

/* Toast built by showAlert() in the page scripts: red unless it is a success */
.alert.js-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 1rem 1.5rem;
    background: #dc3545;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    animation: slideInRight 0.3s ease;
}

.alert.js-alert.alert-success {
    background: #28a745;
}

/* Added by showAlert() just before the toast is removed */
.alert.is-leaving {
    animation: slideOutRight 0.3s ease;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==========================================================================
   Compact layout — about 38% shorter than the original spacing above
   (30%, then a further 10%, then 3% taller again), and narrower: 30% on desktop, 15% on phones
   and tablets (768px and below).
   Identical in login.css and register.css across all the apps (CUSTOMER,
   STAFF, OFFICE, COMPANY, AI) except the width numbers, which are each
   file's own original widths reduced — change every copy together.
   It sits last in the file so it wins over the rules above, including the
   phone rules, which get their own compact values below.
   ========================================================================== */
.useraccess-container {
    padding: 0.75rem;
    line-height: 1.45;
}

.brand-section {
    margin-bottom: 0.7rem;
}

.logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.35rem;
}

.brand-name {
    margin-bottom: 0.3rem;
}

.brand-name img {
    height: 1.5rem;
}

.brand-tagline {
    font-size: 0.875rem;
}

.form-container {
    padding: 1.2rem 1.4rem;
}

.form-header {
    margin-bottom: 0.85rem;
}

.form-title {
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
}

.form-subtitle {
    font-size: 0.85rem;
}

.form-group {
    margin-bottom: 0.9rem;
}

.form-group label {
    margin-bottom: 0.25rem;
}

.form-control {
    padding: 0.5rem 0.8rem;
}

.btn {
    padding: 0.6rem;
}

.forgot-password-link {
    margin-top: 0.3rem;
}

.form-text,
.input-hint {
    margin-top: 0.2rem;
}

.resend-code-btn {
    margin-top: 0.5rem;
}

.form-links {
    margin-top: 0.85rem;
}

.form-divider {
    margin: 0.6rem 0;
}

.register-link {
    padding: 0.3rem 0.8rem;
    margin-top: 0.25rem;
}

.company-info-display {
    margin-bottom: 0.75rem;
}

.useraccess-footer {
    margin-top: 0.85rem;
}

@media (max-width: 576px) {
    .useraccess-container {
        padding: 0.6rem;
    }

    .form-container {
        padding: 1rem;
    }

    .brand-name img {
        height: 1.35rem;
    }

    .form-title {
        font-size: 1.15rem;
    }
}

/* Width: 30% narrower than the original, then widened by 10% (desktop and phones); was 500px;
   phones and tablets were 15% narrower before the same 10% widening. */
.useraccess-content {
    max-width: 385px;
}

@media (max-width: 768px) {
    .useraccess-content {
        width: 93.5%;
        max-width: 468px;
    }
}