/* ==============================
   Fiverr Growth - Standalone CSS
   No CDN dependencies (pure CSS)
   ============================== */

/* --- CSS Reset / Base --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body, h1, h2, h3, p, ul, li, a, table, th, td, input, select, textarea, button {
  margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system,
  Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
body { display: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

:root{
  --bg1:#0f7a6d;      /* purple */
  --bg2:#ff6a00;      /* orange */
  --bg3:#9926e6;      /* mid purple */
  --card: rgba(255,255,255,0.12);
  --card-strong: rgba(255,255,255,0.18);
  --text:#ffffff;
  --muted:#e9e9ef;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --brand:#13ace1;     /* yellow accent */
  --btnText:#5a27c6;   /* purple text on white buttons */
}

/* --- Background with gradient + soft blobs --- */
body{
  color: var(--text);
  /* background-image:
    radial-gradient(40rem 30rem at 10% 15%, rgba(255,255,255,0.15) 0%, transparent 60%),
    radial-gradient(35rem 25rem at 85% 20%, rgba(255,255,255,0.10) 0%, transparent 60%),
    radial-gradient(30rem 22rem at 20% 85%, rgba(255,255,255,0.12) 0%, transparent 60%),
    linear-gradient(135deg, var(--bg1) 0%, var(--bg3) 35%, var(--bg2) 100%); */
  min-height: 100%;
  background-image: url('./../imgs/bg1.jpg');
  background-image: url('./../imgs/image2.png');
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Ensures the image covers the entire background */
  background-position: center center; /* Centers the image */
  background-attachment: fixed; /* This makes the background image fixed */
  display: flex;
  flex-direction: column;
}

/* Decorative floating shapes */
.bg-shapes::before,
.bg-shapes::after{
  content:"";
  position: fixed;
  z-index: 0;
  inset: -100px;
  pointer-events: none;
  background:
    radial-gradient(18rem 14rem at 90% 75%, rgba(255, 184, 108, .35), transparent 60%),
    radial-gradient(16rem 12rem at 12% 30%, rgba(255, 255, 255, .22), transparent 60%),
    radial-gradient(22rem 16rem at 70% 8%, rgba(255, 255, 255, .16), transparent 60%);
  filter: blur(18px);
}
.bg-shapes::after{
  background:
    radial-gradient(20rem 14rem at 8% 85%, rgba(255, 255, 255, .18), transparent 60%),
    radial-gradient(24rem 18rem at 88% 40%, rgba(255, 255, 255, .15), transparent 60%);
  opacity: .8;
}

/* --- Top Nav (glass) --- */
.nav{
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: min(1120px, 94%);
  background: var(--card);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.22);
}
.brand{
  font-weight: 800;
  letter-spacing: .3px;
}
.brand .dot{ color: var(--brand); }
.links{ display:flex; flex-wrap: wrap; gap: 6px; }
.links a{
  color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background .2s ease, transform .2s ease;
}
.links a:hover{ 
  background: var(--card-strong); 
  transform: translateY(-1px); 
}
.links a.active{ 
  /* background: var(--brand);  */
  border: 2px solid var(--brand);
  color:var(--brand); 
  font-weight: 700; }

/* --- Layout --- */
.main{
  flex: 1;
  display: grid;
  place-items: center;
  padding: 120px 16px 40px; /* top padding accounts for fixed nav */
  position: relative;
  z-index: 1; /* above bg shapes */
}

/* Glass card */
.card{
  width: min(760px, 96vw);
  background: var(--card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.22);
}

/* Headings */
h1{ font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin-bottom: 10px; }
.subtitle{ color: var(--muted); margin-bottom: 24px; font-size: clamp(15px, 2.2vw, 18px); }

/* Button grid */
.btn-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.btn-grid .full{ grid-column: 1 / -1; }

/* Buttons */
.btn{
  display: inline-block;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  border: 0;
}
.btn-primary{ background: #fff; color: var(--btnText); }
.btn-accent{ background: var(--brand); color: #2a2a2a; }
.btn:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }
.btn:active{ transform: translateY(0); }

.footer{ margin-top: 18px; color: var(--muted); font-size: 0.95rem; }

/* --- Forms --- */
.form{
  margin-top: 8px;
  display: grid;
  gap: 14px;
}
.row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input, .select, .textarea{
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: large;
  background: rgba(255,255,255,0.95);
  color: #2a2a2a;
  border: 2px solid transparent;
  outline: none;
  transition: border .2s ease, box-shadow .2s ease;
}
.select{text-align: center;}
.textarea{ min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus{
  border-color: var(--bg1);
  box-shadow: 0 0 0 4px #6a11cb2e;
}
.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.15);
}


/* --- Tables --- */
.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.table th, .table td{
  background: rgba(255,255,255,0.92);
  color: #2a2a2a;
  padding: 12px 14px;
  border-bottom: 1px solid #e6e6ef;
  text-align: left;
  font-size: 14px;
}
.table th{ background: #f6f6fb; font-weight: 800; }
.table tr:last-child td{ border-bottom: none; }

/* --- Utility --- */
.mt-12{ margin-top: 12px; }
.mt-20{ margin-top: 20px; }
.center{ text-align: center; }
/* WhatsApp Floating Button */
.whatsapp-btn {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 58px;
  height: 58px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 99;
}
.whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.whatsapp-btn img {
  width: 32px;
  height: 32px;
}





/* filepath: c:\Users\HP\OneDrive\Desktop\Web Projects\FiverrRankSpace\newOrder.html */

/* --- BUTTON REDESIGN & COLOR SCHEME --- */

/* 1. General Button Styles (from style.css, enhanced here) */
.btn {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 600;
  border: 1px solid #e4e5e7; /* Light gray border */
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
}

/* 2. Primary / Active State Button */
.btn-accent {
  background-color: #0f7a6d; /* Fiverr Green */
  color: white;
  border-color: #1a9486;
}
.btn-accent:hover {
  background-color: #9e1653; /* Darker Green */
}

/* 3. Secondary / Inactive State Button */
.btn-outline {
  background-color: #fff;
  color: #62646a; /* Fiverr's gray text color */
  border-color: #e4e5e7;
}
.btn-outline:hover {
  color: #a3ffd4;
  /* border-color: #03c99b; */
  border: none;
}

/* 4. Button Group Container */
.btn-group {
  display: flex;
  width: 100%;
}
.btn-group > .btn {
  flex-grow: 1;
  border-radius: 0;
  margin: 0;
}
.btn-group > .btn:first-child {
  border-radius: 8px 0px 0px 8px;
  border-right-width: 0.5px;
}
.btn-group > .btn:last-child {
  border-radius: 0px 8px 8px 0px;
  border-left-width: 0.5px;
}
.btn-group > .btn.btn-accent:hover {
    background-color: #124798;
}

/* 5. Toggle Button Sizing */
.order-type-btn {
  width: 50%;
  max-width: none;
  min-width: 0;
  font-size: 1.1rem;
  padding: 12px 0;
}
.order-subtype-btn {
  font-size: 1rem;
  padding: 12px 0;
}

/* --- General Layout Styles --- */
.row.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.messages-section h3 {
  margin-bottom: 16px; /* Added space below heading */
}
.message-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px; /* Increased from 12px */
}
.message-row .input {
  width: 100%;
  min-height: 40px;
  resize: vertical;
}
@media (max-width: 600px) {
  .order-type-btn {
    font-size: 1rem;
    padding: 12px 0;
  }
}
@media (max-width: 700px) {
  .message-row {
    flex-direction: column;
    gap: 6px;
  }
  /* --- Responsive --- */
@media (max-width: 680px){
  .links{ display: none; } /* Simplify nav on very small screens */
  .btn-grid{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr; }
  .card{ padding: 22px; }
}
}
/* --- Floating WhatsApp Button (Toggle) --- */
.whatsapp-float-container {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000; 
}

.whatsapp-float-btn {
    width: 60px;
    height: 60px;
    background-color: #25D366; /* WhatsApp Green */
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none; 
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
}

.whatsapp-float-btn:hover {
    background-color: #1DA84A; /* Darker Green on hover */
    transform: scale(1.05);
}

/* --- WHATSAPP SVG ICON IMPLEMENTATION --- */
.whatsapp-float-btn::before {
    /* Using WhatsApp SVG icon as content via data URL */
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    height: 32px;
    display: block;
}

/* --- Menu Options Popup (Functionality styles) --- */
#accountDetails button {
    margin-left: 10px;
    padding: 6px 12px;
    font-size: 0.9em;
    border-radius: 6px;
    background-color: var(--brand);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.whatsapp-options {
    background-color: var(--card-strong);
    color: var(--muted);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 75px; 
    right: 0;
    width: 250px;
    padding: 10px;
    display: none; 
    transform-origin: bottom right;
    animation: fadeInScale 0.2s ease-out;
}

.whatsapp-options.active {
    display: block;
}

.whatsapp-number {
    font-weight: bold;
    color: var(--brand);
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.whatsapp-option-link {
    display: block;
    padding: 8px 10px;
    margin: 5px 0;
    border-radius: 4px;
    color: var(--text);
    text-align: center;
    font-size: 1em;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s;
    cursor: pointer;
}

.whatsapp-option-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}


/* --- Shared Modal Styles (for Auth Pop-up) --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000; /* Must be high to overlay everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0 0 0 / 86%); /* Dark semi-transparent overlay */
    padding-top: 10vh;
}
.modal-content {
    background-color: rgb(28 86 97);
    margin: 0 auto;
    padding: 25px;
    border-radius: 12px;
    width: min(90%, 450px); /* Ideal width for mobile and desktop */
    position: relative;
    color: var(--text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    animation: slideDown 0.3s ease-out;
}
.close-btn {
    color: var(--muted);
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: color 0.2s;
}
.close-btn:hover,
.close-btn:focus {
    color: var(--brand);
    text-decoration: none;
    cursor: pointer;
}
@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}



/* --- Pricing Table Enhancements (Add these rules to style.css) --- */

.data-table {
    width: 100%;             /* Use full width of its container (priceListContainer) */
    max-width: 650px;        /* 1. Centering: Limit max width for better appearance */
    margin: 0 auto;          /* 1. Centering: Auto margin on left/right centers the block */
    border-collapse: collapse; /* Ensure clean borders */
    border-radius: 8px;      /* Soften the corners */
    overflow: hidden;        /* Clips content to the border-radius */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Style the Table Header */
.data-table thead th {
    background-color: var(--brand); /* Blue accent for the header */
    color: var(--text);
    padding: 15px 20px;
    text-align: left;
    font-size: 1.1em;
}

/* Style Table Cells */
.data-table td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Light separator */
    color: var(--text);
    /* General alignment is managed inline below, but this is a fallback */
}

/* 2. Zebra Striping (Odd/Even Rows) using CSS :nth-child */
.data-table tbody tr:nth-child(odd) {
    /* Slightly transparent background for odd rows */
    background-color: rgba(255, 255, 255, 0.05); 
}

.data-table tbody tr:nth-child(even) {
    /* Darker transparent background for even rows */
    background-color: rgba(255, 255, 255, 0.12); 
}

/* Optional: Subtle Hover effect */
.data-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.18); 
}

/* --- Modal/Popup Styles for Login/Register --- */
.modal-backdrop {
    /* Full screen overlay */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark semi-transparent background */
    background-color: rgba(0, 0, 0, 0.85); /* Slightly darker overlay */
    /* Centering the modal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    /* DARK MODE for Modal Card */
    background-color: #2c3e50; /* Dark Blue/Gray Background */
    color: #060606; /* Light Text Color */
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #34495e; /* Subtle border */
    animation: modal-fade-in 0.3s ease-out;
}

#authTitle {
    color: #1dbf73; /* Use Fiverr's green/accent color for the title */
    margin-bottom: 20px;
    text-align: center;
}

/* Ensure inputs are visible */
.modal-content .input {
    background-color: #f8f8f8; /* White/Light background for input fields */
    color: #333; /* Dark text inside input fields */
    border: 1px solid #7f8c8d;
    padding: 12px;
    margin-bottom: 15px;
}

.modal-content .btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    /* Use a strong accent color for the main action button */
    background-color: #461dbf; 
    border-color: #461dbf;
    color: aliceblue;
    transition: background-color 0.2s;
}

.modal-content .btn-primary:hover {
    background-color: #5d35b8;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #ecf0f1; /* Light color for the 'X' */
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #1dbf73; /* Green hover for 'X' */
}

/* Enhancing Auth Links within the modal */
#showRegisterLink,
#showLoginLink {
    color: #1dbf73; /* Green accent color for links */
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    transition: color 0.2s;
}

#forgotPasswordLink,
#backFromForgot {
    color: #e74c3c; /* Red color for Forgot Password */
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
}

/* --- Full Page Spinner Overlay --- */
.full-page-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Semi-transparent background (dark overlay) */
    background-color: rgba(0, 0, 0, 0.7); 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top of everything */
}

/* --- Modern Loader (The spinner itself) --- */
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3; /* Light grey base */
    border-top: 5px solid #007bff; /* Blue spinning part */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spf{
  border: 3px solid #104835;
  display: inline-block;
  background-color: #13ace1;
  color: blue;

}
.orders-section {
        padding: 0 3rem 2rem 3rem;
    }