/* =====================================================================
   APD 56.0.0 — Acceso Airbnb: sociales correctos + alta obligatoria.
   Esta hoja se carga después del plugin APD Login 2.1.0.
   ===================================================================== */

/* Google / Apple: botones Airbnb estables, sin texto cortado. */
body #apd5-auth-modal .apd54-social-area .apd5-auth-socials {
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    align-items:stretch !important;
    justify-content:stretch !important;
}
body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd56-social-button,
body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd5-auth-social--icon.apd56-social-button {
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    padding:0 16px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 34px !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:0 !important;
    border:1px solid #b0b0b0 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#222 !important;
    box-shadow:none !important;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:15px !important;
    font-weight:650 !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
}
body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd56-social-button:hover,
body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd56-social-button:focus-visible {
    border-color:#222 !important;
    background:#f7f7f7 !important;
    outline:0 !important;
}
body #apd5-auth-modal .apd54-social-area .apd5-auth-social-icon {
    grid-column:1 !important;
    width:22px !important;
    height:22px !important;
    margin:0 auto !important;
    display:grid !important;
    place-items:center !important;
    color:#111 !important;
}
body #apd5-auth-modal .apd54-social-area .apd5-auth-social-icon svg {
    display:block !important;
    width:100% !important;
    height:100% !important;
}
body #apd5-auth-modal .apd54-social-area .apd5-auth-social-icon--google {
    width:21px !important;
    height:21px !important;
}
body #apd5-auth-modal .apd54-social-area .apd5-auth-social-icon--apple {
    width:22px !important;
    height:22px !important;
}
body #apd5-auth-modal .apd54-social-area .apd56-social-label {
    grid-column:2 !important;
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
}
body #apd5-auth-modal .apd54-social-area .apd56-social-spacer {
    grid-column:3 !important;
    width:34px !important;
    height:1px !important;
}

/* Paso posterior al OTP: reproduce la estructura del modal de alta. */
body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog {
    width:min(100%,480px) !important;
    max-width:480px !important;
    max-height:calc(100dvh - 48px) !important;
    padding:58px 24px 24px !important;
    border-radius:28px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-width:thin !important;
    scrollbar-color:#717171 transparent !important;
}
body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog::-webkit-scrollbar {
    display:block !important;
    width:7px !important;
}
body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog::-webkit-scrollbar-thumb {
    background:#717171 !important;
    border-radius:999px !important;
}
body #apd5-auth-modal.apd56-profile-step .apd54-auth-brand {
    display:none !important;
}
body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog > h2 {
    max-width:390px !important;
    margin:4px auto 8px !important;
    color:#222 !important;
    text-align:center !important;
    font-size:28px !important;
    line-height:1.14 !important;
    letter-spacing:-.7px !important;
    font-weight:700 !important;
}
body #apd5-auth-modal.apd56-profile-step .apd54-auth-subtitle,
body #apd5-auth-modal.apd56-profile-step #apd5-auth-subtitle {
    display:block !important;
    max-width:350px !important;
    margin:0 auto 28px !important;
    color:#717171 !important;
    text-align:center !important;
    font-size:15px !important;
    line-height:1.45 !important;
    font-weight:400 !important;
}
body #apd5-auth-modal.apd56-profile-step .apd5-auth-message:not([hidden]) {
    margin:0 0 16px !important;
}
body #apd5-auth-modal .apd56-account-form {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
}
body #apd5-auth-modal .apd56-account-intro[hidden] {
    display:none !important;
}
body #apd5-auth-modal .apd56-field-block {
    margin:0 0 22px !important;
}
body #apd5-auth-modal .apd56-field-title {
    display:block !important;
    margin:0 0 10px !important;
    color:#222 !important;
    font-size:16px !important;
    line-height:1.25 !important;
    font-weight:650 !important;
}
body #apd5-auth-modal .apd56-name-shell {
    width:100% !important;
    overflow:hidden !important;
    border:1px solid #717171 !important;
    border-radius:12px !important;
    background:#fff !important;
}
body #apd5-auth-modal .apd56-name-shell:focus-within {
    border-color:#222 !important;
    box-shadow:inset 0 0 0 1px #222 !important;
}
body #apd5-auth-modal .apd56-name-shell input,
body #apd5-auth-modal .apd56-field-input {
    width:100% !important;
    height:60px !important;
    min-height:60px !important;
    margin:0 !important;
    padding:0 16px !important;
    border:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    background:#fff !important;
    color:#222 !important;
    box-shadow:none !important;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:16px !important;
    line-height:1.25 !important;
    font-weight:400 !important;
    box-sizing:border-box !important;
    -webkit-appearance:none !important;
    appearance:none !important;
}
body #apd5-auth-modal .apd56-name-shell input + input {
    border-top:1px solid #b0b0b0 !important;
}
body #apd5-auth-modal .apd56-field-input {
    border:1px solid #717171 !important;
    border-radius:12px !important;
}
body #apd5-auth-modal .apd56-field-input:focus {
    border-color:#222 !important;
    box-shadow:inset 0 0 0 1px #222 !important;
}
body #apd5-auth-modal .apd56-name-shell input::placeholder,
body #apd5-auth-modal .apd56-field-input::placeholder {
    color:#717171 !important;
    opacity:1 !important;
}
body #apd5-auth-modal .apd56-field-input.is-readonly {
    background:#fafafa !important;
    color:#444 !important;
}
body #apd5-auth-modal .apd56-name-shell input.is-invalid,
body #apd5-auth-modal .apd56-field-input.is-invalid {
    box-shadow:inset 0 0 0 2px #c13515 !important;
}
body #apd5-auth-modal .apd56-field-help {
    margin:8px 0 0 !important;
    color:#717171 !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    font-weight:400 !important;
}
body #apd5-auth-modal .apd56-field-help a,
body #apd5-auth-modal .apd56-terms-copy a {
    color:#222 !important;
    font-weight:600 !important;
    text-decoration:underline !important;
    text-underline-offset:2px !important;
}
body #apd5-auth-modal .apd56-marketing-box {
    margin:4px 0 18px !important;
    padding:16px !important;
    border-radius:12px !important;
    background:#f7f7f7 !important;
    color:#222 !important;
}
body #apd5-auth-modal .apd56-marketing-box > p {
    margin:0 0 16px !important;
    color:#444 !important;
    font-size:12.5px !important;
    line-height:1.4 !important;
}
body #apd5-auth-modal .apd56-marketing-choice {
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:0 !important;
    color:#222 !important;
    font-size:13px !important;
    line-height:1.35 !important;
    font-weight:400 !important;
    cursor:pointer !important;
}
body #apd5-auth-modal .apd56-marketing-choice input[type="checkbox"] {
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    margin:0 !important;
    border:1px solid #717171 !important;
    border-radius:6px !important;
    accent-color:#222 !important;
    cursor:pointer !important;
}
body #apd5-auth-modal .apd56-terms-copy {
    margin:0 0 20px !important;
    color:#444 !important;
    font-size:12.5px !important;
    line-height:1.42 !important;
}
body #apd5-auth-modal .apd56-accept,
body #apd5-auth-modal .apd5-auth-primary.apd56-accept {
    width:100% !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:11px !important;
    background:#222 !important;
    color:#fff !important;
    box-shadow:none !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:700 !important;
}
body #apd5-auth-modal .apd56-accept:hover,
body #apd5-auth-modal .apd56-accept:focus-visible {
    background:#000 !important;
}

/* En el formulario de alta se ven ambas flechas de navegación como referencia. */
body #apd5-auth-modal.apd56-profile-step .apd54-auth-back,
body #apd5-auth-modal.apd56-profile-step .apd5-auth-close {
    top:18px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    background:transparent !important;
    font-size:25px !important;
}
body #apd5-auth-modal.apd56-profile-step .apd54-auth-back { left:18px !important; }
body #apd5-auth-modal.apd56-profile-step .apd5-auth-close { right:18px !important; }
body #apd5-auth-modal.apd56-profile-step .apd54-auth-back:hover,
body #apd5-auth-modal.apd56-profile-step .apd5-auth-close:hover { background:#f2f2f2 !important; }

@media (max-width:767px) {
    body #apd5-auth-modal .apd54-social-area .apd5-auth-socials {
        grid-template-columns:1fr !important;
        gap:10px !important;
    }
    body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd56-social-button,
    body #apd5-auth-modal .apd54-social-area .apd5-auth-social.apd5-auth-social--icon.apd56-social-button {
        width:100% !important;
        height:52px !important;
        min-height:52px !important;
        max-width:none !important;
    }

    body #apd5-auth-modal.apd56-profile-step {
        align-items:flex-start !important;
        padding:24px 14px !important;
    }
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog {
        width:100% !important;
        max-width:480px !important;
        max-height:calc(100dvh - 48px) !important;
        padding:58px 24px 24px !important;
        border-radius:28px !important;
    }
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog > h2 {
        font-size:27px !important;
        margin-top:2px !important;
    }
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-subtitle,
    body #apd5-auth-modal.apd56-profile-step #apd5-auth-subtitle {
        margin-bottom:26px !important;
        font-size:14px !important;
    }
    body #apd5-auth-modal .apd56-field-block { margin-bottom:20px !important; }
    body #apd5-auth-modal .apd56-name-shell input,
    body #apd5-auth-modal .apd56-field-input {
        height:58px !important;
        min-height:58px !important;
        font-size:16px !important;
    }
}

@media (max-width:420px) {
    body #apd5-auth-modal.apd56-profile-step { padding:12px 8px !important; }
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog {
        max-height:calc(100dvh - 24px) !important;
        padding:54px 20px 20px !important;
        border-radius:24px !important;
    }
    body #apd5-auth-modal.apd56-profile-step .apd54-auth-dialog > h2 { font-size:25px !important; }
    body #apd5-auth-modal .apd56-field-help,
    body #apd5-auth-modal .apd56-marketing-box > p,
    body #apd5-auth-modal .apd56-terms-copy { font-size:12px !important; }
}