/**
 * 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);
}

/* Registration Key Steps (Key One / Key Two) */
.registration-key-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 123, 255, 0.08);
    border: 1px solid rgba(0, 123, 255, 0.2);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.registration-key-note i {
    color: var(--primary-color);
    margin-top: 0.15rem;
}

.registration-key-input {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
}

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

/* Keep validation messages on a full-width line below the country select,
   not beside it (the wrapper is a flex container). */
.country-select-wrapper .error-message,
.country-select-wrapper .success-message {
    flex-basis: 100%;
    width: 100%;
}

.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-label {
    cursor: pointer;
    width: 100%;
}

.photo-upload-container {
    margin-top: 0.5rem;
}

.photo-preview {
    width: 260px;
    height: 260px;
    margin: 0 auto;
    border: 3px dashed var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-speed);
    background: #f8f9fa;
    overflow: hidden;
}

.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 Wrapper with Crop Frame */
.preview-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    user-select: none;
}

.preview-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: none;
}

/* Crop Frame */
.crop-frame {
    position: absolute;
    border: 3px solid var(--primary-color);
    /* Rule-of-thirds grid: 2 vertical + 2 horizontal thin lines dividing the
       frame into 9 equal sections, layered over the tinted frame background. */
    background:
        linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.6) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.6) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.6) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.6) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.6) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.6) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.6) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.6) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
        rgba(0, 123, 255, 0.1);
    cursor: move;
    z-index: 10;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease;
}

.crop-frame::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border: 1px dashed white;
    pointer-events: none;
}

.crop-frame::after {
    content: '\f0b2';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    opacity: 0.7;
    pointer-events: none;
}

.crop-frame.dragging {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

.crop-frame.dragging::after {
    content: '\f256';
    opacity: 1;
}

.image-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.btn-image-control {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.btn-image-control:hover {
    background: rgba(0, 123, 255, 0.8);
    transform: scale(1.1);
}

.btn-image-control i {
    font-size: 0.9rem;
}

.drag-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    pointer-events: none;
    backdrop-filter: blur(5px);
    animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Zoom Controls */
.zoom-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    backdrop-filter: blur(5px);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-editor:hover .zoom-control {
    opacity: 1;
}

.btn-zoom {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-zoom:hover {
    background: var(--primary-color, #3498db);
    transform: scale(1.1);
}

.btn-zoom i {
    font-size: 0.8rem;
}

.zoom-control input[type="range"] {
    width: 100px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    -webkit-appearance: none;
}

.zoom-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.zoom-control input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* External Zoom Controls (Outside Image Container) */
.zoom-control-external {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    margin-top: 0.5rem;
    border: 2px solid var(--border-color);
}

.zoom-control-external label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.zoom-control-external label i {
    color: var(--primary-color);
}

.zoom-control-external input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.zoom-control-external input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
    transition: all 0.3s ease;
}

.zoom-control-external input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.6);
}

.zoom-control-external input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.4);
    transition: all 0.3s ease;
}

.zoom-control-external input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.6);
}

.zoom-control-external span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    min-width: 50px;
    text-align: right;
}

/* 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;
    text-decoration: none;
}

/* 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: 0 0 16px;
    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;
    }
    
    .photo-preview {
        width: 260px;
        height: 260px;
    }
    
    .photo-preview i {
        font-size: 3rem;
    }
}

/* Desktop View - Reduce form width by 15% */
@media (min-width: 1024px) {
    .useraccess-content {
        max-width: 425px; /* 500px reduced by 15% */
    }
}

/* 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: 99999;
    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 (425px at 1024px and wider);
   phones and tablets were 15% narrower before the same 10% widening. */
.useraccess-content {
    max-width: 385px;
}

@media (min-width: 1024px) {
    .useraccess-content {
        max-width: 328px;
    }
}

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