/* ============================================
   RIVANTA JEWELS — Profile Page Stylesheet
   Modern, Responsive, Luxury Aesthetic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* ── Reset & Tokens ─────────────────────────── */
*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --gold:        #9B8459;
  --gold-light:  #C4A97D;
  --gold-pale:   #E8D9BF;
  --cream:       #FEF9F3;
  --cream-deep:  #F5EDE0;
  --white:       #FFFFFF;
  --text-dark:   #3A2E1F;
  --text-mid:    #6B5C44;
  --text-muted:  #9E8E78;
  --border:      rgba(155,132,89,.25);
  --shadow-sm:   0 2px 12px rgba(155,132,89,.12);
  --shadow-md:   0 8px 32px rgba(155,132,89,.18);
  --shadow-lg:   0 20px 60px rgba(155,132,89,.22);
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --font-display: 'Jost', sans-serif;
  --font-body:    'Jost', sans-serif;
  --transition:   0.3s cubic-bezier(.4,0,.2,1);
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

/* ── Typography helpers ─────────────────────── */
.text {
  color: var(--gold);
  font-family: var(--font-display);
}

/* ══════════════════════════════════════════════
   NOT-LOGGED-IN STATE
══════════════════════════════════════════════ */
.nlicont {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 3rem 2rem;
  text-align: center;
  max-width: 520px;
  margin: 4rem auto;
}

.nlicont h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 400;
  color: var(--gold);
  margin-bottom: .5rem;
  letter-spacing: .02em;
}

.nlicont p {
  font-family: var(--font-display);
  color: var(--text-mid);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.loginbtn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1.5px solid var(--gold);
  background: transparent;
  padding: .65rem 1.75rem;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition);
  margin: .4rem;
}

.loginbtn a {
  color: var(--gold);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.loginbtn:hover {
  background: var(--gold);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.loginbtn:hover a {
  color: var(--white);
}

/* ══════════════════════════════════════════════
   LOGGED-IN — OUTER WRAPPER
══════════════════════════════════════════════ */
section.py-5 > .container.nlicont {
  max-width: 1200px;
  width: 95%;
  margin: 3rem auto;
  padding: 2.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

/* Decorative top stripe */
section.py-5 > .container.nlicont::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-pale), var(--gold), var(--gold-light), var(--gold-pale));
}

/* Welcome heading */
section.py-5 > .container.nlicont > .row:first-child h2.text {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--gold);
  margin-bottom: 0;
}

section.py-5 > .container.nlicont > .row:first-child h2.text em {
  font-style: italic;
}

/* ── Profile Icon / Avatar ──────────────────── */
.pro-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(155,132,89,.35);
}

/* ── Sidebar card ───────────────────────────── */
.personalbox {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition);
}

.personalbox:hover {
  box-shadow: var(--shadow-md);
}

/* Sidebar user header */
.personalbox > .d-flex.align-items-center {
  padding: .75rem 1rem 1rem;
  gap: .85rem;
}

.personalbox h5.text-muted {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark) !important;
  letter-spacing: .02em;
}

/* Divider */
.personalbox .w-100[style*="border: 1px solid lightgray"] {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 0 1rem;
  width: calc(100% - 2rem) !important;
}

/* ── Sidebar nav buttons ────────────────────── */
.personalbox .pb-1.py-2 {
  padding: 1rem !important;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.probtn,
.probtn1 {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
}

.probtn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border-color: var(--gold);
}

.probtn a,
.probtn1 a {
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  color: var(--text-mid);
  transition: color var(--transition);
}

.probtn a {
  color: var(--white);
}

.probtn:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.probtn1:hover {
  background: var(--cream-deep);
  border-color: var(--gold-light);
  transform: translateX(3px);
}

.probtn1:hover a {
  color: var(--gold);
}

/* Remove Bootstrap br-introduced spacing */
.personalbox .pb-1.py-2 br {
  display: none;
}

/* ── Personal Info Panel ────────────────────── */
.personalbox.p-2 > .col-12.d-flex.justify-content-between {
  display: flex;
  align-items: center;
  padding: .5rem .75rem 1rem;
}

.personalbox.p-2 > .col-12.d-flex h4.text-muted {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-dark) !important;
  letter-spacing: .03em;
}

/* Edit link */
.personalbox.p-2 a[data-bs-toggle="modal"] {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--gold) !important;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: .4rem .9rem;
  border-radius: var(--radius-xl);
  transition: var(--transition);
  white-space: nowrap;
}

.personalbox.p-2 a[data-bs-toggle="modal"]:hover {
  background: var(--gold);
  color: var(--white) !important;
  border-color: var(--gold);
}

/* ── Info Field Cards ───────────────────────── */
.col-12.col-lg-6 > div[style*="border: 1px solid #9B8459"] {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1rem 1.1rem !important;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.col-12.col-lg-6 > div[style*="border: 1px solid #9B8459"]::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  border-radius: 3px 0 0 3px;
}

.col-12.col-lg-6 > div[style*="border: 1px solid #9B8459"]:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--gold-light) !important;
  transform: translateY(-1px);
}

.col-12.col-lg-6 > div[style*="border: 1px solid #9B8459"] h5 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold) !important;
  margin-bottom: .3rem;
}

.col-12.col-lg-6 > div[style*="border: 1px solid #9B8459"] h6 {
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 400;
  color: var(--text-dark) !important;
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════
   MODAL — Edit Profile
══════════════════════════════════════════════ */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border: none;
  padding: 1.25rem 1.75rem;
}

.modal-header .modal-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: .04em;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: .8;
}

.modal-body {
  background: var(--cream);
  padding: 2rem 1.5rem;
}

.modal-footer {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

/* Modal form inputs */
.form .input {
  width: 100%;
  background: var(--white);
  border: 1.5px solid var(--border);
  padding: .8rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-top: .4rem;
  margin-bottom: .3rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text-dark);
  transition: var(--transition);
  box-shadow: none;
}

.form .input::placeholder {
  color: var(--text-muted);
}

.form .input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(155,132,89,.12);
}

.form label.text {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold);
  display: block;
  margin-top: .9rem;
}

.form .login-button {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--white);
  padding: .9rem;
  margin: 1.5rem 0 0;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(155,132,89,.35);
}

.form .login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(155,132,89,.4);
}

.form .login-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(155,132,89,.3);
}

.modal-footer .btn-secondary {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-size: .85rem;
  border-radius: var(--radius-md);
  padding: .55rem 1.4rem;
  transition: var(--transition);
}

.modal-footer .btn-secondary:hover {
  background: var(--cream-deep);
  border-color: var(--gold-light);
  color: var(--gold);
}

/* ══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════ */

/* ── Tablet (≤ 991px) ───────────────────────── */
@media (max-width: 991.98px) {
  section.py-5 > .container.nlicont {
    padding: 1.75rem 1.25rem;
    margin: 1.5rem auto;
    width: 97%;
  }

  .modal-body .col-5 {
    width: 90% !important;
    max-width: 420px;
  }
}

/* ── Mobile (≤ 767px) ───────────────────────── */
@media (max-width: 767.98px) {
  section.py-5 > .container.nlicont {
    padding: 1.25rem 1rem;
    margin: 1rem auto;
    border-radius: var(--radius-md);
    width: 98%;
  }

  section.py-5 > .container.nlicont > .row:first-child h2.text {
    font-size: 1.5rem;
  }

  /* Sidebar fills full width on mobile, then info panel below */
  .col-12.col-md-4.col-lg-3,
  .col-12.col-md-8.col-lg-9 {
    width: 100% !important;
  }

  /* Stack sidebar buttons in a 2-column grid on mobile */
  .personalbox .pb-1.py-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  .probtn, .probtn1 {
    justify-content: center;
    text-align: center;
  }

  .probtn a, .probtn1 a {
    justify-content: center;
    font-size: .8rem;
  }

  .personalbox.p-2 > .col-12.d-flex h4.text-muted {
    font-size: 1.15rem;
  }

  /* Info cards: full width on mobile */
  .col-12.col-lg-6 {
    width: 100% !important;
  }

  .modal-body .col-5 {
    width: 100% !important;
  }

  .modal-dialog {
    margin: .75rem;
  }
}

/* ── Small mobile (≤ 479px) ─────────────────── */
@media (max-width: 479px) {
  .personalbox .pb-1.py-2 {
    grid-template-columns: 1fr;
  }

  .probtn a, .probtn1 a {
    font-size: .85rem;
    justify-content: flex-start;
  }

  section.py-5 > .container.nlicont > .row:first-child h2.text {
    font-size: 1.25rem;
  }

  .nlicont {
    padding: 2rem 1.25rem;
    margin: 1.5rem .75rem;
  }
}

/* ══════════════════════════════════════════════
   SUBTLE ANIMATIONS
══════════════════════════════════════════════ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

section.py-5 > .container.nlicont {
  animation: fadeSlideUp .45s ease both;
}

.col-12.col-lg-6 {
  animation: fadeSlideUp .4s ease both;
}

.col-12.col-lg-6:nth-child(2) { animation-delay: .05s; }
.col-12.col-lg-6:nth-child(3) { animation-delay: .10s; }
.col-12.col-lg-6:nth-child(4) { animation-delay: .15s; }
.col-12.col-lg-6:nth-child(5) { animation-delay: .20s; }
.col-12.col-lg-6:nth-child(6) { animation-delay: .25s; }