/* Simple Flat Layout Buttons (Pagination style) */

.btn-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem; 
    font-weight: 700; 
    border-radius: 0.25rem; 
    border: 1px solid transparent; 
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    gap: 0.5rem; 
    position: relative; /* For ::after ripple effect */
}

/* Elevate and shadow on hover */
.btn-3d:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Press down effect */
.btn-3d:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Icon (Left Side) */
.btn-3d::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Ripple Expanding Pseudo Element */
.btn-3d::after {
    content: '';
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: inherit; /* matches the 0.25rem border-radius */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.4s;
    background-color: inherit;
}

.btn-3d:hover::after {
    transform: scaleX(1.2) scaleY(1.4);
    opacity: 0;
}

/* --- Pastel Color Variations --- */

/* Indigo (Primary) */
.btn-indigo { background-color: #e0e7ff; border-color: #c7d2fe; color: #3730a3; }
.btn-indigo:hover { background-color: #c7d2fe; border-color: #a5b4fc; }

/* Emerald (Success/Positive) */
.btn-emerald { background-color: #d1fae5; border-color: #a7f3d0; color: #065f46; }
.btn-emerald:hover { background-color: #a7f3d0; border-color: #6ee7b7; }

/* Blue (Secondary/Info) */
.btn-blue { background-color: #dbeafe; border-color: #bfdbfe; color: #1e40af; }
.btn-blue:hover { background-color: #bfdbfe; border-color: #93c5fd; }

/* Amber/Yellow (Warning) */
.btn-amber { background-color: #fef3c7; border-color: #fde68a; color: #92400e; }
.btn-amber:hover { background-color: #fde68a; border-color: #fcd34d; }

/* Red (Danger/Delete) */
.btn-red { background-color: #fee2e2; border-color: #fecaca; color: #991b1b; }
.btn-red:hover { background-color: #fecaca; border-color: #fca5a5; }

/* Slate/Gray (Neutral) */
.btn-slate { background-color: #f1f5f9; border-color: #e2e8f0; color: #1e293b; }
.btn-slate:hover { background-color: #e2e8f0; border-color: #cbd5e1; }

/* White (Light) */
.btn-white { background-color: #ffffff; border-color: #d1d5db; color: #374151; }
.btn-white:hover { background-color: #f3f4f6; }


/* --- Base64 Icons (Colored stroke to match text) --- */

/* Arrow Right (Indigo-800: #3730a3, Slate-800: #1e293b) */
.btn-indigo.btn-icon-arrow::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M14 5l7 7m0 0l-7 7m7-7H3'%3e%3c/path%3e%3c/svg%3e"); }
.btn-slate.btn-icon-arrow::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e293b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M14 5l7 7m0 0l-7 7m7-7H3'%3e%3c/path%3e%3c/svg%3e"); }

/* Plus/Add (Emerald-800: #065f46, White->Indigo: #3730a3) */
.btn-emerald.btn-icon-plus::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23065f46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M12 4v16m8-8H4'%3e%3c/path%3e%3c/svg%3e"); }
.btn-white.btn-icon-plus::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M12 4v16m8-8H4'%3e%3c/path%3e%3c/svg%3e"); }
.btn-indigo.btn-icon-plus::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M12 4v16m8-8H4'%3e%3c/path%3e%3c/svg%3e"); }

/* Check/Save (Indigo/Amber/Emerald/Slate) */
.btn-indigo.btn-icon-check::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'%3e%3c/path%3e%3c/svg%3e"); }
.btn-amber.btn-icon-check::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%2392400e' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'%3e%3c/path%3e%3c/svg%3e"); }
.btn-emerald.btn-icon-check::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23065f46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'%3e%3c/path%3e%3c/svg%3e"); }
.btn-slate.btn-icon-check::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e293b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 13l4 4L19 7'%3e%3c/path%3e%3c/svg%3e"); }

/* Settings/Gear (Blue) */
.btn-blue.btn-icon-settings::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e40af' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'%3e%3c/path%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'%3e%3c/path%3e%3c/svg%3e"); }

/* Edit/Pencil (Blue/Amber/Indigo/Emerald) */
.btn-blue.btn-icon-edit::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e40af' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'%3e%3c/path%3e%3c/svg%3e"); }
.btn-amber.btn-icon-edit::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%2392400e' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'%3e%3c/path%3e%3c/svg%3e"); }
.btn-emerald.btn-icon-edit::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23065f46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'%3e%3c/path%3e%3c/svg%3e"); }
.btn-indigo.btn-icon-edit::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'%3e%3c/path%3e%3c/svg%3e"); }

/* Trash/Delete (Red) */
.btn-red.btn-icon-trash::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23991b1b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'%3e%3c/path%3e%3c/svg%3e"); }

/* Webauthn / Fingerprint (Emerald) */
.btn-emerald.btn-icon-fingerprint::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23065f46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4'%3e%3c/path%3e%3c/svg%3e"); }
.btn-white.btn-icon-fingerprint::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23059669' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4'%3e%3c/path%3e%3c/svg%3e"); }

/* AI / Stars (Indigo) */
.btn-indigo.btn-icon-ai::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M13 10V3L4 14h7v7l9-11h-7z'%3e%3c/path%3e%3c/svg%3e"); }

/* Email/Mail (Blue) */
.btn-blue.btn-icon-mail::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e40af' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'%3e%3c/path%3e%3c/svg%3e"); }

/* Grid/List/Chart (View) (Indigo/White) */
.btn-indigo.btn-icon-view::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'%3e%3c/path%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3e%3c/path%3e%3c/svg%3e"); }
.btn-white.btn-icon-view::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23374151' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'%3e%3c/path%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3e%3c/path%3e%3c/svg%3e"); }
.btn-blue.btn-icon-view::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e40af' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'%3e%3c/path%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3e%3c/path%3e%3c/svg%3e"); }
.btn-emerald.btn-icon-view::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%23065f46' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'%3e%3c/path%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3e%3c/path%3e%3c/svg%3e"); }


/* Lock (Indigo) */
.btn-indigo.btn-icon-lock::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'%3e%3c/path%3e%3c/svg%3e"); }

/* Search (Indigo) */
.btn-indigo.btn-icon-search::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3e%3c/path%3e%3c/svg%3e"); }

/* Cross/Cancel (Slate) */
.btn-slate.btn-icon-cross::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%231e293b' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 18L18 6M6 6l12 12'%3e%3c/path%3e%3c/svg%3e"); }

/* Users (Indigo) */
.btn-indigo.btn-icon-user::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' stroke='%233730a3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'%3e%3c/path%3e%3c/svg%3e"); }


/* ===========================
   GENUINE SOCIAL & CUSTOM
   =========================== */

/* Genuine Google */
.btn-icon-google::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3e%3cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3e%3cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3e%3cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3e%3c/svg%3e");
}

/* Genuine Facebook */
.btn-icon-facebook::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='%230866FF' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.469h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.469h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3e%3c/svg%3e");
}

/* Custom Sign In Button */
.btn-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #ffffff;
    background-color: #4f46e5;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}
.btn-signin:hover {
    background-color: #4338ca;
    box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
}
.btn-signin .arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}
.btn-signin:hover .arrow {
    transform: translateX(6px);
}