/* improved form + message styling */
.cua-form { max-width: 980px; margin: 1.5em auto; font-family: Arial, sans-serif; background:#fff; padding:18px; border-radius:6px; box-shadow:0 1px 6px rgba(0,0,0,.06); }
.cua-form h2, .cua-form h3 { text-align: center; margin-bottom: 0.5em; font-weight:700; color:#222; }
.cua-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cua-full { grid-column: 1 / -1; }

/* new: inline pair for putting two fields side-by-side inside a full-width row */
.cua-inline-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.cua-inline-pair p { margin: 0; }
/* ensure inputs inside the inline pair fill their columns */
.cua-inline-pair input[type="password"],
.cua-inline-pair input[type="text"],
.cua-inline-pair select {
    width: 100%;
    box-sizing: border-box;
}

.cua-form p { margin: 0 0 12px; }
.cua-form label { display: block; font-size: 13px; color: #333; margin-bottom: 6px; }
.cua-form input[type="text"], .cua-form input[type="email"], .cua-form input[type="password"], .cua-form select, .cua-form input[type="url"], .cua-form input[type="tel"], .cua-form input[type="date"] {
    width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff;
    transition: box-shadow .12s, border-color .12s;
}
.cua-form input:focus, .cua-form select:focus { outline: none; border-color:#7aa7ff; box-shadow:0 0 0 3px rgba(122,167,255,0.08); }
.cua-form .required { color: #d33; margin-left:4px; font-weight:700; }
.cua-form .cua-actions { text-align: center; margin-top: 12px; }
.cua-form button { padding: 12px 28px; background:#f6c94d; color:#000; border:none; border-radius:4px; cursor:pointer; font-weight:700; box-shadow:0 2px 0 rgba(0,0,0,.05); }
.cua-form button:hover { transform: translateY(-1px); }
.cua-social { display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
.cua-social a { display:inline-block; padding:10px 14px; color:#fff; border-radius:3px; text-decoration:none; font-weight:600; font-size:13px; }
.cua-social .fb { background:#0d47a1; }

/* Flash messages */
.cua-flash { margin: 12px auto; max-width: 980px; padding: 12px 16px; border-radius: 6px; font-weight:600; text-align:center; box-sizing:border-box; }
.cua-flash.error { background:#ffe6e6; color:#a12626; border:1px solid #f1c2c2; }
.cua-flash.success { background:#e7fff0; color:#1b7b32; border:1px solid #b8e6c6; }
.cua-flash.info { background:#f0f6ff; color:#0b5394; border:1px solid #c9ddff; }

/* Login small layout */
.cua-form.cua-login { max-width:420px; margin: 24px auto; padding:18px; }
.cua-form.cua-login button { width:100%; }

/* logout button */
.cua-logout-button {
    display:inline-block;
    padding:8px 14px;
    background:#222;
    color:#fff;
    border-radius:4px;
    text-decoration:none;
    font-weight:700;
    transition:opacity .12s, transform .08s;
}
.cua-logout-button:hover { opacity:.92; transform:translateY(-1px); }

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ccc;
}

.divider:not(:empty)::before {
    margin-right: .75em;
}

.divider:not(:empty)::after {
    margin-left: .75em;
}

.cua-loading-spinner {
    border: 2px solid #fff;
    border-top: 2px solid #999;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 6px;
    animation: cua-spin 0.6s linear infinite;
    vertical-align: middle;
}

@keyframes cua-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* responsive */
@media (max-width:720px) {
    .cua-grid { grid-template-columns: 1fr; }
    .cua-form { padding: 12px; }
}
.deep-orange-text {
    color: #ff5722 !important;
}