/*
Theme Name: TripShare Elementor
Theme URI: https://example.com/
Author: TripShare
Description: TripShare online trip-expense app with Trip Code URLs and an Elementor-editable homepage.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tripshare
*/
/* =====================================================
   RESET
===================================================== */

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

:root{
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --green:#10b981;
  --red:#ef4444;
  --orange:#f59e0b;

  --dark:#0f172a;
  --text:#1e293b;
  --muted:#64748b;

  --bg:#f5f7fb;
  --white:#fff;

  --border:#e2e8f0;
  --soft:#eff6ff;

  --radius:18px;

  --shadow:
    0 8px 28px rgba(15,23,42,.07);
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
    "Noto Sans Bengali",
    "Hind Siliguri",
    Arial,
    sans-serif;

  background:var(--bg);
  color:var(--text);

  min-height:100vh;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

button:active{
  transform:scale(.98);
}

.hidden{
  display:none!important;
}


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

.btn{
  min-height:44px;

  padding:9px 16px;

  border:0;
  border-radius:11px;

  display:inline-flex;

  justify-content:center;
  align-items:center;

  gap:7px;

  font-weight:700;

  transition:.2s;
}

.btn-primary{
  background:var(--primary);
  color:#fff;
}

.btn-primary:hover{
  background:var(--primary2);
}

.btn-light{
  background:#f1f5f9;
  color:#334155;
}

.btn-light:hover{
  background:#e2e8f0;
}

.btn-danger{
  background:#fee2e2;
  color:#dc2626;
}

.small{
  min-height:36px;
  padding:6px 11px;
  font-size:13px;
}

.full{
  width:100%;
}


/* =====================================================
   LANDING
===================================================== */

#landing{
  min-height:100vh;

  display:flex;

  justify-content:center;
  align-items:center;

  padding:20px;

  background:

    radial-gradient(
      circle at 10% 10%,
      rgba(37,99,235,.13),
      transparent 32%
    ),

    radial-gradient(
      circle at 90% 90%,
      rgba(16,185,129,.10),
      transparent 30%
    ),

    var(--bg);
}

.landing-wrap{
  width:100%;
  max-width:1050px;

  display:grid;

  grid-template-columns:
    1.15fr .85fr;

  gap:35px;

  align-items:center;
}

.logo{
  display:flex;

  align-items:center;

  gap:10px;

  font-size:24px;

  font-weight:800;

  margin-bottom:25px;
}

.logo-box{
  width:48px;
  height:48px;

  display:grid;

  place-items:center;

  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f46e5
    );

  color:#fff;

  font-size:23px;
}

.hero h1{
  font-size:
    clamp(40px,6vw,68px);

  line-height:1.08;

  letter-spacing:-1.5px;

  margin-bottom:20px;
}

.hero h1 span{
  color:var(--primary);
}

.hero p{
  max-width:600px;

  color:var(--muted);

  font-size:18px;

  line-height:1.8;
}

.badges{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:24px;
}

.badge{
  background:#fff;

  border:1px solid var(--border);

  padding:8px 13px;

  border-radius:50px;

  color:#475569;

  font-size:14px;
}

.start-card{
  background:#fff;

  border:1px solid var(--border);

  border-radius:25px;

  padding:30px;

  box-shadow:var(--shadow);
}

.start-card h2{
  font-size:25px;

  margin-bottom:7px;
}

.start-card p{
  color:var(--muted);

  margin-bottom:23px;
}

.start-buttons{
  display:grid;

  gap:11px;
}


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

.app-header{
  height:70px;

  background:#fff;

  border-bottom:
    1px solid var(--border);

  position:sticky;

  top:0;

  z-index:50;
}

.header-inner{
  width:
    min(
      1180px,
      calc(100% - 30px)
    );

  height:100%;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;
}

.app-logo{
  display:flex;

  align-items:center;

  gap:9px;

  font-size:20px;

  font-weight:800;
}

.app-logo-box{
  width:38px;
  height:38px;

  display:grid;

  place-items:center;

  border-radius:11px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #2563eb,
      #4f46e5
    );
}

.header-right{
  display:flex;

  align-items:center;

  gap:8px;
}

.trip-title-header{
  max-width:180px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  font-weight:700;
}

.code{
  display:flex;

  align-items:center;

  gap:5px;

  background:#eff6ff;

  color:#1d4ed8;

  border-radius:9px;

  padding:7px 9px;

  font-size:13px;

  font-weight:700;
}

.copy-code{
  border:0;

  background:none;

  color:inherit;

  cursor:pointer;
}

.icon{
  width:37px;
  height:37px;

  border:0;

  border-radius:10px;

  background:#f1f5f9;
}


/* =====================================================
   MAIN
===================================================== */

.main{
  width:
    min(
      1180px,
      calc(100% - 30px)
    );

  margin:28px auto 80px;
}

.page-title{
  display:flex;

  justify-content:space-between;

  align-items:end;

  gap:15px;

  margin-bottom:22px;
}

.page-title h1{
  font-size:30px;
}

.page-title p{
  color:var(--muted);

  margin-top:3px;
}


/* =====================================================
   STATS
===================================================== */

.stats{
  display:grid;

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

  gap:14px;

  margin-bottom:20px;
}

.stat{
  background:#fff;

  border:1px solid var(--border);

  border-radius:var(--radius);

  padding:19px;

  box-shadow:var(--shadow);
}

.stat-top{
  display:flex;

  justify-content:space-between;

  align-items:center;
}

.stat-label{
  color:var(--muted);

  font-size:14px;
}

.stat-icon{
  width:40px;
  height:40px;

  display:grid;

  place-items:center;

  border-radius:12px;

  background:var(--soft);
}

.stat-value{
  margin-top:13px;

  font-size:27px;

  font-weight:800;
}


/* =====================================================
   CARD
===================================================== */

.dashboard{
  display:grid;

  gap:18px;
}

.card{
  background:#fff;

  border:1px solid var(--border);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  overflow:hidden;
}

.card-header{
  min-height:62px;

  padding:15px 19px;

  border-bottom:
    1px solid var(--border);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;
}

.card-header h2{
  font-size:18px;
}

.card-body{
  padding:19px;
}


/* =====================================================
   RECENT EXPENSE
===================================================== */

.recent-card .card-header{
  background:
    linear-gradient(
      180deg,
      #fff,
      #fbfdff
    );
}

.recent-head{
  display:flex;

  align-items:center;

  gap:10px;
}

.recent-title{
  flex:1;
}

.recent-title h2{
  margin-bottom:2px;
}

.recent-title small{
  color:var(--muted);

  font-size:12px;
}

.search-box{
  position:relative;

  margin-bottom:13px;
}

.search-box span{
  position:absolute;

  left:13px;

  top:50%;

  transform:
    translateY(-50%);

  color:#64748b;

  pointer-events:none;
}

.search-box input{
  padding-left:38px;
}

.filter-row{
  display:flex;

  gap:7px;

  overflow:auto;

  padding-bottom:3px;

  margin-bottom:14px;
}

.filter-btn{
  flex:none;

  border:1px solid var(--border);

  background:#fff;

  padding:7px 13px;

  border-radius:30px;

  font-size:13px;

  color:#64748b;
}

.filter-btn.active{
  background:var(--primary);

  color:#fff;

  border-color:var(--primary);
}

.expenses{
  display:grid;

  gap:9px;
}

.expense{
  display:flex;

  align-items:center;

  gap:11px;

  padding:12px;

  border:1px solid var(--border);

  border-radius:13px;

  transition:.2s;
}

.expense:hover{
  border-color:#bfdbfe;

  background:#fafcff;
}

.expense-icon{
  width:43px;
  height:43px;

  flex:none;

  display:grid;

  place-items:center;

  border-radius:12px;

  background:#ecfdf5;
}

.expense-info{
  flex:1;

  min-width:0;
}

.expense-info strong{
  display:block;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.expense-info small{
  display:block;

  color:var(--muted);

  margin-top:2px;
}

.amount{
  font-weight:800;

  white-space:nowrap;
}

.actions{
  display:flex;

  gap:5px;
}

.action{
  width:33px;
  height:33px;

  border:0;

  border-radius:9px;

  background:#f1f5f9;
}

.action.delete:hover{
  background:#fee2e2;
}


/* =====================================================
   VERTICAL BAR CHART
===================================================== */

.chart-wrap{
  width:100%;

  overflow-x:auto;

  padding-bottom:5px;
}

.chart{
  height:300px;

  min-width:540px;

  display:flex;

  align-items:flex-end;

  gap:18px;

  padding:
    10px 12px
    0 12px;

  border-bottom:
    1px solid var(--border);
}

.bar-item{
  height:100%;

  min-width:70px;

  flex:1;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:flex-end;

  gap:7px;
}

.bar-value{
  font-size:11px;

  font-weight:800;

  color:#334155;

  white-space:nowrap;
}

.bar-track{
  height:210px;

  width:100%;

  max-width:58px;

  display:flex;

  align-items:flex-end;

  background:#eef2f7;

  border-radius:
    10px 10px 5px 5px;

  overflow:hidden;
}

.bar-fill{
  width:100%;

  min-height:3px;

  background:
    linear-gradient(
      180deg,
      #60a5fa,
      #2563eb
    );

  border-radius:
    9px 9px 3px 3px;

  transition:
    height .45s ease;
}

.bar-name{
  width:75px;

  text-align:center;

  font-size:11px;

  color:#475569;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}

.chart-note{
  font-size:12px;

  color:var(--muted);

  margin-top:12px;
}


/* =====================================================
   LOWER GRID
===================================================== */

.lower-grid{
  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:18px;
}

.stack{
  display:grid;

  gap:18px;
}


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

.form-group{
  margin-bottom:15px;
}

.form-group label{
  display:block;

  margin-bottom:7px;

  font-size:14px;

  font-weight:700;
}

.input{
  width:100%;

  height:47px;

  border:
    1px solid #d7dee8;

  border-radius:11px;

  padding:9px 12px;

  background:#fff;
}

.input:focus{
  outline:none;

  border-color:var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(37,99,235,.10);
}

.payers{
  display:flex;

  flex-wrap:wrap;

  gap:7px;
}

.payer{
  border:1px solid var(--border);

  background:#fff;

  padding:8px 12px;

  border-radius:10px;

  color:#475569;
}

.payer.active{
  color:#fff;

  background:var(--primary);

  border-color:var(--primary);
}

.form-buttons{
  display:flex;

  gap:8px;
}

.form-buttons .btn{
  flex:1;
}


/* =====================================================
   MEMBERS
===================================================== */

.members{
  display:grid;

  gap:9px;
}

.member{
  display:flex;

  align-items:center;

  gap:10px;

  padding:11px;

  border:
    1px solid var(--border);

  border-radius:13px;
}

.avatar{
  width:40px;
  height:40px;

  flex:none;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#dbeafe;

  color:#1d4ed8;

  font-weight:800;
}

.member-info{
  flex:1;

  min-width:0;
}

.member-info strong{
  display:block;
}

.member-info small{
  color:var(--muted);
}


/* =====================================================
   MANAGEMENT
===================================================== */

.manage-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:9px;
}


/* =====================================================
   EMPTY
===================================================== */

.empty{
  padding:30px 10px;

  text-align:center;

  color:var(--muted);
}

.empty-icon{
  font-size:36px;

  margin-bottom:7px;
}


/* =====================================================
   MODAL
===================================================== */

.modal-bg{
  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:18px;

  background:
    rgba(15,23,42,.55);

  backdrop-filter:blur(4px);

  z-index:100;
}

.modal{
  width:100%;

  max-width:440px;

  padding:23px;

  background:#fff;

  border-radius:22px;

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.2);
}

.modal h3{
  font-size:22px;

  margin-bottom:5px;
}

.modal p{
  color:var(--muted);

  line-height:1.6;

  margin-bottom:18px;
}

.modal-buttons{
  display:flex;

  gap:8px;
}

.modal-buttons .btn{
  flex:1;
}


/* =====================================================
   TOAST
===================================================== */

#toast{
  position:fixed;

  right:18px;

  bottom:18px;

  z-index:200;
}

.toast-item{
  color:#fff;

  background:#0f172a;

  padding:11px 15px;

  border-radius:11px;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.2);

  margin-top:8px;
}

.toast-item.success{
  background:#047857;
}

.toast-item.error{
  background:#dc2626;
}


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

.mobile-nav{
  display:none;
}


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

@media(max-width:900px){

  .landing-wrap{
    grid-template-columns:1fr;

    max-width:650px;
  }

  .hero{
    text-align:center;
  }

  .hero p{
    margin:auto;
  }

  .badges{
    justify-content:center;
  }

  .lower-grid{
    grid-template-columns:1fr;
  }

}


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

@media(max-width:600px){

  #landing{
    padding:14px;
  }

  .logo{
    justify-content:center;
  }

  .hero h1{
    font-size:39px;
  }

  .hero p{
    font-size:16px;
  }

  .start-card{
    padding:20px;

    border-radius:20px;
  }


  .app-header{
    height:62px;
  }

  .header-inner{
    width:
      calc(100% - 14px);
  }

  .app-logo span{
    display:none;
  }

  .trip-title-header{
    max-width:90px;

    font-size:13px;
  }

  .code{
    font-size:10px;

    padding:6px 7px;
  }


  .main{
    width:
      calc(100% - 16px);

    margin-top:18px;

    margin-bottom:85px;
  }

  .page-title h1{
    font-size:24px;
  }

  .page-title p{
    font-size:13px;
  }

  .page-title>.btn{
    display:none;
  }


  .stats{
    grid-template-columns:
      1fr 1fr;

    gap:9px;
  }

  .stat{
    padding:14px;

    border-radius:14px;
  }

  .stat-value{
    font-size:21px;
  }


  .card{
    border-radius:15px;
  }

  .card-body{
    padding:14px;
  }

  .card-header{
    padding:13px 14px;
  }


  .chart{
    min-width:560px;

    height:270px;
  }

  .bar-track{
    height:180px;
  }


  .expense{
    align-items:flex-start;
  }

  .expense .actions{
    flex-direction:column;
  }

  .amount{
    font-size:13px;
  }


  .mobile-nav{
    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:65px;

    display:flex;

    background:#fff;

    border-top:
      1px solid var(--border);

    z-index:60;
  }

  .mobile-nav button{
    flex:1;

    border:0;

    background:#fff;

    color:#64748b;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:2px;

    font-size:11px;
  }

  .mobile-nav button span{
    font-size:19px;
  }

  .mobile-nav button.active{
    color:var(--primary);

    font-weight:700;
  }


  #toast{
    left:12px;

    right:12px;

    bottom:75px;
  }

}


/* =====================================================
   SMALL PHONE
===================================================== */

@media(max-width:380px){

  .hero h1{
    font-size:34px;
  }

  .trip-title-header{
    max-width:70px;
  }

  .stats{
    gap:7px;
  }

  .stat{
    padding:12px;
  }

  .stat-value{
    font-size:18px;
  }

}