/* assets/css/app.css
   Combined styles for Merge PDF + Split PDF pages
   Save as: assets/css/app.css
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Stack+Sans+Text:wght@200..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* ---------- variables & base ---------- */
:root{
  --brand-blue: #2563eb;
  --muted: #6b7280;
  --light-bg: #f8fafc;
  --success-green: #10b981;
  --danger-red: #f87171;
  --card-border: #e9e9ef;
  --card-shadow: rgba(12,18,28,0.02);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background:var(--light-bg);
  color:#575757;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  padding-top: 85px;
}

/* Remove underlines globally for interactive elements */
a, a:link, a:visited, a:active, button {
  text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: "Stack Sans Text", sans-serif;
}
h1, h2, h3, h4, h5, h6{
  font-weight: 800;
}

/* ---------- header & branding ---------- */
.site-header{
  background: #fff;
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
  position:fixed;
  top:0;
  width:100%;
  z-index:1000;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{font-weight:600;display:flex;align-items:center;gap:.6rem}
.logo-box{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
}

.menu-primary-menu-container ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  float: none;
  text-align:center;
  line-height: 2.5;
}
.menu-primary-menu-container li {
  display: inline-block;
  margin-left: 20px;
  position:relative;
}
.menu-primary-menu-container li a {
  color: inherit;
  font-size: 16px;
  transition: 0.3s ease;
  text-decoration: none;
  padding: 10px 0;
  position:relative;
}
.menu-primary-menu-container li a:after{
    content:'';
    bottom:-14px;
    position:absolute;
    width:100%;
    height:1px;
    background:#000;
    left:0;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
.menu-primary-menu-container li a:hover:after{
    bottom:0;
    opacity:1;
    visibility:visible;
}
.menu-primary-menu-container li.current-menu-item a,
.menu-primary-menu-container li.current-menu-parent a{
    border-bottom:1px solid #000;
}

.menu-primary-menu-container ul li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    z-index: 99;
    width:225px;
    height:1px;
    -webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in;
       -moz-transition: top 0.2s ease-in, opacity 0.2s ease-in;
        -ms-transition: top 0.2s ease-in, opacity 0.2s ease-in;
         -o-transition: top 0.2s ease-in, opacity 0.2s ease-in;
            transition: top 0.2s ease-in, opacity 0.2s ease-in;
}
.menu-primary-menu-container ul li ul li a {
    color: #fff !important;
    width: 100%;
    float: left;
    padding: 10px 20px;
    font-size: 16px;
    text-align:left;
}
.menu-primary-menu-container ul li:hover ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
    background: #f71e1e;
    color: #fff !important;
    width:200px;
    overflow:hidden;
    height:auto;
}
.menu-primary-menu-container ul li ul {
    line-height: 1 !important;
    padding: 15px 0;
}

.menu-primary-menu-container ul li ul li{
    width: 100%;
    margin: 0;
}
.menu-primary-menu-container ul li:hover ul li a:hover{
    background: #000;
    color:#fff !important;
    width: 100%;
    float: left;
    padding: 10px 20px;
    border:0 !important;
}
.menu-primary-menu-container ul li:hover ul li:hover ul{
    left:100%;
    opacity: 1;
    visibility: visible;
    background: #26a9f9;
    color: #fff !important;
    width:225px;
    overflow:hidden;
}
/* nav pill */
.nav-pill .nav-link{
  border-radius:8px;
  padding:.45rem .85rem;
  color:var(--muted);
  cursor:pointer;
  display:inline-block;
}
.nav-pill .nav-link.active{
  background:#eef2ff;
  color:var(--brand-blue);
  font-weight:600;
}

/* ---------- hero ---------- */
.hero{padding:3.5rem 1rem;text-align:center}
.hero h1{font-weight:700;font-size:2rem;margin-bottom:.25rem}
.hero p.lead{color:var(--muted);margin-bottom:1.25rem}

/* ---------- dropzone / upload area ---------- */
.dropzone{
  border:2px dashed rgba(99,102,241,0.2);
  border-radius:12px;
  padding:4rem 1rem;
  background:#fff;
  max-width:980px;
  margin:0 auto;
  position:relative;
  transition:all .15s ease;
}
.dropzone.dragover{
  background:#fbfdff;
  border-color: rgba(37,99,235,0.45);
}
.drop-icon{
  width:72px;height:72px;border-radius:50%;background:rgb(219 234 254);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
}
.text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.w-8 {
    width: 2rem;
}
.bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.h-8 {
    height: 2rem;
}
#dropText{margin-bottom:8px}

/* primary select button */
.select-btn{
    background: var(--brand-blue);
    border: none;
    color: #fff;
    padding: 24px 100px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    display: inline-block;
    font-size: 1.3rem;
}

/* ---------- content container ---------- */
.content-wrap{max-width:1100px;margin:0 auto;padding:2rem 1rem;text-align:center}

/* add-more (merge) */
.add-more{
  display:inline-block;
  border:2px dashed rgba(99,102,241,0.25);
  padding:1rem 1.5rem;border-radius:12px;color:var(--muted);
  cursor:pointer;
}

/* ---------- cards / thumbnails ---------- */
.cards-row{display:flex;gap:1.25rem;align-items:flex-start;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}
.pdf-card{
  width:200px;
  background:#fff;
  border-radius:8px;
  border:1px solid var(--card-border);
  padding:12px;
  position:relative;
  box-shadow:0 1px 0 var(--card-shadow);
  transition:transform .12s ease,opacity .12s ease;
}
.pdf-card.dim{opacity:.45}
.pdf-thumb{
  height:180px;border-radius:6px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pdf-thumb img{max-width:100%;max-height:100%;display:block}
.pdf-meta{padding-top:10px;text-align:left}
.file-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.file-size{color:var(--muted);font-size:.92rem;margin-top:6px}

/* remove button */
.remove-btn{
  position:absolute;right:-8px;top:-8px;
  background:var(--danger-red);
  border-radius:50%;
  width:30px;height:30px;border:4px solid white;color:white;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-weight:700;line-height:1;
}

/* spinner used in many places */
.spinner{
  width:36px;height:36px;border-radius:50%;
  border:4px solid rgba(0,0,0,0.06);
  border-top-color:rgba(0,0,0,0.2);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- action buttons ---------- */
/* merge & split primary */
.merge-btn, .split-btn{
    display: inline-block;
    background: var(--brand-blue);
    color: #fff;
    padding: 24px 100px;
    border-radius: 12px;
    border: none;
    font-weight: 800;
    margin-top: 2.2rem;
    font-size: 1.3rem;
  cursor:pointer;
}
.split-btn[disabled], .merge-btn[disabled]{opacity:.55;cursor:not-allowed}

/* download button (result) */
.download-btn{
    display: inline-block;
    background: #2f6ee6;
    color: #fff;
    padding: 24px 100px;
    border-radius: 12px;
    border: none;
    font-weight: 800;
    margin-top: 1.5rem;
    font-size: 1.3rem;
    cursor: pointer;
}

/* small rename icon button (green square) */
.rename-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;margin-left:8px;width:56px;height:48px;border-radius:8px;background:var(--success-green);color:#fff;border:none;cursor:pointer;
}
.rename-icon-btn[disabled]{opacity:.45;cursor:not-allowed}
.rename-icon-btn svg{display:block}

/* standard small buttons used in rename inline */
.btn-save{
    background: var(--brand-blue);
    color: #fff;
    border: none;
    padding: 24px 100px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 800;
}
.btn-cancel{
  background: #e63636;
  border: 1px solid #e6e6ef;
  padding: .85rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 800;
}

/* ---------- result view ---------- */
.result-view{max-width:720px;margin:0 auto;padding:3rem 1rem;background:#fff;border-radius:12px;text-align:center}
.result-view h2{font-size:32px;margin-top:1rem}
.result-view p{color:var(--muted);margin-top:.75rem}

/* rename inline / form */
.rename-form{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.rename-input{padding:.85rem 1rem;border:1px solid #e6e6ef;border-radius:8px;font-weight:600;width:100%}
.rename-actions{display:flex;gap:10px;justify-content:center}

/* ---------- overlay loader ---------- */
.overlay-loading{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0.25);z-index:1200;
}
.overlay-loading .spinner{width:52px;height:52px;border-radius:50%;border:6px solid rgba(255,255,255,0.25);border-top-color:white;}

/* ---------- misc ---------- */
.hidden{display:none}
@media (max-width:600px){
  .pdf-card{width:150px}
  .pdf-thumb{height:130px}
  .rename-icon-btn{width:48px;height:44px}
  .merge-btn,.split-btn{padding:.8rem 1.4rem}
}

/* back link style (matches merge page) */
.back-link{display:inline-flex;align-items:center;gap:.5rem;color:#374151;font-weight:600;cursor:pointer}
.back-link svg{transform:translateX(-2px);display:block}

/* Accessibility focus styles */
a:focus, button:focus, input:focus { outline: 3px solid rgba(37,99,235,0.12); outline-offset:2px; }

/* Small helpers used by JS-generated inline elements */
.pdf-card.loading{opacity:.85}
.center-inline{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}

/* explicit visibility helpers */
.show{display:block}