/* ============================================================
   VOLBOO — Forms & settings layer
   Loads LAST, after css/styles.css AND after any page-level <style>
   block, so it settles the differences between pages that each grew
   their own form styles.

   Everything here answers to the same system as the rest of the app:
   pill controls, 12–14px type, hairline borders, one accent.
   ============================================================ */

/* ------------------------------------------------------------
   1. Page shell
   ------------------------------------------------------------ */
.page-header h1{font-size:1.3125rem;font-weight:650;letter-spacing:-.03em}
.page-header p{font-size:.8125rem;color:var(--text3);margin-top:4px}

/* Forms read better in a column than across a wide screen */
.form-page{max-width:640px}
.settings-shell{max-width:960px}
.section-title{
  font-size:.9375rem;font-weight:600;letter-spacing:-.02em;
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border);
}

/* ------------------------------------------------------------
   2. Tab pills (business settings)
   A segmented control, not a row of buttons: one track, one raised
   thumb, so it reads as a single choice rather than seven actions.
   ------------------------------------------------------------ */
.settings-tabs{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  justify-content:flex-start;
  width:fit-content;max-width:100%;
  padding:4px;margin:0 0 20px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:999px;
}
.tab-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:none;background:transparent;
  border-radius:999px;font-family:inherit;
  font-size:.78125rem;font-weight:600;letter-spacing:-.01em;
  color:var(--text3);cursor:pointer;transition:var(--transition);
  white-space:nowrap;
}
.tab-btn i{font-size:.71875rem;opacity:.8}
.tab-btn:hover{color:var(--text);background:var(--bg-hover)}
.tab-btn.active{background:var(--bg);color:var(--text);box-shadow:var(--shadow-sm)}
.tab-btn.active i{color:var(--accent);opacity:1}
[data-theme="dark"] .tab-btn.active{background:var(--bg-hover)}
.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tab-content{display:none}
.tab-content.active{display:block;animation:rise .3s cubic-bezier(.16,1,.3,1) both}

/* ------------------------------------------------------------
   3. Form controls
   ------------------------------------------------------------ */
.form-group{margin-bottom:16px}
.form-label{
  display:block;margin-bottom:6px;
  font-size:.75rem;font-weight:600;color:var(--text2);letter-spacing:-.005em;
}
.form-hint{font-size:.6875rem;color:var(--text4);margin-top:5px;line-height:1.5}

.form-input,.form-select,.form-textarea{
  width:100%;padding:10px 15px;
  border:1px solid var(--border-strong);border-radius:999px;
  font-family:inherit;font-size:.8125rem;
  background:var(--bg-input);color:var(--text);
  transition:var(--transition);
}
.form-textarea{
  border-radius:var(--radius-xl);padding:12px 15px;
  resize:vertical;line-height:1.6;min-height:96px;
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text4)}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--accent);background:var(--bg);
  box-shadow:0 0 0 3px var(--accent-light);
}
.form-input:disabled,.form-select:disabled,.form-textarea:disabled{
  opacity:.6;cursor:not-allowed;
}

/* Native select arrows differ per platform; this one is ours */
.form-select{
  appearance:none;-webkit-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}

/* A textarea living inside the shared .input-wrapper pill. The
   :has() form catches wrappers that were never given the class. */
.input-wrapper.is-textarea,
.input-wrapper:has(textarea){
  align-items:flex-start;border-radius:var(--radius-xl);
  padding:10px 8px 10px 15px;
}
.input-wrapper.is-textarea > i,
.input-wrapper:has(textarea) > i{margin-top:3px}

/* A textarea that was handed the wrapper class directly is a control,
   not a container — treat it as one rather than as a flex pill. */
textarea.input-wrapper{
  display:block;width:100%;padding:12px 15px;
  border-radius:var(--radius-xl);resize:vertical;line-height:1.6;min-height:96px;
  font-family:inherit;font-size:.8125rem;
}
.input-wrapper textarea{
  flex:1;min-width:0;border:none;background:none;outline:none;
  resize:vertical;font-family:inherit;font-size:.8125rem;color:var(--text);
  padding:0 8px;line-height:1.6;
}
.char-count{
  text-align:right;font-size:.6875rem;color:var(--text4);margin-top:5px;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------
   4. Form actions — page-level buttons answer to .btn
   ------------------------------------------------------------ */
.form-actions{
  display:flex;justify-content:flex-end;gap:10px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
}
.btn-save,.btn-cancel,.btn-reupload{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:999px;font-family:inherit;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;transition:var(--transition);
}
.btn-save{
  min-height:38px;padding:0 20px;font-size:.8125rem;
  background:var(--accent);color:#fff;border:1px solid transparent;
  box-shadow:0 1px 2px rgba(16,185,129,.3);
}
.btn-save:hover{
  background:var(--accent-hover);transform:translateY(-1px);
  box-shadow:0 6px 16px -5px rgba(16,185,129,.5);
}
.btn-save:active{transform:none;box-shadow:0 1px 2px rgba(16,185,129,.3)}
.btn-save:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn-cancel{
  min-height:38px;padding:0 20px;font-size:.8125rem;
  background:transparent;color:var(--text2);border:1px solid var(--border);
}
.btn-cancel:hover{background:var(--bg-hover);border-color:var(--border-strong);color:var(--text)}

.btn-reupload{
  min-height:32px;padding:0 14px;font-size:.75rem;
  background:transparent;color:var(--text2);border:1px solid var(--border);
}
.btn-reupload:hover{background:var(--bg-hover);border-color:var(--border-strong);color:var(--text)}
.btn-reupload:empty{display:none}

/* ------------------------------------------------------------
   5. Business logo block
   ------------------------------------------------------------ */
.logo-upload-section{
  margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border);
}
.logo-preview{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.logo-circle{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:600;
}

/* ------------------------------------------------------------
   6. Preferences
   ------------------------------------------------------------ */
.preference-section{margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.preference-section:last-of-type{border-bottom:none;padding-bottom:0;margin-bottom:0}
.preference-header{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.preference-header i{color:var(--accent);font-size:.8125rem}
.preference-header h3{font-size:.875rem;font-weight:600;letter-spacing:-.015em}
.preference-item{margin-bottom:14px}
.preference-item label{
  display:block;font-size:.75rem;font-weight:500;color:var(--text3);margin-bottom:3px;
}
.preference-value{font-size:.8125rem;color:var(--text)}
.preference-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.toggle-info label{font-size:.8125rem;font-weight:600;color:var(--text)}

/* ------------------------------------------------------------
   7. Settings sidebar (profile settings)
   ------------------------------------------------------------ */
.settings-layout{display:flex;gap:20px;align-items:flex-start}
.settings-sidebar{
  width:224px;flex-shrink:0;padding:16px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);height:fit-content;position:sticky;top:calc(var(--header-h) + 20px);
}
.settings-avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent-light);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;font-weight:600;margin:0 auto 12px;
}
.settings-user-name{font-size:.875rem;font-weight:600;text-align:center;margin-bottom:2px}
.settings-user-email{font-size:.6875rem;color:var(--text4);text-align:center;margin-bottom:16px;word-break:break-all}
.settings-nav{display:flex;flex-direction:column;gap:2px}
.settings-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:999px;
  font-size:.8125rem;font-weight:500;color:var(--text3);
  cursor:pointer;transition:var(--transition);
}
.settings-nav-item i{width:15px;text-align:center;font-size:.78125rem;color:var(--text4);transition:var(--transition)}
.settings-nav-item:hover{background:var(--bg-hover);color:var(--text)}
.settings-nav-item.active{background:var(--bg-hover);color:var(--text);font-weight:600}
.settings-nav-item.active i{color:var(--accent)}

.settings-content{flex:1;min-width:0}
.settings-section{display:none}
.settings-section.active{display:block;animation:rise .3s cubic-bezier(.16,1,.3,1) both}
.settings-section h2{
  font-size:1.0625rem;font-weight:600;letter-spacing:-.03em;margin-bottom:16px;
}

/* Security / notification rows */
.security-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.security-info h4{font-size:.8125rem;font-weight:600;margin-bottom:2px}
.security-info p{font-size:.75rem;color:var(--text3);line-height:1.5}

/* ------------------------------------------------------------
   8. Wizard (activate business)
   ------------------------------------------------------------ */
.wizard-card{max-width:760px;margin:0 auto}
.wizard-steps{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:24px;flex-wrap:nowrap;
}
.wizard-step{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;font-size:.75rem;color:var(--text4);
  white-space:nowrap;
}
.wizard-step-num{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--border-strong);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.6875rem;color:var(--text4);
  transition:var(--transition);
}
.wizard-step.active .wizard-step-num,
.wizard-step.completed .wizard-step-num{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.wizard-step-label{font-weight:500}
.wizard-step.active .wizard-step-label{color:var(--text);font-weight:600}
.wizard-step.completed .wizard-step-label{color:var(--text3)}
.wizard-line{width:36px;height:1px;background:var(--border);flex-shrink:0}
.wizard-step.completed~.wizard-line{background:var(--accent)}

.wizard-step-content{display:none}
.wizard-step-content.active{display:block;animation:rise .3s cubic-bezier(.16,1,.3,1) both}
.wizard-nav{
  display:flex;justify-content:space-between;gap:10px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
}

/* ------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------ */
@media(max-width:900px){
  /* The settings rail becomes a scrolling tab strip */
  .settings-layout{flex-direction:column;align-items:stretch;gap:16px}
  .settings-sidebar{
    width:100%;position:static;padding:0;
    background:none;border:none;border-radius:0;
  }
  .settings-avatar,.settings-user-name,.settings-user-email{display:none}
  .settings-nav{
    flex-direction:row;gap:6px;overflow-x:auto;
    padding:4px;background:var(--bg-input);border:1px solid var(--border);
    border-radius:999px;scrollbar-width:none;-ms-overflow-style:none;
  }
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-nav-item{flex:0 0 auto;padding:8px 15px}
  .settings-nav-item.active{background:var(--bg);box-shadow:var(--shadow-sm)}
  [data-theme="dark"] .settings-nav-item.active{background:var(--bg-hover)}
}

@media(max-width:768px){
  /* Tabs scroll rather than wrap into a block of pills */
  .settings-tabs{
    width:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .settings-tabs::-webkit-scrollbar{display:none}
  .tab-btn{flex:0 0 auto;padding:8px 14px;font-size:.75rem}

  .form-actions{flex-direction:column-reverse}
  .form-actions .btn-save,
  .form-actions .btn-cancel,
  .form-actions .btn{width:100%}

  /* The wizard keeps its numbers but drops the labels */
  .wizard-steps{justify-content:space-between;margin-bottom:20px}
  .wizard-step{padding:0}
  .wizard-step-label{display:none}
  .wizard-line{flex:1;width:auto;margin:0 6px}
  .wizard-nav{gap:8px}
  .wizard-nav .btn{flex:1}
}

@media(max-width:480px){
  .settings-section h2{font-size:1rem}
  .logo-preview{gap:10px}
}