/* ix.ua — Google OAuth button visual patch
   CSS only. OAuth logic is untouched. */

.google-button,
.google-button-brand {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 18px !important;
    background: #ffffff !important;
    color: #202124 !important;
    border: 1px solid #d9dde3 !important;
    border-radius: 7px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    box-shadow: 0 1px 2px rgba(30, 40, 45, .05);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.google-button:hover,
.google-button-brand:hover {
    background: #f8f9fa !important;
    border-color: #c9ced6 !important;
    color: #202124 !important;
    box-shadow: 0 2px 7px rgba(30, 40, 45, .09);
    transform: translateY(-1px);
}

.google-button:active,
.google-button-brand:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(30, 40, 45, .05);
}

.google-button:focus,
.google-button-brand:focus {
    outline: 2px solid rgba(66,133,244,.18);
    outline-offset: 2px;
}

/* Existing PHP currently prints <span class="google-g">G</span>.
   Turn that span into a real multicolor Google-style mark without changing PHP. */
.google-g {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    box-shadow: none !important;
}

.google-g::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%234285F4' d='M17.64 9.205c0-.638-.057-1.252-.164-1.841H9v3.482h4.844a4.14 4.14 0 0 1-1.797 2.715v2.258h2.909c1.702-1.567 2.684-3.875 2.684-6.614z'/%3E%3Cpath fill='%2334A853' d='M9 18c2.43 0 4.468-.806 5.956-2.181l-2.909-2.258c-.806.54-1.835.859-3.047.859-2.344 0-4.328-1.585-5.037-3.714H.956v2.332A9 9 0 0 0 9 18z'/%3E%3Cpath fill='%23FBBC05' d='M3.963 10.706A5.41 5.41 0 0 1 3.681 9c0-.592.102-1.168.282-1.706V4.962H.956A9 9 0 0 0 0 9c0 1.452.347 2.827.956 4.038l3.007-2.332z'/%3E%3Cpath fill='%23EA4335' d='M9 3.58c1.321 0 2.507.454 3.44 1.345l2.582-2.582C13.464.891 11.426 0 9 0A9 9 0 0 0 .956 4.962l3.007 2.332C4.672 5.165 6.656 3.58 9 3.58z'/%3E%3C/svg%3E");
}

/* Cleaner separator */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 15px 0 13px;
    color: #9aa3a7;
    font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e7eaec;
}
.auth-divider span {
    white-space: nowrap;
}

/* Registration helper text */
.google-hint {
    margin: 8px 6px 0 !important;
    text-align: center;
    color: #7d888d !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}