/*
Theme Name: PaintOrder Clean
Theme URI:  https://abir.framer.ai/
Author:     ABIR
Author URI: https://abir.framer.ai/
Description: Clean and minimal theme for PaintOrder Form. For personal use only – not for redistribution.
Version:    1.0
License:    Proprietary
License URI: https://abir.framer.ai/
Text Domain: paintorder-clean
*/

/* ─── Global ─── */
    * { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 20px; font-family: 'Poppins', sans-serif; background: #f5f7fa;
    }
    .container {
      max-width: 900px; margin: auto;
      background: #fff; border-radius: 15px;
      padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    h2, h3, label { color: #333; margin: 0; }
    h2 { margin-bottom: 20px; }
    h3 { margin-bottom: 15px; font-size: 1.2rem; }
    
    /* ─── Flex rows ─── */
    .form-row {
      display: flex; flex-wrap: wrap; gap: 20px;
    }
    .form-group {
      flex: 1 1 45%; display: flex; flex-direction: column;
    }
    label { margin-bottom: 5px; font-weight: 600; font-size: 0.95rem; }
    input, select, textarea {
      padding: 10px; font-size: 1rem;
      border: 1px solid #ccc; border-radius: 6px;
      font-family: inherit;
    }
    textarea { resize: vertical; }
    
    /* ─── Product block ─── */
    .product-row {
      display: flex; flex-wrap: wrap; gap: 20px;
      border: 1px solid #ddd; background: #fafbfd;
      border-radius: 8px; padding: 15px; margin-bottom: 20px;
    }
    .product-preview {
      display: flex; align-items: center; gap: 12px;
    }
    .product-preview img {
      width: 80px; height: 80px;
      object-fit: cover; border-radius: 5px;
    }
    .autocomplete-wrapper { position: relative; width: 100%; }
    .autocomplete-list {
      position: absolute; top: 100%; left: 0; right: 0;
      background: #fff; border: 1px solid #ccc; border-radius: 6px;
      max-height: 180px; overflow-y: auto; z-index: 100;
      display: none;
    }
    .autocomplete-item, .custom-dropdown-item, .sheen-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px; cursor: pointer;
    }
    .autocomplete-item img, .custom-dropdown-item img, .sheen-item img {
      width: 100px; height: 100px;
      object-fit: cover; border-radius: 4px;
      flex: 0 0 auto;
    }
    .autocomplete-item:hover, .custom-dropdown-item:hover, .sheen-item:hover {
      background: #f0f0f0;
    }
    
    /* ─── Order Info Section ─── */
    .order-info {
      margin-top: 30px;
      padding: 20px;
      background: #FFFFF5;
      border: 1px solid #d1d9e6;
      border-radius: 8px;
    }
    .order-info .form-row {
      gap: 15px;
    }
    .order-info .form-group {
      flex: 1 1 calc(50% - 15px);
    }
    .order-info .form-group.full {
      flex: 1 1 100%;
    }
    .order-info label {
      font-size: 0.9rem;
    }
    .order-info input, .order-info textarea {
      font-size: 0.95rem; padding: 8px;
    }

    /* ─── Tooltip for larger preview ─── */
    #tooltip {
      position: absolute; pointer-events: none;
      display: none; z-index: 1000;
      background: #fff; border: 1px solid #ccc;
      border-radius: 6px; padding: 6px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    #tooltip img {
      width: 150px; height: 150px; object-fit: cover;
    }

    /* ─── Buttons & Summary ─── */
    .buttons-inline {
      display: flex; flex-direction: column; gap: 10px; margin-top: 15px;
    }
    .btn {
      padding: 10px 20px; font-size: 1rem;
      border: none; border-radius: 6px; cursor: pointer;
    }
    .btn-green { background: #28a745; color: #fff; }
    .btn-red   { background: #dc3545; color: #fff; }
    .btn-blue  { background: #007bff; color: #fff; }
    .btn:hover { opacity: 0.9; }

    .summary {
      margin-top: 25px; padding: 15px;
      background: #eef1f7; border-radius: 8px;
    }
    .confirmation {
      margin-top: 15px; text-align: center;
      color: #28a745; font-weight: bold;
    }

    /* ─── Mobile Overrides ─── */
    @media (max-width: 600px) {
      html, body { padding: 10px; }
      .container { padding: 15px; }
      .form-row { gap: 10px; }
      input, select, textarea { font-size: 0.9rem; padding: 8px; }

      /* Order Info two across, note full */
      .order-info .form-row .form-group {
        flex: 1 1 calc(50% - 10px);
      }
      .order-info .form-row .form-group.full {
        flex: 1 1 100%;
      }

      /* Product block: only Litre/Qty/Strength share 33% */
      .product-row { gap: 8px; }
      .product-row > .form-group:nth-child(1),
      .product-row > .form-group:nth-child(2),
      .product-row > .form-group:nth-child(3),
      .product-row > .form-group:nth-child(7) {
        flex: 1 1 100%;
      }
      .product-row > .form-group:nth-child(4),
      .product-row > .form-group:nth-child(5),
      .product-row > .form-group:nth-child(6) {
        flex: 1 1 calc(33.33% - 6px);
      }
    }

    /* ─── Tighter Container ─── */
    .container { padding: 20px; }

    /* ─── Compact Product Block ─── */
    .product-row {
      padding: 10px; margin-bottom: 10px; gap: 10px; border-radius: 6px;
    }
    .product-row .form-group {
      flex: 1 1 calc(50% - 10px);
    }
    .product-row .form-group input,
    .product-row .form-group select {
      padding: 8px; font-size: 14px;
    }

    /* ─── Compact Order Info ─── */
    .order-info { padding: 15px; margin-top: 20px; }
    .order-info .form-row { gap: 10px; }
    .order-info .form-group { flex: 1 1 calc(50% - 10px); margin-bottom: 8px; }
    .order-info .form-group.full { flex: 1 1 100%; }
    .order-info input, .order-info textarea { padding: 8px; font-size: 14px; }

    /* ─── Tighter Buttons & Typography ─── */
    .buttons-inline { margin-top: 8px; gap: 8px; }
    .btn { padding: 8px 16px; font-size: 14px; border-radius: 6px; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.1rem; }
    label { font-size: 0.9rem; }

    @media (max-width: 600px) {
      .product-row { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-gap: 8px !important; padding: 10px !important; width: 100% !important; overflow: hidden; }
      .product-row > .form-group { box-sizing: border-box; width: 100% !important; margin: 0; }
      .product-row > .form-group:nth-child(1), .product-row > .form-group:nth-child(2), .product-row > .form-group:nth-child(7) { grid-column: 1 / -1 !important; }
      .product-row > .form-group:nth-child(3) { grid-column: 1 !important; }
      .product-row > .form-group:nth-child(4) { grid-column: 2 !important; }
      .product-row > .form-group:nth-child(5) { grid-column: 1 !important; }
      .product-row > .form-group:nth-child(6) { grid-column: 2 !important; }
      .product-row input, .product-row select { width: 100% !important; box-sizing: border-box; }

      .order-info .form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-gap: 8px !important; width: 100%; }
      .order-info .form-row > .form-group:nth-child(1) { grid-column: 1; }
      .order-info .form-row > .form-group:nth-child(2) { grid-column: 2; }
      .order-info .form-row > .form-group:nth-child(3) { grid-column: 1; }
      .order-info .form-row > .form-group:nth-child(4) { grid-column: 2; }
      .order-info .form-group.full { grid-column: 1 / -1 !important; }
      .order-info input, .order-info textarea { width: 100% !important; box-sizing: border-box; }
    }

    /* ─── GLOBAL CARDIFY ─── */
    .container { background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); padding: 32px; }
    h2, h3 { color: #1F2A37; font-weight: 600; }
    h2 { font-size: 1.75rem; margin-bottom: 16px; }
    h3 { font-size: 1.25rem; margin-bottom: 12px; }
    input, select, textarea { background: #F9FAFB; border: 1px solid #E3E8EF; border-radius: 8px; padding: 12px 14px; font-size: 1rem; color: #2E3A4B; transition: border-color 0.2s, background 0.2s; }
    input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: #3366FF; }
    .btn { border-radius: 8px; font-weight: 600; transition: background-color 0.2s, transform 0.1s; }
    .btn-green { background: #28A745; color: #fff; }
    .btn-blue { background: #3366FF; color: #fff; }
    .btn-red { background: #DC3545; color: #fff; }
    .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .product-row, .order-info { background: #FFFFFF; border: 1px solid #E3E8EF; border-radius: 12px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); margin-bottom: 24px; }
    .summary { background: #F3F6FC; border-radius: 12px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
    .confirmation { color: #28A745; font-size: 1rem; margin-top: 12px; }
    #tooltip { background: #fff; border: 1px solid #E3E8EF; border-radius: 8px; }
    @media (max-width: 600px) { .container { padding: 20px; } input, select, textarea { padding: 10px; } .btn { padding: 10px; } }
    @media screen and (max-width: 600px) { .order-info .form-row { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; width: 100% !important; } .order-info .form-row > .form-group { flex: none !important; margin: 0 !important; width: 100% !important; } .order-info .form-group.full { grid-column: 1 / -1 !important; } .order-info input, .order-info textarea { width: 100% !important; box-sizing: border-box; } }
    .product-row .form-group.full { flex: 1 1 100% !important; max-width: 100% !important; }
    .product-row .form-group.full.remove-wrapper { text-align: center !important; }
    .product-row .form-group.full.remove-wrapper .btn-red { display: inline-block !important; margin: 0 auto !important; }
    .product-row .form-group.full textarea { width: 100% !important; box-sizing: border-box; }
    @media (max-width: 600px) { .product-row .remove-wrapper { grid-column: 1 / -1 !important; display: flex !important; justify-content: center !important; } .product-row .remove-wrapper .btn-red { display: inline-block !important; margin: 0 !important; } }
    /* —── Confirmation Modal —── */
    .modal-overlay {
      display: none;                /* hidden by default */
      position: fixed;
      inset: 0;                     /* shorthand for top:0; left:0; right:0; bottom:0; */
      background: rgba(0,0,0,0.4);
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .modal-box {
      background: #fff;
      border-radius: 8px;
      padding: 20px;
      width: 90%;
      max-width: 320px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      text-align: center;
      /* ensure the box itself can receive clicks */
      pointer-events: auto;
    }
    @media (max-width: 600px) {
      /* Shrink the “Order Information” title on mobile */
      .order-info h3 {
        font-size: 1rem;       /* down from 1.25rem */
        text-align: center;
        margin-bottom: 12px;
      }

      /* Switch to a 2-column grid for the fields */
      .order-info .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      /* Make each field fill its cell */
      .order-info .form-group {
        width: 100% !important;
        max-width: 100% !important;
      }

      /* Shrink labels slightly */
      .order-info label {
        font-size: 0.8rem !important;
      }

      /* Ensure inputs/textarea span full width */
      .order-info input,
      .order-info textarea {
        width: 100% !important;
        box-sizing: border-box;
      }
    }

    /* ─── Order Summary Styling ─── */
    .summary {
      background: #fff;
      border: 1px solid #E3E8EF;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    }

    .summary h3 {
      margin-top: 0;
      margin-bottom: 16px;
      font-size: 1.25rem;
      color: #1F2A37;
    }

    .summary-details {
      display: grid;
      grid-template-columns: max-content 1fr;
      row-gap: 8px;
      column-gap: 16px;
      margin-bottom: 16px;
    }

    .summary-details dt {
      font-weight: 600;
      color: #2E3A4B;
    }

    .summary-details dd {
      margin: 0;
      color: #4A5568;
    }
    @media (max-width: 600px) {
      /* Keep two columns but make them tighter */
      .summary-details {
        grid-template-columns: max-content auto !important;
        column-gap: 8px !important;
        row-gap: 4px !important;
      }

      /* Slightly smaller labels & values */
      .summary-details dt,
      .summary-details dd {
        font-size: 0.85rem !important;
      }

      /* Prevent labels from wrapping too early */
      .summary-details dt {
        white-space: nowrap;
      }
    }
    /* ─── Review Panel Cards ─── */
    .review-header {
      margin-bottom: 16px;
      line-height: 1.4;
    }

    .review-items {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .review-item {
      display: flex;
      gap: 12px;
      padding: 12px;
      background: #F9FAFB;
      border: 1px solid #E3E8EF;
      border-radius: 8px;
      align-items: flex-start;
    }

    .review-item-img {
      width: 64px;
      height: 64px;
      object-fit: cover;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .review-item-info h4 {
      margin: 0 0 4px;
      font-size: 1rem;
      color: #1F2A37;
    }

    .review-item-info p {
      margin: 4px 0;
      font-size: 0.9rem;
      color: #4A5568;
    }

    .review-item-note {
      margin-top: 8px;
      font-style: italic;
      color: #2E3A4B;
    }

    /* ─── Make sure text wraps nicely on mobile ─── */
    @media (max-width: 600px) {
      .review-item {
        flex-direction: column;
        align-items: stretch;
      }
      .review-item-img {
        margin: 0 auto 8px;
      }
      .review-item-info p,
      .review-item-info h4 {
        text-align: center;
      }
    }
    /* ─── Tighter spacing in the review header ─── */
    .review-header p {
      margin: 2px 0;        /* shrink gaps between lines */
      line-height: 1.2;     /* tighten up line height */
      font-size: 0.9rem;    /* optional: scale text a touch smaller */
    }

    /* ─── 25% bigger review thumbnails ─── */
    .review-item-img {
      width: 80px;    /* was 64px */
      height: 80px;   /* was 64px */
    }
    /* ─── Modern “Litre” dropdown ─── */
    .custom-select {
      /* 1) Hide the native arrow */
      -webkit-appearance: none;
      -moz-appearance:    none;
      appearance:         none;

      /* 2) Base styling (match your other inputs) */
      background-color: #F9FAFB;
      border: 1px solid   #E3E8EF;
      border-radius: 8px;
      padding: 12px 16px;
      padding-right: 40px;       /* room for our custom arrow */
      font-size: 1rem;
      color: #2E3A4B;
      width: 100%;
      box-sizing: border-box;

      /* 3) Insert a tiny SVG as the arrow */
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20viewBox%3D'0%200%2010%206'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1%201l4%204%204-4'%20stroke%3D'%234A5568'%20stroke-width%3D'2'%20fill%3D'none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 10px 6px;
    }

    /* 4) Focus state so it still gets that blue outline */
    .custom-select:focus {
      outline: none;
      border-color: #3366FF;
    }

    /* 5) Disabled look (optional) */
    .custom-select:disabled {
      background-color: #ECEFF4;
      color: #A0AEC0;
      cursor: not-allowed;
    }
    .lock-wrapper { position: relative; }
    .input-blocker {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: transparent;
      cursor: not-allowed;
      border-radius: 8px;
      display: none;
    }
    #alertModal .modal-box {
      max-width: 260px !important;
      padding: 18px 18px !important;
      border-radius: 14px !important;   /* just regular rounded, NOT pill */
      box-shadow: 0 8px 32px rgba(50,60,80,0.12);
      border: none !important;
    }

    #alertOk {
      padding: 9px 0 !important;
      min-width: 96px !important;
      border-radius: 999px !important;    /* pill shape */
      font-size: 0.99rem !important;
      background: #3366FF !important;
      color: #fff !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
      font-weight: 600;
      transition: background 0.2s, filter 0.14s;
      cursor: pointer;
    }
    #alertOk:hover, #alertOk:focus {
      background: #2149b5 !important;
      filter: brightness(1.05);
    }
    @media (max-width: 600px) {
      h2 {
        text-align: center !important;
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 18px !important;
        margin-top: 2px !important;
        letter-spacing: 0.01em !important;
        font-weight: 800 !important;   /* Super bold */
        word-break: break-word;
        color: #232b3d !important;     /* Slightly deeper dark */
        text-shadow: 0 1px 0 #f5f7fa, 0 1.5px 2.5px rgba(36,54,84,0.04);
      }
    }
    /* ─── Custom Dropdown + Autocomplete Styles ─── */
    .custom-dropdown {
      position: relative;
      width: 100%;
    }
    .custom-dropdown-input {
      width: 100%;
      padding: 10px 12px;
      background: #F9FAFB;
      border: 1px solid #E3E8EF;
      border-radius: 8px;
      font-size: 1rem;
      color: #2E3A4B;
    }
    .custom-dropdown-list, .sheen-list {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 4px;
      background: #FFFFFF;
      border: 1px solid #E3E8EF;
      border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.04);
      max-height: min(320px, 70vh);
      overflow-y: auto;
      z-index: 500;
    }

    /* ─── Sheen dropdown styling ─── */
    .sheen-input {
      flex: 1;
      padding-left: 36px; /* room for the 24px icon + a small gap */
    }
    .sheen-preview {
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 4px;
      object-fit: cover;
      width: 24px;
      height: 24px;
    }
    /* FORCE‐HIDE the sheen icon */
    .sheen-preview {
      display: none !important;
    }
    select.custom-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #ffffff;
      border: 1px solid #ccc;
      padding: 14px 16px;
      padding-right: 44px;
      font-size: 1rem;
      border-radius: 10px;
      color: #2e3a4b;
      width: 100%;
      background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2010%206'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M1%201l4%204%204-4'%20stroke='%234A5568'%20stroke-width='2'%20fill='none'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 12px 6px;
      box-sizing: border-box;
    }
    select.custom-select:focus {
      border-color: #3366ff;
      outline: none;
    }
    /* ─── Modernize “Litre” & “Strength” selects ─── */
.litre-input,
.strength-input {
  /* match the rest of your cardified inputs */
  background: #F9FAFB;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  color: #2E3A4B;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2010%206'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M1%201l4%204%204-4'%20stroke='%234A5568'%20stroke-width='2'%20fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 6px;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s;
}
.litre-input:focus,
.strength-input:focus {
  outline: none;
  border-color: #3366FF;
  background: #FFFFFF;
}

/* ─── Force full‐width on mobile and add spacing ─── */
@media (max-width: 600px) {
  .litre-input,
  .strength-input {
    width: 100% !important;
    padding: 14px 16px;       /* slightly larger tap area */
    font-size: 1rem;
  }
  
  /* Ensure their parent .form-group takes full width */
  .product-row .litre-input,
  .product-row .strength-input {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 600px) {
  /* ─── Modernize Litre Dropdown ─── */
  .litre-input {
    /* keep it full‐width for easy tapping */
    width: 100% !important;
    padding: 14px 16px;               /* comfy touch area */
    font-size: 1rem;                  /* legible text */
    background: #FFFFFF;              /* bright white background */
    border: 1px solid #E3E8EF;        /* soft border */
    border-radius: 10px;              /* rounded corners */
    appearance: none;                 /* hide native arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    /* reuse your SVG arrow but slightly reposition it */
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2010%206'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M1%201l4%204%204-4'%20stroke='%234A5568'%20stroke-width='2'%20fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 6px;
    transition: border-color 0.2s, background 0.2s;
  }
  .litre-input:focus {
    outline: none;
    border-color: #6366F1;  /* a happier blue on focus */
    background: #FFFFFF;
  }

  /* ─── Modernize Quantity Input (numeric) ─── */
  .qty-input {
    /* match the styling of the select for consistency */
    width: 100% !important;
    padding: 14px 16px;
    font-size: 1rem;
    background: #FFFFFF;
    border: 1px solid #E3E8EF;
    border-radius: 10px;
    /* remove default number‐input spinners on webkit/blink */
    -moz-appearance: textfield;
    appearance: none;
    /* if you want to hide the native spinner in Chrome/Safari:
       use this wrapper */
  }
  /* Hide iOS/Android number input arrows (optional) */
  .qty-input::-webkit-outer-spin-button,
  .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .qty-input:focus {
    outline: none;
    border-color: #6366F1;
    background: #FFFFFF;
  }
}

  /* ─── New code ─── */

@media (max-width: 600px) {
  .order-info .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  /* 2nd row: delivery radios + address */
  .order-info .form-group:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* The radio buttons only */
  .order-info .form-group:nth-child(3) > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    height: 38px; /* or match input height */
  }
  /* The address field */
  .order-info .form-group:nth-child(3) > input[type="text"] {
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* Account name column, perfectly align label with radios */
  .order-info .form-group:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .order-info .form-group:nth-child(4) label {
    height: 38px; /* exact same as radio row */
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .order-info .form-group:nth-child(4) input[type="text"] {
    width: 100% !important;
    margin-top: 0 !important;
  }
}