/*! OTP Layout Styles - Custom layout utilities for Order Tracking Page */

/* Display utilities */
.otp-table { display: table; }
.otp-table-cell { display: table-cell; }
.otp-table-row { display: table-row; }
.otp-flex { display: flex; }
.otp-inline-flex { display: inline-flex; }
.otp-hidden { display: none; }
.otp-dn { display: none; }
.otp-di { display: inline; }
.otp-db { display: block; }
.otp-dib { display: inline-block; }
.otp-dit { display: inline-table; }

/* Flexbox utilities */
.otp-flex-column { flex-direction: column; }
.otp-items-center { align-items: center; }
.otp-justify-between { justify-content: space-between; }
.otp-justify-center { justify-content: center; }

/* Width utilities */
/* Width Scale (rem based) */
.otp-w1 { width: 1rem; }
.otp-w2 { width: 2rem; }
.otp-w3 { width: 4rem; }
.otp-w4 { width: 8rem; }
.otp-w5 { width: 16rem; }

/* Width Percentages */
.otp-w-full { width: 100%; }
.otp-w-100 { width: 100%; }
.otp-w-10 { width: 10%; }
.otp-w-20 { width: 20%; }
.otp-w-25 { width: 25%; }
.otp-w-30 { width: 30%; }
.otp-w-33 { width: 33%; }
.otp-w-34 { width: 34%; }
.otp-w-40 { width: 40%; }
.otp-w-50 { width: 50%; }
.otp-w-60 { width: 60%; }
.otp-w-70 { width: 70%; }
.otp-w-75 { width: 75%; }
.otp-w-80 { width: 80%; }
.otp-w-90 { width: 90%; }
.otp-w-third { width: 33.33333%; }
.otp-w-two-thirds { width: 66.66667%; }
.otp-w-auto { width: auto; }

/* Responsive widths - medium screens */
@media screen and (min-width: 30em) and (max-width: 60em) {
  .otp-w-40-m { width: 40%; }
  .otp-w-50-m { width: 50%; }
}

/* Responsive widths - large screens */
@media screen and (min-width: 60em) {
  .otp-w-30-l { width: 30%; }
  .otp-w-60-l { width: 60%; }
}

/* Padding utilities */
.otp-pa0 { padding: 0; }
.otp-pa1 { padding: 0.25rem; }
.otp-pa2 { padding: 0.5rem; }
.otp-pa3 { padding: 1rem; }
.otp-pa4 { padding: 2rem; }
.otp-pa5 { padding: 4rem; }
.otp-pa6 { padding: 8rem; }
.otp-pa7 { padding: 16rem; }

.otp-pt0 { padding-top: 0; }
.otp-pt1 { padding-top: 0.25rem; }
.otp-pt2 { padding-top: 0.5rem; }
.otp-pt3 { padding-top: 1rem; }
.otp-pt4 { padding-top: 2rem; }
.otp-pt5 { padding-top: 4rem; }
.otp-pt6 { padding-top: 8rem; }
.otp-pt7 { padding-top: 16rem; }

.otp-pr0 { padding-right: 0; }
.otp-pr1 { padding-right: 0.25rem; }
.otp-pr2 { padding-right: 0.5rem; }
.otp-pr3 { padding-right: 1rem; }
.otp-pr4 { padding-right: 2rem; }
.otp-pr5 { padding-right: 4rem; }
.otp-pr6 { padding-right: 8rem; }
.otp-pr7 { padding-right: 16rem; }

.otp-pb0 { padding-bottom: 0; }
.otp-pb1 { padding-bottom: 0.25rem; }
.otp-pb2 { padding-bottom: 0.5rem; }
.otp-pb3 { padding-bottom: 1rem; }
.otp-pb4 { padding-bottom: 2rem; }
.otp-pb5 { padding-bottom: 4rem; }
.otp-pb6 { padding-bottom: 8rem; }
.otp-pb7 { padding-bottom: 16rem; }

.otp-pl0 { padding-left: 0; }
.otp-pl0 { padding-left: 0; }
.otp-pl1 { padding-left: 0.25rem; }
.otp-pl2 { padding-left: 0.5rem; }
.otp-pl3 { padding-left: 1rem; }
.otp-pl4 { padding-left: 2rem; }
.otp-pl5 { padding-left: 4rem; }
.otp-pl6 { padding-left: 8rem; }
.otp-pl7 { padding-left: 16rem; }

.otp-pv0 { padding-top: 0; padding-bottom: 0; }
.otp-pv1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.otp-pv2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.otp-pv3 { padding-top: 1rem; padding-bottom: 1rem; }
.otp-pv4 { padding-top: 2rem; padding-bottom: 2rem; }
.otp-pv5 { padding-top: 4rem; padding-bottom: 4rem; }
.otp-pv6 { padding-top: 8rem; padding-bottom: 8rem; }
.otp-pv7 { padding-top: 16rem; padding-bottom: 16rem; }

.otp-ph0 { padding-left: 0; padding-right: 0; }
.otp-ph1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.otp-ph2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.otp-ph3 { padding-left: 1rem; padding-right: 1rem; }
.otp-ph4 { padding-left: 2rem; padding-right: 2rem; }
.otp-ph5 { padding-left: 4rem; padding-right: 4rem; }
.otp-ph6 { padding-left: 8rem; padding-right: 8rem; }
.otp-ph7 { padding-left: 16rem; padding-right: 16rem; }

/* Margin utilities */
.otp-ma0 { margin: 0; }
.otp-ma1 { margin: 0.25rem; }
.otp-ma2 { margin: 0.5rem; }
.otp-ma3 { margin: 1rem; }
.otp-ma4 { margin: 2rem; }
.otp-ma5 { margin: 4rem; }
.otp-ma6 { margin: 8rem; }
.otp-ma7 { margin: 16rem; }

.otp-mt0 { margin-top: 0; }
.otp-mt1 { margin-top: 0.25rem; }
.otp-mt2 { margin-top: 0.5rem; }
.otp-mt3 { margin-top: 1rem; }
.otp-mt4 { margin-top: 2rem; }
.otp-mt5 { margin-top: 4rem; }
.otp-mt6 { margin-top: 8rem; }
.otp-mt7 { margin-top: 16rem; }

.otp-mr0 { margin-right: 0; }
.otp-mr1 { margin-right: 0.25rem; }
.otp-mr2 { margin-right: 0.5rem; }
.otp-mr3 { margin-right: 1rem; }
.otp-mr4 { margin-right: 2rem; }
.otp-mr5 { margin-right: 4rem; }
.otp-mr6 { margin-right: 8rem; }
.otp-mr7 { margin-right: 16rem; }

.otp-mb0 { margin-bottom: 0; }
.otp-mb1 { margin-bottom: 0.25rem; }
.otp-mb2 { margin-bottom: 0.5rem; }
.otp-mb3 { margin-bottom: 1rem; }
.otp-mb4 { margin-bottom: 2rem; }
.otp-mb5 { margin-bottom: 4rem; }
.otp-mb6 { margin-bottom: 8rem; }
.otp-mb7 { margin-bottom: 16rem; }

.otp-ml0 { margin-left: 0; }
.otp-ml1 { margin-left: 0.25rem; }
.otp-ml2 { margin-left: 0.5rem; }
.otp-ml3 { margin-left: 1rem; }
.otp-ml4 { margin-left: 2rem; }
.otp-ml5 { margin-left: 4rem; }
.otp-ml6 { margin-left: 8rem; }
.otp-ml7 { margin-left: 16rem; }

.otp-mv0 { margin-top: 0; margin-bottom: 0; }
.otp-mv1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.otp-mv2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.otp-mv3 { margin-top: 1rem; margin-bottom: 1rem; }
.otp-mv4 { margin-top: 2rem; margin-bottom: 2rem; }
.otp-mv5 { margin-top: 4rem; margin-bottom: 4rem; }
.otp-mv6 { margin-top: 8rem; margin-bottom: 8rem; }
.otp-mv7 { margin-top: 16rem; margin-bottom: 16rem; }

.otp-mh0 { margin-left: 0; margin-right: 0; }
.otp-mh1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.otp-mh2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.otp-mh3 { margin-left: 1rem; margin-right: 1rem; }
.otp-mh4 { margin-left: 2rem; margin-right: 2rem; }
.otp-mh5 { margin-left: 4rem; margin-right: 4rem; }
.otp-mh6 { margin-left: 8rem; margin-right: 8rem; }
.otp-mh7 { margin-left: 16rem; margin-right: 16rem; }

/* Max width utilities */
.otp-mw1 { max-width: 1rem; }
.otp-mw2 { max-width: 2rem; }
.otp-mw3 { max-width: 4rem; }
.otp-mw4 { max-width: 8rem; }
.otp-mw5 { max-width: 16rem; }
.otp-mw6 { max-width: 32rem; }
.otp-mw7 { max-width: 48rem; }
.otp-mw8 { max-width: 64rem; }
.otp-mw9 { max-width: 96rem; }
.otp-mw-100 { max-width: 100%; }
.otp-mw-none { max-width: none; }

/* Text alignment */
.otp-text-left { text-align: left; }
.otp-text-right { text-align: right; }
.otp-text-center { text-align: center; }
.otp-text-justify { text-align: justify; }
.otp-tl { text-align: left; }
.otp-tr { text-align: right; }
.otp-tc { text-align: center; }
.otp-tj { text-align: justify; }
.otp-align-center { text-align: center; }

/* Centering */
.otp-center { margin-left: auto; margin-right: auto; }

/* Vertical alignment */
.otp-v-middle { vertical-align: middle; }
.otp-v-top { vertical-align: top; }
.otp-v-bottom { vertical-align: bottom; }
.otp-v-base { vertical-align: baseline; }

/* Overflow */
.otp-overflow-visible { overflow: visible; }
.otp-overflow-hidden { overflow: hidden; }
.otp-overflow-scroll { overflow: scroll; }
.otp-overflow-auto { overflow: auto; }
.otp-overflow-x-hidden { overflow-x: hidden; }
.otp-overflow-y-hidden { overflow-y: hidden; }
.otp-overflow-y-scroll { overflow-y: scroll; }

/* Shadow */
.otp-shadow-1 { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2); }
.otp-shadow-2 { box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2); }
.otp-shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
.otp-shadow-4 { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2); }
.otp-shadow-5 { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2); }

/* Font size - Type Scale */
.otp-f1 { font-size: 3rem; }
.otp-f2 { font-size: 2.25rem; }
.otp-f3 { font-size: 1.5rem; }
.otp-f4 { font-size: 1.25rem; }
.otp-f5 { font-size: 1rem; }
.otp-f6 { font-size: 0.875rem; }
.otp-f7 { font-size: 0.75rem; }

/* Float */
.otp-fl { float: left; }
.otp-fr { float: right; }

/* List */
.otp-list { list-style-type: none; }

/* Display - extended */
.otp-dib { display: inline-block; }

/* Line height */
.otp-lh-solid { line-height: 1; }
.otp-lh-title { line-height: 1.25; }
.otp-lh-copy { line-height: 1.5; }

/* White space */
.otp-ws-normal { white-space: normal; }
.otp-nowrap { white-space: nowrap; }
.otp-pre { white-space: pre; }

/* Measure (max-width for readable text) */
.otp-measure { max-width: 30em; }
.otp-measure-wide { max-width: 34em; }
.otp-measure-narrow { max-width: 20em; }

/* Truncate text */
.otp-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Height - extended */
.otp-vh-100 { height: 100vh; }

/* Border */
/* Border sides */
.otp-ba { border-style: solid; border-width: 1px; }
.otp-bt { border-top-style: solid; border-top-width: 1px; }
.otp-br { border-right-style: solid; border-right-width: 1px; }
.otp-bb { border-bottom-style: solid; border-bottom-width: 1px; }
.otp-bl { border-left-style: solid; border-left-width: 1px; }
.otp-bn { border-style: none; border-width: 0; }

/* Border radius */
.otp-br0 { border-radius: 0; }
.otp-br1 { border-radius: .125rem; }
.otp-br2 { border-radius: .25rem; }
.otp-br3 { border-radius: .5rem; }
.otp-br4 { border-radius: 1rem; }
.otp-br-100 { border-radius: 100%; }
.otp-br-pill { border-radius: 9999px; }

/* Border colors */
.otp-b--black { border-color: #000; }
.otp-b--near-black { border-color: #111; }
.otp-b--dark-gray { border-color: #333; }
.otp-b--mid-gray { border-color: #555; }
.otp-b--gray { border-color: #777; }
.otp-b--silver { border-color: #999; }
.otp-b--light-silver { border-color: #aaa; }
.otp-b--moon-gray { border-color: #ccc; }
.otp-b--light-gray { border-color: #eee; }
.otp-b--near-white { border-color: #f4f4f4; }
.otp-b--white { border-color: #fff; }
.otp-b--black-10 { border-color: rgba(0, 0, 0, 0.1); }
.otp-b--black-20 { border-color: rgba(0, 0, 0, 0.2); }
.otp-b--black-30 { border-color: rgba(0, 0, 0, 0.3); }
.otp-b--black-40 { border-color: rgba(0, 0, 0, 0.4); }
.otp-b--black-50 { border-color: rgba(0, 0, 0, 0.5); }
.otp-b--black-3 { border-color: rgba(0, 0, 0, 0.03); }
.otp-b--dark-green { border-color: #137752; }
.otp-b--transparent { border-color: transparent; }

/* Border width */
.otp-bw0 { border-width: 0; }
.otp-bw1 { border-width: .125rem; }
.otp-bw2 { border-width: .25rem; }
.otp-bw3 { border-width: .5rem; }
.otp-bw4 { border-width: 1rem; }
.otp-bw5 { border-width: 2rem; }

/* Border styles */
.otp-b--dotted { border-style: dotted; }
.otp-b--dashed { border-style: dashed; }
.otp-b--solid { border-style: solid; }
.otp-b--none { border-style: none; }

/* Height utilities */
/* Height Scale */
.otp-h1 { height: 1rem; }
.otp-h2 { height: 2rem; }
.otp-h3 { height: 4rem; }
.otp-h4 { height: 8rem; }
.otp-h5 { height: 16rem; }

/* Height Percentages */
.otp-h-25 { height: 25%; }
.otp-h-50 { height: 50%; }
.otp-h-75 { height: 75%; }
.otp-h-100 { height: 100%; }
.otp-h-auto { height: auto; }

/* Viewport Height */
.otp-vh-25 { height: 25vh; }
.otp-vh-50 { height: 50vh; }
.otp-vh-75 { height: 75vh; }
.otp-vh-100 { height: 100vh; }
.otp-min-vh-100 { min-height: 100vh; }
.otp-min-h-100 { min-height: 100%; }

/* Font styles */
.otp-i { font-style: italic; }
.otp-fs-normal { font-style: normal; }

/* Z-index */
.otp-z-0 { z-index: 0; }
.otp-z-1 { z-index: 1; }
.otp-z-2 { z-index: 2; }
.otp-z-3 { z-index: 3; }
.otp-z-4 { z-index: 4; }
.otp-z-5 { z-index: 5; }
.otp-z-999 { z-index: 999; }
.otp-z-9999 { z-index: 9999; }
.otp-z-max { z-index: 2147483647; }

/* Small caps and indent */
.otp-small-caps { font-variant: small-caps; }
.otp-indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }

/* Positioning */
.otp-static { position: static; }
.otp-relative { position: relative; }
.otp-absolute { position: absolute; }
.otp-fixed { position: fixed; }

/* Opacity */
.otp-o-100 { opacity: 1; }
.otp-o-90 { opacity: .9; }
.otp-o-80 { opacity: .8; }
.otp-o-70 { opacity: .7; }
.otp-o-60 { opacity: .6; }
.otp-o-50 { opacity: .5; }
.otp-o-40 { opacity: .4; }
.otp-o-30 { opacity: .3; }
.otp-o-20 { opacity: .2; }
.otp-o-10 { opacity: .1; }
.otp-o-05 { opacity: .05; }
.otp-o-0 { opacity: 0; }

/* Text decoration */
.otp-strike { text-decoration: line-through; }
.otp-underline { text-decoration: underline; }
.otp-no-underline { text-decoration: none; }

/* Clear fix */
.otp-cf:before,
.otp-cf:after { content: " "; display: table; }
.otp-cf:after { clear: both; }
.otp-cl { clear: left; }
.otp-cr { clear: right; }
.otp-cb { clear: both; }
.otp-cn { clear: none; }

/* Transitions and animations */
.otp-grow { transition: transform .2s; }
.otp-grow:hover,
.otp-grow:focus { transform: scale(1.05); }

/* Typography */
.otp-b { font-weight: bold; }

/* Links */
.otp-link { text-decoration: none; }
.otp-dim { opacity: 1; transition: opacity .15s ease-in; }
.otp-dim:hover,
.otp-dim:focus { opacity: .5; transition: opacity .15s ease-in; }

/* Colors - Background */
.otp-bg-light-gray { background-color: #eee; }
.otp-bg-light-silver { background-color: #aaa; }
.otp-bg-mid-gray { background-color: #555; }
.otp-bg-dark-green { background-color: #137752; }
.otp-bg-washed-green { background-color: #e8fdf5; }
.otp-bg-white { background-color: #fff; }
.otp-bg-black { background-color: #000; }
.otp-bg-transparent { background-color: transparent; }

/* Colors - Text */
.otp-white { color: #fff; }
.otp-black { color: #000; }
.otp-black-80 { color: rgba(0, 0, 0, 0.8); }
.otp-gray { color: #777; }
.otp-silver { color: #999; }
.otp-dark-green { color: #137752; }
.otp-washed-green { color: #e8fdf5; }
.otp-blue { color: #357edd; }

/* Table */
.otp-collapse { border-collapse: collapse; }

/* Sans serif font */
.otp-sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; }

/* Additional utility classes */
.otp-f1 { font-size: 3rem; }
.otp-f4 { font-size: 1.25rem; }
.otp-f5 { font-size: 1rem; }

.otp-fw1 { font-weight: 100; }
.otp-fw2 { font-weight: 200; }
.otp-fw6 { font-weight: 600; }
.otp-fw7 { font-weight: 700; }

.otp-lh-title { line-height: 1.25; }

/* Text transform */
.otp-ttu { text-transform: uppercase; }
.otp-ttl { text-transform: lowercase; }
.otp-ttc { text-transform: capitalize; }
.otp-ttn { text-transform: none; }

/* Letter spacing */
.otp-tracked { letter-spacing: 0.1em; }
.otp-tracked-tight { letter-spacing: -0.05em; }
.otp-tracked-mega { letter-spacing: 0.25em; }

/* Border radius utilities */
.otp-br-pill { border-radius: 9999px; }

/* Link utilities */
.otp-no-underline { text-decoration: none; }

/* Font weight - extended */
.otp-fw4 { font-weight: 400; }

/* Responsive utilities */
@media screen and (min-width: 30em) {
  .otp-f2-ns { font-size: 2.25rem; }
  .otp-f3-ns { font-size: 1.5rem; }
  .otp-ph5-ns { padding-left: 4rem; padding-right: 4rem; }
  .otp-fw7-ns { font-weight: 700; }
  .otp-ph4-ns { padding-left: 2rem; padding-right: 2rem; }
  .otp-pr4-ns { padding-right: 2rem; }
  .otp-w-20-ns { width: 20%; }
  .otp-w-30-ns { width: 30%; }
  .otp-w-50-ns { width: 50%; }
  .otp-w-80-ns { width: 80%; }
}