/* ==========================================================
   REGISTER PAGE
========================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", Arial, Helvetica, sans-serif;

  background: #f8fafc;

  color: #253d4e;
}

/* ==========================================================
   PAGE
========================================================== */

.rg-page {
  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 60px 20px;

  position: relative;

  overflow: hidden;

  background: linear-gradient(135deg, #f8fafc 0%, #eefbf4 100%);
}

/* Floating Background */

.rg-page::before {
  content: "";

  position: absolute;

  width: 550px;

  height: 550px;

  left: -180px;

  top: -180px;

  border-radius: 50%;

  background: rgba(59, 183, 126, 0.08);

  filter: blur(45px);
}

.rg-page::after {
  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  right: -120px;

  bottom: -160px;

  border-radius: 50%;

  background: rgba(59, 183, 126, 0.06);

  filter: blur(40px);
}

/* ==========================================================
   CONTAINER
========================================================== */

.rg-container {
  width: 100%;

  max-width: 1380px;

  position: relative;

  z-index: 2;
}

.rg-wrapper {
  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  overflow: hidden;

  border-radius: 30px;

  background: #fff;

  box-shadow: 0 35px 80px rgba(15, 23, 42, 0.1);
}

/* ==========================================================
   LEFT PANEL
========================================================== */

.rg-left {
  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  padding: 70px;

  background: linear-gradient(135deg, #2a0103, #ac1d17);

  color: #fff;
}

/* Decorative Pattern */

.rg-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.1;

  background: radial-gradient(circle at 20% 20%, white 2px, transparent 2px);

  background-size: 34px 34px;
}

.rg-content {
  position: relative;

  z-index: 2;
}

/* ==========================================================
   BADGE
========================================================== */

.rg-badge {
  display: inline-flex;

  align-items: center;

  padding: 10px 18px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);

  font-size: 14px;

  font-weight: 700;

  margin-bottom: 25px;
}

/* ==========================================================
   HEADING
========================================================== */

.rg-content h1 {
  font-size: 54px;

  line-height: 1.15;

  font-weight: 800;

  margin-bottom: 22px;
}

.rg-content > p {
  font-size: 18px;

  line-height: 1.9;

  opacity: 0.95;

  max-width: 520px;

  margin-bottom: 35px;
}

/* ==========================================================
   RATING
========================================================== */

.rg-rating {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 18px;
}

.rg-stars {
  color: #ffd700;

  font-size: 24px;

  letter-spacing: 2px;
}

.rg-rating span {
  font-weight: 700;
}

/* ==========================================================
   HAPPY CUSTOMERS
========================================================== */

.rg-customers {
  margin-bottom: 35px;

  font-size: 18px;
}

.rg-customers strong {
  font-size: 34px;

  font-weight: 800;
}

/* ==========================================================
   FEATURES
========================================================== */

.rg-features {
  display: flex;

  flex-direction: column;

  gap: 24px;
}

.rg-feature {
  display: flex;

  gap: 18px;

  align-items: flex-start;

  transition: 0.35s;
}

.rg-feature:hover {
  transform: translateX(8px);
}

.rg-icon {
  width: 58px;

  height: 58px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.16);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 22px;

  flex-shrink: 0;

  transition: 0.35s;
}

.rg-feature:hover .rg-icon {
  transform: rotate(-10deg);
}

.rg-feature h4 {
  font-size: 20px;

  margin-bottom: 8px;
}

.rg-feature p {
  opacity: 0.92;

  line-height: 1.8;
}
/* ==========================================================
   RIGHT PANEL
========================================================== */

.rg-right {
  display: flex;

  justify-content: center;

  align-items: center;

  padding: 70px 55px;

  background: #fff;
}

.rg-form-card {
  width: 100%;

  max-width: 470px;

  animation: rgFade 0.8s ease;
}

/* ==========================================================
   LOGO
========================================================== */

.rg-logo {
  width: 90px;

  height: 90px;

  margin: 0 auto 25px;

  border-radius: 50%;

  background: #f8fafc;

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow: 0 15px 35px rgba(248, 250, 252, 0.5);

  transition: 0.35s;
}

.rg-logo:hover {
  transform: rotate(-8deg) scale(1.05);
}

.rg-logo img {
  width: 60px;

  height: auto;
}

/* ==========================================================
   HEADER
========================================================== */

.rg-small-title {
  display: inline-flex;

  align-items: center;

  padding: 8px 18px;

  border-radius: 999px;

  background: #f8fafc;

  color: #ac1d17;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 18px;
}

.rg-form-card h2 {
  font-size: 38px;

  font-weight: 800;

  color: #253d4e;

  margin-bottom: 10px;
}

.rg-subtitle {
  color: #64748b;

  line-height: 1.8;

  margin-bottom: 35px;
}

/* ==========================================================
   ALERTS
========================================================== */

.rg-error,
.rg-success {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 15px 18px;

  border-radius: 14px;

  margin-bottom: 22px;

  font-size: 14px;

  font-weight: 600;
}

.rg-error {
  background: #fff1f2;

  border: 1px solid #fecaca;

  color: #dc2626;
}

.rg-success {
  background: #ecfdf5;

  border: 1px solid #86efac;

  color: #ac1d17;
}

/* ==========================================================
   FORM
========================================================== */

.rg-form {
  display: flex;

  flex-direction: column;

  gap: 22px;
}

.rg-input-group {
  display: flex;

  flex-direction: column;
}

.rg-input-group label {
  font-size: 14px;

  font-weight: 700;

  color: #475569;

  margin-bottom: 10px;
}

/* ==========================================================
   INPUT BOX
========================================================== */

.rg-input-box {
  position: relative;
}

.rg-input-box i:first-child {
  position: absolute;

  left: 18px;

  top: 50%;

  transform: translateY(-50%);

  color: #94a3b8;

  font-size: 18px;
}

.rg-input-box input {
  width: 100%;

  height: 58px;

  padding: 0 56px;

  border: 1px solid #dbe4ec;

  border-radius: 16px;

  font-size: 15px;

  transition: 0.35s;

  outline: none;

  background: #fff;
}

.rg-input-box input:focus {
  border-color: #f8fafc;

  box-shadow: 0 0 0 4px #f8fafc;
}

.rg-input-box:hover input {
  border-color: #ac1d17;
}

/* ==========================================================
   PASSWORD BUTTON
========================================================== */

.rg-password-toggle {
  position: absolute;

  right: 15px;

  top: 50%;

  transform: translateY(-50%);

  border: none;

  background: none;

  cursor: pointer;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #64748b;

  transition: 0.3s;
}

.rg-password-toggle:hover {
  background: #eefbf4;

  color: #ac1d17;
}

/* ==========================================================
   PASSWORD STRENGTH
========================================================== */

.rg-strength {
  width: 100%;

  height: 7px;

  background: #edf2f7;

  border-radius: 999px;

  overflow: hidden;

  margin-top: 12px;
}

.rg-strength-bar {
  height: 100%;

  width: 0;

  border-radius: 999px;

  transition: 0.35s;
}

.rg-strength-bar.weak {
  width: 25%;

  background: #ef4444;
}

.rg-strength-bar.medium {
  width: 50%;

  background: #f59e0b;
}

.rg-strength-bar.good {
  width: 75%;

  background: #84cc16;
}

.rg-strength-bar.strong {
  width: 100%;

  background: #16a34a;
}

.rg-strength-text {
  display: block;

  margin-top: 10px;

  font-size: 13px;

  color: #64748b;
}

/* ==========================================================
   TERMS
========================================================== */

.rg-options {
  display: flex;

  align-items: flex-start;
}

.rg-checkbox {
  display: flex;

  gap: 10px;

  cursor: pointer;

  font-size: 14px;

  color: #64748b;

  line-height: 1.6;
}

.rg-checkbox input {
  margin-top: 3px;

  accent-color: #ac1d17;
}

.rg-checkbox a {
  color: #ac1d17;

  font-weight: 700;

  text-decoration: none;
}

.rg-checkbox a:hover {
  text-decoration: underline;
}

/* ==========================================================
   REGISTER BUTTON
========================================================== */

.rg-register-btn {
  width: 100%;

  height: 58px;

  border: none;

  border-radius: 16px;

  background: linear-gradient(135deg, #2a0103, #ac1d17);

  color: #fff;

  font-size: 17px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 12px;

  transition: 0.35s;
}

.rg-register-btn:hover {
  transform: translateY(-3px);

  box-shadow: 0 18px 35px rgba(59, 183, 126, 0.28);
}

.rg-register-btn:active {
  transform: scale(0.98);
}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes rgFade {
  from {
    opacity: 0;

    transform: translateY(30px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}
/* ==========================================================
   DIVIDER
========================================================== */

.rg-divider {
  position: relative;

  text-align: center;

  margin: 35px 0;
}

.rg-divider::before {
  content: "";

  position: absolute;

  left: 0;

  top: 50%;

  width: 100%;

  height: 1px;

  background: #e5e7eb;
}

.rg-divider span {
  position: relative;

  z-index: 2;

  background: #fff;

  padding: 0 18px;

  color: #94a3b8;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1px;
}

/* ==========================================================
   LOGIN
========================================================== */

.rg-login {
  text-align: center;

  color: #64748b;

  margin-bottom: 35px;

  font-size: 15px;
}

.rg-login a {
  color: #ac1d17;

  text-decoration: none;

  font-weight: 700;

  margin-left: 5px;
}

.rg-login a:hover {
  text-decoration: underline;
}

/* ==========================================================
   TRUST BOXES
========================================================== */

.rg-trust {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;
}

.rg-trust div {
  background: #f8fafc;

  border: 1px solid #eef2f7;

  border-radius: 16px;

  padding: 18px 12px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 10px;

  font-size: 13px;

  font-weight: 700;

  color: #475569;

  transition: 0.35s;
}

.rg-trust div:hover {
  transform: translateY(-5px);

  border-color: #ac1d17;

  background: #eefbf4;

  color: #ac1d17;

  box-shadow: 0 18px 35px rgba(59, 183, 126, 0.12);
}

.rg-trust span {
  text-align: center;
}

/* ==========================================================
   INPUT PLACEHOLDER
========================================================== */

.rg-input-box input::placeholder {
  color: #94a3b8;
}

/* ==========================================================
   FOCUS EFFECT
========================================================== */

.rg-input-box {
  transition: 0.35s;
}

.rg-input-box:focus-within {
  transform: translateY(-2px);
}

/* ==========================================================
   FEATURE ANIMATION
========================================================== */

.rg-feature {
  transition: 0.35s;
}

.rg-feature:hover {
  transform: translateX(8px);
}

.rg-feature:hover .rg-icon {
  transform: rotate(-8deg) scale(1.08);
}

/* ==========================================================
   LOGO
========================================================== */

.rg-logo {
  transition: 0.35s;
}

.rg-logo:hover {
  transform: rotate(-8deg) scale(1.05);
}

/* ==========================================================
   PAGE ANIMATION
========================================================== */

.rg-content {
  animation: rgSlide 0.8s ease;
}

@keyframes rgSlide {
  from {
    opacity: 0;

    transform: translateX(-40px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

/* ==========================================================
   BUTTON
========================================================== */

.rg-register-btn:active {
  transform: scale(0.98);
}

/* ==========================================================
   GLOBAL
========================================================== */

::selection {
  background: #ac1d17;

  color: #fff;
}

button,
a {
  transition: 0.3s;
}

* {
  -webkit-tap-highlight-color: transparent;
}
/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1400px) {
  .rg-wrapper {
    max-width: 1220px;
  }

  .rg-left {
    padding: 60px;
  }

  .rg-right {
    padding: 60px 45px;
  }

  .rg-content h1 {
    font-size: 48px;
  }
}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1200px) {
  .rg-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .rg-left {
    padding: 50px;
  }

  .rg-right {
    padding: 50px 35px;
  }

  .rg-content h1 {
    font-size: 42px;
  }

  .rg-content > p {
    font-size: 16px;
  }

  .rg-form-card h2 {
    font-size: 34px;
  }
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {
  .rg-page {
    padding: 30px 20px;
  }

  .rg-wrapper {
    grid-template-columns: 1fr;
  }

  .rg-left {
    text-align: center;

    padding: 45px 35px;
  }

  .rg-content > p {
    margin: auto;
  }

  .rg-features {
    max-width: 550px;

    margin: auto;
  }

  .rg-rating {
    justify-content: center;
  }

  .rg-customers {
    text-align: center;
  }

  .rg-right {
    padding: 45px 35px;
  }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {
  .rg-page {
    padding: 20px 12px;
  }

  .rg-wrapper {
    border-radius: 20px;
  }

  .rg-left {
    padding: 35px 22px;
  }

  .rg-content h1 {
    font-size: 34px;

    line-height: 1.25;
  }

  .rg-content > p {
    font-size: 15px;

    line-height: 1.7;
  }

  .rg-badge {
    font-size: 12px;
  }

  .rg-customers strong {
    font-size: 30px;
  }

  .rg-feature {
    gap: 14px;
  }

  .rg-feature h4 {
    font-size: 17px;
  }

  .rg-feature p {
    font-size: 13px;
  }

  .rg-right {
    padding: 30px 22px;
  }

  .rg-form-card h2 {
    font-size: 28px;
  }

  .rg-subtitle {
    font-size: 14px;
  }

  .rg-input-box input {
    height: 54px;

    font-size: 14px;
  }

  .rg-register-btn {
    height: 54px;

    font-size: 16px;
  }

  .rg-trust {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {
  .rg-page {
    padding: 15px 10px;
  }

  .rg-wrapper {
    border-radius: 18px;
  }

  .rg-left {
    padding: 28px 18px;
  }

  .rg-content h1 {
    font-size: 28px;
  }

  .rg-content > p {
    font-size: 14px;
  }

  .rg-icon {
    width: 48px;

    height: 48px;

    font-size: 18px;

    border-radius: 14px;
  }

  .rg-feature h4 {
    font-size: 16px;
  }

  .rg-feature p {
    font-size: 12px;
  }

  .rg-right {
    padding: 22px 18px;
  }

  .rg-logo {
    width: 65px;

    height: 65px;
  }

  .rg-logo img {
    width: 42px;
  }

  .rg-form-card h2 {
    font-size: 24px;
  }

  .rg-small-title {
    font-size: 11px;
  }

  .rg-input-group label {
    font-size: 13px;
  }

  .rg-input-box input {
    height: 50px;

    padding: 0 48px;

    font-size: 14px;
  }

  .rg-register-btn {
    height: 50px;

    font-size: 15px;
  }

  .rg-options {
    font-size: 13px;
  }
}

/* ==========================================================
   EXTRA SMALL
========================================================== */

@media (max-width: 360px) {
  .rg-left {
    padding: 24px 15px;
  }

  .rg-content h1 {
    font-size: 24px;
  }

  .rg-content > p {
    font-size: 13px;
  }

  .rg-right {
    padding: 18px 15px;
  }

  .rg-form-card h2 {
    font-size: 22px;
  }

  .rg-input-box input {
    font-size: 13px;
  }

  .rg-register-btn {
    font-size: 14px;
  }

  .rg-trust div {
    padding: 14px 10px;

    font-size: 12px;
  }
}
.rg-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.rg-divider::before,
.rg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

.rg-divider span {
  padding: 0 15px;
  color: #777;
  font-size: 14px;
  font-weight: 600;
}