/* =====================================================
   iCloud Sign-In Clone (2026) — 1:1 markup match
   Built using Apple's actual SVG paths and class names
   ===================================================== */

/* ----- Reset ----- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1d1d1f;
  background: #f2f2f7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: #0066cc;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* =====================================================
   TOP BAR (cloudos-toolbar)
   ===================================================== */
.cloudos-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 22px;
  background: #f5f5f7;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.icloud-logo {
  display: inline-flex;
  align-items: center;
}

.icloud-logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.icloud-logo a:hover { text-decoration: none; }

.apple-icloud-logo {
  fill: #1d1d1f;
  height: 31px;
  width: auto;
}

.action-buttons {
  display: inline-flex;
}

.help-menu-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d1d1f;
  transition: background-color 0.15s ease;
}

.help-menu-button:hover {
  background: rgba(0, 0, 0, 0.06);
}

.ellipsis {
  fill: #1d1d1f;
}

/* =====================================================
   MAIN LOGIN AREA
   ===================================================== */
.home-login-component {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #ffffff;
}

.parent-container {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.body-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ----- Icon + title block ----- */
.widget-icon-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.widget-icon-text .icon {
  width: 160px;
  height: 160px;
  display: block;
}

.sign-in-label {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.022em;
  text-align: center;
  color: #1d1d1f;
  margin-top: 18px;
  line-height: 1.15;
}

/* =====================================================
   SIGN-IN FORM (matches Apple's signin-v2 markup)
   ===================================================== */
.signin-v2 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.signin-content { width: 100%; }

/* Floating-label input */
.account-name {
  width: 100%;
  margin-bottom: 6px;
}

/* ===== Apple-spec form-textbox (1:1 with identityWidget CSS) ===== */
.form-cell-wrapper.form-textbox {
  position: relative;
  width: 100%;
  height: 3.2941176471rem; /* Apple's exact: ≈ 52.7px @ 16px root */
  border: 1px solid #86868b;
  border-radius: 12px;
  background-color: hsla(0, 0%, 100%, 0.8);
  transition: border-color 0.125s ease-in, box-shadow 0.125s ease-in;
}

.form-cell-wrapper.form-textbox:focus-within {
  border-color: #0071e3;
  box-shadow: inset 0 0 0 1px #0071e3; /* doubles to a 2px-effective blue stroke */
  z-index: 2; /* lift focused field above its stacked neighbour */
}

.form-textbox-input {
  width: 100%;
  height: 100%;
  padding: 1.0588235294rem 0.9411764706rem 0; /* 17px 15px 0 — Apple's spec */
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.2353641176;
  font-family: inherit;
  color: #1d1d1f;
  background: transparent;
  border: none;
  outline: none;
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.form-textbox-input::placeholder { color: transparent; }
.force-ltr { direction: ltr; }

/* Default (down) label state — looks like normal placeholder text */
.form-textbox-label {
  position: absolute;
  left: 1rem;
  top: 1.0588235294rem;        /* ≈ 17px — sits where placeholder text would */
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.2353641176;
  color: #6e6e73;
  pointer-events: none;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  transition-property: top, font-size, letter-spacing, line-height;
  transition-duration: 0.125s;
  transition-timing-function: ease-in;
}

/* Lifted (small) label state — focused / has value */
.form-textbox-input:focus ~ .form-textbox-label,
.form-textbox-input:not(:placeholder-shown) ~ .form-textbox-label,
.form-cell-wrapper.has-value .form-textbox-label {
  font-size: 12px;
  top: 0.5882352941rem;          /* ≈ 9.4px — Apple's exact lifted position */
  letter-spacing: -0.01em;
  line-height: 1.3333733333;
  color: #6e6e73;
}

/* ----- Create Your Apple Account link ----- */
.signin-content__footer {
  margin: 4px 0 22px;
}

.signin-content__footer__items {
  display: flex;
  justify-content: flex-start;
}

.signin-content__footer__items__right {
  width: 100%;
  text-align: left;
}

.si-link.button-link {
  background: none;
  border: none;
  color: #0066cc;
  font-size: 14px;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-block;
}
.si-link.button-link:hover { text-decoration: underline; }

.no-wrap { white-space: nowrap; }

/* =====================================================
   PRIVACY BLOCK
   ===================================================== */
.ue-privacy {
  margin-bottom: 26px;
}

.privacy-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.privacy-icon {
  width: 37px;
  height: 29px;
  background-image: url("../assets/privacy.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.tk-caption p {
  font-size: 12px;
  line-height: 1.5;
  color: #1d1d1f;
}

.tk-caption a {
  color: #0066cc;
  white-space: nowrap;
}

/* =====================================================
   STEP TOGGLING
   - .initial-only elements are visible by default
     (Email, Create link, Privacy, Continue + Passkey)
   - .password-only elements are visible only when the form
     gains the .password-step class (after Continue is pressed)
   ===================================================== */
.password-row { display: none; }
.password-step-options { display: none; }
.password-only { display: none; }

/* Apple's keyframes (ported verbatim from main.css) */
@keyframes icloud-keyframes-fadeInAndBarelyScale {
  0%  { opacity: 0; transform: scale(0.9); }
  to  { opacity: 1; transform: scale(1); }
}
@keyframes icloud-keyframes-fadeOut {
  0% { opacity: 1; }
  to { opacity: 0; }
}

.signin-v2 .initial-only,
.signin-v2 .password-only {
  transition: opacity 0.18s ease-out;
  transform-origin: center top;
}

.signin-v2.password-step .initial-only { display: none; }
.signin-v2.password-step .password-row,
.signin-v2.password-step .password-step-options,
.signin-v2.password-step .password-only { display: flex; }

/* Apply Apple's scale-and-fade-in to elements appearing in step 2 */
.signin-v2.password-step .password-row,
.signin-v2.password-step .password-step-options,
.signin-v2.password-step .password-only {
  animation: icloud-keyframes-fadeInAndBarelyScale 0.28s ease-out both;
}

.signin-v2.password-step .password-row {
  display: block;
  margin-top: -1px;  /* let the two fields visually connect */
}
.signin-v2.password-step .password-row .form-cell-wrapper.form-textbox {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.signin-v2.password-step .account-name .form-cell-wrapper.form-textbox {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}
.signin-v2.password-step .account-name { margin-bottom: 0; }

/* When the password field is focused, lift its border above the email field */
.signin-v2.password-step .password-row .form-cell-wrapper.form-textbox:focus-within {
  position: relative;
  z-index: 1;
}

/* =====================================================
   PASSWORD-STEP OPTIONS ROW
   "Keep me signed in" + "Forgotten your password?"
   ===================================================== */
.signin-v2.password-step .password-step-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 24px;
  font-size: 13px;
  color: #1d1d1f;
}

.keep-signed-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.keep-signed-in input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid #86868b;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.keep-signed-in input[type="checkbox"]:checked {
  background: #0071e3;
  border-color: #0071e3;
}
.keep-signed-in input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.forgot-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0066cc;
  font-size: 13px;
  text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }
.external-arrow {
  width: 10px;
  height: 10px;
}

/* Full-width Sign In button on password step */
.signin-button-wrapper {
  width: 100%;
  margin-top: 8px;
}
.signin-full-button {
  width: 100%;
  height: 44px;
  background: #0071e3;
  color: #ffffff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.signin-full-button:hover { background: #0077ed; }

/* =====================================================
   BUTTONS (Continue + Sign in with Passkey)
   ===================================================== */
.signin-v2__buttons-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.signin-v2__buttons-wrapper__button-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.button-rounded-rectangle {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
  border: none;
  position: relative;
}

/* =====================================================
   APPLE'S OFFICIAL 8-NIB SPINNER (throbber)
   Ported verbatim from identityWidget CSS:
   - 16px wrapper, container scaled to 0.075
   - 8 nibs (66x28 pills) rotated outward at 40px translateX
   - Each nib's ::before fades opacity .55 → .08 → .55
     over 0.8s, with -0.1s delays between nibs.
   ===================================================== */
.spinner {
  display: none;
  height: 16px;
  width: 16px;
  position: relative;
}

.spinner-large { height: 32px; width: 32px; }

.spinner-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  z-index: 1;
  transform: scale(0.075);
}
.spinner-large .spinner-container { transform: scale(0.15); }

.spinner-nib {
  position: absolute;
  width: 66px;
  height: 28px;
  top: -12.5px;
  background: transparent;
  border-radius: 25% / 50%;
  transform-origin: left center;
}
.spinner-nib::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff; /* white nibs on dark/blue buttons */
  border-radius: 25% / 50%;
  animation-name: spinner-line-fade-default;
  animation-duration: 0.8s;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: linear;
}

/* On black/dark buttons we still use white; on light buttons we use grey */
.spinner-dark .spinner-nib::before { background: #1d1d1f; }

.spinner-nib-1 { transform: rotate(0deg)   translateX(40px); }
.spinner-nib-2 { transform: rotate(45deg)  translateX(40px); }
.spinner-nib-3 { transform: rotate(90deg)  translateX(40px); }
.spinner-nib-4 { transform: rotate(135deg) translateX(40px); }
.spinner-nib-5 { transform: rotate(180deg) translateX(40px); }
.spinner-nib-6 { transform: rotate(225deg) translateX(40px); }
.spinner-nib-7 { transform: rotate(270deg) translateX(40px); }
.spinner-nib-8 { transform: rotate(315deg) translateX(40px); }

.spinner-nib-1::before { animation-delay: -0.8s; }
.spinner-nib-2::before { animation-delay: -0.7s; }
.spinner-nib-3::before { animation-delay: -0.6s; }
.spinner-nib-4::before { animation-delay: -0.5s; }
.spinner-nib-5::before { animation-delay: -0.4s; }
.spinner-nib-6::before { animation-delay: -0.3s; }
.spinner-nib-7::before { animation-delay: -0.2s; }
.spinner-nib-8::before { animation-delay: -0.1s; }

@keyframes spinner-line-fade-default {
  0%, to { opacity: 0.55; }
  1%     { opacity: 0.55; }
  95%    { opacity: 0.08; }
}

/* Show the spinner + hide the text when the button is loading */
.button-rounded-rectangle.loading .signin-v2__buttons-wrapper__button-wrapper__button__text {
  visibility: hidden;
}
.button-rounded-rectangle.loading .spinner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-rounded-rectangle .signin-v2__buttons-wrapper__button-wrapper__button__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Continue button (primary blue) */
#sign-in {
  background: #a6c8ed;
  color: #ffffff;
}

#sign-in:not(:disabled) {
  background: #0071e3;
}
#sign-in:not(:disabled):hover {
  background: #0077ed;
}
#sign-in:disabled {
  cursor: default;
}

/* Passkey (black) */
.button-neutral {
  background: #1d1d1f;
  color: #ffffff;
}
.button-neutral:hover {
  background: #2c2c2e;
}

/* iPhone / passkey icon — simple inline SVG via CSS mask */
.iphone-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  /* Person + key glyph rendered as inline SVG mask */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6' cy='4.5' r='2.5' fill='black'/><path d='M1.5 13.5c0-2.5 2-4.4 4.5-4.4s4.5 1.9 4.5 4.4v0.5H1.5z' fill='black'/><circle cx='12.5' cy='7' r='1.6' fill='none' stroke='black' stroke-width='1.1'/><path d='M12.5 8.6v3.8M11.6 10.8h1.5M11.6 12h1.5' stroke='black' stroke-width='1.1' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6' cy='4.5' r='2.5' fill='black'/><path d='M1.5 13.5c0-2.5 2-4.4 4.5-4.4s4.5 1.9 4.5 4.4v0.5H1.5z' fill='black'/><circle cx='12.5' cy='7' r='1.6' fill='none' stroke='black' stroke-width='1.1'/><path d='M12.5 8.6v3.8M11.6 10.8h1.5M11.6 12h1.5' stroke='black' stroke-width='1.1' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}

.passkey-requires {
  margin-top: 8px;
}

.passkey-requires p {
  font-size: 12px;
  line-height: 1.35;
  color: #6e6e73;
  text-align: center;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
  background: #f5f5f7;
  border-top: 1px solid #d2d2d7;
  padding: 14px 22px;
  flex-shrink: 0;
}

.legal-footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #424245;
}

.inner-row {
  display: flex;
  align-items: center;
}

.with-separator {
  display: inline-flex;
  align-items: center;
}

.with-separator .separator {
  width: 1px;
  height: 11px;
  background: #d2d2d7;
  margin: 0 12px;
}

.external-link a {
  color: #424245;
  font-size: 11px;
  text-decoration: none;
}
.external-link a:hover { text-decoration: underline; }

.copyright {
  font-size: 11px;
  color: #424245;
}

/* =====================================================
   RESPONSIVE — Mobile
   ===================================================== */
@media (max-width: 600px) {
  body {
    background: #ffffff;
  }

  .cloudos-toolbar {
    height: 48px;
    padding: 0 20px;
    background: #f5f5f7;
  }

  .apple-icloud-logo {
    height: 28px;
  }

  .home-login-component {
    padding: 24px 22px 32px;
  }

  .parent-container {
    max-width: 100%;
  }

  .widget-icon-text {
    margin-bottom: 24px;
  }

  .widget-icon-text .icon {
    width: 150px;
    height: 150px;
  }

  .sign-in-label {
    font-size: 28px;
    margin-top: 14px;
    max-width: 230px;
    text-wrap: balance;
  }

  .form-cell-wrapper.form-textbox {
    height: 56px;
  }

  /* Buttons stay side-by-side, just like icloud.com */
  .signin-v2__buttons-wrapper {
    gap: 10px;
  }

  .button-rounded-rectangle {
    height: 44px;
    font-size: 14px;
    border-radius: 10px;
  }

  .passkey-requires p {
    font-size: 12px;
    text-align: center;
  }

  /* Footer left-aligned and stacked */
  .legal-footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  footer {
    padding: 18px 22px;
  }
}

/* Extra-narrow phones */
@media (max-width: 380px) {
  .widget-icon-text .icon {
    width: 140px;
    height: 140px;
  }
  .sign-in-label {
    font-size: 26px;
  }
  .button-rounded-rectangle {
    font-size: 13px;
    gap: 4px;
  }
  .signin-v2__buttons-wrapper {
    gap: 8px;
  }
}