/*
 * Hosthive WHMCS Template - CSS Overrides
 * Styles WHMCS-rendered elements (social buttons, custom field inputs, alerts)
 * to match the Tailwind-based Laravel frontend design.
 */

/* ============================================
   Responsive visibility helpers
   Bootstrap 3 defines .hidden { display: none !important }
   which prevents Tailwind sm:flex from overriding it.
   ============================================ */

.hide-below-sm {
    display: none !important;
}
@media (min-width: 640px) {
    .hide-below-sm {
        display: flex !important;
    }
}

/* ============================================
   Social Login Buttons
   WHMCS renders these dynamically via JS
   ============================================ */

/* Container for social login buttons */
.social-login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    --social-btn-width: 17.5rem;
}

/* All social provider buttons (excluding Google and Twitter which have their own styles) */
.social-login-wrapper a:not(.g_id_signin):not(.btn-twitter),
.social-login-wrapper button:not(.g_id_signin):not(.btn-twitter),
.social-login-wrapper .btn:not(.g_id_signin):not(.btn-google):not(.btn-twitter),
.social-login-wrapper .btn-social:not(.g_id_signin):not(.btn-google):not(.btn-twitter) {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    border-radius: 0.5rem !important;
    background-color: #000000 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out !important;
    line-height: 1.5 !important;
}

.social-login-wrapper a:not(.g_id_signin):not(.btn-twitter):hover,
.social-login-wrapper button:not(.g_id_signin):not(.btn-twitter):hover,
.social-login-wrapper .btn:not(.g_id_signin):not(.btn-google):not(.btn-twitter):hover,
.social-login-wrapper .btn-social:not(.g_id_signin):not(.btn-google):not(.btn-twitter):hover {
    background-color: #1f2937 !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

.social-login-wrapper a:not(.g_id_signin):not(.btn-twitter):focus,
.social-login-wrapper button:not(.g_id_signin):not(.btn-twitter):focus,
.social-login-wrapper .btn:not(.g_id_signin):not(.btn-google):not(.btn-twitter):focus,
.social-login-wrapper .btn-social:not(.g_id_signin):not(.btn-google):not(.btn-twitter):focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000 !important;
}

/* Social button icons */
.social-login-wrapper i,
.social-login-wrapper .fa,
.social-login-wrapper .fab,
.social-login-wrapper svg {
    font-size: 1.125rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* ============================================
   Custom Field Inputs (WHMCS-generated)
   ============================================ */

.custom-field-input input[type="text"],
.custom-field-input input[type="email"],
.custom-field-input input[type="tel"],
.custom-field-input input[type="number"],
.custom-field-input select,
.custom-field-input textarea {
    display: block !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
}

.custom-field-input input:focus,
.custom-field-input select:focus,
.custom-field-input textarea:focus {
    border-color: #000000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

/* Checkbox styling in custom fields */
.custom-field-input input[type="checkbox"] {
    height: 1rem !important;
    width: 1rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid #cbd5e1 !important;
}

/* ============================================
   Bootstrap Alert Overrides
   WHMCS uses Bootstrap alert classes
   ============================================ */

.alert {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.alert-success {
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

/* ============================================
   Hide Bootstrap/WHMCS defaults
   ============================================ */

/* Hide default Bootstrap form styles that conflict with Tailwind */
.form-group {
    margin-bottom: 0 !important;
}

.form-control {
    display: block !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.form-control:focus {
    border-color: #000000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #000000 !important;
}

/* Password strength meter - style to match */
.password-strength-meter {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}

/* WHMCS password strength progress bar override */
.password-strength-meter .progress {
    height: 0.375rem !important;
    width: 100% !important;
    border-radius: 9999px !important;
    background-color: #e2e8f0 !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.password-strength-meter .progress-bar {
    height: 100% !important;
    border-radius: 9999px !important;
    transition: width 0.3s ease, background-color 0.3s ease !important;
}

/* ============================================
   reCAPTCHA / hCaptcha container
   ============================================ */

.captcha-wrapper {
    display: flex;
    justify-content: center;
}

.captcha-wrapper > div {
    transform-origin: center;
}

/* ============================================
   WHMCS Linked Accounts / Social Sign-In
   (rendered via linkedaccounts.tpl include)
   ============================================ */

/* Hide the "Sign Up" sub-heading injected by linkedaccounts.tpl */
.social-login-wrapper .sub-heading,
.social-login-wrapper .sub-heading-borderless {
    display: none !important;
}

/* Style the social-signin-btns container */
.social-login-wrapper .social-signin-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* WHMCS provider linking messages */
.social-login-wrapper .providerLinkingFeedback {
    margin-top: 0.5rem;
}

#providerLinkingMessages {
    margin-bottom: 0.5rem;
}

#providerLinkingMessages p {
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid #bfdbfe;
    background-color: #eff6ff;
    color: #1d4ed8;
    margin-bottom: 0.5rem;
}

/* WHMCS w-hidden utility */
.w-hidden {
    display: none !important;
}

/* ============================================
   Google Sign-In Button Override
   Dark pill with white circle + colorful Google G.
   Google's iframe is invisible but stays on top
   to capture clicks and trigger the OAuth flow.
   ============================================ */

.g_id_signin,
[id^="btnGoogleSignin"] {
    position: relative !important;
    display: inline-flex !important;
    width: var(--social-btn-width) !important;
    align-items: center !important;
    background-color: #1f1f1f !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 0.125rem !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    line-height: 1.5 !important;
}

.g_id_signin:hover,
[id^="btnGoogleSignin"]:hover {
    background-color: #333333 !important;
}

/* White circle with colorful Google G logo */
.g_id_signin::before,
[id^="btnGoogleSignin"]::before {
    content: "" !important;
    display: block !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285f4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334a853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23fbbc04'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23ea4335'/%3E%3C/svg%3E") !important;
    background-size: 1.5rem 1.5rem !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Button label */
.g_id_signin::after,
[id^="btnGoogleSignin"]::after {
    content: "Sign in with Google" !important;
    flex: 1 !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 1.0625rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    padding-right: 2.75rem !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Register page: say "Sign up" instead of "Sign in" */
#signUpContainer .g_id_signin::after,
#signUpContainer [id^="btnGoogleSignin"]::after {
    content: "Sign up with Google" !important;
}

/* Hide Google's original rendering (not our overlay).
   Our JS creates a fresh overlay via renderButton(). */
.g_id_signin > *:not([style*="z-index"]),
[id^="btnGoogleSignin"] > *:not([style*="z-index"]) {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   X (Twitter) / Generic Social Button
   Dark pill matching the Google button style.
   ============================================ */

.social-login-wrapper .social-signin-btns .btn-twitter,
.social-login-wrapper .social-signin-btns .btn-social:not(.btn-google) {
    display: inline-flex !important;
    width: var(--social-btn-width) !important;
    align-items: center !important;
    border-radius: 9999px !important;
    background-color: #1f1f1f !important;
    padding: 0.125rem !important;
    font-size: 0 !important;
    color: transparent !important;
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    line-height: 1.5 !important;
}

/* Hide original Twitter icon */
.social-login-wrapper .social-signin-btns .btn-twitter i {
    display: none !important;
}

/* White circle with X logo */
.social-login-wrapper .social-signin-btns .btn-twitter::before {
    content: "" !important;
    display: block !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z' fill='%23000000'/%3E%3C/svg%3E") !important;
    background-size: 1.25rem 1.25rem !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    flex-shrink: 0 !important;
}

/* "Sign in with X" label */
.social-login-wrapper .social-signin-btns .btn-twitter::after {
    content: "Sign in with X" !important;
    flex: 1 !important;
    text-align: center !important;
    font-size: 1.0625rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    padding-right: 2.75rem !important;
}

/* Register page: "Sign up with X" */
#signUpContainer .social-signin-btns .btn-twitter::after {
    content: "Sign up with X" !important;
}

.social-login-wrapper .social-signin-btns .btn-twitter:hover,
.social-login-wrapper .social-signin-btns .btn-social:not(.btn-google):hover {
    background-color: #333333 !important;
}


/* ============================================
   WHMCS Generate Password Button
   ============================================ */

.generate-password.btn {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 0.5rem !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out !important;
}

.generate-password.btn:hover {
    background-color: #f8fafc !important;
}

/* ============================================
   WHMCS Toggle Switch (marketing opt-in)
   ============================================ */

.no-icheck.toggle-switch-success {
    height: 1rem !important;
    width: 1rem !important;
    border-radius: 0.25rem !important;
    border: 1px solid #cbd5e1 !important;
    accent-color: #000000 !important;
}

/* ============================================
   Bootstrap .card removal for register page
   (in case any WHMCS injected content uses it)
   ============================================ */

.social-login-wrapper .card,
#registration .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.social-login-wrapper .card-body,
#registration .card-body {
    padding: 0 !important;
}

.social-login-wrapper .card-title,
#registration .card-title {
    display: none !important;
}

/* Bootstrap row/col inside social wrapper */
.social-login-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

.social-login-wrapper [class^="col-"] {
    padding: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* ============================================
   WHMCS Home Panel Content Overrides
   Panel body HTML rendered by WHMCS modules
   ============================================ */

/* Tables inside home panels */
.overflow-hidden table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
}

.overflow-hidden table th {
    padding: 0.5rem 1.25rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.overflow-hidden table td {
    padding: 0.625rem 1.25rem !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.overflow-hidden table tr:last-child td {
    border-bottom: none !important;
}

.overflow-hidden table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Badge/label overrides inside panels */
.overflow-hidden .badge,
.overflow-hidden .label {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 9999px !important;
    padding: 0.125rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border: none !important;
}

.overflow-hidden .badge-success, .overflow-hidden .label-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

.overflow-hidden .badge-danger, .overflow-hidden .label-danger {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

.overflow-hidden .badge-warning, .overflow-hidden .label-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.overflow-hidden .badge-info, .overflow-hidden .label-info {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

.overflow-hidden .badge-default, .overflow-hidden .label-default {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

/* Buttons inside panel content (inline) */
.overflow-hidden .btn-default:not(.btn-block),
.overflow-hidden .btn-secondary:not(.btn-block) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.overflow-hidden .btn-default:not(.btn-block):hover,
.overflow-hidden .btn-secondary:not(.btn-block):hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

.overflow-hidden .btn-primary:not(.btn-block) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    background-color: #0f172a !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.overflow-hidden .btn-primary:not(.btn-block):hover {
    background-color: #1e293b !important;
}

/* ============================================
   Quick Action / Shortcut Buttons (btn-block)
   WHMCS renders these as block-level buttons in
   the "Actions" panel on the client area home.
   ============================================ */

.overflow-hidden .btn.btn-block {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    border-radius: 0.625rem !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5 !important;
    position: relative !important;
}

.overflow-hidden .btn.btn-block:last-child {
    margin-bottom: 0 !important;
}

.overflow-hidden .btn.btn-block:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px) !important;
}

.overflow-hidden .btn.btn-block:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
    background-color: #f1f5f9 !important;
}

/* Icon inside action buttons */
.overflow-hidden .btn.btn-block i,
.overflow-hidden .btn.btn-block .fas,
.overflow-hidden .btn.btn-block .far,
.overflow-hidden .btn.btn-block .fa {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 0.5rem !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.overflow-hidden .btn.btn-block:hover i,
.overflow-hidden .btn.btn-block:hover .fas,
.overflow-hidden .btn.btn-block:hover .far,
.overflow-hidden .btn.btn-block:hover .fa {
    background-color: #0f172a !important;
    color: #ffffff !important;
}

/* Right arrow indicator */
.overflow-hidden .btn.btn-block::after {
    content: "" !important;
    display: block !important;
    width: 1rem !important;
    height: 1rem !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: transform 0.2s ease !important;
}

.overflow-hidden .btn.btn-block:hover::after {
    transform: translateX(2px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%230f172a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E") !important;
}

/* Status dot indicators */
.overflow-hidden .status-active,
.overflow-hidden .text-success {
    color: #15803d !important;
}

.overflow-hidden .status-suspended,
.overflow-hidden .text-danger {
    color: #b91c1c !important;
}

.overflow-hidden .status-pending,
.overflow-hidden .text-warning {
    color: #92400e !important;
}