/* Base: everything the buttons share */
.btn {
    --btn-bg: #08146A;
    --btn-color: #fff;
    --btn-border: transparent;
    --btn-border-hover: transparent;
    --btn-bg-hover: #0055FF;
    --btn-color-hover: #fff;
  
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 16px 24px;
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    border-radius: 4px;
    border: 2px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  
  .btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
    border: 2px solid var(--btn-border-hover);
  }
  
  .btn:focus-visible {
    outline: 2px solid var(--btn-border, #2563eb);
    outline-offset: 2px;
  }
  
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  /* Variants: only set the variables */
  .btn--primary {
    --btn-bg: #2563eb;
    --btn-bg-hover: #1d4ed8;
    --btn-color: #fff;
  }
  
  .btn--secondary {
    --btn-bg: #fff;
    --btn-bg-hover: #0055FF;
    --btn-color: #08146A;
    --btn-border: transparent;
    --btn-color-hover: #fff;
  }
  .btn--secondary-outline {
    --btn-bg: #fff;
    --btn-bg-hover: #0055FF;
    --btn-color: #08146A;
    --btn-border: #08146A;
    --btn-border-hover: transparent;
    --btn-color-hover: #fff;
  }
  .btn--ghost {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-color: #08146A;
    --btn-border: transparent;
    --btn-color-hover: #0055FF;
    padding-left: 0px;
    
  }
  
  .btn--danger {
    --btn-bg: #dc2626;
    --btn-bg-hover: #b91c1c;
    --btn-color: #fff;
  }

  .btn--small {
    font-size: 14px;
  }

  .btn--stretch {
    width: stretch;
  }

  .btn--single-post {
    margin: 10px;
    display: flex;
    justify-content: center;
  }



  .btn span {
    display: inline-grid;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: #ff6b35;   /* orange */
    color: #fff;           /* arrow color */
    font-size: 0.9em;
    flex-shrink: 0;
  }
  
  .btn span i {
    margin: 0;             /* cancel ms-2 so the arrow stays centered */
  }