/* Import Inter font with specific weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Reset body and html */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
    height: 100%;
    overflow: hidden;
}

/* Log in */
#login-container {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0px;

    /* Full viewport */
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* Base/White */
    background: #FFFFFF;
    
    /* Set Inter as base font */
    font-family: 'Inter', sans-serif;
}

/* Section */
#left-section {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;

    width: calc(100vw - 720px);
    min-width: 540px;
    height: 100vh;
    overflow: hidden;

    /* Base/White */
    background: #FFFFFF;

    /* Inside auto layout */
    flex: 1;
    order: 0;
}

/* Container */
#container {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 10px;

    width: 360px;
    max-width: 360px;
    height: auto;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Content */
#content {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 32px;

    width: 360px;
    height: auto;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Header */
#header {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 12px;

    width: 360px;
    height: auto;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Logo Pool */
#logo-pool {
    position: relative;
    width: 148px;
    height: 40px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

#logo-pool img {
    width: 148px;
    height: 40px;
}

/* Text and supporting text */
#text-and-supporting-text {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 8px;

    width: 360px;
    height: 76px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Text */
#text {
    width: 360px;
    height: 44px;

    /* Display md/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    /* identical to box height, or 122% */
    text-align: center;
    letter-spacing: -0.02em;

    /* Gray/900 */
    color: #181D27;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Supporting text */
#supporting-text {
    width: 360px;
    height: 24px;

    /* Text md/Regular */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    text-align: center;

    /* Gray/600 */
    color: #535862;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Content inner */
#content-inner {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;

    width: 360px;
    height: auto;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Social button groups */
#social-buttons {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    width: 360px;
    height: 140px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Social button base styles */
.social-button {
    box-sizing: border-box;

    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;

    width: 360px;
    height: 44px;

    /* Base/White */
    background: #FFFFFF;
    /* Gray/300 */
    border: 1px solid #D5D7DA;
    /* Shadows/shadow-xs */
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;

    /* Inside auto layout */
    flex: none;
    align-self: stretch;
    flex-grow: 0;

    cursor: pointer;
    transition: all 0.2s ease;
}

.social-button:hover {
    background: #F9FAFB;
    border-color: #717680;
}

/* Apple button specific styles - black background */
.apple-button {
    background: #000000;
    border: 1px solid #000000;
}

.apple-button:hover {
    background: #1A1A1A;
    border-color: #1A1A1A;
}

.apple-button .social-text {
    color: #FFFFFF;
}

/* Social icon */
.social-icon {
    width: 24px;
    height: 24px;

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

.social-icon img {
    width: 24px;
    height: 24px;
}

/* Social text */
.social-text {
    /* Text md/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */

    /* Gray/700 */
    color: #414651;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Content divider */
#content-divider {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;

    width: 360px;
    height: 20px;

    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Divider lines */
#divider-left,
#divider-right {
    width: 155px;
    height: 0px;

    /* Gray/200 */
    border: 1px solid #E9EAEB;

    /* Inside auto layout */
    flex: none;
    flex-grow: 1;
}

#divider-left { order: 0; }
#divider-right { order: 2; }

/* OR text */
#or-text {
    /* Text sm/Medium */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */

    /* Gray/600 */
    color: #535862;

    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Form */
#login-form {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px;
    
    width: 360px;
    height: auto;
    
    /* Inside auto layout */
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

/* Email Input field */
#input-field {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    
    width: 360px;
    height: 70px;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Input with label */
#input-with-label,
#input-with-label-password {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    
    width: 360px;
    height: 70px;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

/* Label wrapper */
.label-wrapper {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 2px;
    
    height: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Label */
.input-label {
    height: 20px;
    
    /* Text sm/Medium */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    
    /* Gray/700 */
    color: #414651;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Email Input wrapper */
#email-input-wrapper {
    box-sizing: border-box;
    
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
    
    width: 360px;
    height: 44px;
    
    /* Base/White */
    background: #FFFFFF;
    /* Gray/300 */
    border: 1px solid #D5D7DA;
    /* Shadows/shadow-xs */
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Email Input */
#email-input {
    width: 100%;
    height: 24px;
    
    /* Text md/Regular */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    
    /* Gray/900 */
    color: #181D27;
    
    background: transparent;
    border: none;
    outline: none;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

#email-input::placeholder {
    /* Gray/500 */
    color: #717680;
}

/* Password Input field */
#input-field-password {
    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 6px;
    
    width: 360px;
    height: 70px;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Password Input wrapper */
#password-input-wrapper {
    box-sizing: border-box;
    
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    gap: 8px;
    
    width: 360px;
    height: 44px;
    
    /* Base/White */
    background: #FFFFFF;
    /* Gray/300 */
    border: 1px solid #D5D7DA;
    /* Shadows/shadow-xs */
    box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Password Input */
#password-input {
    width: 100%;
    height: 24px;
    
    /* Text md/Regular */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    
    /* Gray/900 */
    color: #181D27;
    
    background: transparent;
    border: none;
    outline: none;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

#password-input::placeholder {
    /* Gray/500 */
    color: #717680;
}

/* Focus states for input wrappers */
#email-input-wrapper:focus-within {
    border-color: #0000FF;
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 255, 0.1);
}

#password-input-wrapper:focus-within {
    border-color: #0000FF;
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 255, 0.1);
}

/* Remember me and Forgot password row */
#remember-forgot-row {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    
    width: 360px;
    height: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}

/* Remember me checkbox */
#remember-me {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    
    width: 246px;
    height: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 1;
}

/* Checkbox */
#remember-checkbox {
    box-sizing: border-box;
    
    width: 16px;
    height: 16px;
    
    /* Gray/300 */
    border: 1px solid #D5D7DA;
    border-radius: 4px;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Remember me label */
#remember-me label {
    height: 20px;
    white-space: nowrap;
    
    /* Text sm/Medium */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    
    /* Gray/700 */
    color: #414651;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Forgot password link */
#forgot-password-link {
    /* Auto layout */
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 6px;
    white-space: nowrap;
    
    height: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    
    text-decoration: none;
}

#forgot-password-text {
    height: 20px;
    white-space: nowrap;
    
    /* Text sm/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    
    /* Brand/700 */
    color: #0000D4;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

#forgot-password-link:hover {
    text-decoration: underline;
}

/* Login button */
#login-button {
    box-sizing: border-box;
    
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    
    width: 360px;
    height: 44px;
    
    /* Brand/600 */
    background: #0000FF;
    /* Shadows/shadow-xs-skeuomorphic */
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18), inset 0px -2px 0px rgba(10, 13, 18, 0.05);
    border-radius: 8px;
    
    /* Inside auto layout */
    flex: none;
    order: 3;
    align-self: stretch;
    flex-grow: 0;
    
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#login-button:hover {
    background: #0000D4;
}

#login-button:active {
    transform: translateY(1px);
}

/* Button text padding */
#button-text-padding {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 2px;
    
    height: 24px;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

/* Button text */
#button-text {
    height: 24px;
    
    /* Text md/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    
    /* Base/White */
    color: #FFFFFF;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Row - Don't have an account */
#signup-row {
    /* Auto layout */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    padding: 0px;
    gap: 4px;
    white-space: nowrap;
    
    width: 360px;
    height: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 3;
    align-self: stretch;
    flex-grow: 0;
}

/* Text */
#signup-text {
    height: 20px;
    white-space: nowrap;
    
    /* Text sm/Regular */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    
    /* Gray/600 */
    color: #535862;
    
    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Buttons/Button */
#signup-link {
    /* Auto layout */
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 6px;
    
    height: 20px;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    
    text-decoration: none;
}

/* Text */
#signup-link-text {
    height: 20px;
    white-space: nowrap;
    
    /* Text sm/Semibold */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    /* identical to box height, or 143% */
    
    /* Brand/700 */
    color: #0000D4;
    
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
}

#signup-link:hover {
    text-decoration: underline;
}

/* Section - Right side */
#right-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 720px;
    height: 100vh;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;

    /* Base/White */
    background: #FFFFFF;

    /* Inside auto layout */
    flex: none;
    order: 1;
}

/* Image */
#testimonial-image {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: calc(960px - 48px);
    max-width: calc(720px - 48px);

    /* Background image */
    background-image: url('/images/indonez.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Responsive adjustments */
@media (max-width: 1260px) {
    #right-section {
        display: none;
    }
    
    #left-section {
        width: 100vw;
        min-width: unset;
    }
}

@media (max-width: 480px) {
    #left-section {
        padding: 0 20px;
    }
    
    #container {
        padding: 0;
        width: 100%;
        max-width: 360px;
    }
    
    #content,
    #content-inner,
    #header,
    #text-and-supporting-text,
    #text,
    #supporting-text,
    #social-buttons,
    .social-button,
    #content-divider,
    #login-form,
    #input-field,
    #input-field-password,
    #input-with-label,
    #input-with-label-password,
    #email-input-wrapper,
    #password-input-wrapper,
    #remember-forgot-row,
    #login-button,
    #signup-row {
        width: 100%;
        max-width: 360px;
    }
}